Skip to content

Commit 0192ecf

Browse files
jlp-craigmortenjlp-craigmorten
authored
feat: build tweaks to support legacy TS setups (#80)
1 parent f9962a0 commit 0192ecf

40 files changed

+11109
-163
lines changed

‎examples/README.md‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,15 @@ This directory contains a series of self-contained examples that you can use as
44
starting points for your setup, or as snippets to pull into your existing
55
projects:
66

7-
| Example | Description |
8-
| ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------- |
9-
| [Cypress](./cypress) | A basic example combining [Cypress](https://www.cypress.io/) and Virtual Screen Reader. |
10-
| [Puppeteer](./puppeteer) | A basic example combining [Puppeteer](https://pptr.dev/) and Virtual Screen Reader. |
11-
| [Playwright](./playwright) | A basic example combining [Playwright](https://playwright.dev) and Virtual Screen Reader. |
12-
| [Storybook](./storybook) | A basic example combining [Storybook](https://storybook.js.org/) and Virtual Screen Reader. |
13-
| [Vue](./vue) | A basic example combining Vue, Vitest, Vue Testing Library, and Virtual Screen Reader. |
14-
| [Web Test Runner](./web-test-runner) | A basic example combining [Web Test Runner](https://modern-web.dev/docs/test-runner/overview/) and Virtual Screen Reader. |
7+
| Example | Description |
8+
| -------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- |
9+
| [CommonJS](./commonjs) | A basic example using the Virtual Screen Reader in a CommonJS application. |
10+
| [Cypress](./cypress) | A basic example combining [Cypress](https://www.cypress.io/) and Virtual Screen Reader. |
11+
| [Puppeteer](./puppeteer) | A basic example combining [Puppeteer](https://pptr.dev/) and Virtual Screen Reader. |
12+
| [Playwright](./playwright) | A basic example combining [Playwright](https://playwright.dev) and Virtual Screen Reader. |
13+
| [Storybook](./storybook) | A basic example combining [Storybook](https://storybook.js.org/) and Virtual Screen Reader. |
14+
| [TypeScript Bundler](./typescript-bundler) | A basic example where Virtual Screen Reader is used for an application using a bundler. |
15+
| [TypeScript Legacy](./typescript-legacy) | A basic example where Virtual Screen Reader is used for a legacy TypeScript CommonJS application. |
16+
| [TypeScript NodeNext](./typescript-nodenext) | A basic example where Virtual Screen Reader is used for a Node.js application or library. |
17+
| [Vue](./vue) | A basic example combining Vue, Vitest, Vue Testing Library, and Virtual Screen Reader. |
18+
| [Web Test Runner](./web-test-runner) | A basic example combining [Web Test Runner](https://modern-web.dev/docs/test-runner/overview/) and Virtual Screen Reader. |

‎examples/commonjs/README.md‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
# CommonJS Example
2+
3+
A basic example using the Virtual Screen Reader in a CommonJS application.
4+
5+
Run this example with:
6+
7+
```bash
8+
# Install and build core package
9+
yarn install --frozen-lockfile
10+
11+
# Navigate to example, install, and test
12+
cd examples/commonjs
13+
yarn install --frozen-lockfile
14+
yarn test
15+
```
16+
17+
> [!IMPORTANT]
18+
> This example serves to demonstrate how you can use the Virtual Screen Reader. The components themselves may not be using best accessibility practices.
19+
>
20+
> Always evaluate your own components for accessibility and test with real users.

‎examples/commonjs/jest.config.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
// eslint-disable-next-line no-undef
2+
module.exports = {
3+
testEnvironment: "jsdom",
4+
roots: ["src"],
5+
collectCoverageFrom: ["**/*.js"],
6+
coveragePathIgnorePatterns: [],
7+
coverageThreshold: {
8+
global: {
9+
branches: 100,
10+
functions: 100,
11+
lines: 100,
12+
statements: 100,
13+
},
14+
},
15+
setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
16+
};

‎examples/commonjs/jest.setup.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
jest.setTimeout(10000);

‎examples/commonjs/package.json‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"name": "@guidepup/virtual-screen-reader-commonjs-example",
3+
"version": "1.0.0",
4+
"author": "Craig Morten <[email protected]>",
5+
"license": "MIT",
6+
"private": true,
7+
"scripts": {
8+
"preinstall": "yarn --cwd=../.. build",
9+
"test": "jest"
10+
},
11+
"devDependencies": {
12+
"jest": "^29.7.0",
13+
"jest-environment-jsdom": "^29.7.0"
14+
}
15+
}

‎examples/commonjs/src/__snapshots__/vsr.test.js.snap‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`matchers virtual screen reader tests navigating headings 1`] = `
4+
[
5+
"document",
6+
"heading, First Section Heading, level 1",
7+
"heading, Article Header Heading, level 1",
8+
"heading, Second Section Heading, level 1",
9+
"heading, First Section Heading, level 1",
10+
]
11+
`;

‎examples/commonjs/src/vsr.test.js‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
const { virtual } = require("../../../lib/cjs/index.js");
2+
// In your code, replace with:
3+
// const { virtual } = require("@guidepup/virtual-screen-reader");
4+
5+
function setupBasicPage() {
6+
document.body.innerHTML = `
7+
<nav>Nav Text</nav>
8+
<section>
9+
<h1>First Section Heading</h1>
10+
<p>First Section Text</p>
11+
<article>
12+
<header>
13+
<h1>Article Header Heading</h1>
14+
<p>Article Header Text</p>
15+
</header>
16+
<p>Article Text</p>
17+
</article>
18+
</section>
19+
<section>
20+
<h1>Second Section Heading</h1>
21+
<p>Second Section Text</p>
22+
</section>
23+
<section aria-hidden="true">
24+
<h1>Hidden Section Heading</h1>
25+
<p>Hidden Section Text</p>
26+
</section>
27+
<footer>Footer</footer>
28+
`;
29+
}
30+
31+
describe("matchers", () => {
32+
beforeEach(() => {
33+
setupBasicPage();
34+
});
35+
36+
afterEach(() => {
37+
document.body.innerHTML = ``;
38+
});
39+
40+
describe("virtual screen reader tests", () => {
41+
test("navigating headings", async () => {
42+
await virtual.start({ container: document.body });
43+
44+
await virtual.perform(virtual.commands.moveToNextHeading);
45+
const firstHeadingPhrase = await virtual.lastSpokenPhrase();
46+
47+
do {
48+
await virtual.perform(virtual.commands.moveToNextHeading);
49+
} while ((await virtual.lastSpokenPhrase()) !== firstHeadingPhrase);
50+
51+
expect(await virtual.spokenPhraseLog()).toMatchSnapshot();
52+
53+
await virtual.stop();
54+
});
55+
});
56+
});

0 commit comments

Comments
 (0)