[Playground] Component - list of deployment models (UI only) #172

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

@@ -5,12 +5,22 @@
 <DebugTargetComponent Id="debug-target" OnValueChanged="SetInput" />
 <DebugButtonComponent Id="debug-button" Input="@currentValue" />
 
+<DeploymentModelListComponent Id="deployment-model-list" OnUserOptionSelected="HandleSelectedModelValue" @rendermode="InteractiveServer" />
+<DebugButtonComponent Id="debug-button-selected-model" Input="@selectedModelValue" />
+
 @code {
     private object? currentValue;
+    private string? selectedModelValue = "";
 
     private async Task SetInput(int newValue)
     {
         currentValue = newValue;
         await Task.CompletedTask;
     }
-}
+
+    private async Task HandleSelectedModelValue(string val)
+    {
+        selectedModelValue = val;
+        await Task.CompletedTask;
+    }
+}

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

@@ -0,0 +1,73 @@
+<FluentLayout Id="@Id" Style="margin: 10px;">
+    <div style="display: flex; align-items: center; margin-bottom: 5px;">
+        <label id="deployment-model-label" for="deployment-model-list-options" style="margin-right: 5px;">Deployment</label>
+        <span style="color: red;">*</span>
+    </div>
+
+    <FluentSelect Items=@deploymentModelOptions Id="deployment-model-list-options" name="deployment-models"
+        TOption="Option<string>" Height="300px"
+        OptionText="@(e => e.Text?.ToString())"
+        OptionValue="@(e => e.Value?.ToString())" 
+        OptionSelected="@(e => e.Selected)"
+        @bind-SelectedOption="@selectedOption"
+        @onclick="OnValueChanged"
+        aria-labelledby="deployment-model-label">
+    </FluentSelect>
+</FluentLayout>
+
+@code {
+    [Parameter]
+    public string? Id { get; set; }
+    private Option<string>? selectedOption { get; set; } = new();
+
+    [Parameter]
+    public EventCallback<string> OnUserOptionSelected { get; set; }
+
+    private async Task OnValueChanged()
+    {
+        string? selectedValue = selectedOption?.Value?.ToString();
+        await OnUserOptionSelected.InvokeAsync(selectedValue);
+    }
+
+    static List<Option<string>> deploymentModelOptions = new()
+    {
+        new Option<string> { Value = "AL", Text = "Alabama" },
+        new Option<string> { Value = "AK", Text = "Alaska" },
+        new Option<string> { Value = "AZ", Text = "Arizona" },
+        new Option<string> { Value = "AR", Text = "Arkansas" },
+        new Option<string> { Value = "CA", Text = "California" },
+        new Option<string> { Value = "CO", Text = "Colorado" },
+        new Option<string> { Value = "CT", Text = "Connecticut" },
+        new Option<string> { Value = "DE", Text = "Delaware" },
+        new Option<string> { Value = "FL", Text = "Florida" },
+        new Option<string> { Value = "GA", Text = "Georgia" },
+        new Option<string> { Value = "HI", Text = "Hawaii" },
+        new Option<string> { Value = "ID", Text = "Idaho" },
+        new Option<string> { Value = "IL", Text = "Illinois" },
+        new Option<string> { Value = "IN", Text = "Indiana" },
+        new Option<string> { Value = "IA", Text = "Iowa" },
+        new Option<string> { Value = "KS", Text = "Kansas" },
+        new Option<string> { Value = "KY", Text = "Kentucky" },
+        new Option<string> { Value = "LA", Text = "Louisiana" },
+        new Option<string> { Value = "ME", Text = "Maine" },
+        new Option<string> { Value = "MD", Text = "Maryland" },
+        new Option<string> { Value = "MA", Text = "Massachussets" },
+        new Option<string> { Value = "MI", Text = "Michigain" },
+        new Option<string> { Value = "MN", Text = "Minnesota" },
+        new Option<string> { Value = "MS", Text = "Mississippi" },
+        new Option<string> { Value = "MO", Text = "Missouri" },
+        new Option<string> { Value = "MT", Text = "Montana" },
+        new Option<string> { Value = "NE", Text = "Nebraska" },
+        new Option<string> { Value = "NV", Text = "Nevada" },
+        new Option<string> { Value = "NH", Text = "New Hampshire" },
+        new Option<string> { Value = "NJ", Text = "New Jersey" },
+        new Option<string> { Value = "NM", Text = "New Mexico" },
+        new Option<string> { Value = "NY", Text = "New York" },
+        new Option<string> { Value = "NC", Text = "North Carolina" },
+        new Option<string> { Value = "ND", Text = "North Dakota" },
+        new Option<string> { Value = "OH", Text = "Ohio" },
+        new Option<string> { Value = "OK", Text = "Oklahoma" },
+        new Option<string> { Value = "OR", Text = "Oregon" },
+        new Option<string> { Value = "PA", Text = "Pennsylvania" }
+    };
+}

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

@@ -23,9 +23,9 @@
     <PackageReference Include="NUnit3TestAdapter" Version="$(NUnitVersion)" />
   </ItemGroup>
 
-  <!--<ItemGroup>
+  <!-- <ItemGroup>
     <ProjectReference Include="..\..\src\AzureOpenAIProxy.PlaygroundApp\AzureOpenAIProxy.PlaygroundApp.csproj" />
-  </ItemGroup>-->
+  </ItemGroup> -->
 
   <ItemGroup>
     <Using Include="NUnit.Framework" />

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()
     {

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<string>("() => document.querySelector('fluent-select#deployment-model-list-options').value"); // 페이지 내 컴포넌트 값 가져오기
+
+            // Assert
+            actualValue.Should().Be(expectedValue);
+        }
+
+        [TearDown]
+        public async Task CleanUp()
+        {
+            await Page.CloseAsync();
+        }
+    }
+}