Skip to content

Commit

Permalink
test: refactored all tests (#146)
Browse files Browse the repository at this point in the history 
* test(accordion): refactored accordion test

* test(toast): improved toast test & fixed COUNT

* test(live-announcer): refactored live announcer tests

* test(segment): refactored Segment test

* test(segment): improved segment tests with testing playground suggestions

* test(number-input): refactor number input tests

* test(calendar): refactored calendar tests

* test(calendar): refactor util tests

* test(datepicker): refactored datepicker tests

* chore: fix tests & improve RangeCalendar tests

* test(timepicker): refactored timepicker tests

* test(slider): refactor slider tests

* test(toast): used screen for toast

* test(progress): used screen for progress

* test(baes-picker): fix basepicker wrong test file name
  • Loading branch information
@anuraghazra
anuraghazra authored Nov 10, 2020
1 parent c79dc71 commit e61a507
Show file tree
Hide file tree
Showing 30 changed files with 1,165 additions and 825 deletions.
144 changes: 95 additions & 49 deletions src/accordion/__tests__/Accordion.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -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>
);
};
Expand All @@ -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", () => {
Expand All @@ -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 () => {
Expand Down
32 changes: 5 additions & 27 deletions src/accordion/__tests__/AccordionState.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
});
});
34 changes: 28 additions & 6 deletions src/accordion/__tests__/__snapshots__/Accordion.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ exports[`Accordion should render correctly 1`] = `
tabindex="0"
type="button"
>
Trigger 1
trigger 1
</button>
</h3>
<div
Expand All @@ -23,7 +23,7 @@ exports[`Accordion should render correctly 1`] = `
role="region"
style="display: none;"
>
Panel 1
panel 1
</div>
<h3>
<button
Expand All @@ -33,7 +33,7 @@ exports[`Accordion should render correctly 1`] = `
tabindex="0"
type="button"
>
Trigger 2
trigger 2
</button>
</h3>
<div
Expand All @@ -43,7 +43,7 @@ exports[`Accordion should render correctly 1`] = `
role="region"
style="display: none;"
>
Panel 2
panel 2
</div>
<h3>
<button
Expand All @@ -53,7 +53,7 @@ exports[`Accordion should render correctly 1`] = `
tabindex="0"
type="button"
>
Trigger 3
trigger 3
</button>
</h3>
<div
Expand All @@ -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>
Expand Down
Loading

0 comments on commit e61a507

Please sign in to comment.