fix: support ESM and add web-test-runner example (#56)

.eslintrc.js

@@ -8,6 +8,7 @@ module.exports = {
  "prettier",
  ],
  plugins: ["require-extensions", "@typescript-eslint"],
+ ignorePatterns: ["examples"],
  rules: {
  "sort-imports": ["error", { ignoreCase: true }],
  quotes: ["error", "double", { avoidEscape: true }],

.github/workflows/test.yml

@@ -39,3 +39,16 @@ jobs:
  working-directory: ./examples/vue
  - run: yarn test
  working-directory: ./examples/vue
+
+ test-web-test-runner-example:
+ runs-on: ubuntu-latest
+ steps:
+ - uses: actions/checkout@v4
+ - uses: actions/setup-node@v4
+ with:
+ node-version: 20
+ - run: yarn install --frozen-lockfile
+ - run: yarn install --frozen-lockfile
+ working-directory: ./examples/web-test-runner
+ - run: yarn test
+ working-directory: ./examples/web-test-runner

examples/vue/package.json

@@ -4,6 +4,7 @@
  "private": true,
  "type": "module",
  "scripts": {
+ "pretest": "yarn --cwd=../.. build",
  "test": "vitest run",
  "test:watch": "vitest",
  "type-check": "vue-tsc --build --force",

examples/vue/src/__tests__/IncrementCounter.spec.ts

@@ -9,7 +9,7 @@ import IncrementCounter from '../IncrementCounter.vue'
  *
  * in your own code.
  */
-import { virtual } from '../../../../src'
+import { virtual } from '../../../../lib/cjs'
 
 describe('Increment Counter', () => {
  afterEach(async () => {

examples/vue/src/__tests__/OpenModal.spec.ts

@@ -9,7 +9,7 @@ import ModalExample from '../OpenModal.vue'
  *
  * in your own code.
  */
-import { virtual } from '../../../../src'
+import { virtual } from '../../../../lib/cjs'
 
 describe('Open Modal', () => {
  afterEach(async () => {

examples/vue/src/__tests__/TextAreaCounter.spec.ts

@@ -9,7 +9,7 @@ import TextareaCounter from '../TextAreaCounter.vue'
  *
  * in your own code.
  */
-import { virtual } from '../../../../src'
+import { virtual } from '../../../../lib/cjs'
 
 describe('Text Area Counter', () => {
  afterEach(async () => {

examples/web-test-runner/package.json

@@ -0,0 +1,19 @@
+{
+ "name": "@guidepup/virtual-screen-reader-web-test-runner-example",
+ "version": "0.0.0",
+ "private": true,
+ "type": "module",
+ "scripts": {
+ "pretest": "yarn --cwd=../.. build",
+ "test": "web-test-runner \"test/**/*.test.js\"",
+ "test:watch": "yarn test --watch"
+ },
+ "dependencies": {},
+ "devDependencies": {
+ "@esm-bundle/chai": "4.3.4",
+ "@rollup/plugin-commonjs": "^25.0.7",
+ "@rollup/plugin-replace": "^5.0.5",
+ "@web/dev-server-rollup": "^0.6.1",
+ "@web/test-runner": "^0.18.0"
+ }
+}

examples/web-test-runner/test/virtual.test.js

@@ -0,0 +1,39 @@
+import { expect } from "@esm-bundle/chai";
+
+/**
+ * Replace with:
+ *
+ * import { virtual } from '@guidepup/virtual-screen-reader'
+ *
+ * in your own code.
+ */
+import { virtual } from "../../../lib/esm/index.js";
+
+beforeEach(async () => {
+ document.body.innerHTML = "<h1>Heading</h1><p>Paragraph text</p>";
+
+ await virtual.start({ container: document.body });
+});
+
+afterEach(async () => {
+ await virtual.stop();
+
+ document.body.innerHTML = "";
+});
+
+it("renders a heading and a paragraph", async () => {
+ await virtual.next();
+ await virtual.next();
+ await virtual.next();
+ await virtual.next();
+ await virtual.next();
+
+ expect(await virtual.spokenPhraseLog()).to.eql([
+ "document",
+ "heading, Heading, level 1",
+ "paragraph",
+ "Paragraph text",
+ "end of paragraph",
+ "end of document",
+ ]);
+});

examples/web-test-runner/web-test-runner.config.mjs

@@ -0,0 +1,30 @@
+import _commonjs from "@rollup/plugin-commonjs";
+import _replace from "@rollup/plugin-replace";
+import { fromRollup } from "@web/dev-server-rollup";
+
+const commonjs = fromRollup(_commonjs);
+const replace = fromRollup(_replace);
+
+export default {
+ nodeResolve: true,
+ plugins: [
+ // Support @testing-library/dom usage of module that checks if running in
+ // production or development.
+ // See `node_modules/@testing-library/dom/node_modules/react-is/cjs/react-is.development.js`
+ replace({
+ "process.env.NODE_ENV": JSON.stringify("production"),
+ preventAssignment: true,
+ }),
+ // Handle dependencies that are commonjs only and need compiling to support
+ // an ESM environment.
+ commonjs({
+ include: [
+ "**/node_modules/@testing-library/**",
+ "**/node_modules/ansi-regex/**",
+ "**/node_modules/aria-query/**",
+ "**/node_modules/dequal/**",
+ "**/node_modules/lz-string/**",
+ ],
+ }),
+ ],
+};