diff --git a/src/accordion/__tests__/Accordion.test.tsx b/src/accordion/__tests__/Accordion.test.tsx index c67a03e82..f2797d3e5 100644 --- a/src/accordion/__tests__/Accordion.test.tsx +++ b/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 (

- Trigger 1 + trigger 1

- Panel 1 + panel 1

- Trigger 2 + trigger 2

- Panel 2 + panel 2 +

+ trigger 3 +

+ panel 3

- Trigger 3 + + disabled +

- Panel 3 + disabled panel ); }; @@ -42,34 +50,53 @@ describe("Accordion", () => { const { getByText: text } = render(); 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(); + + 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(); 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 => { @@ -77,70 +104,77 @@ describe("Accordion", () => { , ); + 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(); + 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(); + 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(); 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(); 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(); + + 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 () => { diff --git a/src/accordion/__tests__/AccordionState.test.ts b/src/accordion/__tests__/AccordionState.test.ts index 9af8a5e2c..e4281bdf7 100644 --- a/src/accordion/__tests__/AccordionState.test.ts +++ b/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(); + }); }); diff --git a/src/accordion/__tests__/__snapshots__/Accordion.test.tsx.snap b/src/accordion/__tests__/__snapshots__/Accordion.test.tsx.snap index 1d1b39604..ded535791 100644 --- a/src/accordion/__tests__/__snapshots__/Accordion.test.tsx.snap +++ b/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
- Panel 1 + panel 1

- Panel 2 + panel 2

- Panel 3 + panel 3 +
+

+ +

+ diff --git a/src/accordion/__tests__/__snapshots__/AccordionState.test.ts.snap b/src/accordion/__tests__/__snapshots__/AccordionState.test.ts.snap new file mode 100644 index 000000000..0ebb9c64c --- /dev/null +++ b/src/accordion/__tests__/__snapshots__/AccordionState.test.ts.snap @@ -0,0 +1,27 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`useAccordionState initial state 1`] = ` +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, +} +`; diff --git a/src/calendar/__tests__/Calendar.test.tsx b/src/calendar/__tests__/Calendar.test.tsx index d47dbadf2..a30cea9aa 100644 --- a/src/calendar/__tests__/Calendar.test.tsx +++ b/src/calendar/__tests__/Calendar.test.tsx @@ -1,7 +1,7 @@ import * as React from "react"; import MockDate from "mockdate"; import { subWeeks, addWeeks, format } from "date-fns"; -import { axe, render, press } from "reakit-test-utils"; +import { axe, render, press, screen } from "reakit-test-utils"; import { CalendarCell, @@ -15,6 +15,7 @@ import { Calendar as CalendarWrapper, } from "../index"; import { repeat } from "../../utils/test-utils"; +import { cleanup } from "@testing-library/react"; export const CalendarComp: React.FC = props => { const state = useCalendarState(props); @@ -77,6 +78,7 @@ beforeEach(() => { }); afterEach(() => { + cleanup(); MockDate.reset(); }); @@ -85,110 +87,117 @@ describe("Calendar", () => { const { getByTestId: testId } = render(); expect(testId("weekDays").children).toHaveLength(7); - expect(testId("current-year")).toHaveTextContent("October 2020"); + expect(testId("current-year")).toHaveTextContent(/^october 2020$/i); }); it("should have proper calendar header keyboard navigation", () => { - const { getByTestId: testId, getByText: text } = render( - , - ); + render(); + + const currentYear = screen.getByTestId("current-year"); + const { getByText: text } = screen; - expect(testId("current-year")).toHaveTextContent("October 2020"); + expect(currentYear).toHaveTextContent(/^october 2020$/i); press.Tab(); press.Enter(); - expect(text("previous year")).toHaveFocus(); - expect(testId("current-year")).toHaveTextContent("October 2019"); + expect(text(/previous year/i)).toHaveFocus(); + expect(currentYear).toHaveTextContent(/^october 2019$/i); + press.Tab(); press.Enter(); - expect(text("previous month")).toHaveFocus(); - expect(testId("current-year")).toHaveTextContent("September 2019"); + expect(text(/previous month/i)).toHaveFocus(); + expect(currentYear).toHaveTextContent(/^september 2019$/i); + press.Tab(); press.Enter(); - expect(text("next month")).toHaveFocus(); - expect(testId("current-year")).toHaveTextContent("October 2019"); + expect(text(/next month/i)).toHaveFocus(); + expect(currentYear).toHaveTextContent(/^october 2019$/i); + press.Tab(); press.Enter(); - expect(text("next year")).toHaveFocus(); - expect(testId("current-year")).toHaveTextContent("October 2020"); + expect(text(/next year/i)).toHaveFocus(); + expect(currentYear).toHaveTextContent(/^october 2020$/i); }); it("should proper grid navigation", () => { - const { getByTestId: testId, getByLabelText: label } = render( - , - ); + render(); + const currentYear = screen.getByTestId("current-year"); - expect(testId("current-year")).toHaveTextContent("October 2020"); + const { getByLabelText: label } = screen; + + expect(currentYear).toHaveTextContent(/^october 2020$/i); repeat(press.Tab, 5); - expect(label("Wednesday, October 7, 2020 selected")).toHaveFocus(); + expect(label(/wednesday, october 7, 2020 selected/i)).toHaveFocus(); // Let's navigate to 30 repeat(press.ArrowDown, 2); repeat(press.ArrowRight, 2); press.ArrowDown(); - expect(label("Friday, October 30, 2020")).toHaveFocus(); + expect(label(/^friday, october 30, 2020$/i)).toHaveFocus(); // Let's go to next month press.ArrowDown(); - expect(label("Friday, November 6, 2020")).toHaveFocus(); - expect(testId("current-year")).toHaveTextContent("November 2020"); + expect(label(/^friday, november 6, 2020$/i)).toHaveFocus(); + expect(currentYear).toHaveTextContent(/^november 2020$/i); // Grid navigation pageup/down press.PageUp(); - expect(testId("current-year")).toHaveTextContent("October 2020"); + expect(currentYear).toHaveTextContent(/^october 2020$/i); press.PageUp(null, { shiftKey: true }); - expect(testId("current-year")).toHaveTextContent("October 2019"); + expect(currentYear).toHaveTextContent(/^october 2019$/i); }); test("should have min/max values", () => { - const { getByLabelText: label } = render( + render( , ); + const { getByLabelText: label } = screen; repeat(press.Tab, 5); - expect(label("Saturday, November 7, 2020 selected")).toHaveFocus(); + expect(label(/^saturday, november 7, 2020 selected$/i)).toHaveFocus(); // try to go outside the min max value repeat(press.ArrowUp, 4); - expect(label("Saturday, October 31, 2020")).toHaveFocus(); + expect(label(/^saturday, october 31, 2020$/i)).toHaveFocus(); repeat(press.ArrowDown, 3); - expect(label("Saturday, November 14, 2020")).toHaveFocus(); + expect(label(/^saturday, november 14, 2020$/i)).toHaveFocus(); }); test("should be able to go to prev/next month when min/max values are set", () => { - const { getByLabelText: label } = render( + render( , ); + const { getByLabelText: label } = screen; repeat(press.Tab, 5); - expect(label("Saturday, November 7, 2020 selected")).toHaveFocus(); + expect(label(/^saturday, november 7, 2020 selected$/i)).toHaveFocus(); press.PageUp(); - expect(label("Saturday, October 31, 2020")).toHaveFocus(); + expect(label(/^saturday, october 31, 2020$/i)).toHaveFocus(); press.PageDown(); - expect(label("Saturday, November 14, 2020")).toHaveFocus(); + expect(label(/^saturday, november 14, 2020$/i)).toHaveFocus(); // Should not be able to go to next/prev year press.PageDown(null, { shiftKey: true }); - expect(label("Saturday, November 14, 2020")).toHaveFocus(); + expect(label(/^saturday, november 14, 2020$/i)).toHaveFocus(); press.PageUp(null, { shiftKey: true }); - expect(label("Saturday, November 14, 2020")).toHaveFocus(); + expect(label(/^saturday, november 14, 2020$/i)).toHaveFocus(); }); test("should be able to go to prev/next year when min/max values are set", () => { - const { getByLabelText: label } = render( + render( { />, ); + const { getByLabelText: label } = screen; + repeat(press.Tab, 5); - expect(label("Saturday, November 7, 2020 selected")).toHaveFocus(); + expect(label(/^saturday, november 7, 2020 selected$/i)).toHaveFocus(); press.PageUp(); - expect(label("Saturday, October 31, 2020")).toHaveFocus(); + expect(label(/^saturday, october 31, 2020$/i)).toHaveFocus(); press.PageDown(null, { shiftKey: true }); - expect(label("Sunday, October 31, 2021")).toHaveFocus(); + expect(label(/^sunday, october 31, 2021$/i)).toHaveFocus(); press.PageDown(); - expect(label("Sunday, November 14, 2021")).toHaveFocus(); + expect(label(/^sunday, november 14, 2021$/i)).toHaveFocus(); press.PageUp(); - expect(label("Thursday, October 14, 2021")).toHaveFocus(); + expect(label(/^thursday, october 14, 2021$/i)).toHaveFocus(); press.PageUp(null, { shiftKey: true }); - expect(label("Saturday, October 31, 2020")).toHaveFocus(); + expect(label(/^saturday, october 31, 2020$/i)).toHaveFocus(); }); test("Calendar renders with no a11y violations", async () => { diff --git a/src/calendar/__tests__/RangeCalendar.test.tsx b/src/calendar/__tests__/RangeCalendar.test.tsx index ad955d41a..7b426d2a7 100644 --- a/src/calendar/__tests__/RangeCalendar.test.tsx +++ b/src/calendar/__tests__/RangeCalendar.test.tsx @@ -1,8 +1,8 @@ jest.mock("../../utils/LiveAnnouncer"); import * as React from "react"; import MockDate from "mockdate"; -import { cleanup } from "@testing-library/react"; -import { axe, render, press } from "reakit-test-utils"; +import { cleanup, screen } from "@testing-library/react"; +import { axe, render, press, fireEvent } from "reakit-test-utils"; import { Calendar, @@ -100,7 +100,7 @@ describe("RangeCalendar", () => { }); it("should have proper initial start and end ranges", () => { - const { getByLabelText: label, baseElement } = render( + const { baseElement } = render( , @@ -109,7 +109,7 @@ describe("RangeCalendar", () => { const start = baseElement.querySelector("[data-is-selection-start]"); // If anyone is reading this code from future // Note that this will fail again on 15th october 2050. - const anyMiddleDate = label("Saturday, October 15, 2050"); + const anyMiddleDate = screen.getByLabelText(/Saturday, October 15, 2050/); const end = baseElement.querySelector("[data-is-selection-end]"); expect(start).toHaveTextContent("7"); @@ -140,18 +140,20 @@ describe("RangeCalendar", () => { it("should be able to select ranges with keyboard navigation", () => { MockDate.set(new Date(2020, 10, 7)); - const { getByLabelText: label, getByTestId: testId, baseElement } = render( + const { baseElement } = render( , ); - expect(testId("current-year")).toHaveTextContent("October 2020"); + expect(screen.getByTestId("current-year")).toHaveTextContent( + /October 2020/i, + ); repeat(press.Tab, 5); expect( - label( - "Wednesday, October 7, 2020 selected (click to start selecting range)", + screen.getByLabelText( + /^Wednesday, October 7, 2020 selected \(click to start selecting range\)$/, ), ).toHaveFocus(); press.ArrowDown(); // go to down just for some variety @@ -168,44 +170,48 @@ describe("RangeCalendar", () => { repeat(press.ArrowDown, 3); repeat(press.ArrowLeft, 2); expect( - label("Monday, November 2, 2020 (click to finish selecting range)"), + screen.getByLabelText( + /^Monday, November 2, 2020 \(click to finish selecting range\)$/i, + ), ).toHaveFocus(); // finish the selection press.Enter(); // check if the selection is actually finished or not repeat(press.ArrowRight, 2); - expect( - label("Wednesday, November 4, 2020 (click to start selecting range)"), - ).toHaveFocus(); - expect( - label("Wednesday, November 4, 2020 (click to start selecting range)") - ?.parentElement, - ).not.toHaveAttribute("data-is-range-selection"); + const fourThNovember = screen.getByLabelText( + /^Wednesday, November 4, 2020 \(click to start selecting range\)$/i, + ); + expect(fourThNovember).toHaveFocus(); + expect(fourThNovember?.parentElement).not.toHaveAttribute( + "data-is-range-selection", + ); // Verify selection ranges const end = baseElement.querySelector("[data-is-selection-end]"); expect(end).toHaveTextContent("2"); - testId("prev-month").click(); + fireEvent.click(screen.getByTestId("prev-month")); // We need to go to previous month to see/verify the start selection const start = baseElement.querySelector("[data-is-selection-start]"); expect(start).toHaveTextContent("14"); }); it("should be able to cancel selection", () => { - const { getByLabelText: label, getByTestId: testId } = render( + render( , ); - expect(testId("current-year")).toHaveTextContent("October 2019"); + expect(screen.getByTestId("current-year")).toHaveTextContent( + /October 2019/i, + ); repeat(press.Tab, 5); expect( - label( - "Monday, October 7, 2019 selected (click to start selecting range)", + screen.getByLabelText( + /^Monday, October 7, 2019 selected \(click to start selecting range\)$/i, ), ).toHaveFocus(); press.ArrowDown(); @@ -215,12 +221,14 @@ describe("RangeCalendar", () => { press.ArrowDown(); repeat(press.ArrowRight, 2); expect( - label("Wednesday, October 23, 2019 (click to finish selecting range)"), + screen.getByLabelText( + /^Wednesday, October 23, 2019 \(click to finish selecting range\)$/i, + ), ).toHaveFocus(); press.Escape(); - isEndSelection(label, /Wednesday, October 30, 2019/); - isStartSelection(label, /Monday, October 7, 2019 selected/); + isEndSelection(screen.getByLabelText(/Wednesday, October 30, 2019/)); + isStartSelection(screen.getByLabelText(/Monday, October 7, 2019 selected/)); }); test("RangeCalendar renders with no a11y violations", async () => { diff --git a/src/calendar/__tests__/__snapshots__/utils.test.tsx.snap b/src/calendar/__tests__/__snapshots__/utils.test.tsx.snap new file mode 100644 index 000000000..dbb34d7cc --- /dev/null +++ b/src/calendar/__tests__/__snapshots__/utils.test.tsx.snap @@ -0,0 +1,135 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Calendar Utils generateDaysInMonthArray 1`] = ` +Array [ + Array [ + 2020-02-01T11:30:00.000Z, + 2020-02-02T11:30:00.000Z, + 2020-02-03T11:30:00.000Z, + 2020-02-04T11:30:00.000Z, + 2020-02-05T11:30:00.000Z, + 2020-02-06T11:30:00.000Z, + 2020-02-07T11:30:00.000Z, + ], + Array [ + 2020-02-08T11:30:00.000Z, + 2020-02-09T11:30:00.000Z, + 2020-02-10T11:30:00.000Z, + 2020-02-11T11:30:00.000Z, + 2020-02-12T11:30:00.000Z, + 2020-02-13T11:30:00.000Z, + 2020-02-14T11:30:00.000Z, + ], + Array [ + 2020-02-15T11:30:00.000Z, + 2020-02-16T11:30:00.000Z, + 2020-02-17T11:30:00.000Z, + 2020-02-18T11:30:00.000Z, + 2020-02-19T11:30:00.000Z, + 2020-02-20T11:30:00.000Z, + 2020-02-21T11:30:00.000Z, + ], + Array [ + 2020-02-22T11:30:00.000Z, + 2020-02-23T11:30:00.000Z, + 2020-02-24T11:30:00.000Z, + 2020-02-25T11:30:00.000Z, + 2020-02-26T11:30:00.000Z, + 2020-02-27T11:30:00.000Z, + 2020-02-28T11:30:00.000Z, + ], + Array [ + 2020-02-29T11:30:00.000Z, + 2020-03-01T11:30:00.000Z, + 2020-03-02T11:30:00.000Z, + 2020-03-03T11:30:00.000Z, + 2020-03-04T11:30:00.000Z, + 2020-03-05T11:30:00.000Z, + 2020-03-06T11:30:00.000Z, + ], + Array [ + 2020-03-07T11:30:00.000Z, + 2020-03-08T11:30:00.000Z, + 2020-03-09T11:30:00.000Z, + 2020-03-10T11:30:00.000Z, + 2020-03-11T11:30:00.000Z, + 2020-03-12T11:30:00.000Z, + 2020-03-13T11:30:00.000Z, + ], + Array [ + 2020-03-14T11:30:00.000Z, + 2020-03-15T11:30:00.000Z, + 2020-03-16T11:30:00.000Z, + 2020-03-17T11:30:00.000Z, + 2020-03-18T11:30:00.000Z, + 2020-03-19T11:30:00.000Z, + 2020-03-20T11:30:00.000Z, + ], +] +`; + +exports[`Calendar Utils useWeekDays 1`] = ` +Array [ + Object { + "abbr": "Sun", + "title": "Sunday", + }, + Object { + "abbr": "Mon", + "title": "Monday", + }, + Object { + "abbr": "Tue", + "title": "Tuesday", + }, + Object { + "abbr": "Wed", + "title": "Wednesday", + }, + Object { + "abbr": "Thu", + "title": "Thursday", + }, + Object { + "abbr": "Fri", + "title": "Friday", + }, + Object { + "abbr": "Sat", + "title": "Saturday", + }, +] +`; + +exports[`Calendar Utils useWeekDays 2`] = ` +Array [ + Object { + "abbr": "Tue", + "title": "Tuesday", + }, + Object { + "abbr": "Wed", + "title": "Wednesday", + }, + Object { + "abbr": "Thu", + "title": "Thursday", + }, + Object { + "abbr": "Fri", + "title": "Friday", + }, + Object { + "abbr": "Sat", + "title": "Saturday", + }, + Object { + "abbr": "Sun", + "title": "Sunday", + }, + Object { + "abbr": "Mon", + "title": "Monday", + }, +] +`; diff --git a/src/calendar/__tests__/utils.test.tsx b/src/calendar/__tests__/utils.test.tsx index fc8e41601..56b8828a6 100644 --- a/src/calendar/__tests__/utils.test.tsx +++ b/src/calendar/__tests__/utils.test.tsx @@ -9,8 +9,8 @@ describe("Calendar Utils", () => { new Date(1999, 4, 4, 0, 0), new Date(2020, 4, 4, 0, 0), ); - expect(range.start.toISOString()).toEqual("1999-05-03T18:30:00.000Z"); - expect(range.end.toISOString()).toEqual("2020-05-03T18:30:00.000Z"); + expect(range.start).toMatchInlineSnapshot(`1999-05-03T18:30:00.000Z`); + expect(range.end).toMatchInlineSnapshot(`2020-05-03T18:30:00.000Z`); }); test("useWeekDays", () => { @@ -20,30 +20,14 @@ describe("Calendar Utils", () => { result: { current }, } = renderHook(() => useWeekDays(0)); - expect(current).toStrictEqual([ - { abbr: "Sun", title: "Sunday" }, - { abbr: "Mon", title: "Monday" }, - { abbr: "Tue", title: "Tuesday" }, - { abbr: "Wed", title: "Wednesday" }, - { abbr: "Thu", title: "Thursday" }, - { abbr: "Fri", title: "Friday" }, - { abbr: "Sat", title: "Saturday" }, - ]); + expect(current).toMatchSnapshot(); } { const { result: { current }, } = renderHook(() => useWeekDays(2)); - expect(current).toStrictEqual([ - { abbr: "Tue", title: "Tuesday" }, - { abbr: "Wed", title: "Wednesday" }, - { abbr: "Thu", title: "Thursday" }, - { abbr: "Fri", title: "Friday" }, - { abbr: "Sat", title: "Saturday" }, - { abbr: "Sun", title: "Sunday" }, - { abbr: "Mon", title: "Monday" }, - ]); + expect(current).toMatchSnapshot(); } }); @@ -51,73 +35,7 @@ describe("Calendar Utils", () => { MockDate.set(new Date("2020-02-01T11:30:00.000Z")); const days = generateDaysInMonthArray(1, 0, 7, 2020); - expect(days).toMatchInlineSnapshot(` - Array [ - Array [ - 2020-02-01T11:30:00.000Z, - 2020-02-02T11:30:00.000Z, - 2020-02-03T11:30:00.000Z, - 2020-02-04T11:30:00.000Z, - 2020-02-05T11:30:00.000Z, - 2020-02-06T11:30:00.000Z, - 2020-02-07T11:30:00.000Z, - ], - Array [ - 2020-02-08T11:30:00.000Z, - 2020-02-09T11:30:00.000Z, - 2020-02-10T11:30:00.000Z, - 2020-02-11T11:30:00.000Z, - 2020-02-12T11:30:00.000Z, - 2020-02-13T11:30:00.000Z, - 2020-02-14T11:30:00.000Z, - ], - Array [ - 2020-02-15T11:30:00.000Z, - 2020-02-16T11:30:00.000Z, - 2020-02-17T11:30:00.000Z, - 2020-02-18T11:30:00.000Z, - 2020-02-19T11:30:00.000Z, - 2020-02-20T11:30:00.000Z, - 2020-02-21T11:30:00.000Z, - ], - Array [ - 2020-02-22T11:30:00.000Z, - 2020-02-23T11:30:00.000Z, - 2020-02-24T11:30:00.000Z, - 2020-02-25T11:30:00.000Z, - 2020-02-26T11:30:00.000Z, - 2020-02-27T11:30:00.000Z, - 2020-02-28T11:30:00.000Z, - ], - Array [ - 2020-02-29T11:30:00.000Z, - 2020-03-01T11:30:00.000Z, - 2020-03-02T11:30:00.000Z, - 2020-03-03T11:30:00.000Z, - 2020-03-04T11:30:00.000Z, - 2020-03-05T11:30:00.000Z, - 2020-03-06T11:30:00.000Z, - ], - Array [ - 2020-03-07T11:30:00.000Z, - 2020-03-08T11:30:00.000Z, - 2020-03-09T11:30:00.000Z, - 2020-03-10T11:30:00.000Z, - 2020-03-11T11:30:00.000Z, - 2020-03-12T11:30:00.000Z, - 2020-03-13T11:30:00.000Z, - ], - Array [ - 2020-03-14T11:30:00.000Z, - 2020-03-15T11:30:00.000Z, - 2020-03-16T11:30:00.000Z, - 2020-03-17T11:30:00.000Z, - 2020-03-18T11:30:00.000Z, - 2020-03-19T11:30:00.000Z, - 2020-03-20T11:30:00.000Z, - ], - ] - `); + expect(days).toMatchSnapshot(); MockDate.reset(); }); diff --git a/src/datepicker/__tests__/DatePicker.test.tsx b/src/datepicker/__tests__/DatePicker.test.tsx index 6c784cbed..780daa9c9 100644 --- a/src/datepicker/__tests__/DatePicker.test.tsx +++ b/src/datepicker/__tests__/DatePicker.test.tsx @@ -1,7 +1,8 @@ -import { format, addWeeks, subWeeks } from "date-fns"; import * as React from "react"; +import { cleanup } from "@testing-library/react"; +import { format, addWeeks, subWeeks } from "date-fns"; -import { axe, render, press } from "reakit-test-utils"; +import { axe, render, press, screen } from "reakit-test-utils"; import { DatePicker, DatePickerSegment, @@ -31,6 +32,7 @@ jest.spyOn(reakit, "unstable_useId").mockImplementation(options => ({ id: options.baseId + "myid" })); */ +afterEach(cleanup); export const CalendarComp: React.FC = state => { return ( @@ -114,99 +116,116 @@ const DatePickerComp: React.FC = props => { ); }; -const openDatePicker = (label: any, testId: any) => { +const openDatePicker = () => { press.Tab(); - expect(label("month", { selector: "div" })).toHaveFocus(); + expect(screen.getByLabelText("month", { selector: "div" })).toHaveFocus(); press.ArrowDown(null, { altKey: true }); - expect(testId("datepicker-content")).toBeVisible(); + expect(screen.getByTestId("datepicker-content")).toBeVisible(); }; describe("DatePicker", () => { it("should open/close the datepicker", () => { - const { getByLabelText: label, getByTestId: testId } = render( - , - ); + render(); - const datepickerContent = testId("datepicker-content"); + const datepickerContent = screen.getByTestId("datepicker-content"); + const segment = screen.getByTestId("segment"); + const month = screen.getByRole("spinbutton", { + name: /month/i, + }); - expect(testId("segment")).toHaveTextContent("11/01/2020"); + expect(segment).toHaveTextContent("11/01/2020"); expect(datepickerContent).not.toBeVisible(); // open - openDatePicker(label, testId); + openDatePicker(); // close press.Escape(); expect(datepickerContent).not.toBeVisible(); - expect(label("month", { selector: "div" })).toHaveFocus(); + expect(month).toHaveFocus(); }); it("should be able to open and select date", () => { - const { getByLabelText: label, getByTestId: testId } = render( - , - ); + render(); + + const segment = screen.getByTestId("segment"); + const datepickerContent = screen.getByTestId("datepicker-content"); + const month = screen.getByRole("spinbutton", { + name: /month/i, + }); // open - openDatePicker(label, testId); + openDatePicker(); // assert focused date on calendar - expect(label("Sunday, November 1, 2020 selected")).toHaveFocus(); + expect( + screen.getByLabelText(/Sunday, November 1, 2020 selected/i), + ).toHaveFocus(); // go to 24 repeat(press.ArrowDown, 3); repeat(press.ArrowRight, 2); - expect(label("Tuesday, November 24, 2020")).toHaveFocus(); + expect(screen.getByLabelText(/Tuesday, November 24, 2020/i)).toHaveFocus(); press.Enter(); - expect(testId("datepicker-content")).not.toBeVisible(); - expect(label("month", { selector: "div" })).toHaveFocus(); - expect(testId("segment")).toHaveTextContent("11/24/2020"); + expect(datepickerContent).not.toBeVisible(); + expect(month).toHaveFocus(); + expect(segment).toHaveTextContent("11/24/2020"); }); it("should be able to open and select date and jump to different dates", () => { - const { getByLabelText: label, getByTestId: testId } = render( - , - ); + render(); + const segment = screen.getByTestId("segment"); + const calendarHeader = screen.getByTestId("calendar-header"); + const datepickerContent = screen.getByTestId("datepicker-content"); + const month = screen.getByRole("spinbutton", { + name: /month/i, + }); - const calendarHeader = testId("calendar-header"); // open - openDatePicker(label, testId); + openDatePicker(); // assert focused date on calendar - expect(label("Sunday, November 1, 2020 selected")).toHaveFocus(); + expect( + screen.getByLabelText(/^Sunday, November 1, 2020 selected$/i), + ).toHaveFocus(); // jump month - expect(calendarHeader).toHaveTextContent("November 2020"); + expect(calendarHeader).toHaveTextContent(/November 2020/i); repeat(press.PageDown, 2); - expect(calendarHeader).toHaveTextContent("January 2021"); + expect(calendarHeader).toHaveTextContent(/January 2021/i); // jump year - expect(calendarHeader).toHaveTextContent("January 2021"); + expect(calendarHeader).toHaveTextContent(/January 2021/i); repeat(() => { press.PageDown(null, { shiftKey: true }); }, 2); - expect(calendarHeader).toHaveTextContent("January 2023"); + expect(calendarHeader).toHaveTextContent(/January 2023/i); press.Enter(); - expect(testId("datepicker-content")).not.toBeVisible(); - expect(label("month", { selector: "div" })).toHaveFocus(); - expect(testId("segment")).toHaveTextContent("01/01/2023"); + expect(datepickerContent).not.toBeVisible(); + expect(month).toHaveFocus(); + expect(segment).toHaveTextContent("01/01/2023"); }); it("should work with AutoFocus", () => { - const { getByLabelText: label } = render( + render( // eslint-disable-next-line jsx-a11y/no-autofocus , ); - expect(label("month", { selector: "div" })).toHaveFocus(); + expect( + screen.getByRole("spinbutton", { + name: /month/i, + }), + ).toHaveFocus(); }); it("should be invalid on out of range value", () => { - const { getByLabelText: label, getByTestId: testId } = render( + render( { />, ); - expect(testId("datepicker")).toHaveAttribute("aria-invalid", "true"); + expect(screen.getByTestId("datepicker")).toHaveAttribute( + "aria-invalid", + "true", + ); }); it("should be disabled", () => { - const { getByTestId: testId } = render(); + render(); - expect(testId("datepicker")).toHaveAttribute("aria-disabled", "true"); + expect(screen.getByTestId("datepicker")).toHaveAttribute( + "aria-disabled", + "true", + ); }); it("should be readonly", () => { - const { getByTestId: testId } = render(); + render(); - expect(testId("datepicker")).toHaveAttribute("aria-readonly", "true"); + expect(screen.getByTestId("datepicker")).toHaveAttribute( + "aria-readonly", + "true", + ); }); test("DatePicker renders with no a11y violations", async () => { diff --git a/src/datepicker/__tests__/DateRangePicker.test.tsx b/src/datepicker/__tests__/DateRangePicker.test.tsx index 3d0c1a922..3ccc28dba 100644 --- a/src/datepicker/__tests__/DateRangePicker.test.tsx +++ b/src/datepicker/__tests__/DateRangePicker.test.tsx @@ -1,5 +1,6 @@ import * as React from "react"; -import { axe, render, press, fireEvent } from "reakit-test-utils"; +import { cleanup } from "@testing-library/react"; +import { axe, render, press, fireEvent, screen } from "reakit-test-utils"; import { DatePicker, @@ -30,6 +31,8 @@ import { } from "../../utils/test-utils"; import { stringifyDate } from "../../utils"; +afterEach(cleanup); + const RangeCalendarComp: React.FC = state => { return ( @@ -124,19 +127,15 @@ const DateRangePickerComp: React.FC = props => { ); }; -const openDatePicker = (text: any, testId: any) => { - fireEvent.click(text("open")); +const openDatePicker = () => { + fireEvent.click(screen.getByText(/open/i)); - expect(testId("datepicker-content")).toBeVisible(); + expect(screen.getByTestId("datepicker-content")).toBeVisible(); }; describe("DateRangePicker", () => { it("should select date ranges correctly", () => { - const { - getByText: text, - getByTestId: testId, - getByLabelText: label, - } = render( + render( { />, ); - openDatePicker(text, testId); + openDatePicker(); expect( - label( - "Sunday, November 15, 2020 selected (click to start selecting range)", + screen.getByLabelText( + /Sunday, November 15, 2020 selected \(click to start selecting range\)/i, ), ).toHaveFocus(); // check if current date is selected - isEndSelection(label, /Sunday, November 15, 2020 selected/i); - isStartSelection(label, /Sunday, November 15, 2020 selected/i); - isInSelectionRange(label, /Sunday, November 15, 2020 selected/i); + isEndSelection( + screen.getByLabelText(/Sunday, November 15, 2020 selected/i), + ); + isStartSelection( + screen.getByLabelText(/Sunday, November 15, 2020 selected/i), + ); + isInSelectionRange( + screen.getByLabelText(/Sunday, November 15, 2020 selected/i), + ); // change date selection press.Enter(); @@ -164,20 +169,22 @@ describe("DateRangePicker", () => { press.ArrowRight(); press.ArrowDown(); - expect(label(/Tuesday, November 24, 2020/gi)).toHaveFocus(); + expect(screen.getByLabelText(/Tuesday, November 24, 2020/gi)).toHaveFocus(); - isEndSelection(label, /Tuesday, November 24, 2020/gi); - isStartSelection(label, /Sunday, November 15, 2020/gi); - isInSelectionRange(label, /Wednesday, November 18, 2020/gi); + isEndSelection(screen.getByLabelText(/Tuesday, November 24, 2020/gi)); + isStartSelection(screen.getByLabelText(/Sunday, November 15, 2020/gi)); + isInSelectionRange(screen.getByLabelText(/Wednesday, November 18, 2020/gi)); // Finish selection press.Enter(); - expect(testId("datepicker-content")).not.toBeVisible(); - expect(testId("segment")).toHaveTextContent("11/15/2020 - 11/24/2020"); + expect(screen.getByTestId("datepicker-content")).not.toBeVisible(); + expect(screen.getByTestId("segment")).toHaveTextContent( + "11/15/2020 - 11/24/2020", + ); }); it("should be invalid on wrong date selection", () => { - const { getByTestId: testId } = render( + render( { />, ); - expect(testId("datepicker")).not.toHaveAttribute("aria-invalid"); + const datepicker = screen.getByTestId("datepicker"); + + expect(datepicker).not.toHaveAttribute("aria-invalid"); // reverse dates are invalid repeat(press.Tab, 4); repeat(press.ArrowDown, 2); expect(document.activeElement).toHaveTextContent("09"); - expect(testId("datepicker")).toHaveAttribute("aria-invalid", "true"); + expect(datepicker).toHaveAttribute("aria-invalid", "true"); }); it("should be invalid if selection range is out of min max values", () => { - const { getByTestId: testId } = render( + render( { maxValue={stringifyDate(new Date(2020, 10, 15))} />, ); + const datepicker = screen.getByTestId("datepicker"); - expect(testId("datepicker")).not.toHaveAttribute("aria-invalid"); + expect(datepicker).not.toHaveAttribute("aria-invalid"); repeat(press.Tab, 2); press.ArrowUp(); expect(document.activeElement).toHaveTextContent("16"); - expect(testId("datepicker")).toHaveAttribute("aria-invalid", "true"); + expect(datepicker).toHaveAttribute("aria-invalid", "true"); }); it("should be disabled", () => { - const { getByTestId: testId } = render(); + render(); - expect(testId("datepicker")).toHaveAttribute("aria-disabled", "true"); + expect(screen.getByTestId("datepicker")).toHaveAttribute( + "aria-disabled", + "true", + ); }); it("should be readonly", () => { - const { getByTestId: testId } = render(); + render(); - expect(testId("datepicker")).toHaveAttribute("aria-readonly", "true"); + expect(screen.getByTestId("datepicker")).toHaveAttribute( + "aria-readonly", + "true", + ); }); it("should work with AutoFocus", () => { - const { getAllByLabelText: labelAll } = render( + render( // eslint-disable-next-line jsx-a11y/no-autofocus , ); - expect(labelAll("month", { selector: "div" })[0]).toHaveFocus(); + expect( + screen.getAllByLabelText("month", { selector: "div" })[0], + ).toHaveFocus(); }); test("DateRangePicker renders with no a11y violations", async () => { diff --git a/src/number-input/__test__/NumberInput.test.tsx b/src/number-input/__test__/NumberInput.test.tsx index 68d0bf1d8..391202601 100644 --- a/src/number-input/__test__/NumberInput.test.tsx +++ b/src/number-input/__test__/NumberInput.test.tsx @@ -1,5 +1,13 @@ import * as React from "react"; -import { axe, render, press, click, fireEvent } from "reakit-test-utils"; +import { + axe, + press, + click, + screen, + render, + fireEvent, +} from "reakit-test-utils"; +import { cleanup } from "@testing-library/react"; import { NumberInput, @@ -10,6 +18,8 @@ import { import { AppProps } from "../stories/NumberInput.component"; import { repeat } from "../../utils/test-utils"; +afterEach(cleanup); + const NumberInputComp = (props: AppProps) => { const state = useNumberInputState(props); const { clampValueOnBlur, allowMouseWheel } = props; @@ -35,10 +45,9 @@ const NumberInputComp = (props: AppProps) => { describe("NumberInput", () => { it("should render correctly", () => { - const { getByTestId: testId } = render( - , - ); - const numberInput = testId("numberinput"); + render(); + + const numberInput = screen.getByTestId("numberinput"); expect(numberInput).not.toHaveFocus(); press.Tab(); @@ -46,10 +55,8 @@ describe("NumberInput", () => { }); it("should increase/decrease with keyboard", () => { - const { getByTestId: testId } = render( - , - ); - const numberInput = testId("numberinput"); + render(); + const numberInput = screen.getByTestId("numberinput"); expect(numberInput).not.toHaveFocus(); press.Tab(); @@ -73,13 +80,11 @@ describe("NumberInput", () => { }); it("should increase/decrease with buttons", () => { - const { getByTestId: testId } = render( - , - ); + render(); - const incBtn = testId("inc"); - const decBtn = testId("dec"); - const numberInput = testId("numberinput"); + const incBtn = screen.getByTestId("inc"); + const decBtn = screen.getByTestId("dec"); + const numberInput = screen.getByTestId("numberinput"); expect(numberInput).not.toHaveFocus(); press.Tab(); @@ -92,10 +97,8 @@ describe("NumberInput", () => { }); it("should increase/decrease with scrollwheel", () => { - const { getByTestId: testId } = render( - , - ); - const numberInput = testId("numberinput"); + render(); + const numberInput = screen.getByTestId("numberinput"); press.Tab(); expect(numberInput).toHaveFocus(); @@ -111,13 +114,11 @@ describe("NumberInput", () => { }); it("should behave properly with min/max/step options", () => { - const { getByTestId: testId } = render( - , - ); + render(); - const incBtn = testId("inc"); - const decBtn = testId("dec"); - const numberInput = testId("numberinput"); + const incBtn = screen.getByTestId("inc"); + const decBtn = screen.getByTestId("dec"); + const numberInput = screen.getByTestId("numberinput"); press.Tab(); expect(numberInput).toHaveFocus(); @@ -140,13 +141,11 @@ describe("NumberInput", () => { }); it("should behave properly precision value", () => { - const { getByTestId: testId } = render( - , - ); + render(); - const incBtn = testId("inc"); - const decBtn = testId("dec"); - const numberInput = testId("numberinput"); + const incBtn = screen.getByTestId("inc"); + const decBtn = screen.getByTestId("dec"); + const numberInput = screen.getByTestId("numberinput"); press.Tab(); expect(numberInput).toHaveFocus(); @@ -163,7 +162,7 @@ describe("NumberInput", () => { it("should behave properly clampValueOnBlur/keepWithinRange", () => { // note clampValueOnBlur/keepWithinRange is true by default - const { getByTestId: testId } = render( + render( { max={50} />, ); - const numberInput = testId("numberinput"); + const numberInput = screen.getByTestId("numberinput"); press.Tab(); expect(numberInput).toHaveFocus(); diff --git a/src/picker-base/__tests__/BasePicker.test.tsx b/src/picker-base/__tests__/BasePicker.test.tsx new file mode 100644 index 000000000..5dd2502e9 --- /dev/null +++ b/src/picker-base/__tests__/BasePicker.test.tsx @@ -0,0 +1,58 @@ +import * as React from "react"; +import { axe, render, press, fireEvent, screen } from "reakit-test-utils"; + +import { + PickerBase, + PickerBaseContent, + PickerBaseTrigger, + usePickerBaseState, + PickerBaseInitialState, +} from "../index"; + +const PickerBaseComp: React.FC = props => { + const state = usePickerBaseState({ + ...props, + pickerId: "picker-1", + dialogId: "dialog-1", + baseId: "picker-test", + }); + + return ( + <> + + open + + + Content + + + ); +}; + +describe("PickerBase", () => { + it("should render correctly", () => { + const { baseElement } = render(); + + expect(baseElement).toMatchSnapshot(); + }); + + it("should open/close properly", () => { + render(); + + const pickerContent = screen.getByTestId("picker-content"); + + expect(pickerContent).not.toBeVisible(); + fireEvent.click(screen.getByText("open")); + expect(pickerContent).toBeVisible(); + + press.Escape(); + expect(pickerContent).not.toBeVisible(); + }); + + test("PickerBase renders with no a11y violations", async () => { + const { container } = render(); + const results = await axe(container); + + expect(results).toHaveNoViolations(); + }); +}); diff --git a/src/picker-base/__tests__/BasePicker.tests.tsx b/src/picker-base/__tests__/BasePicker.tests.tsx deleted file mode 100644 index dfd40058a..000000000 --- a/src/picker-base/__tests__/BasePicker.tests.tsx +++ /dev/null @@ -1,111 +0,0 @@ -import * as React from "react"; -import { axe, render, press, fireEvent } from "reakit-test-utils"; - -import { - PickerBase, - PickerBaseContent, - PickerBaseTrigger, - usePickerBaseState, - PickerBaseInitialState, -} from "../index"; - -const PickerBaseComp: React.FC = props => { - const state = usePickerBaseState({ - ...props, - pickerId: "picker-1", - dialogId: "dialog-1", - baseId: "picker-test", - }); - - return ( - <> - - open - - - Content - - - ); -}; - -describe("PickerBase", () => { - it("should render correctly", () => { - const { getByText: text, baseElement } = render( - , - ); - - expect(baseElement).toMatchInlineSnapshot(` - -
-
-
- open -
-
-
-