[Playground] Add Events components

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

@@ -0,0 +1,10 @@
+@page "/events"
+
+<PageTitle>Events</PageTitle>
+
+<p>This component demonstrates showing up to 4 events that user joined.</p>
+
+<EventListComponent Id="event-list" @rendermode="InteractiveServer" />
+
+@code {
+}

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

@@ -0,0 +1,25 @@
+<FluentGridItem Id="@Id" xs="12" sm="6" Justify="JustifyContent.Center" Style="text-align: center;">
+    <FluentCard Id="event-title" Style="flex-grow: 1; padding: 0em; display: flex; flex-direction: column; align-items: normal;">
+        <FluentNavLink Id="eventdetails-link" Href="@($"/events/{Id}")" Style="flex-grow: 0; align-self: center;">
+            <FluentLabel Typo="Typography.PaneHeader" Style="margin-block: 0.5em;">
+                    @Title
+            </FluentLabel>
+        </FluentNavLink>
+        <div id="event-summary" class="card border" style="background-color: var(--neutral-layer-2); padding: 1em; padding-inline: 1.5em; flex-grow: 1">
+            <div class="card-body">
+                <h5>@Summary</h5>
+            </div>
+        </div>
+    </FluentCard>
+</FluentGridItem>
+
+@code {
+    [Parameter]
+    public string? Id { get; set; }
+
+    [Parameter]
+    public string? Title { get; set; }
+
+    [Parameter]
+    public string? Summary { get; set; }
+}

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

@@ -0,0 +1,83 @@
+@using AzureOpenAIProxy.PlaygroundApp.Models;
+
+<FluentGrid AdaptiveRendering="true"
+            Id="@Id"
+            Spacing="3"
+            Justify="JustifyContent.FlexStart"
+            Style="background-color: var(--neutral-layer-4);
+                padding-block: 1.5em;
+                padding-inline: 1.0em; align-items: center; margin-top: 18px; border-radius: 8px;">
+
+    @if (events == null || events.Any() == false)
+    {
+        <FluentGridItem Id="no-events" xs="12" sm="12" Justify="JustifyContent.Center" Style="text-align: center; flex-grow: 1;">
+            <FluentCard MinimalStyle="true" Style="flex-grow: 1; background-color: var(--neutral-layer-2); display: flex; padding: 0em; flex-direction: row; align-items: center; align-content: center; justify-content: center; background-color: transparent; box-shadow: none !important; border: hidden;">
+                <FluentLabel Typo="Typography.Header">You don’t have any events you have participated in now.</FluentLabel>
+            </FluentCard>
+        </FluentGridItem>
+    }
+    else
+    {
+        // Shows up to 4 events that the user currently joined.
+        var entries = events.Take(4);
+        @foreach (var e in entries)
+        {
+            <EventItemComponent Id="@e.EventId.ToString()"
+                                Title="@e.Title"
+                                Summary="@e.Summary">
+            </EventItemComponent>
+        }
+    }
+</FluentGrid>
+
+@code {
+    private List<EventDetails>? events;
+
+    [Parameter]
+    public string? Id { get; set; }
+
+    protected override async Task OnInitializedAsync()
+    {
+        // TODO: Fetch events from the API server.
+        events = await CreateEventDetailsAsync();
+    }
+
+    private async Task<List<EventDetails>> CreateEventDetailsAsync()
+    {
+        return await Task.FromResult(new List<EventDetails>
+        {
+            new EventDetails
+            {
+                EventId = Guid.NewGuid(),
+                Title = "Event 1",
+                Summary = "Summary 1",
+                MaxTokenCap = 1000,
+                DailyRequestCap = 100
+            },
+            new EventDetails
+            {
+                EventId = Guid.NewGuid(),
+                Title = "Event 2",
+                Summary = "Et iusto clita ipsum et. Amet lorem est lorem takimata et aliquyam. Aliquyam invidunt dolor erat eu sed ut sadipscing justo sed justo amet magna ea lorem ipsum exerci. Erat diam tempor imperdiet lorem duis. Amet est sanctus tempor kasd erat odio diam accumsan stet. Voluptua aliquyam magna at no vulputate justo labore labore eos stet. Dolore ut ad sadipscing sit elitr ipsum commodo nam invidunt wisi labore vero feugait sanctus sea ad et sadipscing. Possim tempor nonummy erat et no erat lorem in dolore consequat eos feugiat justo vero. Ut eirmod et duis accusam dolore est sea duis dolor et duis illum. Esse ut aliquyam placerat enim amet et labore sadipscing sed stet duo eos at consequat autem accusam lorem invidunt. Sea clita rebum eum et no dolore et sit. Liber aliquyam duo eu. Feugiat sadipscing sed eos sanctus gubergren dolore amet. Erat liber nam ea aliquam ut autem dolores magna aliquyam illum vero vulputate ut accusam est rebum. Et takimata est dolore ut elitr gubergren sanctus ipsum magna magna at sed amet dolores amet. Rebum dolore sit ea et gubergren. Dolore aliquam ipsum in at est justo justo ipsum. Ipsum nisl sea lorem.",
+                MaxTokenCap = 2000,
+                DailyRequestCap = 200,
+            },
+            new EventDetails
+            {
+                EventId = Guid.NewGuid(),
+                Title = "Event 3",
+                Summary = "Lorem ipsum dolor sit amet stet ipsum invidunt amet invidunt magna vero delenit tempor invidunt no rebum eirmod. Duo labore eu no nonumy consequat lobortis consequat consetetur ipsum et ipsum ea eirmod esse. Eirmod rebum voluptua duo et autem eirmod vero amet dolores tincidunt lorem ipsum stet dolore sed aliquyam nonumy consetetur. Rebum no invidunt justo consetetur gubergren sea luptatum ut et amet ut aliquyam lorem ipsum. Nonummy et dolor placerat sit hendrerit invidunt. Et est dolore magna et suscipit duo aliquyam sed dolore ipsum erat nonummy eirmod. Nonummy consequat et et et accusam hendrerit et dolor et. Sanctus gubergren elitr sit takimata accusam lobortis quod sit nonumy nonumy diam clita clita. Ea takimata dolor molestie duo tempor invidunt amet nobis lorem accumsan duo rebum diam ipsum dolores erat ea. Amet nulla eirmod takimata no vel in et sea lobortis ut ullamcorper sadipscing delenit duo takimata ipsum eos consectetuer. Et et ea no duis eu labore quod ipsum feugiat esse lorem clita et nibh iriure diam magna. Sit duis tempor dolore sed et no magna et dolor labore clita erat sed dolores accusam molestie clita. Quis amet eum sit magna kasd eu invidunt nihil. Labore diam erat dignissim labore ipsum qui clita vel eos. Nisl praesent amet consequat ipsum justo quod tempor sed est aliquyam labore lorem accusam diam.",
+                MaxTokenCap = 3000,
+                DailyRequestCap = 300,
+            },
+            new EventDetails
+            {
+                EventId = Guid.NewGuid(),
+                Title = "Event 4",
+                Summary = "Summary 4",
+                MaxTokenCap = 3000,
+                DailyRequestCap = 300,
+            }
+        });
+    }
+}

test/AzureOpenAIProxy.AppHost.Tests/PlaygroundApp/Pages/EventsPageTests.cs

