[Playground] Component - Tab for system message and parameters (UI only) #225 (#244)

Author: 5jisoo

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

@@ -7,4 +7,4 @@
 
 Welcome to your new app.
 
-<ChatWindowComponent @rendermode="InteractiveServer" />
+<ChatWindowComponent @rendermode="InteractiveServer"/>

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

@@ -2,4 +2,6 @@
 
 <PageTitle>Playground Page</PageTitle>
 
-<h1>playground page!</h1>
+<h1>playground page!</h1>
+
+<ConfigTabComponent @rendermode="InteractiveServer"/>

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

@@ -0,0 +1,20 @@
+<FluentTabs Id="config-tab" ActiveTabId="system-message" OnTabChange="ChangeTab">
+    <FluentTab Label="System message" Id="system-message-tab">
+        This is "System message" tab.
+    </FluentTab>
+    <FluentTab Label="Parameters" Id="parameters-tab">
+        This is "Parameters" tab.
+    </FluentTab>
+</FluentTabs>
+
+<p id="active-tab">[TEST] Active tab changed to: @SelectedTab?.Id</p>
+
+@code {
+    FluentTab? SelectedTab;
+
+    private async Task ChangeTab(FluentTab tab)
+    {
+        SelectedTab = tab;
+        await Task.CompletedTask;
+    }
+}

src/AzureOpenAIProxy.PlaygroundApp/Components/_Imports.razor

@@ -14,3 +14,4 @@
 
 @using AzureOpenAIProxy.PlaygroundApp
 @using AzureOpenAIProxy.PlaygroundApp.Components
+@using AzureOpenAIProxy.PlaygroundApp.Components.UI

src/AzureOpenAIProxy.PlaygroundApp/Program.cs

@@ -36,4 +36,4 @@
 app.MapRazorComponents<App>()
     .AddInteractiveServerRenderMode();
 
-await app.RunAsync();
+await app.RunAsync();

test/AzureOpenAIProxy.PlaygroundApp.Tests/UI/ConfigTabComponentTest.cs

@@ -0,0 +1,71 @@
+using Microsoft.Playwright;
+using Microsoft.Playwright.NUnit;
+
+namespace AzureOpenAIProxy.PlaygroundApp.Tests.UI;
+
+[Parallelizable(ParallelScope.Self)]
+[TestFixture]
+[Property("Category", "Integration")]
+public class ConfigTabComponentTest : PageTest
+{
+    public override BrowserNewContextOptions ContextOptions() => new() { IgnoreHTTPSErrors = true, };
+
+    [SetUp]
+    public async Task SetUp()
+    {
+        await Page.GotoAsync("https://localhost:5001/playground/");
+        await Page.WaitForLoadStateAsync(LoadState.NetworkIdle);
+    }
+
+    [Test]
+    public async Task Given_ConfigTab_When_Endpoint_Invoked_Then_ConfigTab_Should_Be_Displayed()
+    {
+        // Act
+        var configTab = Page.Locator("fluent-tabs#config-tab");
+
+        // Assert
+        await Expect(configTab).ToBeVisibleAsync();
+    }
+
+    [Test]
+    public async Task Given_ConfigTab_When_Endpoint_Invoked_Then_Id_Should_Be_System_Message_Tab()
+    {
+        // Act
+        var sysMsgPanel = Page.Locator("fluent-tab-panel#system-message-tab-panel");
+        var parameterPanel = Page.Locator("fluent-tab-panel#parameters-tab-panel");
+
+        // Assert
+        await Expect(sysMsgPanel).ToBeVisibleAsync();
+        await Expect(parameterPanel).ToBeHiddenAsync();
+    }
+
+    [Test]
+    [TestCase(
+        "fluent-tab#parameters-tab",
+        "fluent-tab-panel#parameters-tab-panel",
+        "fluent-tab-panel#system-message-tab-panel"
+    )]
+    [TestCase(
+        "fluent-tab#system-message-tab",
+        "fluent-tab-panel#system-message-tab-panel",
+        "fluent-tab-panel#parameters-tab-panel"
+    )]
+    public async Task Given_ConfigTab_When_Changed_Then_Tab_Should_Be_Updated(
+        string selectedTabSelector,
+        string selectedPanelSelector,
+        string hiddenPanelSelector
+    )
+    {
+        // Arrange
+        var selectedTab = Page.Locator(selectedTabSelector);
+        var selectedPanel = Page.Locator(selectedPanelSelector);
+        var hiddenPanel = Page.Locator(hiddenPanelSelector);
+
+        // Act
+        await selectedTab.ClickAsync();
+
+        // Assert
+        await Expect(selectedPanel).ToBeVisibleAsync();
+        await Expect(hiddenPanel).ToBeHiddenAsync();
+    }
+}