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/**",
+      ],
+    }),
+  ],
+};