From 01834e6816e29d64f15d44849048889ebf4c5c49 Mon Sep 17 00:00:00 2001
From: Tommmaso Menga <tommaso.menga-94@hotmail.it>
Date: Tue, 30 Jan 2024 16:22:02 +0100
Subject: [PATCH] feat(a11y): implemented a11y tree snapshot function

---
 src/components/core/dom/platform.ts           | 22 +++++++++
 .../core/testing/a11y-tree-snapshot.ts        | 49 +++++++++++++++++++
 src/components/core/testing/index.ts          |  1 +
 web-test-runner.config.js                     |  1 +
 4 files changed, 73 insertions(+)
 create mode 100644 src/components/core/testing/a11y-tree-snapshot.ts

diff --git a/src/components/core/dom/platform.ts b/src/components/core/dom/platform.ts
index ab36478505e..c1df5d07616 100644
--- 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
new file mode 100644
index 00000000000..0c6b0e12799
--- /dev/null
+++ 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
index ceb875267ef..d4a0a42c260 100644
--- 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
index ab2989aa46a..2d2daab39fd 100644
--- 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>