test: added tests for live announcer (#109)

adaptui · Oct 22, 2020 · 97f10e7 · 97f10e7
1 parent 6579b8f
commit 97f10e7
Show file tree

Hide file tree

Showing 2 changed files with 117 additions and 2 deletions.
diff --git a/src/utils/LiveAnnouncer.test.tsx b/src/utils/LiveAnnouncer.test.tsx
@@ -0,0 +1,114 @@
+import React from "react";
+import { axe } from "jest-axe";
+import { fireEvent, render } from "reakit-test-utils";
+
+import {
+  announce,
+  destroyAnnouncer,
+  LiveRegionAnnouncer,
+} from "./LiveAnnouncer";
+
+beforeEach(() => {
+  destroyAnnouncer();
+});
+
+describe("LiveAnnouncer", () => {
+  it("should render correctly", () => {
+    announce("Hello world", "assertive", 0);
+
+    expect(document.body).toMatchInlineSnapshot(`
+      <body>
+        <div>
+          <span
+            aria-atomic="true"
+            aria-live="assertive"
+            aria-relevant="additions"
+            data-testid="announcer-assertive"
+            style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;"
+          />
+          <span
+            aria-atomic="true"
+            aria-live="assertive"
+            aria-relevant="additions"
+            data-testid="announcer-assertive"
+            style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;"
+          >
+            Hello world
+          </span>
+          <span
+            aria-atomic="true"
+            aria-live="polite"
+            aria-relevant="additions"
+            data-testid="announcer-polite"
+            style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;"
+          />
+          <span
+            aria-atomic="true"
+            aria-live="polite"
+            aria-relevant="additions"
+            data-testid="announcer-polite"
+            style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;"
+          />
+        </div>
+      </body>
+    `);
+
+    destroyAnnouncer();
+
+    expect(document.body).toMatchInlineSnapshot(`<body />`);
+  });
+
+  test("LiveRegionAnnouncer", () => {
+    const Announcer = () => {
+      const ref = React.useRef();
+
+      return (
+        <div>
+          <LiveRegionAnnouncer ref={ref} />
+          <button
+            onClick={() =>
+              (ref.current as any).announce("Hello Assertive", "assertive", 0)
+            }
+          >
+            announce assertive
+          </button>
+          <button
+            onClick={() =>
+              (ref.current as any).announce("Hello Polite", "polite", 0)
+            }
+          >
+            announce polite
+          </button>
+          <button onClick={() => (ref.current as any).clear()}>clear</button>
+        </div>
+      );
+    };
+    const { getByText: text, queryAllByTestId: testIdAll } = render(
+      <Announcer />,
+    );
+
+    fireEvent.click(text("announce assertive"));
+    expect(testIdAll("announcer-assertive")[1]).toHaveTextContent(
+      "Hello Assertive",
+    );
+
+    // Clear
+    fireEvent.click(text("clear"));
+    expect(testIdAll("announcer-assertive")[1]).toHaveTextContent("");
+
+    // Polite
+    fireEvent.click(text("announce polite"));
+    expect(testIdAll("announcer-polite")[1]).toHaveTextContent("Hello Polite");
+
+    // Clear
+    fireEvent.click(text("clear"));
+    expect(testIdAll("announcer-polite")[1]).toHaveTextContent("");
+  });
+
+  test("LiveAnnouncer renders with no a11y violations", async () => {
+    announce("Hello a11y");
+    const results = await axe(document.body);
+
+    expect(results).toHaveNoViolations();
+  });
+});
diff --git a/src/utils/LiveAnnouncer.tsx b/src/utils/LiveAnnouncer.tsx
@@ -27,7 +27,7 @@ type TAriaLive = "assertive" | "off" | "polite" | undefined;
  */
 export function announce(
   message: string,
-  assertiveness = "assertive",
+  assertiveness: TAriaLive = "assertive",
   timeout = LIVEREGION_TIMEOUT_DELAY,
 ) {
   ensureInstance(announcer =>
@@ -70,7 +70,7 @@ function ensureInstance(callback: (announcer: any) => void) {
   }
 }
 
-const LiveRegionAnnouncer = React.forwardRef((props, ref) => {
+export const LiveRegionAnnouncer = React.forwardRef((props, ref) => {
   const [assertiveMessage, setAssertiveMessage] = useState("");
   const [politeMessage, setPoliteMessage] = useState("");
 
@@ -153,6 +153,7 @@ function MessageBlock({
 }) {
   return (
     <VisuallyHidden
+      data-testid={`announcer-${ariaLive}`}
       aria-live={ariaLive}
       aria-relevant="additions"
       aria-atomic="true"