Skip to content

Commit 20309e8

Browse files
jlp-craigmortenjlp-craigmorten
authored
fix: export usage in different environments (#4)
1 parent fa4eb45 commit 20309e8

File tree

18 files changed

+3885
-522
lines changed

18 files changed

+3885
-522
lines changed

‎.github/workflows/test.yml‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,11 @@ jobs:
1616
node-version: 18
1717
- run: yarn install --frozen-lockfile
1818
- run: yarn ci
19+
# TypeScript Example
20+
- run: yarn install --frozen-lockfile
21+
working-directory: ./examples/typescript
22+
- run: yarn test
23+
working-directory: ./examples/typescript
1924

2025
test-node-20:
2126
runs-on: ubuntu-latest
@@ -26,3 +31,8 @@ jobs:
2631
node-version: 20
2732
- run: yarn install --frozen-lockfile
2833
- run: yarn ci
34+
# TypeScript Example
35+
- run: yarn install --frozen-lockfile
36+
working-directory: ./examples/typescript
37+
- run: yarn test
38+
working-directory: ./examples/typescript

‎examples/README.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# Examples
2+
3+
This directory contains a series of self-contained examples that you can use as
4+
starting points for your setup, or as snippets to pull into your existing
5+
projects:
6+
7+
| Example | Description |
8+
| -------------------------- | ------------------------------------------------------------------------- |
9+
| [TypeScript](./typescript) | A basic TypeScript example using the Virtual Screen Reader Jest Matchers. |

‎examples/typescript/README.md‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
# TypeScript Example
2+
3+
A basic TypeScript example using the Virtual Screen Reader Jest Matchers.
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/typescript
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 Jest Matchers. 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/typescript/jest.config.js‎

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

‎examples/typescript/jest.setup.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import "@guidepup/jest";
2+
3+
jest.setTimeout(10000);

‎examples/typescript/package.json‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"name": "@guidepup/jest-typescript-example",
3+
"version": "1.0.0",
4+
"description": "Virtual Screen Reader Jest Matchers TypeScript Example",
5+
"author": "Craig Morten <craig.morten@hotmail.co.uk>",
6+
"license": "MIT",
7+
"scripts": {
8+
"test": "jest",
9+
"test:coverage": "yarn test --coverage"
10+
},
11+
"devDependencies": {
12+
"@guidepup/jest": "file:../../",
13+
"@guidepup/virtual-screen-reader": "^0.25.0",
14+
"@types/jest": "^29.5.12",
15+
"@types/node": "^20.14.8",
16+
"jest": "^29.7.0",
17+
"jest-environment-jsdom": "^29.7.0",
18+
"ts-jest": "^29.1.5",
19+
"typescript": "^5.5.2"
20+
}
21+
}

‎examples/typescript/src/__snapshots__/index.test.ts.snap‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`matchers snapshot matchers handles parallel assertions: toMatchScreenReaderSnapshot 1`] = `
4+
[
5+
"region",
6+
"heading, Second Section Heading, level 1",
7+
"paragraph",
8+
"Second Section Text",
9+
"end of paragraph",
10+
"end of region",
11+
]
12+
`;
13+
14+
exports[`matchers toMatchScreenReaderSnapshot on a hidden node: toMatchScreenReaderSnapshot 1`] = `[]`;
15+
16+
exports[`matchers toMatchScreenReaderSnapshot on a null node: toMatchScreenReaderSnapshot 1`] = `[]`;
17+
18+
exports[`matchers toMatchScreenReaderSnapshot on a text node: toMatchScreenReaderSnapshot 1`] = `
19+
[
20+
"Nav Text",
21+
]
22+
`;
23+
24+
exports[`matchers toMatchScreenReaderSnapshot on an element: toMatchScreenReaderSnapshot 1`] = `
25+
[
26+
"region",
27+
"heading, Second Section Heading, level 1",
28+
"paragraph",
29+
"Second Section Text",
30+
"end of paragraph",
31+
"end of region",
32+
]
33+
`;
34+
35+
exports[`matchers toMatchScreenReaderSnapshot on the whole body: toMatchScreenReaderSnapshot 1`] = `
36+
[
37+
"document",
38+
"navigation",
39+
"Nav Text",
40+
"end of navigation",
41+
"region",
42+
"heading, First Section Heading, level 1",
43+
"paragraph",
44+
"First Section Text",
45+
"end of paragraph",
46+
"article",
47+
"banner",
48+
"heading, Article Header Heading, level 1",
49+
"paragraph",
50+
"Article Header Text",
51+
"end of paragraph",
52+
"end of banner",
53+
"paragraph",
54+
"Article Text",
55+
"end of paragraph",
56+
"end of article",
57+
"end of region",
58+
"region",
59+
"heading, Second Section Heading, level 1",
60+
"paragraph",
61+
"Second Section Text",
62+
"end of paragraph",
63+
"end of region",
64+
"contentinfo",
65+
"Footer",
66+
"end of contentinfo",
67+
"end of document",
68+
]
69+
`;

