From a7fa25bc46a548c247213790424504a55c79c257 Mon Sep 17 00:00:00 2001
From: Justin Yoo <justin.yoojh@gmail.com>
Date: Mon, 2 Sep 2024 00:20:50 +0900
Subject: [PATCH] Update debug button component

---
 .../Components/Pages/Tests.razor               |  8 +++++---
 .../Components/UI/DebugButtonComponent.razor   |  5 ++++-
 .../Components/UI/DebugTargetComponent.razor   |  5 ++++-
 .../Pages/HomePageTests.cs                     | 14 +++++++++-----
 .../Pages/TestsPageTests.cs                    | 18 +++++++++++++-----
 5 files changed, 35 insertions(+), 15 deletions(-)

diff --git a/src/AzureOpenAIProxy.PlaygroundApp/Components/Pages/Tests.razor b/src/AzureOpenAIProxy.PlaygroundApp/Components/Pages/Tests.razor
index 0929588c..b9979cbb 100644
--- a/src/AzureOpenAIProxy.PlaygroundApp/Components/Pages/Tests.razor
+++ b/src/AzureOpenAIProxy.PlaygroundApp/Components/Pages/Tests.razor
@@ -1,14 +1,16 @@
 @page "/tests"
 @rendermode InteractiveServer
 
-<DebugTargetComponent OnValueChanged="SetInput" />
-<DebugButtonComponent Input="@currentValue" />
+<h1>Debug Button</h1>
+<DebugTargetComponent Id="debug-target" OnValueChanged="SetInput" />
+<DebugButtonComponent Id="debug-button" Input="@currentValue" />
 
 @code {
     private object? currentValue;
 
-    private void SetInput(int newValue)
+    private async Task SetInput(int newValue)
     {
         currentValue = newValue;
+        await Task.CompletedTask;
     }
 }
\ No newline at end of file
diff --git a/src/AzureOpenAIProxy.PlaygroundApp/Components/UI/DebugButtonComponent.razor b/src/AzureOpenAIProxy.PlaygroundApp/Components/UI/DebugButtonComponent.razor
index 93abbb75..8335d49e 100644
--- a/src/AzureOpenAIProxy.PlaygroundApp/Components/UI/DebugButtonComponent.razor
+++ b/src/AzureOpenAIProxy.PlaygroundApp/Components/UI/DebugButtonComponent.razor
@@ -1,9 +1,12 @@
 @inject IToastService ToastService
 
 <!-- This component displays the given input when the button is clicked. -->
-<FluentButton @onclick="ShowToast" Appearance="Appearance.Accent">Debug</FluentButton>
+<FluentButton Id="@Id" @onclick="ShowToast" Appearance="Appearance.Accent">Debug</FluentButton>
 
 @code {
+    [Parameter]
+    public string? Id { get; set; }
+
     [Parameter]
     public object? Input { get; set; }
     
diff --git a/src/AzureOpenAIProxy.PlaygroundApp/Components/UI/DebugTargetComponent.razor b/src/AzureOpenAIProxy.PlaygroundApp/Components/UI/DebugTargetComponent.razor
index 4f2c30bb..bfb54641 100644
--- a/src/AzureOpenAIProxy.PlaygroundApp/Components/UI/DebugTargetComponent.razor
+++ b/src/AzureOpenAIProxy.PlaygroundApp/Components/UI/DebugTargetComponent.razor
@@ -1,10 +1,13 @@
-<FluentRadioGroup Label="UI Test #171" TValue="int" ValueChanged="SetValue" Orientation="Orientation.Vertical">
+<FluentRadioGroup Id="@Id" Label="UI Test #171" TValue="int" ValueChanged="SetValue" Orientation="Orientation.Vertical">
     <FluentRadio Value="123">123</FluentRadio>
     <FluentRadio Value="456">456</FluentRadio>
     <FluentRadio Value="789">789</FluentRadio>
 </FluentRadioGroup>
 
 @code {
+    [Parameter]
+    public string? Id { get; set; }
+
     [Parameter]
     public EventCallback<int> OnValueChanged { get; set; }
 
diff --git a/test/AzureOpenAIProxy.PlaygroundApp.Tests/Pages/HomePageTests.cs b/test/AzureOpenAIProxy.PlaygroundApp.Tests/Pages/HomePageTests.cs
index aad307da..e81b6ee1 100644
--- a/test/AzureOpenAIProxy.PlaygroundApp.Tests/Pages/HomePageTests.cs
+++ b/test/AzureOpenAIProxy.PlaygroundApp.Tests/Pages/HomePageTests.cs
@@ -13,14 +13,18 @@ public class HomePageTests : PageTest
         IgnoreHTTPSErrors = true,
     };
 
-    [Test]
-    public async Task Given_Root_Page_When_Navigated_Then_It_Should_No_Sidebar()
+    [SetUp]
+    public async Task Setup()
     {
-        // Arrange
-        await this.Page.GotoAsync("https://localhost:5001");
+        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 = this.Page.Locator("div.sidebar");
+        var sidebar = Page.Locator("div.sidebar");
 
         // Assert
         Expect(sidebar).Equals(null);
diff --git a/test/AzureOpenAIProxy.PlaygroundApp.Tests/Pages/TestsPageTests.cs b/test/AzureOpenAIProxy.PlaygroundApp.Tests/Pages/TestsPageTests.cs
index f0b6f8c6..d9957c23 100644
--- a/test/AzureOpenAIProxy.PlaygroundApp.Tests/Pages/TestsPageTests.cs
+++ b/test/AzureOpenAIProxy.PlaygroundApp.Tests/Pages/TestsPageTests.cs
@@ -22,10 +22,13 @@ public async Task Setup()
     }
 
     [Test]
-    public async Task Given_No_Input_When_DebugButton_Clicked_Then_Toast_Should_Show_NullMessage()
+    public async Task Given_No_Input_On_DebugTarget_When_DebugButton_Clicked_Then_Toast_Should_Show_NullMessage()
     {
+        // Arrange
+        var button = Page.Locator("fluent-button#debug-button");
+
         // Act
-        await Page.GetByRole(AriaRole.Button, new() { Name = "Debug" }).ClickAsync();
+        await button.ClickAsync();
 
         // Assert
         await Expect(Page.Locator(".fluent-toast-title")).ToHaveTextAsync("Input is null.");
@@ -35,11 +38,16 @@ public async Task Given_No_Input_When_DebugButton_Clicked_Then_Toast_Should_Show
     [TestCase(123, typeof(int))]
     [TestCase(456, typeof(int))]
     [TestCase(789, typeof(int))]
-    public async Task Given_Input_When_DebugButton_Clicked_Then_Toast_Should_Show_Input(int inputValue, Type inputType)
+    public async Task Given_Input_On_DebugTarget_When_DebugButton_Clicked_Then_Toast_Should_Show_Input(int inputValue, Type inputType)
     {
+        // Arrange
+        var radio = Page.Locator("fluent-radio-group#debug-target")
+                        .Locator($"fluent-radio[current-value='{inputValue}']");
+        var button = Page.Locator("fluent-button#debug-button");
+
         // Act
-        await Page.GetByRole(AriaRole.Radio, new() { Name = $"{inputValue}" }).ClickAsync();
-        await Page.GetByRole(AriaRole.Button, new() { Name = "Debug" }).ClickAsync();
+        await radio.ClickAsync();
+        await button.ClickAsync();
 
         // Assert
         await Expect(Page.Locator(".fluent-toast-title")).ToHaveTextAsync($"{inputValue} (Type: {inputType})");