-
Notifications
You must be signed in to change notification settings - Fork 8
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
E2E/Acceptance test infrastructure for Nimble Blazor (#1248)
# Pull Request ## 🤨 Rationale #705 (partially addresses - that issue covers both hover/focus testing and Blazor e2e tests currently) This PR adds a new test project for Nimble Blazor end-to-end / acceptance tests. These use Playwright to start up a Chromium browser instance, connect to a local Blazor Server app with pages using Nimble Blazor components, and interact with them. ## 👩💻 Implementation Add new project `NimbleBlazor.Tests.Acceptance` to `NimbleBlazor.sln` (depends on `NimbleBlazor`) (xUnit-based) - Fixture class `BlazorServerWebHostFixture` spins up a local web server to host a Blazor Server app. - This app uses the `all-components-bundle` JS like the other Nimble Blazor example apps - Razor components for the tests are defined in the Pages\ subfolder - Fixture class `PlaywrightFixture` handles spinning up a Chromium browser instance to run tests targeting the local Blazor server (uses Microsoft.Playwright NuGet package) - Release builds run Chromium headless. Debug builds currently run headed w/ slow-mo mode to make debugging easier. - `Tests\AcceptanceTestsBase` (base class for test classes) has logic to load a new page with Playwright, navigate to the right URL, etc This PR includes 3 tests: - nimble-dialog opening & closing (`DialogTests.cs, Dialog_CanOpenAndCloseAsync()`, uses `DialogOpenAndClose.razor`) - nimble-drawer opening & closing (`DrawerTests.cs, Dialog_CanOpenAndCloseAsync()`, uses `DrawerOpenAndClose.razor`) - nimble-table binding to data (`TableTests.cs, Table_RendersBoundDataAsync()`, uses `TableBindToData.razor`). For future new tests, we should probably aim to exercise the rest of the code in `NimbleBlazor.lib.module.js`. Dialog/Drawer/Table were chosen to start with since they each call custom JS methods in that file (that only had manual test coverage). Currently each test loads distinct pages / Razor components. Once we have more tests, it may make sense for some of them to load the same Razor components if they're testing the same control. Writing Playwright test code to test Nimble controls is fairly straightforward, but there's a few quirks. Reading the [SLE E2E Getting Started with Playwright Tests](https://dev.azure.com/ni/DevCentral/_git/Skyline?path=/End2EndTests/Getting%20Started%20with%20Playwright%20Tests.md&_a=preview) doc is a good starting point. ## 🧪 Testing - Ran new tests locally (in Visual Studio and with `npm run test`) - Ensured new tests are running as part of the existing `npm run test` command for Nimble Blazor for the GitHub Actions / CI build. - i.e. see npm run test output from build log [here](https://github.com/ni/nimble/actions/runs/4986254518/jobs/8926790926?pr=1248) ``` Test run for /home/runner/work/nimble/nimble/packages/nimble-blazor/Tests/NimbleBlazor.Tests.Acceptance/bin/Release/net6.0/NimbleBlazor.Tests.Acceptance.dll (.NETCoreApp,Version=v6.0) Microsoft (R) Test Execution Command Line Tool Version 17.5.0 (x64) Copyright (c) Microsoft Corporation. All rights reserved. Starting test execution, please wait... A total of 1 test files matched the specified pattern. Passed! - Failed: 0, Passed: 3, Skipped: 0, Total: 3, Duration: 1 s - NimbleBlazor.Tests.Acceptance.dll (net6.0) ``` ## ✅ Checklist - [x] I have updated the project documentation to reflect my changes or determined no changes are needed.
- Loading branch information
Showing
35 changed files
with
729 additions
and
3 deletions.
There are no files selected for viewing
7 changes: 7 additions & 0 deletions
7
change/@ni-nimble-blazor-0f03cea0-79ac-44ba-983f-26623b2691f9.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| { | ||
| "type": "none", | ||
| "comment": "Acceptance/e2e tests for Nimble Blazor using Playwright (first pass)", | ||
| "packageName": "@ni/nimble-blazor", | ||
| "email": "20709258+msmithNI@users.noreply.github.com", | ||
| "dependentChangeType": "none" | ||
| } |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
12 changes: 12 additions & 0 deletions
12
packages/nimble-blazor/Tests/NimbleBlazor.Tests.Acceptance/App.razor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| <Router AppAssembly="@typeof(App).Assembly"> | ||
| <Found Context="routeData"> | ||
| <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" /> | ||
| <FocusOnNavigate RouteData="@routeData" Selector="h1" /> | ||
| </Found> | ||
| <NotFound> | ||
| <PageTitle>Not found</PageTitle> | ||
| <LayoutView Layout="@typeof(MainLayout)"> | ||
| <p role="alert">Sorry, there's nothing at this address.</p> | ||
| </LayoutView> | ||
| </NotFound> | ||
| </Router> |
18 changes: 18 additions & 0 deletions
18
packages/nimble-blazor/Tests/NimbleBlazor.Tests.Acceptance/BlazorServerWebHostFixture.cs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| namespace NimbleBlazor.Tests.Acceptance; | ||
|
|
||
| /// <summary> | ||
| /// Test fixture which starts up a Blazor Server web server | ||
| /// </summary> | ||
| public class BlazorServerWebHostFixture : WebHostServerFixture | ||
| { | ||
| protected override IHost CreateWebHost() | ||
| { | ||
| return new HostBuilder() | ||
| .ConfigureWebHost(webHostBuilder => webHostBuilder | ||
| .UseKestrel() | ||
| .UseStartup<Startup>() | ||
| .UseStaticWebAssets() | ||
| .UseUrls("http://127.0.0.1:0")) // Pick a port dynamically | ||
| .Build(); | ||
| } | ||
| } |
42 changes: 42 additions & 0 deletions
42
...es/nimble-blazor/Tests/NimbleBlazor.Tests.Acceptance/NimbleBlazor.Tests.Acceptance.csproj
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| <Project Sdk="Microsoft.NET.Sdk.Web"> | ||
| <Import Project="$(ProjectDir)../../build/generate-playwright-version-properties/dist/Playwright.PackageVersion.props" /> | ||
|
|
||
| <PropertyGroup> | ||
| <TargetFramework>net6.0</TargetFramework> | ||
| <Nullable>enable</Nullable> | ||
| <ImplicitUsings>enable</ImplicitUsings> | ||
| <GenerateProgramFile>false</GenerateProgramFile> | ||
| </PropertyGroup> | ||
|
|
||
| <PropertyGroup Condition="'$(Configuration)|$(Platform)'=='Debug|AnyCPU'"> | ||
| <NoWarn>CA1716;LRT001;NU1701;CA1707;CS0122;CS1573;CS1591,@(RoslynTransition_DisabledRule)</NoWarn> | ||
| </PropertyGroup> | ||
|
|
||
| <PropertyGroup Condition="'$(Configuration)|$(Platform)'=='Release|AnyCPU'"> | ||
| <NoWarn>CA1716;LRT001;NU1701;CA1707;CS0122;CS1573;CS1591,@(RoslynTransition_DisabledRule)</NoWarn> | ||
| </PropertyGroup> | ||
|
|
||
| <ItemGroup> | ||
| <AdditionalFiles Include="..\..\CodeAnalysisDictionary.xml" Link="CodeAnalysisDictionary.xml" /> | ||
| </ItemGroup> | ||
|
|
||
| <ItemGroup> | ||
| <PackageReference Include="Microsoft.AspNetCore.Mvc.Testing" Version="6.0.1" /> | ||
| <PackageReference Include="Microsoft.Extensions.Configuration" Version="7.0.0" /> | ||
| <PackageReference Include="Microsoft.NET.Test.Sdk" Version="16.10.0" /> | ||
| <PackageReference Include="Microsoft.Playwright" Version="$(PkgMicrosoft_Playwright_Version)" /> | ||
| <PackageReference Include="NI.CSharp.Analyzers" Version="2.0.4" /> | ||
| <PackageReference Include="System.ComponentModel" Version="4.3.0" /> | ||
| <PackageReference Include="xunit" Version="2.4.1" /> | ||
| <PackageReference Include="xunit.extensibility.execution" Version="2.4.1" /> | ||
| <PackageReference Include="xunit.runner.visualstudio" Version="2.4.3"> | ||
| <PrivateAssets>all</PrivateAssets> | ||
| <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets> | ||
| </PackageReference> | ||
| </ItemGroup> | ||
|
|
||
| <ItemGroup> | ||
| <ProjectReference Include="..\..\NimbleBlazor\NimbleBlazor.csproj" /> | ||
| </ItemGroup> | ||
|
|
||
| </Project> |
29 changes: 29 additions & 0 deletions
29
packages/nimble-blazor/Tests/NimbleBlazor.Tests.Acceptance/Pages/DialogOpenAndClose.razor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| @page "/DialogOpenAndClose" | ||
| @namespace NimbleBlazor.Tests.Acceptance.Pages | ||
| @inherits LayoutComponentBase | ||
|
|
||
| <NimbleButton @onclick="OpenDialogAsync">Open</NimbleButton> | ||
|
|
||
| <NimbleDialog TCloseReason="string" @ref="_dialog"> | ||
| Example Dialog | ||
| <NimbleButton @onclick="CloseDialogAsync">Close</NimbleButton> | ||
| </NimbleDialog> | ||
|
|
||
| <NimbleTextField @bind-Value="DialogCloseReason" @ref="_textField"></NimbleTextField> | ||
|
|
||
| @code { | ||
| private NimbleDialog<string>? _dialog; | ||
| private NimbleTextField? _textField; | ||
| private string? DialogCloseReason { get; set; } | ||
|
|
||
| public async Task OpenDialogAsync() | ||
| { | ||
| var response = await _dialog!.ShowAsync(); | ||
| DialogCloseReason = response.Value; | ||
| } | ||
|
|
||
| public async Task CloseDialogAsync() | ||
| { | ||
| await _dialog!.CloseAsync("Custom Close Reason"); | ||
| } | ||
| } |
29 changes: 29 additions & 0 deletions
29
packages/nimble-blazor/Tests/NimbleBlazor.Tests.Acceptance/Pages/DrawerOpenAndClose.razor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| @page "/DrawerOpenAndClose" | ||
| @namespace NimbleBlazor.Tests.Acceptance.Pages | ||
| @inherits LayoutComponentBase | ||
|
|
||
| <NimbleButton @onclick="OpenDrawerAsync">Open</NimbleButton> | ||
|
|
||
| <NimbleDrawer TCloseReason="string" @ref="_drawer"> | ||
| Example Drawer | ||
| <NimbleButton @onclick="CloseDrawerAsync">Close</NimbleButton> | ||
| </NimbleDrawer> | ||
|
|
||
| <NimbleTextField @bind-Value="DrawerCloseReason" @ref="_textField"></NimbleTextField> | ||
|
|
||
| @code { | ||
| private NimbleDrawer<string>? _drawer; | ||
| private NimbleTextField? _textField; | ||
| private string? DrawerCloseReason { get; set; } | ||
|
|
||
| public async Task OpenDrawerAsync() | ||
| { | ||
| var response = await _drawer!.ShowAsync(); | ||
| DrawerCloseReason = response.Value; | ||
| } | ||
|
|
||
| public async Task CloseDrawerAsync() | ||
| { | ||
| await _drawer!.CloseAsync("Custom Close Reason"); | ||
| } | ||
| } |
43 changes: 43 additions & 0 deletions
43
packages/nimble-blazor/Tests/NimbleBlazor.Tests.Acceptance/Pages/TableBindToData.razor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| @page "/TableBindToData" | ||
| @namespace NimbleBlazor.Tests.Acceptance.Pages | ||
| @using System.Diagnostics.CodeAnalysis; | ||
| @inherits LayoutComponentBase | ||
|
|
||
| <NimbleTable IdFieldName="Id" @bind-Data="TableData"> | ||
| <NimbleTableColumnText FieldName="Field1" ColumnId="1">Column 1</NimbleTableColumnText> | ||
| </NimbleTable> | ||
|
|
||
| @code { | ||
| [NotNull] | ||
| public IEnumerable<RowData> TableData { get; set; } = Enumerable.Empty<RowData>(); | ||
|
|
||
| public TableBindToData() | ||
| { | ||
| UpdateTableData(5); | ||
| } | ||
|
|
||
| public void UpdateTableData(int numberOfRows) | ||
| { | ||
| var tableData = new RowData[numberOfRows]; | ||
| for (int i = 0; i < numberOfRows; i++) | ||
| { | ||
| tableData[i] = new RowData( | ||
| i.ToString(null, null), | ||
| $"A{i}"); | ||
| } | ||
|
|
||
| TableData = tableData; | ||
| } | ||
|
|
||
| public class RowData | ||
| { | ||
| public RowData(string id, string field1) | ||
| { | ||
| Id = id; | ||
| Field1 = field1; | ||
| } | ||
|
|
||
| public string Id { get; } | ||
| public string Field1 { get; } | ||
| } | ||
| } |
8 changes: 8 additions & 0 deletions
8
packages/nimble-blazor/Tests/NimbleBlazor.Tests.Acceptance/Pages/_Host.cshtml
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| @page "/" | ||
| @namespace NimbleBlazor.Tests.Acceptance.Pages | ||
| @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers | ||
| @{ | ||
| Layout = "_Layout"; | ||
| } | ||
|
|
||
| <component type="typeof(App)" render-mode="ServerPrerendered" /> |
33 changes: 33 additions & 0 deletions
33
packages/nimble-blazor/Tests/NimbleBlazor.Tests.Acceptance/Pages/_Layout.cshtml
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| @using Microsoft.AspNetCore.Components.Web | ||
| @namespace NimbleBlazor.Tests.Acceptance.Pages | ||
| @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers | ||
|
|
||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="utf-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <base href="~/" /> | ||
| <link href="css/site.css" rel="stylesheet" /> | ||
| <link href="_content/NimbleBlazor/nimble-tokens/css/fonts.css" rel="stylesheet" /> | ||
| <link href="NimbleBlazor.Tests.Acceptance.styles.css" rel="stylesheet" /> | ||
| <script src="_content/NimbleBlazor/nimble-components/all-components-bundle.min.js"></script> | ||
| <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" /> | ||
| </head> | ||
| <body> | ||
| @RenderBody() | ||
|
|
||
| <div id="blazor-error-ui"> | ||
| <environment include="Staging,Production"> | ||
| An error has occurred. This application may no longer respond until reloaded. | ||
| </environment> | ||
| <environment include="Development"> | ||
| An unhandled exception has occurred. See browser dev tools for details. | ||
| </environment> | ||
| <a href="" class="reload">Reload</a> | ||
| <a class="dismiss">🗙</a> | ||
| </div> | ||
|
|
||
| <script src="_framework/blazor.server.js"></script> | ||
| </body> | ||
| </html> |
45 changes: 45 additions & 0 deletions
45
packages/nimble-blazor/Tests/NimbleBlazor.Tests.Acceptance/PlaywrightFixture.cs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| using Microsoft.Playwright; | ||
| using Xunit; | ||
| using PlaywrightProgram = Microsoft.Playwright.Program; | ||
|
|
||
| namespace NimbleBlazor.Tests.Acceptance; | ||
|
|
||
| /// <summary> | ||
| /// Fixture to handle Playwright initialization for acceptance tests. | ||
| /// </summary> | ||
| public class PlaywrightFixture : IAsyncLifetime | ||
| { | ||
| private IBrowser? _browser; | ||
| private IPlaywright? _playwright; | ||
| public IBrowserContext? BrowserContext { get; private set; } | ||
|
|
||
| public async Task InitializeAsync() | ||
| { | ||
| _playwright = await Playwright.CreateAsync(); | ||
| _browser = await _playwright.Chromium.LaunchAsync( | ||
| new BrowserTypeLaunchOptions() | ||
| { | ||
| #if DEBUG | ||
| Headless = false, | ||
| SlowMo = 1000 | ||
| #endif | ||
| }); | ||
| BrowserContext = await _browser.NewContextAsync(new BrowserNewContextOptions { IgnoreHTTPSErrors = true }); | ||
| #if DEBUG | ||
| BrowserContext.SetDefaultTimeout(30000); | ||
| #endif | ||
| } | ||
|
|
||
| public async Task DisposeAsync() | ||
| { | ||
| if (BrowserContext != null) | ||
| { | ||
| await BrowserContext.DisposeAsync(); | ||
| } | ||
| if (_browser != null) | ||
| { | ||
| await _browser.DisposeAsync(); | ||
| } | ||
| _playwright?.Dispose(); | ||
| } | ||
| } |
Oops, something went wrong.