‎examples/typescript/src/index.test.ts‎

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
function setupBasicPage() {
2+
document.body.innerHTML = `
3+
<nav>Nav Text</nav>
4+
<section>
5+
<h1>First Section Heading</h1>
6+
<p>First Section Text</p>
7+
<article>
8+
<header>
9+
<h1>Article Header Heading</h1>
10+
<p>Article Header Text</p>
11+
</header>
12+
<p>Article Text</p>
13+
</article>
14+
</section>
15+
<section>
16+
<h1>Second Section Heading</h1>
17+
<p>Second Section Text</p>
18+
</section>
19+
<section aria-hidden="true">
20+
<h1>Hidden Section Heading</h1>
21+
<p>Hidden Section Text</p>
22+
</section>
23+
<footer>Footer</footer>
24+
`;
25+
}
26+
27+
describe("matchers", () => {
28+
beforeEach(() => {
29+
setupBasicPage();
30+
});
31+
32+
afterEach(() => {
33+
document.body.innerHTML = ``;
34+
});
35+
36+
test("toMatchScreenReaderSnapshot on the whole body", async () => {
37+
await expect(document.body).toMatchScreenReaderSnapshot();
38+
});
39+
40+
test("toMatchScreenReaderInlineSnapshot on the whole body", async () => {
41+
await expect(document.body).toMatchScreenReaderInlineSnapshot(`
42+
[
43+
"document",
44+
"navigation",
45+
"Nav Text",
46+
"end of navigation",
47+
"region",
48+
"heading, First Section Heading, level 1",
49+
"paragraph",
50+
"First Section Text",
51+
"end of paragraph",
52+
"article",
53+
"banner",
54+
"heading, Article Header Heading, level 1",
55+
"paragraph",
56+
"Article Header Text",
57+
"end of paragraph",
58+
"end of banner",
59+
"paragraph",
60+
"Article Text",
61+
"end of paragraph",
62+
"end of article",
63+
"end of region",
64+
"region",
65+
"heading, Second Section Heading, level 1",
66+
"paragraph",
67+
"Second Section Text",
68+
"end of paragraph",
69+
"end of region",
70+
"contentinfo",
71+
"Footer",
72+
"end of contentinfo",
73+
"end of document",
74+
]
75+
`);
76+
});
77+
78+
test("toMatchScreenReaderSnapshot on an element", async () => {
79+
await expect(
80+
document.getElementsByTagName("section")[1]
81+
).toMatchScreenReaderSnapshot();
82+
});
83+
84+
test("toMatchScreenReaderInlineSnapshot on an element", async () => {
85+
await expect(document.getElementsByTagName("section")[1]).
86+
toMatchScreenReaderInlineSnapshot(`
87+
[
88+
"region",
89+
"heading, Second Section Heading, level 1",
90+
"paragraph",
91+
"Second Section Text",
92+
"end of paragraph",
93+
"end of region",
94+
]
95+
`);
96+
});
97+
98+
test("toMatchScreenReaderSnapshot on a text node", async () => {
99+
await expect(
100+
document.getElementsByTagName("nav")[0].firstChild
101+
).toMatchScreenReaderSnapshot();
102+
});
103+
104+
test("toMatchScreenReaderInlineSnapshot on a text node", async () => {
105+
await expect(document.getElementsByTagName("nav")[0].firstChild)
106+
.toMatchScreenReaderInlineSnapshot(`
107+
[
108+
"Nav Text",
109+
]
110+
`);
111+
});
112+
113+
test("toMatchScreenReaderSnapshot on a hidden node", async () => {
114+
await expect(
115+
document.querySelector('[aria-hidden="true"]')
116+
).toMatchScreenReaderSnapshot();
117+
});
118+
119+
test("toMatchScreenReaderInlineSnapshot on a hidden node", async () => {
120+
await expect(
121+
document.querySelector('[aria-hidden="true"]')
122+
).toMatchScreenReaderInlineSnapshot(`[]`);
123+
});
124+
125+
test("toMatchScreenReaderSnapshot on a null node", async () => {
126+
await expect(null).toMatchScreenReaderSnapshot();
127+
});
128+
129+
test("toMatchScreenReaderInlineSnapshot on a null node", async () => {
130+
await expect(null).toMatchScreenReaderInlineSnapshot(`[]`);
131+
});
132+
133+
test("snapshot matchers handles parallel assertions", async () => {
134+
await Promise.all([
135+
expect(
136+
document.getElementsByTagName("section")[1]
137+
).toMatchScreenReaderSnapshot(),
138+
expect(document.getElementsByTagName("section")[1]).
139+
toMatchScreenReaderInlineSnapshot(`
140+
[
141+
"region",
142+
"heading, Second Section Heading, level 1",
143+
"paragraph",
144+
"Second Section Text",
145+
"end of paragraph",
146+
"end of region",
147+
]
148+
`),
149+
]);
150+
});
151+
});

‎examples/typescript/tsconfig.json‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"compilerOptions": {
3+
"experimentalDecorators": true,
4+
"target": "esnext",
5+
"module": "commonjs",
6+
"moduleResolution": "node",
7+
"esModuleInterop": true,
8+
"declaration": true,
9+
"rootDir": "./",
10+
},
11+
"include": ["src/**/*.ts", "jest.setup.ts"],
12+
"exclude": ["node_modules"]
13+
}

0 commit comments

Comments
 (0)