test: refactored all tests

src/accordion/__tests__/Accordion.test.tsx

@@ -1,32 +1,40 @@
 import * as React from "react";
+import userEvent from "@testing-library/user-event";
 import { axe, render, press } from "reakit-test-utils";
 
 import {
-  AccordionPanel,
   Accordion,
+  AccordionPanel,
   AccordionTrigger,
   useAccordionState,
+  AccordionInitialState,
 } from "../index";
 
-const AccordionComponent = (props: any) => {
+const AccordionComponent = (props: AccordionInitialState) => {
   const state = useAccordionState(props);
 
   return (
     <Accordion {...state}>
       <h3>
-        <AccordionTrigger {...state}>Trigger 1</AccordionTrigger>
+        <AccordionTrigger {...state}>trigger 1</AccordionTrigger>
       </h3>
-      <AccordionPanel {...state}>Panel 1</AccordionPanel>
+      <AccordionPanel {...state}>panel 1</AccordionPanel>
       <h3>
         <AccordionTrigger id="accordion-2" {...state}>
-          Trigger 2
+          trigger 2
         </AccordionTrigger>
       </h3>
-      <AccordionPanel {...state}>Panel 2</AccordionPanel>
+      <AccordionPanel {...state}>panel 2</AccordionPanel>
+      <h3>
+        <AccordionTrigger {...state}>trigger 3</AccordionTrigger>
+      </h3>
+      <AccordionPanel {...state}>panel 3</AccordionPanel>
       <h3>
-        <AccordionTrigger {...state}>Trigger 3</AccordionTrigger>
+        <AccordionTrigger disabled {...state}>
+          disabled
+        </AccordionTrigger>
       </h3>
-      <AccordionPanel {...state}>Panel 3</AccordionPanel>
+      <AccordionPanel {...state}>disabled panel</AccordionPanel>
     </Accordion>
   );
 };
@@ -42,105 +50,131 @@ describe("Accordion", () => {
     const { getByText: text } = render(<AccordionComponent />);
 
     press.Tab();
-    expect(text("Trigger 1")).toHaveFocus();
+    expect(text("trigger 1")).toHaveFocus();
+    press.ArrowDown();
+    expect(text("trigger 2")).toHaveFocus();
     press.ArrowDown();
-    expect(text("Trigger 2")).toHaveFocus();
+    expect(text("trigger 3")).toHaveFocus();
     press.ArrowDown();
-    expect(text("Trigger 3")).toHaveFocus();
+    expect(text("disabled")).toHaveFocus();
     press.ArrowDown();
-    expect(text("Trigger 3")).toHaveFocus();
+    expect(text("disabled")).toHaveFocus();
     press.ArrowUp();
-    expect(text("Trigger 2")).toHaveFocus();
+    expect(text("trigger 3")).toHaveFocus();
     press.ArrowUp();
-    expect(text("Trigger 1")).toHaveFocus();
+    expect(text("trigger 2")).toHaveFocus();
+  });
+
+  it("Accordion should work proper with mouse", () => {
+    const { getByText: text } = render(<AccordionComponent />);
+
+    expect(text("panel 1")).not.toBeVisible();
+
+    userEvent.click(text("trigger 1"));
+    expect(text("panel 1")).toBeVisible();
+
+    userEvent.click(text("trigger 2"));
+    expect(text("panel 2")).toBeVisible();
+
+    userEvent.click(text("trigger 3"));
+    expect(text("panel 3")).toBeVisible();
   });
 
   it("Accordion should have proper keyboard navigation when on loop", () => {
     const { getByText: text } = render(<AccordionComponent loop />);
 
     press.Tab();
-    expect(text("Trigger 1")).toHaveFocus();
+    expect(text("trigger 1")).toHaveFocus();
+    press.ArrowDown();
+    expect(text("trigger 2")).toHaveFocus();
     press.ArrowDown();
-    expect(text("Trigger 2")).toHaveFocus();
+    expect(text("trigger 3")).toHaveFocus();
     press.ArrowDown();
-    expect(text("Trigger 3")).toHaveFocus();
+    expect(text("disabled")).toHaveFocus();
     press.ArrowDown();
-    expect(text("Trigger 1")).toHaveFocus();
+    expect(text("trigger 1")).toHaveFocus();
     press.ArrowUp();
-    expect(text("Trigger 3")).toHaveFocus();
+    expect(text("disabled")).toHaveFocus();
     press.ArrowUp();
-    expect(text("Trigger 2")).toHaveFocus();
+    expect(text("trigger 3")).toHaveFocus();
   });
 
   it.each([true, false])("Accordion allowToggle: %s", toggle => {
     const { getByText: text } = render(
       <AccordionComponent allowToggle={toggle} />,
     );
 
+    const panel1 = text("panel 1");
+
     press.Tab();
-    expect(text("Trigger 1")).toHaveFocus();
-    expect(text("Panel 1")).not.toBeVisible();
+    expect(text("trigger 1")).toHaveFocus();
+    expect(panel1).not.toBeVisible();
 
     if (toggle) {
       // if allowToggle is true then pressing again will close it
       press.Enter();
-      expect(text("Panel 1")).toBeVisible();
+      expect(panel1).toBeVisible();
       press.Enter();
-      expect(text("Panel 1")).not.toBeVisible();
+      expect(panel1).not.toBeVisible();
     } else {
       // if allowToggle is false then pressing again will close it
       press.Enter();
-      expect(text("Panel 1")).toBeVisible();
+      expect(panel1).toBeVisible();
       press.Enter();
-      expect(text("Panel 1")).toBeVisible();
+      expect(panel1).toBeVisible();
     }
   });
 
   it("Accordion should open/close properly", () => {
     const { getByText: text } = render(<AccordionComponent />);
+    const panel1 = text("panel 1");
+    const panel2 = text("panel 2");
 
     press.Tab();
-    expect(text("Trigger 1")).toHaveFocus();
-    expect(text("Panel 1")).not.toBeVisible();
-    press.Enter();
-    expect(text("Panel 1")).toBeVisible();
+    expect(text("trigger 1")).toHaveFocus();
+    expect(panel1).not.toBeVisible();
+    // should work with SPACE too
+    press.Space();
+    expect(panel1).toBeVisible();
 
     // go to next panel
     press.ArrowDown();
-    expect(text("Panel 2")).not.toBeVisible();
+    expect(panel2).not.toBeVisible();
     press.Enter();
-    expect(text("Panel 2")).toBeVisible();
+    expect(panel2).toBeVisible();
 
     // panel 1 should be closed now if allowMultiple: false
-    expect(text("Panel 1")).not.toBeVisible();
+    expect(panel1).not.toBeVisible();
   });
 
   it("Accordion should open/close properly with AllowMultiple", () => {
     const { getByText: text } = render(<AccordionComponent allowMultiple />);
+    const panel1 = text("panel 1");
+    const panel2 = text("panel 2");
 
     press.Tab();
-    expect(text("Trigger 1")).toHaveFocus();
-    expect(text("Panel 1")).not.toBeVisible();
+    expect(text("trigger 1")).toHaveFocus();
+    expect(panel1).not.toBeVisible();
 
     press.Enter();
-    expect(text("Panel 1")).toBeVisible();
+    expect(panel1).toBeVisible();
 
     // go to next panel
     press.ArrowDown();
     press.Enter();
-    expect(text("Panel 2")).toBeVisible();
+    expect(panel2).toBeVisible();
 
     // panel 1 should be visible since allowmultiple is true
-    expect(text("Panel 1")).toBeVisible();
+    expect(panel1).toBeVisible();
   });
 
   it("Accordion should have none selected by default", () => {
     const { getByText: text } = render(<AccordionComponent />);
 
     press.Tab();
-    expect(text("Panel 1")).not.toBeVisible();
-    expect(text("Panel 2")).not.toBeVisible();
-    expect(text("Panel 3")).not.toBeVisible();
+    expect(text("panel 1")).not.toBeVisible();
+    expect(text("panel 2")).not.toBeVisible();
+    expect(text("panel 3")).not.toBeVisible();
   });
 
   it("Accordion with selectedId given to be selected properly", () => {
@@ -149,26 +183,38 @@ describe("Accordion", () => {
     );
 
     press.Tab();
-    expect(text("Panel 1")).not.toBeVisible();
-    expect(text("Panel 2")).toBeVisible();
+    expect(text("panel 1")).not.toBeVisible();
+    expect(text("panel 2")).toBeVisible();
   });
 
   it("Accordion manual: false", () => {
     const { getByText: text } = render(<AccordionComponent manual={false} />);
 
     press.Tab();
-    expect(text("Trigger 1")).toHaveFocus();
-    expect(text("Panel 1")).toBeVisible();
+    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();
+    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();
+    expect(text("trigger 3")).toHaveFocus();
+    expect(text("panel 3")).toBeVisible();
+  });
+
+  it("Accordion disabled item", () => {
+    const { getByText: text } = render(<AccordionComponent />);
+
+    press.Tab();
+    expect(text("trigger 1")).toHaveFocus();
+    press.Enter();
+    expect(text("panel 1")).toBeVisible();
+
+    userEvent.click(text("disabled"));
+    expect(text("disabled panel")).not.toBeVisible();
   });
 
   test("Accordion renders with no a11y violations", async () => {

src/accordion/__tests__/AccordionState.test.ts

@@ -13,32 +13,10 @@ function render({
     .result;
 }
 
-test("Accordion: initial state", () => {
-  const result = render();
+describe("useAccordionState", () => {
+  test("initial state", () => {
+    const result = render();
 
-  expect(result.current).toMatchInlineSnapshot(`
-    Object {
-      "allowMultiple": false,
-      "allowToggle": false,
-      "baseId": "base",
-      "currentId": undefined,
-      "groups": Array [],
-      "items": Array [],
-      "loop": false,
-      "manual": true,
-      "orientation": "vertical",
-      "panels": Array [],
-      "rtl": false,
-      "selectedId": null,
-      "selectedIds": Array [],
-      "unstable_angular": false,
-      "unstable_hasActiveWidget": false,
-      "unstable_idCountRef": Object {
-        "current": 0,
-      },
-      "unstable_moves": 0,
-      "unstable_virtual": false,
-      "wrap": false,
-    }
-  `);
+    expect(result.current).toMatchSnapshot();
+  });
 });

src/accordion/__tests__/__snapshots__/Accordion.test.tsx.snap

@@ -13,7 +13,7 @@ exports[`Accordion should render correctly 1`] = `
         tabindex="0"
         type="button"
       >
-        Trigger 1
+        trigger 1
       </button>
     </h3>
     <div
@@ -23,7 +23,7 @@ exports[`Accordion should render correctly 1`] = `
       role="region"
       style="display: none;"
     >
-      Panel 1
+      panel 1
     </div>
     <h3>
       <button
@@ -33,7 +33,7 @@ exports[`Accordion should render correctly 1`] = `
         tabindex="0"
         type="button"
       >
-        Trigger 2
+        trigger 2
       </button>
     </h3>
     <div
@@ -43,7 +43,7 @@ exports[`Accordion should render correctly 1`] = `
       role="region"
       style="display: none;"
     >
-      Panel 2
+      panel 2
     </div>
     <h3>
       <button
@@ -53,7 +53,7 @@ exports[`Accordion should render correctly 1`] = `
         tabindex="0"
         type="button"
       >
-        Trigger 3
+        trigger 3
       </button>
     </h3>
     <div
@@ -63,7 +63,29 @@ exports[`Accordion should render correctly 1`] = `
       role="region"
       style="display: none;"
     >
-      Panel 3
+      panel 3
+    </div>
+    <h3>
+      <button
+        aria-controls="accordion-12"
+        aria-disabled="true"
+        aria-expanded="false"
+        id="accordion-10"
+        style="pointer-events: none;"
+        tabindex="0"
+        type="button"
+      >
+        disabled
+      </button>
+    </h3>
+    <div
+      aria-labelledby="accordion-10"
+      hidden=""
+      id="accordion-12"
+      role="region"
+      style="display: none;"
+    >
+      disabled panel
     </div>
   </div>
 </DocumentFragment>