Set up Blazor end-to-end tests #705
Comments
|
@m-akinc can we make a separate issue to track the testing we need for the dialog when this issue to set-up infrastructure is addressed? |
|
@atmgrifter00 can you update this tech debt item with any info/links/lessons learned from when you investigated it in your CI week? |
|
I got as far as creating a branch that has the Playwright infrastructure set up for Blazor, with a dummy test. However, at the moment, the |
# 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.
|
Renamed from "Set up end-to-end tests" to focus specifically on Blazor, which is now done (other than the follow up items tracked in separate issues). That's complete so I'll close the issue. We've talked about adding similar Playwright infrastructure for nimble-components but don't have a specific prioritized use case in mind yet so we'll leave that untracked for now. |
🧹 Tech Debt
We should have infrastructure (presumably Playwright) for running e2e tests in order to fill testing gaps that are difficult to test via unit tests and Chromatic. This came up in the context of writing unit tests for the Nimble dialog's Blazor integration. The Blazor implementation of the dialog calls js using the JSRuntime, but BUnit tests don't support that. This made it impossible to test that part of the Blazor implementation.
Tasks
NimbleBlazor.lib.module.jsand other functionality not covered by unit tests: Blazor playwright tests to cover custom JS behavior #1804The text was updated successfully, but these errors were encountered: