Wiki source code of Test the accessibility of a Vue component
Last modified by Manuel Leduc on 2026/03/25 15:39
Show last authors
| author | version | line-number | content |
|---|---|---|---|
| 1 | 1. Add a dependency to vitest {{code language="bash"}}pnpm add -D vitest{{/code}} | ||
| 2 | 1. Add a dependency to ##@xwiki/platform-test-accessibility## {{code language="bash"}}pnpm add -D @xwiki/platform-test-accessibility{{/code}} | ||
| 3 | 1. Import the Vue component {{code language="typescript"}}import MyComponent from "../MyComponent.vue"{{/code}} | ||
| 4 | 1. Define a mount helper for the test suite using [[##mountHelper##>>doc:documentation.xs.dev.front-end.test.accessibility-api.WebHome||anchor="HmountHelper"]] {{code language="typescript"}}const accessibilyMount = mountHelper(MyComponent);{{/code}} | ||
| 5 | 1. Define the test suite((( | ||
| 6 | {{code language="typescript"}} | ||
| 7 | import MyComponent from "../MyComponent.vue"; | ||
| 8 | import { mountHelper, runTest } from "@xwiki/platform-test-accessibility"; | ||
| 9 | import { describe } from "vitest"; | ||
| 10 | |||
| 11 | const accessibilyMount = mountHelper(MyComponent); | ||
| 12 | |||
| 13 | describe("Test suite description", () => { | ||
| 14 | runTest("test description", accessibilyMount(), () => { | ||
| 15 | // Assertions .... | ||
| 16 | // After this step, an axe-core validation is performed on the tested component. | ||
| 17 | // Is is possible to call assertAxe during the test to assert the accessibility during intermediate states of the component | ||
| 18 | }); | ||
| 19 | }); | ||
| 20 | {{/code}} | ||
| 21 | ))) |
