test: added tests for accordion

adaptui · Sep 8, 2020 · faf10fd · faf10fd
1 parent a2ccec2
commit faf10fd
Show file tree

Hide file tree

Showing 4 changed files with 169 additions and 4 deletions.
diff --git a/jest.setup.js b/jest.setup.js
@@ -3,11 +3,12 @@ const {
   printReceived,
   printExpected,
 } = require("jest-matcher-utils");
+const { toHaveNoViolations: axeMatchers } = require("jest-axe");
 const matchers = require("@testing-library/jest-dom/matchers");
 
 // Consider [aria-activedescendant="${id}"] #${id} as the focused element.
 function toHaveFocus(element) {
-  const result = matchers.toHaveFocus(element);
+  const result = matchers.toHaveFocus.call(this, element);
   const { activeElement } = element.ownerDocument;
   const activeId =
     activeElement && activeElement.getAttribute("aria-activedescendant");
@@ -19,7 +20,7 @@ function toHaveFocus(element) {
         return [
           matcherHint(`${this.isNot ? ".not" : ""}.toHaveFocus`, "element", ""),
           "",
-          "Expected",
+          "Expected:",
           `  ${printExpected(element)}`,
           "Received:",
           `  ${printReceived(element.ownerDocument.getElementById(activeId))}`,
@@ -30,4 +31,4 @@ function toHaveFocus(element) {
   };
 }
 
-expect.extend({ ...matchers, toHaveFocus });
+expect.extend({ ...matchers, ...axeMatchers, toHaveFocus });
diff --git a/package.json b/package.json
@@ -52,12 +52,14 @@
     "@storybook/addon-storysource": "6.0.21",
     "@storybook/react": "6.0.21",
     "@testing-library/jest-dom": "^5.11.4",
+    "@testing-library/react": "^11.0.2",
     "@testing-library/react-hooks": "^3.4.1",
     "@types/jest": "^26.0.13",
     "@types/jest-axe": "^3.5.0",
     "@types/react": "16.9.49",
     "@types/react-dom": "16.9.8",
     "@types/react-transition-group": "4.4.0",
+    "@types/testing-library__jest-dom": "^5.9.2",
     "@types/uuid": "8.3.0",
     "@typescript-eslint/eslint-plugin": "4.1.0",
     "@typescript-eslint/parser": "4.1.0",

diff --git a/src/accordion/__tests__/Accordion.test.tsx b/src/accordion/__tests__/Accordion.test.tsx
@@ -0,0 +1,162 @@
+import * as React from "react";
+import { render, press } from "reakit-test-utils";
+
+import {
+  AccordionPanel,
+  AccordionItem,
+  AccordionTrigger,
+  useAccordionState,
+} from "..";
+
+const AccordionComponent = (props: any) => {
+  const state = useAccordionState(props);
+
+  return (
+    <div>
+      <AccordionItem {...state}>
+        <h3>
+          <AccordionTrigger {...state}>Trigger 1</AccordionTrigger>
+        </h3>
+        <AccordionPanel {...state}>Panel 1</AccordionPanel>
+      </AccordionItem>
+      <AccordionItem id="accordion-2" {...state}>
+        <h3>
+          <AccordionTrigger {...state}>Trigger 2</AccordionTrigger>
+        </h3>
+        <AccordionPanel {...state}>Panel 2</AccordionPanel>
+      </AccordionItem>
+      <AccordionItem {...state}>
+        <h3>
+          <AccordionTrigger {...state}>Trigger 3</AccordionTrigger>
+        </h3>
+        <AccordionPanel {...state}>Panel 3</AccordionPanel>
+      </AccordionItem>
+    </div>
+  );
+};
+
+test("Accordion should have proper keyboard navigation", () => {
+  const { getByText: text } = render(<AccordionComponent />);
+
+  press.Tab();
+  expect(text("Trigger 1")).toHaveFocus();
+  press.ArrowDown();
+  expect(text("Trigger 2")).toHaveFocus();
+  press.ArrowDown();
+  expect(text("Trigger 3")).toHaveFocus();
+  press.ArrowDown();
+  expect(text("Trigger 1")).toHaveFocus();
+  press.ArrowUp();
+  expect(text("Trigger 3")).toHaveFocus();
+  press.ArrowUp();
+  expect(text("Trigger 2")).toHaveFocus();
+});
+
+test("Accordion should have proper keyboard navigation (loop: false)", () => {
+  const { getByText: text } = render(<AccordionComponent loop={false} />);
+
+  press.Tab();
+  expect(text("Trigger 1")).toHaveFocus();
+  press.ArrowDown();
+  expect(text("Trigger 2")).toHaveFocus();
+  press.ArrowDown();
+  expect(text("Trigger 3")).toHaveFocus();
+  press.ArrowDown();
+  expect(text("Trigger 3")).toHaveFocus();
+  press.ArrowUp();
+  expect(text("Trigger 2")).toHaveFocus();
+  press.ArrowUp();
+  expect(text("Trigger 1")).toHaveFocus();
+});
+
+[true, false].forEach(toggle => {
+  test(`Accordion allowToggle: ${toggle}`, () => {
+    const { getByText: text } = render(
+      <AccordionComponent allowToggle={toggle} />,
+    );
+
+    press.Tab();
+    press.Enter();
+    expect(text("Trigger 1")).toHaveFocus();
+    expect(text("Panel 1")).toBeVisible();
+
+    if (toggle) {
+      // if allowToggle is true then pressing again will close it
+      press.Enter();
+      expect(text("Panel 1")).not.toBeVisible();
+    } else {
+      // if allowToggle is false then pressing again will close it
+      press.Enter();
+      expect(text("Panel 1")).toBeVisible();
+    }
+  });
+});
+
+test("Accordion should open/close properly with AllowMultiple: false", () => {
+  const { getByText: text } = render(<AccordionComponent />);
+
+  press.Tab();
+  expect(text("Trigger 1")).toHaveFocus();
+
+  expect(text("Panel 1")).not.toBeVisible();
+  press.Enter();
+  expect(text("Panel 1")).toBeVisible();
+
+  // go to next panel
+  press.ArrowDown();
+  expect(text("Panel 2")).not.toBeVisible();
+  press.Enter();
+  expect(text("Panel 2")).toBeVisible();
+
+  // panel 1 should be closed now if allowMultiple: false
+  expect(text("Panel 1")).not.toBeVisible();
+});
+
+test("Accordion should open/close properly with AllowMultiple: true", () => {
+  const { getByText: text } = render(
+    <AccordionComponent allowMultiple={true} />,
+  );
+
+  press.Tab();
+  expect(text("Trigger 1")).toHaveFocus();
+
+  expect(text("Panel 1")).not.toBeVisible();
+  press.Enter();
+  expect(text("Panel 1")).toBeVisible();
+
+  // go to next panel
+  press.ArrowDown();
+  press.Enter();
+  expect(text("Panel 2")).toBeVisible();
+
+  // panel 1 should be visible since allowmultiple is true
+  expect(text("Panel 1")).toBeVisible();
+});
+
+test("Accordion should have proper default active", () => {
+  const { getByText: text } = render(
+    <AccordionComponent defaultActiveId="accordion-2" />,
+  );
+
+  press.Tab();
+  expect(text("Panel 1")).not.toBeVisible();
+  expect(text("Panel 2")).toBeVisible();
+});
+
+test("Accordion manual: false", () => {
+  const { getByText: text } = render(<AccordionComponent manual={false} />);
+
+  press.Tab();
+  expect(text("Trigger 1")).toHaveFocus();
+  expect(text("Panel 1")).toBeVisible();
+
+  // go to next panel
+  press.ArrowDown();
+  expect(text("Trigger 2")).toHaveFocus();
+  expect(text("Panel 2")).toBeVisible();
+
+  // go to next panel
+  press.ArrowDown();
+  expect(text("Trigger 3")).toHaveFocus();
+  expect(text("Panel 3")).toBeVisible();
+});
diff --git a/tsconfig.json b/tsconfig.json
@@ -18,7 +18,7 @@
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
     "downlevelIteration": true,
-    "types": ["node", "jest"]
+    "types": ["node", "jest", "@testing-library/jest-dom"]
   },
   "exclude": ["node_modules"]
 }