test: refactored tests & added utility tests

.github/workflows/test.yml

@@ -32,6 +32,11 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-yarn-
 
+      - name: Setup timezone
+        uses: zcong1993/setup-timezone@master
+        with:
+          timezone: Asia/Kolkata
+
       - name: install deps
         run: yarn
       - name: Test

package.json

@@ -82,6 +82,7 @@
     "@types/jest": "26.0.14",
     "@types/jest-axe": "3.5.0",
     "@types/jest-in-case": "1.0.2",
+    "@types/mockdate": "^2.0.0",
     "@types/react": "16.9.52",
     "@types/react-dom": "16.9.8",
     "@types/react-transition-group": "4.4.0",
@@ -114,6 +115,7 @@
     "jest-matcher-utils": "26.5.2",
     "lint-staged": "10.4.0",
     "lodash": "4.17.20",
+    "mockdate": "^3.0.2",
     "prettier": "2.1.2",
     "react": "16.13.1",
     "react-dom": "16.13.1",

src/accordion/__tests__/Accordion.test.tsx

@@ -31,42 +31,42 @@ const AccordionComponent = (props: any) => {
   );
 };
 
-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 3")).toHaveFocus();
-  press.ArrowUp();
-  expect(text("Trigger 2")).toHaveFocus();
-  press.ArrowUp();
-  expect(text("Trigger 1")).toHaveFocus();
-});
+describe("Accordion", () => {
+  it("Accordion should have proper keyboard navigation", () => {
+    const { getByText: text } = render(<AccordionComponent />);
 
-test("Accordion should have proper keyboard navigation when on loop", () => {
-  const { getByText: text } = render(<AccordionComponent loop />);
-
-  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();
-});
+    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();
+  });
+
+  it("Accordion should have proper keyboard navigation when on loop", () => {
+    const { getByText: text } = render(<AccordionComponent loop />);
+
+    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();
+  });
 
-[true, false].forEach(toggle => {
-  test(`Accordion allowToggle: ${toggle}`, () => {
+  it.each([true, false])("Accordion allowToggle: %s", toggle => {
     const { getByText: text } = render(
       <AccordionComponent allowToggle={toggle} />,
     );
@@ -89,86 +89,86 @@ test("Accordion should have proper keyboard navigation when on loop", () => {
       expect(text("Panel 1")).toBeVisible();
     }
   });
-});
 
-test("Accordion should open/close properly", () => {
-  const { getByText: text } = render(<AccordionComponent />);
+  it("Accordion should open/close properly", () => {
+    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();
+    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();
+    // 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();
-});
+    // panel 1 should be closed now if allowMultiple: false
+    expect(text("Panel 1")).not.toBeVisible();
+  });
 
-test("Accordion should open/close properly with AllowMultiple", () => {
-  const { getByText: text } = render(<AccordionComponent allowMultiple />);
+  it("Accordion should open/close properly with AllowMultiple", () => {
+    const { getByText: text } = render(<AccordionComponent allowMultiple />);
 
-  press.Tab();
-  expect(text("Trigger 1")).toHaveFocus();
-  expect(text("Panel 1")).not.toBeVisible();
+    press.Tab();
+    expect(text("Trigger 1")).toHaveFocus();
+    expect(text("Panel 1")).not.toBeVisible();
 
-  press.Enter();
-  expect(text("Panel 1")).toBeVisible();
+    press.Enter();
+    expect(text("Panel 1")).toBeVisible();
 
-  // go to next panel
-  press.ArrowDown();
-  press.Enter();
-  expect(text("Panel 2")).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();
-});
+    // panel 1 should be visible since allowmultiple is true
+    expect(text("Panel 1")).toBeVisible();
+  });
 
-test("Accordion should have none selected by default", () => {
-  const { getByText: text } = render(<AccordionComponent />);
+  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();
-});
+    press.Tab();
+    expect(text("Panel 1")).not.toBeVisible();
+    expect(text("Panel 2")).not.toBeVisible();
+    expect(text("Panel 3")).not.toBeVisible();
+  });
 
-test("Accordion with selectedId given to be selected properly", () => {
-  const { getByText: text } = render(
-    <AccordionComponent selectedId="accordion-2" />,
-  );
+  it("Accordion with selectedId given to be selected properly", () => {
+    const { getByText: text } = render(
+      <AccordionComponent selectedId="accordion-2" />,
+    );
 
-  press.Tab();
-  expect(text("Panel 1")).not.toBeVisible();
-  expect(text("Panel 2")).toBeVisible();
-});
+    press.Tab();
+    expect(text("Panel 1")).not.toBeVisible();
+    expect(text("Panel 2")).toBeVisible();
+  });
 
-test("Accordion manual: false", () => {
-  const { getByText: text } = render(<AccordionComponent manual={false} />);
+  it("Accordion manual: false", () => {
+    const { getByText: text } = render(<AccordionComponent manual={false} />);
 
-  press.Tab();
-  expect(text("Trigger 1")).toHaveFocus();
-  expect(text("Panel 1")).toBeVisible();
+    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 2")).toHaveFocus();
+    expect(text("Panel 2")).toBeVisible();
 
-  // go to next panel
-  press.ArrowDown();
-  expect(text("Trigger 3")).toHaveFocus();
-  expect(text("Panel 3")).toBeVisible();
-});
+    // go to next panel
+    press.ArrowDown();
+    expect(text("Trigger 3")).toHaveFocus();
+    expect(text("Panel 3")).toBeVisible();
+  });
 
-test("Accordion renders with no a11y violations", async () => {
-  const { container } = render(<AccordionComponent />);
-  const results = await axe(container);
+  test("Accordion renders with no a11y violations", async () => {
+    const { container } = render(<AccordionComponent />);
+    const results = await axe(container);
 
-  expect(results).toHaveNoViolations();
+    expect(results).toHaveNoViolations();
+  });
 });

src/accordion/__tests__/AccordionState.test.ts

@@ -13,7 +13,7 @@ function render({
     .result;
 }
 
-test("initial state", () => {
+test("Accordion: initial state", () => {
   const result = render();
   expect(result.current).toMatchInlineSnapshot(`
     Object {

src/calendar/__tests__/Calendar.test.tsx

@@ -129,40 +129,40 @@ describe("Calendar", () => {
     expect(label("Friday, November 6, 2020")).toHaveFocus();
     expect(testId("current-year")).toHaveTextContent("November 2020");
   });
-});
 
-test("should have min/max values", async () => {
-  const { getByLabelText: label } = render(
-    <CalendarComp
-      defaultValue={format(new Date(2020, 10, 7), "yyyy-MM-dd")}
-      minValue={format(subWeeks(new Date(2020, 10, 7), 1), "yyyy-MM-dd")}
-      maxValue={format(addWeeks(new Date(2020, 10, 7), 1), "yyyy-MM-dd")}
-    />,
-  );
+  test("should have min/max values", async () => {
+    const { getByLabelText: label } = render(
+      <CalendarComp
+        defaultValue={format(new Date(2020, 10, 7), "yyyy-MM-dd")}
+        minValue={format(subWeeks(new Date(2020, 10, 7), 1), "yyyy-MM-dd")}
+        maxValue={format(addWeeks(new Date(2020, 10, 7), 1), "yyyy-MM-dd")}
+      />,
+    );
 
-  press.Tab();
-  press.Tab();
-  press.Tab();
-  press.Tab();
-  press.Tab();
-  expect(label("Saturday, November 7, 2020 selected")).toHaveFocus();
-
-  // try to go outside the min max value
-  press.ArrowUp();
-  press.ArrowUp();
-  press.ArrowUp();
-  press.ArrowUp();
-  expect(label("Saturday, October 31, 2020")).toHaveFocus();
-
-  press.ArrowDown();
-  press.ArrowDown();
-  press.ArrowDown();
-  expect(label("Saturday, November 14, 2020")).toHaveFocus();
-});
+    press.Tab();
+    press.Tab();
+    press.Tab();
+    press.Tab();
+    press.Tab();
+    expect(label("Saturday, November 7, 2020 selected")).toHaveFocus();
+
+    // try to go outside the min max value
+    press.ArrowUp();
+    press.ArrowUp();
+    press.ArrowUp();
+    press.ArrowUp();
+    expect(label("Saturday, October 31, 2020")).toHaveFocus();
+
+    press.ArrowDown();
+    press.ArrowDown();
+    press.ArrowDown();
+    expect(label("Saturday, November 14, 2020")).toHaveFocus();
+  });
 
-test("Calendar renders with no a11y violations", async () => {
-  const { container } = render(<CalendarComp />);
-  const results = await axe(container);
+  test("Calendar renders with no a11y violations", async () => {
+    const { container } = render(<CalendarComp />);
+    const results = await axe(container);
 
-  expect(results).toHaveNoViolations();
+    expect(results).toHaveNoViolations();
+  });
 });

src/calendar/__tests__/RangeCalendar.test.tsx

@@ -158,11 +158,11 @@ describe("RangeCalendar", () => {
     const start = baseElement.querySelector("[data-is-selection-start]");
     expect(start).toHaveTextContent("14");
   });
-});
 
-test("RangeCalendar renders with no a11y violations", async () => {
-  const { container } = render(<RangeCalendarComp />);
-  const results = await axe(container);
+  test("RangeCalendar renders with no a11y violations", async () => {
+    const { container } = render(<RangeCalendarComp />);
+    const results = await axe(container);
 
-  expect(results).toHaveNoViolations();
+    expect(results).toHaveNoViolations();
+  });
 });