diff --git a/src/AzureOpenAIProxy.PlaygroundApp/Components/Pages/Tests.razor b/src/AzureOpenAIProxy.PlaygroundApp/Components/Pages/Tests.razor
index b9979cbb..dcc16730 100644
--- a/src/AzureOpenAIProxy.PlaygroundApp/Components/Pages/Tests.razor
+++ b/src/AzureOpenAIProxy.PlaygroundApp/Components/Pages/Tests.razor
@@ -5,12 +5,22 @@
+
+
+
@code {
private object? currentValue;
+ private string? selectedModelValue = "";
private async Task SetInput(int newValue)
{
currentValue = newValue;
await Task.CompletedTask;
}
-}
\ No newline at end of file
+
+ private async Task HandleSelectedModelValue(string val)
+ {
+ selectedModelValue = val;
+ await Task.CompletedTask;
+ }
+}
diff --git a/src/AzureOpenAIProxy.PlaygroundApp/Components/UI/DeploymentModelListComponent.razor b/src/AzureOpenAIProxy.PlaygroundApp/Components/UI/DeploymentModelListComponent.razor
new file mode 100644
index 00000000..13783dd1
--- /dev/null
+++ b/src/AzureOpenAIProxy.PlaygroundApp/Components/UI/DeploymentModelListComponent.razor
@@ -0,0 +1,73 @@
+
+
+
+ *
+
+
+
+
+
+
+@code {
+ [Parameter]
+ public string? Id { get; set; }
+ private Option? selectedOption { get; set; } = new();
+
+ [Parameter]
+ public EventCallback OnUserOptionSelected { get; set; }
+
+ private async Task OnValueChanged()
+ {
+ string? selectedValue = selectedOption?.Value?.ToString();
+ await OnUserOptionSelected.InvokeAsync(selectedValue);
+ }
+
+ static List> deploymentModelOptions = new()
+ {
+ new Option { Value = "AL", Text = "Alabama" },
+ new Option { Value = "AK", Text = "Alaska" },
+ new Option { Value = "AZ", Text = "Arizona" },
+ new Option { Value = "AR", Text = "Arkansas" },
+ new Option { Value = "CA", Text = "California" },
+ new Option { Value = "CO", Text = "Colorado" },
+ new Option { Value = "CT", Text = "Connecticut" },
+ new Option { Value = "DE", Text = "Delaware" },
+ new Option { Value = "FL", Text = "Florida" },
+ new Option { Value = "GA", Text = "Georgia" },
+ new Option { Value = "HI", Text = "Hawaii" },
+ new Option { Value = "ID", Text = "Idaho" },
+ new Option { Value = "IL", Text = "Illinois" },
+ new Option { Value = "IN", Text = "Indiana" },
+ new Option { Value = "IA", Text = "Iowa" },
+ new Option { Value = "KS", Text = "Kansas" },
+ new Option { Value = "KY", Text = "Kentucky" },
+ new Option { Value = "LA", Text = "Louisiana" },
+ new Option { Value = "ME", Text = "Maine" },
+ new Option { Value = "MD", Text = "Maryland" },
+ new Option { Value = "MA", Text = "Massachussets" },
+ new Option { Value = "MI", Text = "Michigain" },
+ new Option { Value = "MN", Text = "Minnesota" },
+ new Option { Value = "MS", Text = "Mississippi" },
+ new Option { Value = "MO", Text = "Missouri" },
+ new Option { Value = "MT", Text = "Montana" },
+ new Option { Value = "NE", Text = "Nebraska" },
+ new Option { Value = "NV", Text = "Nevada" },
+ new Option { Value = "NH", Text = "New Hampshire" },
+ new Option { Value = "NJ", Text = "New Jersey" },
+ new Option { Value = "NM", Text = "New Mexico" },
+ new Option { Value = "NY", Text = "New York" },
+ new Option { Value = "NC", Text = "North Carolina" },
+ new Option { Value = "ND", Text = "North Dakota" },
+ new Option { Value = "OH", Text = "Ohio" },
+ new Option { Value = "OK", Text = "Oklahoma" },
+ new Option { Value = "OR", Text = "Oregon" },
+ new Option { Value = "PA", Text = "Pennsylvania" }
+ };
+}
\ No newline at end of file
diff --git a/test/AzureOpenAIProxy.PlaygroundApp.Tests/AzureOpenAIProxy.PlaygroundApp.Tests.csproj b/test/AzureOpenAIProxy.PlaygroundApp.Tests/AzureOpenAIProxy.PlaygroundApp.Tests.csproj
index 0b9dccf2..0ed50954 100644
--- a/test/AzureOpenAIProxy.PlaygroundApp.Tests/AzureOpenAIProxy.PlaygroundApp.Tests.csproj
+++ b/test/AzureOpenAIProxy.PlaygroundApp.Tests/AzureOpenAIProxy.PlaygroundApp.Tests.csproj
@@ -23,9 +23,9 @@
-
+ -->
diff --git a/test/AzureOpenAIProxy.PlaygroundApp.Tests/Pages/TestsPageTests.cs b/test/AzureOpenAIProxy.PlaygroundApp.Tests/Pages/TestsPageTests.cs
index d9957c23..4acd2d1d 100644
--- a/test/AzureOpenAIProxy.PlaygroundApp.Tests/Pages/TestsPageTests.cs
+++ b/test/AzureOpenAIProxy.PlaygroundApp.Tests/Pages/TestsPageTests.cs
@@ -21,6 +21,23 @@ public async Task Setup()
await Page.WaitForLoadStateAsync(LoadState.NetworkIdle);
}
+ [Test]
+ [TestCase("debug-target")]
+ [TestCase("debug-button")]
+ [TestCase("deployment-model-list")]
+ [TestCase("debug-button-selected-model")]
+ public async Task Given_ComponentID_When_Page_Loaded_Then_Component_Should_Be_Visible(string id)
+ {
+ // Arrange
+ var expectedId = id;
+
+ // Act
+ var component = Page.Locator($"#{expectedId}");
+
+ // Assert
+ await Expect(component).ToBeVisibleAsync();
+ }
+
[Test]
public async Task Given_No_Input_On_DebugTarget_When_DebugButton_Clicked_Then_Toast_Should_Show_NullMessage()
{
diff --git a/test/AzureOpenAIProxy.PlaygroundApp.Tests/UI/DeploymentModelListComponentTests.cs b/test/AzureOpenAIProxy.PlaygroundApp.Tests/UI/DeploymentModelListComponentTests.cs
new file mode 100644
index 00000000..d418011d
--- /dev/null
+++ b/test/AzureOpenAIProxy.PlaygroundApp.Tests/UI/DeploymentModelListComponentTests.cs
@@ -0,0 +1,106 @@
+using Microsoft.Playwright.NUnit;
+using Microsoft.Playwright;
+using FluentAssertions;
+
+namespace AzureOpenAIProxy.PlaygroundApp.Tests.UI
+{
+ [Parallelizable(ParallelScope.Self)]
+ [TestFixture]
+ [Property("Category", "Integration")]
+ public class ModelDropdownListComponentTests : PageTest
+ {
+ public override BrowserNewContextOptions ContextOptions() => new()
+ {
+ IgnoreHTTPSErrors = true,
+ };
+
+ [SetUp]
+ public async Task Init()
+ {
+ await Page.GotoAsync("http://localhost:5000/tests");
+ await Page.WaitForLoadStateAsync(LoadState.NetworkIdle);
+ }
+
+ [Test]
+ public async Task Given_DropdownComponentID_When_Page_Loaded_Then_DropdownComponent_Should_Be_Visible()
+ {
+ // Arrange
+ var expectedId = "deployment-model-list";
+
+ // Act
+ var component = Page.Locator($"#{expectedId}");
+
+ // Assert
+ await Expect(component).ToBeVisibleAsync();
+ }
+
+ [Test]
+ // 페이지에서 컴포넌트 레이블이 올바르게 표시되는지 확인
+ public async Task Given_Label_When_Page_Loaded_Then_Label_Should_Be_Visible()
+ {
+ // Act
+ var label = Page.GetByText("Deployment");
+
+ // Assert
+ await Expect(label).ToBeVisibleAsync();
+ }
+
+ [Test]
+ // 페이지에서 드롭다운 컴포넌트가 올바르게 표시되는지 확인
+ public async Task Given_DropdownList_When_Page_Loaded_Then_DropdownList_Should_Be_Visible()
+ {
+ // Act
+ var fluentSelect = Page.Locator("fluent-select#deployment-model-list-options");
+
+ // Assert
+ await Expect(fluentSelect).ToBeVisibleAsync();
+ }
+
+ [Test]
+ // 드롭다운의 옵션 값이 존재하는지 확인
+ public async Task Given_DropdownList_When_DropdownList_Clicked_And_DropdownOptions_Appeared_Then_All_DropdownOptions_Should_Be_Visible()
+ {
+ // Arrange
+ var fluentSelect = Page.Locator("fluent-select#deployment-model-list-options");
+
+ // Act
+ await fluentSelect.ClickAsync();
+ var fluentOptions = fluentSelect.Locator("fluent-option");
+
+ // Assert
+ for (int i = 0; i < await fluentOptions.CountAsync(); i++)
+ {
+ await Expect(fluentOptions.Nth(i)).ToBeVisibleAsync();
+ }
+ }
+
+ [Test]
+ [TestCase("AZ", 2)]
+ [TestCase("CA", 4)]
+ [TestCase("CT", 6)]
+ [TestCase("FL", 8)]
+ // 드롭다운의 옵션 값을 선택하면 부모 컴포넌트(페이지 컴포넌트)에 올바르게 업데이트 되는지 확인
+ public async Task Given_DropdownOptions_And_ExpectedValue_When_Third_DropdownOption_Selected_And_DropdownValue_Updated_Then_DropdownValue_Should_Match_ExpectedValue(string exp, int n)
+ {
+ // Arrange
+ var fluentSelect = Page.Locator("fluent-select#deployment-model-list-options");
+ await fluentSelect.ClickAsync();
+ var fluentOptions = fluentSelect.Locator("fluent-option");
+ var expectedValue = exp; // 실제 컴포넌트 옵션 값
+
+ // Act
+ await fluentOptions.Nth(n).ScrollIntoViewIfNeededAsync(); // 선택할 컴포넌트 옵션 보이도록 스크롤
+ await fluentOptions.Nth(n).ClickAsync(); // 옵션 클릭
+ var actualValue = await Page.EvaluateAsync("() => document.querySelector('fluent-select#deployment-model-list-options').value"); // 페이지 내 컴포넌트 값 가져오기
+
+ // Assert
+ actualValue.Should().Be(expectedValue);
+ }
+
+ [TearDown]
+ public async Task CleanUp()
+ {
+ await Page.CloseAsync();
+ }
+ }
+}
\ No newline at end of file