Expand tests

packages/wonder-blocks-announcer/src/Announcer.ts

@@ -211,6 +211,13 @@ class Announcer {
 
         return index;
     }
+
+    reset() {
+        this.regionFactory.aIndex = 0;
+        this.regionFactory.pIndex = 0;
+
+        this.clear();
+    }
 }
 
 export default Announcer;

packages/wonder-blocks-announcer/src/__tests__/Announcer.test.ts

@@ -0,0 +1,97 @@
+import {screen} from "@testing-library/react";
+import Announcer from "../Announcer";
+
+describe("Announcer class", () => {
+    describe("instantiation", () => {
+        test("creating one singleton instance", () => {
+            // Arrange/Act
+            const announcer = Announcer.getInstance();
+            const announcer2 = Announcer.getInstance();
+
+            // Assert: is this testing anything useful?
+            expect(announcer).toEqual(announcer2);
+        });
+
+        test("initializing the element structure", () => {
+            // Arrange/Act
+            const announcer = Announcer.getInstance();
+            const wrapperElement = announcer.node;
+            const regions = announcer.dictionary;
+
+            // Assert
+            expect(wrapperElement).toBeInTheDocument();
+            expect(wrapperElement?.childElementCount).toBe(2);
+            expect(regions.size).toBe(4);
+        });
+    });
+
+    describe("announcing messages", () => {
+        afterEach(() => {
+            const announcer = Announcer.getInstance();
+            announcer.reset();
+        });
+
+        test("appending a message", () => {
+            // Arrange
+            const announcer = Announcer.getInstance();
+            expect(announcer.regionFactory.pIndex).toBe(0);
+
+            // Act
+            announcer.announce("a thing", "polite");
+
+            // Assert
+            expect(announcer.regionFactory.pIndex).toBe(1);
+            expect(
+                announcer.dictionary.get("wbARegion-polite1")?.element
+                    .textContent,
+            ).toBe("a thing");
+        });
+
+        test("returning an IDREF", () => {
+            // Arrange
+            const announcer = Announcer.getInstance();
+            expect(announcer.regionFactory.pIndex).toBe(0);
+
+            // Act
+            const idRef = announcer.announce("another thing", "polite");
+
+            // Assert
+            expect(idRef).toBe("wbARegion-polite1");
+        });
+    });
+
+    describe("clearing messages", () => {
+        test("clearing by IDREF", () => {
+            // Arrange
+            const announcer = Announcer.getInstance();
+            expect(announcer.regionFactory.pIndex).toBe(0);
+
+            // Act
+            const idRef = announcer.announce("something", "polite");
+            const firstRegion = announcer.dictionary.get(idRef)?.element;
+            expect(firstRegion?.textContent).toBe("something");
+
+            announcer.clear(idRef);
+
+            // Assert
+            expect(firstRegion?.textContent).not.toBe("something");
+        });
+
+        test("clearing all elements", () => {
+            // Arrange
+            const announcer = Announcer.getInstance();
+
+            // Act
+            announcer.announce("One Fish", "polite");
+            announcer.announce("Loud Fish", "assertive");
+            expect(screen.getByText("One Fish")).toBeInTheDocument();
+            expect(screen.getByText("Loud Fish")).toBeInTheDocument();
+
+            announcer.clear();
+
+            // Assert
+            expect(screen.queryByText("One Fish")).not.toBeInTheDocument();
+            expect(screen.queryByText("Loud Fish")).not.toBeInTheDocument();
+        });
+    });
+});

packages/wonder-blocks-announcer/src/__tests__/announce-message.test.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import {render, screen, waitFor} from "@testing-library/react";
-import {AnnounceMessageButton} from "./util/announce-message-button";
+import {AnnounceMessageButton} from "./components/announce-message-button";
 import {announceMessage} from "../announce-message";
 import {clearMessages} from "../clear-messages";
 

packages/wonder-blocks-announcer/src/__tests__/util/dom.test.ts

