tests: Add <live-region> placement tests
#15
Conversation
There was a problem hiding this comment.
Pull Request Overview
This PR adds new end-to-end tests to verify that the is correctly placed in the DOM when used with dialog elements and, by default, within the body. It also organizes existing Guidepup tests under a dedicated folder and updates npm run tasks accordingly.
- Introduces a new Web Test Runner configuration to dynamically include the ariaNotify-polyfill and run tests.
- Adds three new test files to check the proper placement of the element in different DOM contexts.
- Moves Guidepup tests and renames the associated task.
Reviewed Changes
Copilot reviewed 11 out of 12 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| web-test-runner.config.js | Configures polyfill injection and test runner setup. |
| tests/web-test-runner/live-region-placement-dialog.test.html | Provides a test case for a element scenario. |
| tests/web-test-runner/live-region-placement-dialog-role.test.html | Provides a test case for a role="dialog" scenario. |
| tests/web-test-runner/live-region-placement-body.test.html | Provides a test case for a default placement within . |
| tests/web-test-runner/ariaNotify-polyfill.test.js | Contains tests to validate the live-region placement behavior. |
| tests/web-test-runner/ariaNotify-polyfill.js | Contains a reference to the polyfill file. |
Files not reviewed (1)
- package.json: Language not supported
| let count = 0; | ||
| for (const container of document.querySelectorAll("[data-should-contain-live-region]")) { | ||
| container.ariaNotify("Hello, world!"); | ||
| const liveRegion = Array.from(container.childNodes).find((node) => node.nodeType === Node.ELEMENT_NODE && node.tagName.match(/^live-region/i)); |
There was a problem hiding this comment.
Something simpler, like liveRegion = container.querySelector("live-region"), wouldn’t work here, because the custom element’s tagName is appended with a random string (to prevent web authors from depending on its behavior, since it won’t exist in native ariaNotify implementations).
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
| expect(liveRegion).to.not.be.undefined; | ||
| count++; | ||
| } | ||
| expect(count).to.be.above(0); |
There was a problem hiding this comment.
Cool assertion! .to.be.above
| @@ -0,0 +1,20 @@ | |||
| name: Test | |||
Fixes #14
This PR:
tests/guidepupand renames the associated npm run task totest:guidepup.tests/web-test-runnerand an associated npm run task:test. These tests have about 88% coverage ofariaNotify-polyfill. They ensure the<live-region>custom element is placed inside<dialog>or[role="dialog"]elements (and<body>otherwise).I’ve tested this locally:
Note
The publish workflow calls
npm test, which was previously a no-op, since Guidepup required NVDA or VoiceOver, which are not installed on Linux Actions runners. Now,npm testruns Web Test Runner tests, so this we’ll have extra confidence in future publishes!