Skip to content

Commit a074158

Browse files
yjchun626yjchun626
authored
[Playground] Component - list of deployment models (UI only) #172 (#260)
1 parent 7a2c3b8 commit a074158

File tree

5 files changed

+209
-3
lines changed

5 files changed

+209
-3
lines changed

‎src/AzureOpenAIProxy.PlaygroundApp/Components/Pages/Tests.razor‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,22 @@
55
<DebugTargetComponent Id="debug-target" OnValueChanged="SetInput" />
66
<DebugButtonComponent Id="debug-button" Input="@currentValue" />
77

8+
<DeploymentModelListComponent Id="deployment-model-list" OnUserOptionSelected="HandleSelectedModelValue" @rendermode="InteractiveServer" />
9+
<DebugButtonComponent Id="debug-button-selected-model" Input="@selectedModelValue" />
10+
811
@code {
912
private object? currentValue;
13+
private string? selectedModelValue = "";
1014

1115
private async Task SetInput(int newValue)
1216
{
1317
currentValue = newValue;
1418
await Task.CompletedTask;
1519
}
16-
}
20+
21+
private async Task HandleSelectedModelValue(string val)
22+
{
23+
selectedModelValue = val;
24+
await Task.CompletedTask;
25+
}
26+
}

‎src/AzureOpenAIProxy.PlaygroundApp/Components/UI/DeploymentModelListComponent.razor‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
<FluentLayout Id="@Id" Style="margin: 10px;">
2+
<div style="display: flex; align-items: center; margin-bottom: 5px;">
3+
<label id="deployment-model-label" for="deployment-model-list-options" style="margin-right: 5px;">Deployment</label>
4+
<span style="color: red;">*</span>
5+
</div>
6+
7+
<FluentSelect Items=@deploymentModelOptions Id="deployment-model-list-options" name="deployment-models"
8+
TOption="Option<string>" Height="300px"
9+
OptionText="@(e => e.Text?.ToString())"
10+
OptionValue="@(e => e.Value?.ToString())"
11+
OptionSelected="@(e => e.Selected)"
12+
@bind-SelectedOption="@selectedOption"
13+
@onclick="OnValueChanged"
14+
aria-labelledby="deployment-model-label">
15+
</FluentSelect>
16+
</FluentLayout>
17+
18+
@code {
19+
[Parameter]
20+
public string? Id { get; set; }
21+
private Option<string>? selectedOption { get; set; } = new();
22+
23+
[Parameter]
24+
public EventCallback<string> OnUserOptionSelected { get; set; }
25+
26+
private async Task OnValueChanged()
27+
{
28+
string? selectedValue = selectedOption?.Value?.ToString();
29+
await OnUserOptionSelected.InvokeAsync(selectedValue);
30+
}
31+
32+
static List<Option<string>> deploymentModelOptions = new()
33+
{
34+
new Option<string> { Value = "AL", Text = "Alabama" },
35+
new Option<string> { Value = "AK", Text = "Alaska" },
36+
new Option<string> { Value = "AZ", Text = "Arizona" },
37+
new Option<string> { Value = "AR", Text = "Arkansas" },
38+
new Option<string> { Value = "CA", Text = "California" },
39+
new Option<string> { Value = "CO", Text = "Colorado" },
40+
new Option<string> { Value = "CT", Text = "Connecticut" },
41+
new Option<string> { Value = "DE", Text = "Delaware" },
42+
new Option<string> { Value = "FL", Text = "Florida" },
43+
new Option<string> { Value = "GA", Text = "Georgia" },
44+
new Option<string> { Value = "HI", Text = "Hawaii" },
45+
new Option<string> { Value = "ID", Text = "Idaho" },
46+
new Option<string> { Value = "IL", Text = "Illinois" },
47+
new Option<string> { Value = "IN", Text = "Indiana" },
48+
new Option<string> { Value = "IA", Text = "Iowa" },
49+
new Option<string> { Value = "KS", Text = "Kansas" },
50+
new Option<string> { Value = "KY", Text = "Kentucky" },
51+
new Option<string> { Value = "LA", Text = "Louisiana" },
52+
new Option<string> { Value = "ME", Text = "Maine" },
53+
new Option<string> { Value = "MD", Text = "Maryland" },
54+
new Option<string> { Value = "MA", Text = "Massachussets" },
55+
new Option<string> { Value = "MI", Text = "Michigain" },
56+
new Option<string> { Value = "MN", Text = "Minnesota" },
57+
new Option<string> { Value = "MS", Text = "Mississippi" },
58+
new Option<string> { Value = "MO", Text = "Missouri" },
59+
new Option<string> { Value = "MT", Text = "Montana" },
60+
new Option<string> { Value = "NE", Text = "Nebraska" },
61+
new Option<string> { Value = "NV", Text = "Nevada" },
62+
new Option<string> { Value = "NH", Text = "New Hampshire" },
63+
new Option<string> { Value = "NJ", Text = "New Jersey" },
64+
new Option<string> { Value = "NM", Text = "New Mexico" },
65+
new Option<string> { Value = "NY", Text = "New York" },
66+
new Option<string> { Value = "NC", Text = "North Carolina" },
67+
new Option<string> { Value = "ND", Text = "North Dakota" },
68+
new Option<string> { Value = "OH", Text = "Ohio" },
69+
new Option<string> { Value = "OK", Text = "Oklahoma" },
70+
new Option<string> { Value = "OR", Text = "Oregon" },
71+
new Option<string> { Value = "PA", Text = "Pennsylvania" }
72+
};
73+
}

‎test/AzureOpenAIProxy.PlaygroundApp.Tests/AzureOpenAIProxy.PlaygroundApp.Tests.csproj‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,9 +23,9 @@
2323
<PackageReference Include="NUnit3TestAdapter" Version="$(NUnitVersion)" />
2424
</ItemGroup>
2525

26-
<!--<ItemGroup>
26+
<!-- <ItemGroup>
2727
<ProjectReference Include="..\..\src\AzureOpenAIProxy.PlaygroundApp\AzureOpenAIProxy.PlaygroundApp.csproj" />
28-
</ItemGroup>-->
28+
</ItemGroup> -->
2929

3030
<ItemGroup>
3131
<Using Include="NUnit.Framework" />

‎test/AzureOpenAIProxy.PlaygroundApp.Tests/Pages/TestsPageTests.cs‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,23 @@ public async Task Setup()
2121
await Page.WaitForLoadStateAsync(LoadState.NetworkIdle);
2222
}
2323

24+
[Test]
25+
[TestCase("debug-target")]
26+
[TestCase("debug-button")]
27+
[TestCase("deployment-model-list")]
28+
[TestCase("debug-button-selected-model")]
29+
public async Task Given_ComponentID_When_Page_Loaded_Then_Component_Should_Be_Visible(string id)
30+
{
31+
// Arrange
32+
var expectedId = id;
33+
34+
// Act
35+
var component = Page.Locator($"#{expectedId}");
36+
37+
// Assert
38+
await Expect(component).ToBeVisibleAsync();
39+
}
40+
2441
[Test]
2542
public async Task Given_No_Input_On_DebugTarget_When_DebugButton_Clicked_Then_Toast_Should_Show_NullMessage()
2643
{

‎test/AzureOpenAIProxy.PlaygroundApp.Tests/UI/DeploymentModelListComponentTests.cs‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
using Microsoft.Playwright.NUnit;
2+
using Microsoft.Playwright;
3+
using FluentAssertions;
4+
5+
namespace AzureOpenAIProxy.PlaygroundApp.Tests.UI
6+
{
7+
[Parallelizable(ParallelScope.Self)]
8+
[TestFixture]
9+
[Property("Category", "Integration")]
10+
public class ModelDropdownListComponentTests : PageTest
11+
{
12+
public override BrowserNewContextOptions ContextOptions() => new()
13+
{
14+
IgnoreHTTPSErrors = true,
15+
};
16+
17+
[SetUp]
18+
public async Task Init()
19+
{
20+
await Page.GotoAsync("http://localhost:5000/tests");
21+
await Page.WaitForLoadStateAsync(LoadState.NetworkIdle);
22+
}
23+
24+
[Test]
25+
public async Task Given_DropdownComponentID_When_Page_Loaded_Then_DropdownComponent_Should_Be_Visible()
26+
{
27+
// Arrange
28+
var expectedId = "deployment-model-list";
29+
30+
// Act
31+
var component = Page.Locator($"#{expectedId}");
32+
33+
// Assert
34+
await Expect(component).ToBeVisibleAsync();
35+
}
36+
37+
[Test]
38+
// 페이지에서 컴포넌트 레이블이 올바르게 표시되는지 확인
39+
public async Task Given_Label_When_Page_Loaded_Then_Label_Should_Be_Visible()
40+
{
41+
// Act
42+
var label = Page.GetByText("Deployment");
43+
44+
// Assert
45+
await Expect(label).ToBeVisibleAsync();
46+
}
47+
48+
[Test]
49+
// 페이지에서 드롭다운 컴포넌트가 올바르게 표시되는지 확인
50+
public async Task Given_DropdownList_When_Page_Loaded_Then_DropdownList_Should_Be_Visible()
51+
{
52+
// Act
53+
var fluentSelect = Page.Locator("fluent-select#deployment-model-list-options");
54+
55+
// Assert
56+
await Expect(fluentSelect).ToBeVisibleAsync();
57+
}
58+
59+
[Test]
60+
// 드롭다운의 옵션 값이 존재하는지 확인
61+
public async Task Given_DropdownList_When_DropdownList_Clicked_And_DropdownOptions_Appeared_Then_All_DropdownOptions_Should_Be_Visible()
62+
{
63+
// Arrange
64+
var fluentSelect = Page.Locator("fluent-select#deployment-model-list-options");
65+
66+
// Act
67+
await fluentSelect.ClickAsync();
68+
var fluentOptions = fluentSelect.Locator("fluent-option");
69+
70+
// Assert
71+
for (int i = 0; i < await fluentOptions.CountAsync(); i++)
72+
{
73+
await Expect(fluentOptions.Nth(i)).ToBeVisibleAsync();
74+
}
75+
}
76+
77+
[Test]
78+
[TestCase("AZ", 2)]
79+
[TestCase("CA", 4)]
80+
[TestCase("CT", 6)]
81+
[TestCase("FL", 8)]
82+
// 드롭다운의 옵션 값을 선택하면 부모 컴포넌트(페이지 컴포넌트)에 올바르게 업데이트 되는지 확인
83+
public async Task Given_DropdownOptions_And_ExpectedValue_When_Third_DropdownOption_Selected_And_DropdownValue_Updated_Then_DropdownValue_Should_Match_ExpectedValue(string exp, int n)
84+
{
85+
// Arrange
86+
var fluentSelect = Page.Locator("fluent-select#deployment-model-list-options");
87+
await fluentSelect.ClickAsync();
88+
var fluentOptions = fluentSelect.Locator("fluent-option");
89+
var expectedValue = exp; // 실제 컴포넌트 옵션 값
90+
91+
// Act
92+
await fluentOptions.Nth(n).ScrollIntoViewIfNeededAsync(); // 선택할 컴포넌트 옵션 보이도록 스크롤
93+
await fluentOptions.Nth(n).ClickAsync(); // 옵션 클릭
94+
var actualValue = await Page.EvaluateAsync<string>("() => document.querySelector('fluent-select#deployment-model-list-options').value"); // 페이지 내 컴포넌트 값 가져오기
95+
96+
// Assert
97+
actualValue.Should().Be(expectedValue);
98+
}
99+
100+
[TearDown]
101+
public async Task CleanUp()
102+
{
103+
await Page.CloseAsync();
104+
}
105+
}
106+
}

0 commit comments

Comments
 (0)