Update debug button component (#297)

Author: justinyoo

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;
     }
 }

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; }
 

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; }
 

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);

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})");