[Playground] Component - button to display a given input aliencube#171 (aliencube#236)

Author: o-ii

src/AzureOpenAIProxy.PlaygroundApp/Components/Layout/MainLayout.razor

@@ -21,7 +21,7 @@
     <a class="dismiss">🗙</a>
 </div>
 
-<FluentToastProvider />
+<FluentToastProvider @rendermode="InteractiveServer" />
 <FluentDialogProvider />
 <FluentTooltipProvider />
-<FluentMessageBarProvider />
+<FluentMessageBarProvider />

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

@@ -0,0 +1,14 @@
+@page "/tests"
+@rendermode InteractiveServer
+
+<DebugTargetComponent OnValueChanged="SetInput" />
+<DebugButtonComponent Input="@currentValue" />
+
+@code {
+    private object? currentValue;
+
+    private void SetInput(int newValue)
+    {
+        currentValue = newValue;
+    }
+}

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

@@ -0,0 +1,22 @@
+@inject IToastService ToastService
+
+<!-- This component displays the given input when the button is clicked. -->
+<FluentButton @onclick="ShowToast" Appearance="Appearance.Accent">Debug</FluentButton>
+
+@code {
+    [Parameter]
+    public object? Input { get; set; }
+    
+    private async Task ShowToast()
+    {
+        if (Input is null)
+        {
+            ToastService.ShowToast(ToastIntent.Warning, "Input is null.");
+            await Task.CompletedTask;
+            return;
+        }
+
+        ToastService.ShowToast(ToastIntent.Success, $"{Input} (Type: {Input.GetType()})");
+        await Task.CompletedTask;
+    }
+}

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

@@ -0,0 +1,15 @@
+<FluentRadioGroup 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 EventCallback<int> OnValueChanged { get; set; }
+
+    private async Task SetValue(int value)
+    {
+        await OnValueChanged.InvokeAsync(value);
+    }
+}

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

@@ -0,0 +1,47 @@
+using Microsoft.Playwright;
+using Microsoft.Playwright.NUnit;
+
+namespace AzureOpenAIProxy.PlaygroundApp.Tests.Pages;
+
+[Parallelizable(ParallelScope.Self)]
+[TestFixture]
+[Property("Category", "Integration")]
+public class TestsPageTests : PageTest
+{
+    public override BrowserNewContextOptions ContextOptions() => new()
+    {
+        IgnoreHTTPSErrors = true,
+    };
+
+    [SetUp]
+    public async Task Setup()
+    {
+        // Arrange
+        await Page.GotoAsync("https://localhost:5001/tests");
+        await Page.WaitForLoadStateAsync(LoadState.NetworkIdle);
+    }
+
+    [Test]
+    public async Task Given_No_Input_When_DebugButton_Clicked_Then_Toast_Should_Show_NullMessage()
+    {
+        // Act
+        await Page.GetByRole(AriaRole.Button, new() { Name = "Debug" }).ClickAsync();
+
+        // Assert
+        await Expect(Page.Locator(".fluent-toast-title")).ToHaveTextAsync("Input is null.");
+    }
+
+    [Test]
+    [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)
+    {
+        // Act
+        await Page.GetByRole(AriaRole.Radio, new() { Name = $"{inputValue}" }).ClickAsync();
+        await Page.GetByRole(AriaRole.Button, new() { Name = "Debug" }).ClickAsync();
+
+        // Assert
+        await Expect(Page.Locator(".fluent-toast-title")).ToHaveTextAsync($"{inputValue} (Type: {inputType})");
+    }
+}