test: add a test for React.useId() use-case

* Introducing a fragment introduced edge-case which wasn't covered, so extra null guard added * For some reason linter/ts complaining so some fixups for that as well * Upped timeouts as my old laptop was struggling to run tests in time!
guidepup · Jan 6, 2024 · 2c2cca3 · 2c2cca3
1 parent c6dda3e
commit 2c2cca3
Show file tree

Hide file tree

Showing 12 changed files with 248 additions and 46 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -8,5 +8,8 @@
   },
   "[typescript]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
   }
 }
diff --git a/jest.config.js b/jest.config.js
@@ -3,7 +3,7 @@ module.exports = {
   preset: "ts-jest",
   testEnvironment: "jsdom",
   roots: ["src"],
-  collectCoverageFrom: ["**/*.ts"],
+  collectCoverageFrom: ["**/*.ts", "**/*.tsx"],
   coveragePathIgnorePatterns: [],
   coverageThreshold: {
     global: {

diff --git a/package.json b/package.json
@@ -23,7 +23,7 @@
     "ci": "yarn clean && yarn lint && yarn test:coverage && yarn build",
     "clean": "rimraf lib",
     "compile": "tsc",
-    "lint": "eslint . --ext .ts --cache",
+    "lint": "eslint src --ext .ts --cache",
     "lint:fix": "yarn lint --fix",
     "test": "jest",
     "test:coverage": "yarn test --coverage",
@@ -38,6 +38,7 @@
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/react": "^14.1.2",
     "@types/jest": "^29.5.8",
     "@types/node": "^20.9.0",
     "@typescript-eslint/eslint-plugin": "^6.10.0",
@@ -46,6 +47,8 @@
     "eslint-config-prettier": "^9.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "rimraf": "^5.0.5",
     "ts-jest": "^29.1.1",
     "ts-node": "^10.9.1",

diff --git a/src/getLiveSpokenPhrase.ts b/src/getLiveSpokenPhrase.ts
@@ -58,7 +58,10 @@ function getSpokenPhraseForNode(node: Node) {
   return (
     getAccessibleName(node) ||
     getAccessibleValue(node) ||
-    sanitizeString(node.textContent)
+    // `node.textContent` is only `null` if the `node` is a `document` or a
+    // `doctype`. We don't consider either.
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    sanitizeString(node.textContent!)
   );
 }
 
@@ -219,8 +222,11 @@ function getLiveRegionAttributes(
   }
 
   if (typeof relevant === "undefined" && target.hasAttribute("aria-relevant")) {
+    // The `target.hasAttribute("aria-relevant")` check is sufficient to guard
+    // against the `target.getAttribute("aria-relevant")` being null.
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     relevant = target
-      .getAttribute("aria-relevant")
+      .getAttribute("aria-relevant")!
       .split(" ")
       .filter(
         (token) => !!RELEVANT_VALUES.includes(token as Relevant)
@@ -244,7 +250,9 @@ function getLiveRegionAttributes(
     };
   }
 
-  if (target === container) {
+  const targetAncestor = target.parentElement;
+
+  if (target === container || targetAncestor === null) {
     return {
       atomic: atomic ?? DEFAULT_ATOMIC,
       live: live ?? DEFAULT_LIVE,
@@ -253,8 +261,6 @@ function getLiveRegionAttributes(
     };
   }
 
-  const targetAncestor = target.parentElement;
-
   return getLiveRegionAttributes(
     { container, target: targetAncestor },
     {

diff --git a/src/test/int/ariaLive.int.test.ts b/src/test/int/ariaLive.int.test.ts
@@ -27,7 +27,7 @@ describe("Aria Live", () => {
         expect(document.querySelector("#target-2")?.textContent).toBe(
           "I am now populated aria-live=polite"
         ),
-      { timeout: 5000 }
+      { timeout: 7000 }
     );
 
     expect(await virtual.spokenPhraseLog()).toEqual([
@@ -52,7 +52,7 @@ describe("Aria Live", () => {
           "Existing Content updated aria-live=polite"
         );
       },
-      { timeout: 5000 }
+      { timeout: 7000 }
     );
 
     expect(await virtual.spokenPhraseLog()).toEqual([
@@ -100,7 +100,7 @@ describe("Aria Live", () => {
         expect(document.querySelector("#target-3")?.textContent).toBe(
           "I am now populated aria-live=assertive"
         ),
-      { timeout: 5000 }
+      { timeout: 7000 }
     );
 
     expect(await virtual.spokenPhraseLog()).toEqual([
@@ -125,7 +125,7 @@ describe("Aria Live", () => {
           "Existing Content updated aria-live=assertive"
         );
       },
-      { timeout: 5000 }
+      { timeout: 7000 }
     );
 
     expect(await virtual.spokenPhraseLog()).toEqual([
@@ -175,7 +175,7 @@ describe("Aria Live", () => {
         expect(document.querySelector("#target-1")?.textContent).toBe(
           "I am now populated aria-live=off"
         ),
-      { timeout: 5000 }
+      { timeout: 7000 }
     );
 
     expect(await virtual.spokenPhraseLog()).toEqual([
@@ -197,7 +197,7 @@ describe("Aria Live", () => {
           "Existing Content updated aria-live=off"
         );
       },
-      { timeout: 5000 }
+      { timeout: 7000 }
     );
 
     expect(await virtual.spokenPhraseLog()).toEqual([
@@ -221,7 +221,7 @@ describe("Aria Live", () => {
           document.querySelector("#target-fully-defined")?.textContent
         ).toBe("I am now populated");
       },
-      { timeout: 5000 }
+      { timeout: 7000 }
     );
 
     expect(await virtual.spokenPhraseLog()).toEqual([

diff --git a/src/test/int/ariaLive2.int.test.ts b/src/test/int/ariaLive2.int.test.ts
@@ -24,7 +24,7 @@ describe("Aria Live - Content Editable", () => {
         expect(document.querySelector("#target")?.textContent).toBe(
           "Edit this text! And announce!"
         ),
-      { timeout: 5000 }
+      { timeout: 7000 }
     );
 
     expect(await virtual.spokenPhraseLog()).toEqual([
@@ -72,7 +72,7 @@ describe("Aria Live - All Attributes", () => {
     await waitFor(
       () =>
         expect(document.querySelector("#target")?.textContent).toBe("Updated"),
-      { timeout: 5000 }
+      { timeout: 7000 }
     );
 
     expect(await virtual.spokenPhraseLog()).toEqual([

diff --git a/src/test/int/ariaRelevant.int.test.ts b/src/test/int/ariaRelevant.int.test.ts
@@ -14,6 +14,60 @@ describe("Aria Relevant", () => {
     teardown();
   });
 
+  it("should handle no value - applied to the div element", async () => {
+    await virtual.start({ container: document.body });
+
+    // Navigate to aria-live=polite button
+    const button = screen.getByRole("button", {
+      name: "Test aria-relevant missing",
+    });
+
+    button.focus();
+
+    await virtual.act();
+
+    await waitFor(() =>
+      expect(
+        document.querySelector("#target-0 [data-change]")?.textContent
+      ).toBe("Content changed")
+    );
+
+    expect(await virtual.spokenPhraseLog()).toEqual([
+      "document",
+      "button, Test aria-relevant missing",
+      "assertive: DOM was added",
+      "assertive: Content changed",
+    ]);
+
+    await virtual.stop();
+  });
+
+  it("should handle an empty value - applied to the div element", async () => {
+    await virtual.start({ container: document.body });
+
+    // Navigate to aria-live=polite button
+    const button = screen.getByRole("button", {
+      name: "Test aria-relevant empty",
+    });
+
+    button.focus();
+
+    await virtual.act();
+
+    await waitFor(() =>
+      expect(
+        document.querySelector("#target-1 [data-change]")?.textContent
+      ).toBe("Content changed")
+    );
+
+    expect(await virtual.spokenPhraseLog()).toEqual([
+      "document",
+      "button, Test aria-relevant empty",
+    ]);
+
+    await virtual.stop();
+  });
+
   it("should convey the 'additions' value - applied to the div element", async () => {
     await virtual.start({ container: document.body });
 
@@ -28,7 +82,7 @@ describe("Aria Relevant", () => {
 
     await waitFor(() =>
       expect(
-        document.querySelector("#target-0 [data-change]")?.textContent
+        document.querySelector("#target-2 [data-change]")?.textContent
       ).toBe("Content changed")
     );
 
@@ -55,7 +109,7 @@ describe("Aria Relevant", () => {
 
     await waitFor(() =>
       expect(
-        document.querySelector("#target-4 [data-change]")?.textContent
+        document.querySelector("#target-6 [data-change]")?.textContent
       ).toBe("Content changed")
     );
 
@@ -83,7 +137,7 @@ describe("Aria Relevant", () => {
 
     await waitFor(() =>
       expect(
-        document.querySelector("#target-3 [data-change]")?.textContent
+        document.querySelector("#target-5 [data-change]")?.textContent
       ).toBe("Content changed")
     );
 
@@ -112,7 +166,7 @@ describe("Aria Relevant", () => {
 
     await waitFor(() =>
       expect(
-        document.querySelector("#target-1 [data-change]")?.textContent
+        document.querySelector("#target-3 [data-change]")?.textContent
       ).toBe("Content changed")
     );
 
@@ -139,7 +193,7 @@ describe("Aria Relevant", () => {
 
     await waitFor(() =>
       expect(
-        document.querySelector("#target-2 [data-change]")?.textContent
+        document.querySelector("#target-4 [data-change]")?.textContent
       ).toBe("Content changed")
     );
 

diff --git a/src/test/int/ariaRelevant.js b/src/test/int/ariaRelevant.js
@@ -14,25 +14,28 @@ function test(index) {
 function setupAriaRelevant() {
   document.body.innerHTML = `<div id="content"></div>`;
 
-  ["additions", "removals", "text", "all", "additions text"].forEach(function (
-    attr,
-    index
-  ) {
-    const content = document.querySelector("#content");
-    const div = document.createElement("div");
-
-    div.innerHTML = `
+  [null, "", "additions", "removals", "text", "all", "additions text"].forEach(
+    function (attr, index) {
+      const content = document.querySelector("#content");
+      const div = document.createElement("div");
+
+      div.innerHTML = `
       <h2>aria-relevant=${attr}</h2>
-      <div id="target-${index}" aria-live="assertive" aria-relevant="${attr}">
+      <div id="target-${index}" aria-live="assertive" ${
+        attr === null ? "" : `aria-relevant="${attr}"`
+      }>
         <span data-remove>DOM was removed</span>
         <span data-change></span>
       </div>
-      <button id="trigger-${index}">Test aria-relevant ${attr}</button>
+      <button id="trigger-${index}">Test aria-relevant ${
+        attr === null ? "missing" : attr === "" ? "empty" : attr
+      }</button>
     `;
 
-    content.appendChild(div);
-    document.querySelector(`#trigger-${index}`).onclick = () => test(index);
-  });
+      content.appendChild(div);
+      document.querySelector(`#trigger-${index}`).onclick = () => test(index);
+    }
+  );
 
   return () => {
     document.body.innerHTML = "";

diff --git a/src/test/int/liveRegionRoles.int.test.ts b/src/test/int/liveRegionRoles.int.test.ts
@@ -27,7 +27,7 @@ describe("Live Region Roles", () => {
         expect(document.querySelector("#target-alert")?.textContent).toBe(
           "Initial Content Populated role=alert"
         ),
-      { timeout: 5000 }
+      { timeout: 7000 }
     );
 
     expect(await virtual.spokenPhraseLog()).toEqual([
@@ -51,7 +51,7 @@ describe("Live Region Roles", () => {
         expect(
           document.querySelector("#target-alert-non-atomic")?.textContent
         ).toBe("Initial Content Populated role=alert"),
-      { timeout: 5000 }
+      { timeout: 7000 }
     );
 
     expect(await virtual.spokenPhraseLog()).toEqual([
@@ -73,7 +73,7 @@ describe("Live Region Roles", () => {
         expect(document.querySelector("#target-log")?.textContent).toBe(
           "Initial Content Populated role=log"
         ),
-      { timeout: 5000 }
+      { timeout: 7000 }
     );
 
     expect(await virtual.spokenPhraseLog()).toEqual([
@@ -95,7 +95,7 @@ describe("Live Region Roles", () => {
         expect(document.querySelector("#target-marquee")?.textContent).toBe(
           "Initial Content Populated role=marquee"
         ),
-      { timeout: 5000 }
+      { timeout: 7000 }
     );
 
     expect(await virtual.spokenPhraseLog()).toEqual([
@@ -116,7 +116,7 @@ describe("Live Region Roles", () => {
         expect(document.querySelector("#target-status")?.textContent).toBe(
           "Initial Content Populated role=status"
         ),
-      { timeout: 5000 }
+      { timeout: 7000 }
     );
 
     expect(await virtual.spokenPhraseLog()).toEqual([
@@ -140,7 +140,7 @@ describe("Live Region Roles", () => {
         expect(
           document.querySelector("#target-status-non-atomic")?.textContent
         ).toBe("Initial Content Populated role=status"),
-      { timeout: 5000 }
+      { timeout: 7000 }
     );
 
     expect(await virtual.spokenPhraseLog()).toEqual([
@@ -162,7 +162,7 @@ describe("Live Region Roles", () => {
         expect(document.querySelector("#target-timer")?.textContent).toBe(
           "Initial Content Populated role=timer"
         ),
-      { timeout: 5000 }
+      { timeout: 7000 }
     );
 
     expect(await virtual.spokenPhraseLog()).toEqual([
@@ -183,7 +183,7 @@ describe("Live Region Roles", () => {
         expect(document.querySelector("#target-alertdialog")?.textContent).toBe(
           "Initial Content Populated role=alertdialog"
         ),
-      { timeout: 5000 }
+      { timeout: 7000 }
     );
 
     expect(await virtual.spokenPhraseLog()).toEqual([
@@ -207,7 +207,7 @@ describe("Live Region Roles", () => {
         expect(
           document.querySelector("#target-alertdialog-non-atomic")?.textContent
         ).toBe("Initial Content Populated role=alertdialog"),
-      { timeout: 5000 }
+      { timeout: 7000 }
     );
 
     expect(await virtual.spokenPhraseLog()).toEqual([