Update UI test methods (#301)

Author: justinyoo

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

@@ -6,4 +6,4 @@
 
 <p>This component demonstrates showing admin events.</p>
 
-<AdminEventsComponent @rendermode="InteractiveServer"/>
+<AdminEventsComponent Id="admin-events" @rendermode="InteractiveServer"/>

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

@@ -1,26 +1,29 @@
-@page "/tests"
-@rendermode InteractiveServer
-
-<h1>Debug Button</h1>
-<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;
-    }
-}
+@page "/tests"
+@rendermode InteractiveServer
+
+<h1>Component Tests</h1>
+
+<h2>Debug Button</h2>
+<DebugTargetComponent Id="debug-target" OnValueChanged="SetInput" />
+<DebugButtonComponent Id="debug-button" Input="@targetValue" />
+
+<h2>Deployment Models</h2>
+<DeploymentModelListComponent Id="debug-deployment-model-list" OnUserOptionSelected="SetDeploymentModel" @rendermode="InteractiveServer" />
+<DebugButtonComponent Id="debug-button-deployment-model-list" Input="@selectedModel" />
+
+@code {
+    private object? targetValue;
+    private string? selectedModel;
+
+    private async Task SetInput(int value)
+    {
+        targetValue = value;
+        await Task.CompletedTask;
+    }
+
+    private async Task SetDeploymentModel(string value)
+    {
+        selectedModel = value;
+        await Task.CompletedTask;
+    }
+}

src/AzureOpenAIProxy.PlaygroundApp/Components/UI/Admin/AdminEventsComponent.razor

@@ -1,6 +1,6 @@
 @using AzureOpenAIProxy.PlaygroundApp.Models
 
-<div id="admin-events-component">
+<FluentLayout Id="@Id">
     @if (eventDetails == null)
     {
         <p><em>Loading...</em></p>
@@ -41,12 +41,15 @@
             }
         </div>
     }
-</div>
+</FluentLayout>
 
 @code {
     private IQueryable<AdminEventDetails>? eventDetails;
     private PaginationState pagination = new PaginationState { ItemsPerPage = 10 };
 
+    [Parameter]
+    public string? Id { get; set; }
+
     protected override async Task OnInitializedAsync()
     {
         // Simulate asynchronous loading to demonstrate streaming rendering

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

@@ -16,9 +16,10 @@
 </FluentLayout>
 
 @code {
+    private Option<string>? selectedOption { get; set; } = new();
+
     [Parameter]
     public string? Id { get; set; }
-    private Option<string>? selectedOption { get; set; } = new();
 
     [Parameter]
     public EventCallback<string> OnUserOptionSelected { get; set; }

test/AzureOpenAIProxy.PlaygroundApp.Tests/Pages/AdminEventsPageTests.cs

@@ -16,7 +16,7 @@ public class AdminEventsPageTests : PageTest
     };
 
     [SetUp]
-    public async Task Setup()
+    public async Task Init()
     {
         await Page.GotoAsync("https://localhost:5001/admin/events");
         await Page.WaitForLoadStateAsync(LoadState.NetworkIdle);
@@ -26,7 +26,7 @@ public async Task Setup()
     public async Task Given_Events_Page_When_Navigated_Then_It_Should_Have_ListEventDetailsComponent()
     {
         // Act
-        var adminEventsComponent = await Page.QuerySelectorAsync("#admin-events-component");
+        var adminEventsComponent = await Page.QuerySelectorAsync("#admin-events");
 
         // Assert
         adminEventsComponent.Should().NotBeNull();
@@ -44,4 +44,10 @@ public async Task Given_Events_Page_When_Navigated_Then_It_Should_Have_EventDeta
         // Assert
         adminEventsTable.Should().NotBeNull();
     }
+
+    [TearDown]
+    public async Task CleanUp()
+    {
+        await Page.CloseAsync();
+    }
 }

test/AzureOpenAIProxy.PlaygroundApp.Tests/Pages/HomePageTests.cs

@@ -1,32 +1,38 @@
-using Microsoft.Playwright;
-using Microsoft.Playwright.NUnit;
-
-namespace AzureOpenAIProxy.PlaygroundApp.Tests.Pages;
-
-[Parallelizable(ParallelScope.Self)]
-[TestFixture]
-[Property("Category", "Integration")]
-public class HomePageTests : PageTest
-{
-    public override BrowserNewContextOptions ContextOptions() => new()
-    {
-        IgnoreHTTPSErrors = true,
-    };
-
-    [SetUp]
-    public async Task Setup()
-    {
-        await Page.GotoAsync("https://localhost:5001");
-        await Page.WaitForLoadStateAsync(LoadState.NetworkIdle);
-    }
-
-    [Test]
-    public void Given_Root_Page_When_Navigated_Then_It_Should_No_Sidebar()
-    {
-        // Act
-        var sidebar = Page.Locator("div.sidebar");
-
-        // Assert
-        Expect(sidebar).Equals(null);
-    }
-}
+using Microsoft.Playwright;
+using Microsoft.Playwright.NUnit;
+
+namespace AzureOpenAIProxy.PlaygroundApp.Tests.Pages;
+
+[Parallelizable(ParallelScope.Self)]
+[TestFixture]
+[Property("Category", "Integration")]
+public class HomePageTests : PageTest
+{
+    public override BrowserNewContextOptions ContextOptions() => new()
+    {
+        IgnoreHTTPSErrors = true,
+    };
+
+    [SetUp]
+    public async Task Init()
+    {
+        await Page.GotoAsync("https://localhost:5001");
+        await Page.WaitForLoadStateAsync(LoadState.NetworkIdle);
+    }
+
+    [Test]
+    public void Given_Root_Page_When_Navigated_Then_It_Should_No_Sidebar()
+    {
+        // Act
+        var sidebar = Page.Locator("div.sidebar");
+
+        // Assert
+        Expect(sidebar).Equals(null);
+    }
+
+    [TearDown]
+    public async Task CleanUp()
+    {
+        await Page.CloseAsync();
+    }
+}