Skip to content

Commit bbdeeb1

Browse files
Capella87Capella87
authored
[Playground] Add Events components (aliencube#311)
* Implement EventItemComponent * Implement EventListComponent * Add EventList page * Fix flex align problem and replace nested div to FluentCard * Add CSS configurations on EventItemComponent * Adjust padding of EventListComponent * Add comment on EventList page * Rename EventList to Events * Integrate model, Add Id, Alignments * Add progress ring during loading in EventListComponent * Use parameter Id to FluentGrid's Id * Implement test methods for Event components * Show a message when there are no events user joined * Adjust EventItemComponent padding * Add tests for Events page in AppHost testing project * Revert launchSettings.json * Remove redundant references, Make properties nullable * Remove SetParametersAsync at EventItemComponent * Re-order methods by access modifiers priority * Revert launchSettings.json with the final new line * Add async to NavigateToEventDetails * Sort entities in code behind by common .NET coding convention * Rename events-list to event-list * Refactor no-events card with FluentCard * Replace event title element to FluentLabel * Implement event link with FluentNavLink * Relocate OnInitializedAsync * Remove progress ring * Make color follow Fluent UI neutral layer color * Add id attributes on sub-elements in event cards * Rename _events to events, Add getting up to 4 events prior to the showing loop * Remove redundant null initialization in EventListComponent * Integrate linq code to foreach * Integrate no-events item to EventItemComponent and adjust breakpoints * Remove breakpoint parameter, update grid's justification to center * Adjust breakpoint for desktop size * Fix FluentCard's class name * Add new tests dedicated to EventItemComponent * Update grid's justify to FlexStart * Remove EventListComponent Id * Add HasNoEvent parameter for EventItemComponent * Move grid's style code to a dedicated CSS file * Restore EventListComponent's Id parameter and change its parameter name value * Separate CSS code for EventItemComponent to its own CSS file * Refactor EventsPageTests for CSS isolation work * Prune redundant CSS configurations * Integrate more CSS properties * Add title in Events component page * Adjust margin properties to prevent hiding the focus square
1 parent e702672 commit bbdeeb1

File tree

7 files changed

+343
-0
lines changed

7 files changed

+343
-0
lines changed

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

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
@page "/events"
2+
3+
<PageTitle>Events</PageTitle>
4+
5+
<h1>Your Events</h1>
6+
7+
<p>This component demonstrates showing up to 4 events that user joined.</p>
8+
9+
<EventListComponent Id="user-event-list" @rendermode="InteractiveServer" />
10+
11+
@code {
12+
}

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

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
@if (HasNoEvent)
2+
{
3+
<FluentGridItem Class="event-list-item" Id="@Id" xs="12" lg="12" xxl="12" Justify="JustifyContent.Center" Style="text-align: center;">
4+
<div class="event-item-flex-wrapper">
5+
<FluentCard Class="no-event" MinimalStyle="true">
6+
<FluentLabel Typo="Typography.Header">You don’t have any events you have participated in now.</FluentLabel>
7+
</FluentCard>
8+
</div>
9+
</FluentGridItem>
10+
}
11+
else
12+
{
13+
<FluentGridItem Class="event-list-item" Id="@Id" xs="12" lg="6" xxl="3" Justify="JustifyContent.Center" Style="text-align: center;">
14+
<div class="event-item-flex-wrapper">
15+
<FluentCard Class="event" MinimalStyle="true">
16+
<FluentNavLink Class="event-details-link" Href="@($"/events/{Id}")" >
17+
<FluentLabel Class="event-title" Typo="Typography.PaneHeader" Style="margin-block: 0.5em;">
18+
@Title
19+
</FluentLabel>
20+
</FluentNavLink>
21+
<div class="event-summary card border">
22+
<div class="card-body">
23+
<h5>@Summary</h5>
24+
</div>
25+
</div>
26+
</FluentCard>
27+
</div>
28+
</FluentGridItem>
29+
}
30+
31+
32+
33+
34+
35+
@code {
36+
[Parameter]
37+
public string? Id { get; set; }
38+
39+
[Parameter]
40+
public string? Title { get; set; }
41+
42+
[Parameter]
43+
public string? Summary { get; set; }
44+
45+
[Parameter]
46+
public bool HasNoEvent { get; set; }
47+
}

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

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
::deep .event {
2+
display: flex;
3+
padding: 0em;
4+
flex-direction: column;
5+
align-items: normal;
6+
align-content: center;
7+
justify-content: center;
8+
}
9+
10+
::deep .no-event {
11+
display: flex;
12+
padding: 0em;
13+
flex-direction: row;
14+
align-items: center;
15+
align-content: center;
16+
justify-content: center;
17+
background-color: transparent;
18+
box-shadow: none !important;
19+
border: hidden;
20+
}
21+
22+
::deep .event-details-link {
23+
flex-grow: 0;
24+
align-self: center;
25+
margin-block: 0.3em;
26+
}
27+
28+
div.event-summary.card.border {
29+
background-color: var(--neutral-layer-2);
30+
padding: 1em;
31+
padding-inline: 1.5em;
32+
flex-grow: 1;
33+
}
34+
35+
div.event-item-flex-wrapper {
36+
flex-grow: 1;
37+
}

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

+78
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
@using AzureOpenAIProxy.PlaygroundApp.Models;
2+
3+
<!-- Source: https://khalidabuhakmeh.com/blazors-css-isolation-deep-issue-and-solution -->
4+
<div>
5+
<FluentGrid AdaptiveRendering="true"
6+
Id="@Id"
7+
Spacing="3"
8+
Justify="JustifyContent.FlexStart"
9+
Class="event-list">
10+
@if (events == null || events.Any() == false)
11+
{
12+
<EventItemComponent Id="no-event-item" HasNoEvent="true"></EventItemComponent>
13+
}
14+
else
15+
{
16+
// Shows up to 4 events that the user currently joined.
17+
@foreach (var e in events.Take(4))
18+
{
19+
<EventItemComponent Id="@e.EventId.ToString()"
20+
Title="@e.Title"
21+
Summary="@e.Summary">
22+
</EventItemComponent>
23+
}
24+
}
25+
</FluentGrid>
26+
</div>
27+
28+
@code {
29+
private List<EventDetails>? events;
30+
31+
[Parameter]
32+
public string? Id { get; set; }
33+
34+
protected override async Task OnInitializedAsync()
35+
{
36+
// TODO: Fetch events from the API server.
37+
events = await CreateEventDetailsAsync();
38+
}
39+
40+
private async Task<List<EventDetails>> CreateEventDetailsAsync()
41+
{
42+
return await Task.FromResult(new List<EventDetails>
43+
{
44+
new EventDetails
45+
{
46+
EventId = Guid.NewGuid(),
47+
Title = "Event 1",
48+
Summary = "Summary 1",
49+
MaxTokenCap = 1000,
50+
DailyRequestCap = 100
51+
},
52+
new EventDetails
53+
{
54+
EventId = Guid.NewGuid(),
55+
Title = "Event 2",
56+
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.",
57+
MaxTokenCap = 2000,
58+
DailyRequestCap = 200,
59+
},
60+
new EventDetails
61+
{
62+
EventId = Guid.NewGuid(),
63+
Title = "Event 3",
64+
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.",
65+
MaxTokenCap = 3000,
66+
DailyRequestCap = 300,
67+
},
68+
new EventDetails
69+
{
70+
EventId = Guid.NewGuid(),
71+
Title = "Event 4",
72+
Summary = "Summary 4",
73+
MaxTokenCap = 3000,
74+
DailyRequestCap = 300,
75+
}
76+
});
77+
}
78+
}

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

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
::deep .event-list {
2+
background-color: var(--neutral-layer-4);
3+
padding-block: 2.0em;
4+
padding-inline: 1.5em;
5+
margin-top: 1rem;
6+
border-radius: 8px;
7+
}

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

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
using System.Net;
2+
3+
using AzureOpenAIProxy.AppHost.Tests.Fixtures;
4+
5+
using FluentAssertions;
6+
7+
namespace AzureOpenAIProxy.AppHost.Tests.PlaygroundApp.Pages;
8+
9+
public class EventsPageTests(AspireAppHostFixture host) : IClassFixture<AspireAppHostFixture>
10+
{
11+
[Fact]
12+
public async Task Given_Resource_When_Invoked_Endpoint_Then_It_Should_Return_OK()
13+
{
14+
// Arrange
15+
using var httpClient = host.App!.CreateHttpClient("playgroundapp");
16+
await host.ResourceNotificationService.WaitForResourceAsync("playgroundapp", KnownResourceStates.Running).WaitAsync(TimeSpan.FromSeconds(30));
17+
18+
// Act
19+
var response = await httpClient.GetAsync("/events");
20+
21+
// Assert
22+
response.StatusCode.Should().Be(HttpStatusCode.OK);
23+
}
24+
25+
[Theory]
26+
[InlineData("_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css")]
27+
public async Task Given_Resource_When_Invoked_Endpoint_Then_It_Should_Return_CSS_Elements(string expected)
28+
{
29+
// Arrange
30+
using var httpClient = host.App!.CreateHttpClient("playgroundapp");
31+
await host.ResourceNotificationService.WaitForResourceAsync("playgroundapp", KnownResourceStates.Running).WaitAsync(TimeSpan.FromSeconds(30));
32+
33+
// Act
34+
var html = await httpClient.GetStringAsync("/events");
35+
36+
// Assert
37+
html.Should().Contain(expected);
38+
}
39+
40+
[Theory]
41+
[InlineData("_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lib.module.js")]
42+
public async Task Given_Resource_When_Invoked_Endpoint_Then_It_Should_Return_JavaScript_Elements(string expected)
43+
{
44+
// Arrange
45+
using var httpClient = host.App!.CreateHttpClient("playgroundapp");
46+
await host.ResourceNotificationService.WaitForResourceAsync("playgroundapp", KnownResourceStates.Running).WaitAsync(TimeSpan.FromSeconds(30));
47+
48+
// Act
49+
var html = await httpClient.GetStringAsync("/events");
50+
51+
// Assert
52+
html.Should().Contain(expected);
53+
}
54+
55+
[Theory]
56+
[InlineData("<div class=\"fluent-tooltip-provider\"></div>")]
57+
public async Task Given_Resource_When_Invoked_Endpoint_Then_It_Should_Return_HTML_Elements(string expected)
58+
{
59+
// Arrange
60+
using var httpClient = host.App!.CreateHttpClient("playgroundapp");
61+
await host.ResourceNotificationService.WaitForResourceAsync("playgroundapp", KnownResourceStates.Running).WaitAsync(TimeSpan.FromSeconds(30));
62+
63+
// Act
64+
var html = await httpClient.GetStringAsync("/events");
65+
66+
// Assert
67+
html.Should().Contain(expected);
68+
}
69+
}

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

+93
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
using FluentAssertions;
2+
3+
using Microsoft.Playwright;
4+
using Microsoft.Playwright.NUnit;
5+
6+
namespace AzureOpenAIProxy.PlaygroundApp.Tests.Pages;
7+
8+
[Parallelizable(ParallelScope.Self)]
9+
[TestFixture]
10+
[Property("Category", "Integration")]
11+
public class EventsPageTests : PageTest
12+
{
13+
public override BrowserNewContextOptions ContextOptions() => new()
14+
{
15+
IgnoreHTTPSErrors = true,
16+
};
17+
18+
[SetUp]
19+
public async Task Init()
20+
{
21+
await Page.GotoAsync("https://localhost:5001/events");
22+
await Page.WaitForLoadStateAsync(LoadState.NetworkIdle);
23+
}
24+
25+
// Grid check
26+
[Test]
27+
public async Task Given_Events_Page_When_Navigated_Then_It_Should_Have_EventListComponent()
28+
{
29+
// Act
30+
var eventListComponent = Page.Locator("div.event-list").First;
31+
32+
// Assert
33+
await Expect(eventListComponent).ToBeVisibleAsync();
34+
}
35+
36+
[Test]
37+
public async Task Given_Events_When_Loaded_Then_It_Should_Have_Less_Than_Or_Equal_To_Four_EventItemComponents()
38+
{
39+
// Arrange
40+
var eventList = Page.Locator("#user-event-list");
41+
var listEvents = await eventList.Locator("div.event-list-item").AllAsync();
42+
43+
// Act
44+
var childrenCount = listEvents.Count;
45+
46+
// Assert
47+
Assert.That(childrenCount, Is.GreaterThan(0));
48+
Assert.That(childrenCount, Is.LessThanOrEqualTo(4));
49+
}
50+
51+
[Test]
52+
public async Task Given_Events_When_Loaded_Then_It_Should_Have_Header_And_Summary_In_The_Card()
53+
{
54+
// Act
55+
var eventCards = await Page.Locator("div.fluent-card-minimal-style.event").AllAsync();
56+
57+
// Assert
58+
foreach (var card in eventCards)
59+
{
60+
card.Should().NotBeNull();
61+
// Check headers
62+
var header = card.Locator("div.fluent-nav-item.event-details-link").First;
63+
await Expect(header).ToBeVisibleAsync();
64+
65+
// Check summaries
66+
var summary = card.Locator("div.event-summary.card.border").First;
67+
await Expect(summary).ToBeVisibleAsync();
68+
}
69+
}
70+
71+
[Test]
72+
public async Task Given_Events_When_Loaded_Then_Their_Links_Are_Enabled_To_Click()
73+
{
74+
// Act
75+
var eventCards = await Page.Locator("div.fluent-card-minimal-style.event").AllAsync();
76+
77+
// Assert
78+
foreach (var card in eventCards)
79+
{
80+
// Getting a link element.
81+
var link = card.Locator("div.fluent-nav-item.event-details-link").First
82+
.Locator("a.fluent-nav-link").First;
83+
84+
await Expect(link).ToBeEnabledAsync();
85+
}
86+
}
87+
88+
[TearDown]
89+
public async Task CleanUp()
90+
{
91+
await Page.CloseAsync();
92+
}
93+
}

0 commit comments

Comments
 (0)