automatica11y 0.3.3 → 0.4.1

package/src/tiers/interactions/index.js

@@ -66,13 +66,25 @@ export function makeContext(page) {
 }
 
 /** Run one check on a fresh page, so no check inherits another's state. */
-export async function runCheck(browser, url, check, { timeoutMs = CHECK_TIMEOUT_MS, kits = [installHelpers] } = {}) {
+export async function runCheck(browser, url, check, { timeoutMs = CHECK_TIMEOUT_MS, kits = [installHelpers], needsTrigger = true, waitUntil = /** @type {"load" | "networkidle"} */ ("load") } = {}) {
   /** @type {Awaited<ReturnType<typeof openPage>> | null} */
   let opened = null;
+  /** @type {Array<Awaited<ReturnType<typeof openPage>>>} */
+  const variants = [];
+  const beforeGoto = async (page) => { for (const kit of kits) await page.addInitScript(kit); };
   try {
-    opened = await openPage(browser, url, { beforeGoto: async (page) => { for (const kit of kits) await page.addInitScript(kit); }, waitUntil: "load" });
+    opened = await openPage(browser, url, { beforeGoto, waitUntil });
     const ctx = makeContext(opened.page);
-    await ctx.trigger.waitFor({ state: "attached", timeout: 3000 });
+    /**
+     * Open the same page again with other browser settings (reduced motion, dark mode, a narrow window), and get a context for it.
+     * It closes with the check.
+     */
+    ctx.variant = async (options) => {
+      const other = await openPage(browser, url, { ...options, beforeGoto, waitUntil });
+      variants.push(other);
+      return makeContext(other.page);
+    };
+    if (needsTrigger) await ctx.trigger.waitFor({ state: "attached", timeout: 3000 });
     const outcome = await Promise.race([
       check.run(ctx),
       new Promise((_, reject) => setTimeout(() => reject(new Error(`The check took longer than ${timeoutMs / 1000} seconds.`)), timeoutMs)),
@@ -82,6 +94,7 @@ export async function runCheck(browser, url, check, { timeoutMs = CHECK_TIMEOUT_
     return { name: check.name, criteria: check.criteria, result: "error", detail: `The check couldn't finish: ${(error instanceof Error ? error.message : String(error)).split("\n")[0]}` };
   } finally {
     await opened?.close();
+    for (const other of variants) await other.close();
   }
 }
 

package/src/harness/npm-react.js

@@ -1,39 +0,0 @@
-/** React flavor: the entry files and button and link templates that go into a bundle. */
-
-/** Mounts a fixture's default export. */
-export const entry = (fixturePath, _pkg) => `import { createElement } from "react";
-import { createRoot } from "react-dom/client";
-import Fixture from ${JSON.stringify(fixturePath)};
-const libA11y = new URLSearchParams(location.search).get("libA11y") === "on";
-createRoot(document.getElementById("root")).render(createElement(Fixture, { libA11y }));
-`;
-
-/** Loads the whole package, lists its exports, and records compound parts such as Dialog.Trigger. */
-export const discoverEntry = (pkg) => `import * as lib from ${JSON.stringify(pkg)};
-const out = [];
-for (const name of Object.keys(lib)) {
-  const value = lib[name];
-  const type = typeof value;
-  if (value === null || (type !== "function" && type !== "object")) continue;
-  const parts = Object.keys(value).filter((key) => /^[A-Z]/.test(key)).slice(0, 30);
-  out.push({ name, type, parts });
-}
-window.__a11yExports = out;
-`;
-
-/**
- * A fixture for the simple archetypes, from the export name alone.
- * Compound components (dialog, tabs, menu) can't be guessed, so they need a fixture someone writes.
- */
-export function template(archetype, pkg, exportName) {
-  const body = {
-    button: `<Component data-a11y-trigger data-a11y-root type="button">Save</Component>`,
-    link: `<Component data-a11y-trigger data-a11y-root href="#top">Read more</Component>`,
-  }[archetype];
-  if (!body) return null;
-  return `import { ${exportName} as Component } from ${JSON.stringify(pkg)};
-export default function Fixture() {
-  return ${body};
-}
-`;
-}

package/src/harness/npm-wc.js

@@ -1,30 +0,0 @@
-/** Web component flavor: framework-free entries and templates. */
-
-/** Loads the package so its custom elements get defined, then calls the fixture's default export, `mount(container)`. */
-export const entry = (fixturePath, pkg) => `import ${JSON.stringify(pkg)};
-import mount from ${JSON.stringify(fixturePath)};
-const libA11y = new URLSearchParams(location.search).get("libA11y") === "on";
-await mount(document.getElementById("root"), { libA11y });
-`;
-
-/** Loads the whole package. The page's init script records every custom element the package defines. */
-export const discoverEntry = (pkg) => `import * as lib from ${JSON.stringify(pkg)};
-window.__a11yExports = Object.keys(lib).map((name) => ({ name, type: typeof lib[name], parts: [] }));
-`;
-
-/** A fixture for the simple archetypes, from the tag name alone. */
-export function template(archetype, tag) {
-  const attrs = {
-    button: `el.textContent = "Save";`,
-    link: `el.setAttribute("href", "#top");\n  el.textContent = "Read more";`,
-  }[archetype];
-  if (!attrs) return null;
-  return `export default function mount(container) {
-  const el = document.createElement(${JSON.stringify(tag)});
-  el.setAttribute("data-a11y-trigger", "");
-  el.setAttribute("data-a11y-root", "");
-  ${attrs}
-  container.append(el);
-}
-`;
-}