feat(a11y): implemented a11y tree snapshot function

sbb-design-systems · Jan 30, 2024 · 01834e6 · 01834e6
1 parent b35a370
commit 01834e6
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 0 deletions.
diff --git a/src/components/core/dom/platform.ts b/src/components/core/dom/platform.ts
@@ -70,3 +70,25 @@ export const isSafari = (): boolean =>
 
 /** Whether the application is being rendered in a Next.js environment. */
 export const isNextjs = (): boolean => !!(globalThis as { next?: object }).next;
+
+/**
+ * Note: `userAgentData` is still sperimental. If possible, avoid to use it.
+ * https://developer.mozilla.org/en-US/docs/Web/API/Navigator/userAgentData
+ */
+export const isChromium = (): boolean =>
+  (navigator as any).userAgentData?.brands?.some((data: any) => data.brand == 'Chromium');
+
+/**
+ * This is a custom implementation.
+ * In the `web-test-runner.config` we add a meta tag with some useful meta-data
+ */
+export const isTestEnvironment = (): boolean =>
+  !!document.head.querySelector('meta[name="testEnvironment"]');
+
+/**
+ * This is a custom implementation.
+ * True if the `testEnvironment` meta tag has the `debug` attribute
+ */
+export const isDebugEnvironment = (): boolean =>
+  isTestEnvironment() &&
+  !!document.head.querySelector('meta[name="testEnvironment"]')?.hasAttribute('debug');
diff --git a/src/components/core/testing/a11y-tree-snapshot.ts b/src/components/core/testing/a11y-tree-snapshot.ts
@@ -0,0 +1,49 @@
+import { expect, fixture } from '@open-wc/testing';
+import { a11ySnapshot } from '@web/test-runner-commands';
+import type { TemplateResult } from 'lit';
+import { html } from 'lit/static-html.js';
+
+import { isChromium, isDebugEnvironment, isFirefox, isSafari } from '../dom';
+
+import { waitForLitRender } from './wait-for-render';
+
+/**
+ * Get the a11y tree snapshot and tests its snapshot.
+ * Since the snapshot is list of nodes, we have to stringify it
+ * and create an html wrapper in order to use the `equalSnapshot` function.
+ */
+async function a11yTreeEqualSnapshot(): Promise<void> {
+  const snapshot = await a11ySnapshot({});
+
+  const htmlWrapper = await fixture(html`<p>${JSON.stringify(snapshot, null, 2)}</p>`);
+  await expect(htmlWrapper).to.be.equalSnapshot();
+}
+
+/**
+ * The function creates and tests the accessibility tree snapshot on each browser.
+ * If a template is passed, it will be instantiated before the snapshot is taken.
+ * @param title The title of the section
+ * @param template The optional html template
+ */
+export function testA11yTreeSnapshot(title = 'A11y tree', template?: TemplateResult): void {
+  describe(title, () => {
+    beforeEach(async () => {
+      if (template) {
+        await fixture(template);
+      }
+      await waitForLitRender(document);
+    });
+
+    (isChromium() && !isDebugEnvironment() ? it : it.skip)('Chrome', async () => {
+      await a11yTreeEqualSnapshot();
+    });
+
+    (isSafari() && !isDebugEnvironment() ? it : it.skip)('Safari', async () => {
+      await a11yTreeEqualSnapshot();
+    });
+
+    (isFirefox() && !isDebugEnvironment() ? it : it.skip)('Firefox', async () => {
+      await a11yTreeEqualSnapshot();
+    });
+  });
+}
diff --git a/src/components/core/testing/index.ts b/src/components/core/testing/index.ts
@@ -1,3 +1,4 @@
+export * from './a11y-tree-snapshot';
 export * from './event-spy';
 export * from './scroll';
 export * from './wait-for-condition';

diff --git a/web-test-runner.config.js b/web-test-runner.config.js
@@ -51,6 +51,7 @@ export default {
   testRunnerHtml: (testFramework) => `
     <html>
       <head>
+        <meta name="testEnvironment" ${isDebugMode ? 'debug' : ''}>
         <style type="text/css">${globalCss.css}</style>
       </head>
       <body>
-Original file line number
+Diff line change
@@ Expand Up / @@ -51,6 +51,7 @@ export default { @@
       testRunnerHtml: (testFramework) => `
         <html>
           <head>
+            <meta name="testEnvironment" ${isDebugMode ? 'debug' : ''}>
             <style type="text/css">${globalCss.css}</style>
           </head>
           <body>
@@ Expand Down @@