@@ -0,0 +1,133 @@
+import {screen, waitFor} from "@testing-library/react";
+import {
+    createRegionWrapper,
+    createDuplicateRegions,
+    createRegion,
+    removeMessage,
+} from "../../util/dom";
+
+jest.useFakeTimers();
+jest.spyOn(global, "setTimeout");
+
+describe("Announcer utility functions", () => {
+    describe("createRegionWrapper", () => {
+        test("it creates a polite region wrapper element", () => {
+            const element = createRegionWrapper("polite");
+
+            expect(element.tagName).toBe("DIV");
+            expect(element.id).toEqual("wbAWrap-polite");
+        });
+
+        test("it creates an assertive region wrapper element", () => {
+            const element = createRegionWrapper("assertive");
+
+            expect(element.tagName).toBe("DIV");
+            expect(element.id).toEqual("wbAWrap-assertive");
+        });
+    });
+
+    describe("createDuplicateRegions", () => {
+        test("it creates multiple polite region elements", () => {
+            const wrapper = document.createElement("div");
+            const dictionary = new Map();
+
+            const regionList = createDuplicateRegions(
+                wrapper,
+                "polite",
+                2,
+                dictionary,
+            );
+
+            expect(regionList.length).toBe(2);
+            expect(regionList[0].id).toBe("wbARegion-polite0");
+            expect(regionList[1].id).toBe("wbARegion-polite1");
+            expect(dictionary.size).toBe(2);
+        });
+
+        test("it creates multiple assertive region elements", () => {
+            const wrapper = document.createElement("div");
+            const dictionary = new Map();
+
+            const regionList = createDuplicateRegions(
+                wrapper,
+                "assertive",
+                2,
+                dictionary,
+            );
+
+            expect(regionList.length).toBe(2);
+            expect(regionList[0].id).toBe("wbARegion-assertive0");
+            expect(regionList[1].id).toBe("wbARegion-assertive1");
+            expect(dictionary.size).toBe(2);
+        });
+    });
+
+    describe("createRegion", () => {
+        test("it creates a polite Live Region element", () => {
+            const dictionary = new Map();
+            const region = createRegion("polite", 0, dictionary);
+
+            expect(region.id).toBe("wbARegion-polite0");
+            expect(region.getAttribute("aria-live")).toBe("polite");
+            expect(region.getAttribute("role")).toBe("log");
+            expect(dictionary.size).toBe(1);
+        });
+
+        test("it creates an assertive Live Region element", () => {
+            const dictionary = new Map();
+            const region = createRegion("assertive", 0, dictionary);
+
+            expect(region.id).toBe("wbARegion-assertive0");
+            expect(region.getAttribute("aria-live")).toBe("assertive");
+            expect(region.getAttribute("role")).toBe("log");
+            expect(dictionary.size).toBe(1);
+        });
+
+        test("it allows the role to be overridden", () => {
+            const dictionary = new Map();
+            const region = createRegion("polite", 0, dictionary, "timer");
+
+            expect(region.getAttribute("aria-live")).toBe("polite");
+            expect(region.getAttribute("role")).toBe("timer");
+        });
+    });
+
+    describe("removeMessage", () => {
+        test("it removes an element from the DOM", async () => {
+            // Arrange
+            const message = document.createElement("p");
+            document.body.appendChild(message);
+            expect(message).toBeInTheDocument();
+
+            // Act
+            removeMessage(message, 0);
+
+            // Assert
+            await waitFor(() => {
+                expect(message).not.toBeInTheDocument();
+            });
+        });
+
+        test("it removes an element after a configurable delay", async () => {
+            // Arrange
+            const messageText = "Thar she blows";
+            const message = document.createElement("p");
+            message.textContent = messageText;
+            document.body.appendChild(message);
+
+            const delay = 300;
+
+            // Act
+            removeMessage(message, delay);
+
+            // Assert
+            expect(setTimeout).toHaveBeenLastCalledWith(
+                expect.any(Function),
+                delay,
+            );
+            await waitFor(() => {
+                expect(screen.queryByText(messageText)).not.toBeInTheDocument();
+            });
+        });
+    });
+});

packages/wonder-blocks-announcer/src/util/dom.ts

@@ -44,7 +44,7 @@ export function createDuplicateRegions(
  * @param {string} role Role attribute for live regions, defaults to log
  * @returns {HTMLElement} DOM element reference for live region
  */
-function createRegion(
+export function createRegion(
     level: PolitenessLevel,
     index: number,
     dictionary: RegionDictionary,