@@ -0,0 +1,69 @@
+using System.Net;
+
+using AzureOpenAIProxy.AppHost.Tests.Fixtures;
+
+using FluentAssertions;
+
+namespace AzureOpenAIProxy.AppHost.Tests.PlaygroundApp.Pages;
+
+public class EventsPageTests(AspireAppHostFixture host) : IClassFixture<AspireAppHostFixture>
+{
+    [Fact]
+    public async Task Given_Resource_When_Invoked_Endpoint_Then_It_Should_Return_OK()
+    {
+        // Arrange
+        using var httpClient = host.App!.CreateHttpClient("playgroundapp");
+        await host.ResourceNotificationService.WaitForResourceAsync("playgroundapp", KnownResourceStates.Running).WaitAsync(TimeSpan.FromSeconds(30));
+
+        // Act
+        var response = await httpClient.GetAsync("/events");
+
+        // Assert
+        response.StatusCode.Should().Be(HttpStatusCode.OK);
+    }
+
+    [Theory]
+    [InlineData("_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css")]
+    public async Task Given_Resource_When_Invoked_Endpoint_Then_It_Should_Return_CSS_Elements(string expected)
+    {
+        // Arrange
+        using var httpClient = host.App!.CreateHttpClient("playgroundapp");
+        await host.ResourceNotificationService.WaitForResourceAsync("playgroundapp", KnownResourceStates.Running).WaitAsync(TimeSpan.FromSeconds(30));
+
+        // Act
+        var html = await httpClient.GetStringAsync("/events");
+
+        // Assert
+        html.Should().Contain(expected);
+    }
+
+    [Theory]
+    [InlineData("_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lib.module.js")]
+    public async Task Given_Resource_When_Invoked_Endpoint_Then_It_Should_Return_JavaScript_Elements(string expected)
+    {
+        // Arrange
+        using var httpClient = host.App!.CreateHttpClient("playgroundapp");
+        await host.ResourceNotificationService.WaitForResourceAsync("playgroundapp", KnownResourceStates.Running).WaitAsync(TimeSpan.FromSeconds(30));
+
+        // Act
+        var html = await httpClient.GetStringAsync("/events");
+
+        // Assert
+        html.Should().Contain(expected);
+    }
+
+    [Theory]
+    [InlineData("<div class=\"fluent-tooltip-provider\"></div>")]
+    public async Task Given_Resource_When_Invoked_Endpoint_Then_It_Should_Return_HTML_Elements(string expected)
+    {
+        // Arrange
+        using var httpClient = host.App!.CreateHttpClient("playgroundapp");
+        await host.ResourceNotificationService.WaitForResourceAsync("playgroundapp", KnownResourceStates.Running).WaitAsync(TimeSpan.FromSeconds(30));
+
+        // Act
+        var html = await httpClient.GetStringAsync("/events");
+
+        // Assert
+        html.Should().Contain(expected);
+    }
+}

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

@@ -0,0 +1,54 @@
+using FluentAssertions;
+
+using Microsoft.Playwright;
+using Microsoft.Playwright.NUnit;
+
+namespace AzureOpenAIProxy.PlaygroundApp.Tests.Pages;
+
+[Parallelizable(ParallelScope.Self)]
+[TestFixture]
+[Property("Category", "Integration")]
+public class EventsPageTests : PageTest
+{
+    public override BrowserNewContextOptions ContextOptions() => new()
+    {
+        IgnoreHTTPSErrors = true,
+    };
+
+    [SetUp]
+    public async Task Init()
+    {
+        await Page.GotoAsync("https://localhost:5001/events");
+        await Page.WaitForLoadStateAsync(LoadState.NetworkIdle);
+    }
+
+    // Grid check
+    [Test]
+    public async Task Given_Events_Page_When_Navigated_Then_It_Should_Have_EventListComponent()
+    {
+        // Act
+        var eventListComponent = await Page.QuerySelectorAsync("#event-list");
+
+        // Assert
+        eventListComponent.Should().NotBeNull();
+    }
+
+    [Test]
+    public async Task Given_Events_When_Loaded_Then_It_Should_Have_Less_Than_Or_Equal_To_Four_EventItemComponents()
+    {
+        // Act
+        var availableEvents = await Page.QuerySelectorAsync("#event-list");
+
+        var childrenCount = await availableEvents.EvaluateAsync<int>("elist => elist.children.length");
+
+        // Assert
+        Assert.That(childrenCount, Is.GreaterThan(0));
+        Assert.That(childrenCount, Is.LessThanOrEqualTo(4));
+    }
+
+    [TearDown]
+    public async Task CleanUp()
+    {
+        await Page.CloseAsync();
+    }
+}