Skip to content

Commit

Permalink
test improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
@chaance
chaance committed Feb 21, 2020
1 parent 3d1f08d commit fdadbea
Show file tree
Hide file tree
Showing 5 changed files with 82 additions and 46 deletions.
4 changes: 3 additions & 1 deletion packages/auto-id/__tests__/auto-id.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
import React from "react";
import { useId } from "@reach/auto-id";
import { useId as mockedId } from "@reach/auto-id";
import { render } from "$test/utils";

const { useId } = jest.requireActual("@reach/auto-id");

describe("useId", () => {
it("should generate an incremented ID value", () => {
function Comp() {
Expand Down
48 changes: 24 additions & 24 deletions packages/tabs/__tests__/__snapshots__/tabs.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,34 +11,34 @@ exports[`<Tabs /> focuses the correct tab with keyboard navigation 1`] = `
role="tablist"
>
<button
aria-controls="tabs--4--panel--0"
aria-controls="tabs--REACH_ID_--panel--0"
aria-selected="false"
class="tab-1"
data-reach-tab=""
id="tabs--4--tab--0"
id="tabs--REACH_ID_--tab--0"
role="tab"
tabindex="-1"
>
Tab One
</button>
<button
aria-controls="tabs--4--panel--1"
aria-controls="tabs--REACH_ID_--panel--1"
aria-selected="true"
class="tab-2"
data-reach-tab=""
data-selected=""
id="tabs--4--tab--1"
id="tabs--REACH_ID_--tab--1"
role="tab"
tabindex="0"
>
Tab Two
</button>
<button
aria-controls="tabs--4--panel--2"
aria-controls="tabs--REACH_ID_--panel--2"
aria-selected="false"
class="tab-3"
data-reach-tab=""
id="tabs--4--tab--2"
id="tabs--REACH_ID_--tab--2"
role="tab"
tabindex="-1"
>
Expand All @@ -49,10 +49,10 @@ exports[`<Tabs /> focuses the correct tab with keyboard navigation 1`] = `
data-reach-tab-panels=""
>
<div
aria-labelledby="tabs--4--tab--0"
aria-labelledby="tabs--REACH_ID_--tab--0"
data-reach-tab-panel=""
hidden=""
id="tabs--4--panel--0"
id="tabs--REACH_ID_--panel--0"
role="tabpanel"
tabindex="-1"
>
Expand All @@ -64,9 +64,9 @@ exports[`<Tabs /> focuses the correct tab with keyboard navigation 1`] = `
</button>
</div>
<div
aria-labelledby="tabs--4--tab--1"
aria-labelledby="tabs--REACH_ID_--tab--1"
data-reach-tab-panel=""
id="tabs--4--panel--1"
id="tabs--REACH_ID_--panel--1"
role="tabpanel"
tabindex="0"
>
Expand All @@ -75,10 +75,10 @@ exports[`<Tabs /> focuses the correct tab with keyboard navigation 1`] = `
</h1>
</div>
<div
aria-labelledby="tabs--4--tab--2"
aria-labelledby="tabs--REACH_ID_--tab--2"
data-reach-tab-panel=""
hidden=""
id="tabs--4--panel--2"
id="tabs--REACH_ID_--panel--2"
role="tabpanel"
tabindex="-1"
>
Expand All @@ -103,34 +103,34 @@ exports[`<Tabs /> should match the snapshot 1`] = `
role="tablist"
>
<button
aria-controls="tabs--1--panel--0"
aria-controls="tabs--REACH_ID_--panel--0"
aria-selected="true"
class="tab-1"
data-reach-tab=""
data-selected=""
id="tabs--1--tab--0"
id="tabs--REACH_ID_--tab--0"
role="tab"
tabindex="0"
>
Tab One
</button>
<button
aria-controls="tabs--1--panel--1"
aria-controls="tabs--REACH_ID_--panel--1"
aria-selected="false"
class="tab-2"
data-reach-tab=""
id="tabs--1--tab--1"
id="tabs--REACH_ID_--tab--1"
role="tab"
tabindex="-1"
>
Tab Two
</button>
<button
aria-controls="tabs--1--panel--2"
aria-controls="tabs--REACH_ID_--panel--2"
aria-selected="false"
class="tab-3"
data-reach-tab=""
id="tabs--1--tab--2"
id="tabs--REACH_ID_--tab--2"
role="tab"
tabindex="-1"
>
Expand All @@ -141,9 +141,9 @@ exports[`<Tabs /> should match the snapshot 1`] = `
data-reach-tab-panels=""
>
<div
aria-labelledby="tabs--1--tab--0"
aria-labelledby="tabs--REACH_ID_--tab--0"
data-reach-tab-panel=""
id="tabs--1--panel--0"
id="tabs--REACH_ID_--panel--0"
role="tabpanel"
tabindex="0"
>
Expand All @@ -155,10 +155,10 @@ exports[`<Tabs /> should match the snapshot 1`] = `
</button>
</div>
<div
aria-labelledby="tabs--1--tab--1"
aria-labelledby="tabs--REACH_ID_--tab--1"
data-reach-tab-panel=""
hidden=""
id="tabs--1--panel--1"
id="tabs--REACH_ID_--panel--1"
role="tabpanel"
tabindex="-1"
>
Expand All @@ -167,10 +167,10 @@ exports[`<Tabs /> should match the snapshot 1`] = `
</h1>
</div>
<div
aria-labelledby="tabs--1--tab--2"
aria-labelledby="tabs--REACH_ID_--tab--2"
data-reach-tab-panel=""
hidden=""
id="tabs--1--panel--2"
id="tabs--REACH_ID_--panel--2"
role="tabpanel"
tabindex="-1"
>
Expand Down
49 changes: 41 additions & 8 deletions packages/tooltip/__tests__/__snapshots__/tooltip.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ exports[`<Tooltip /> hides on ESC: after mouse rest timeout 1`] = `
<body>
<div>
<button
aria-describedby="tooltip--22"
aria-describedby="tooltip--REACH_ID_"
data-reach-tooltip-trigger=""
>
Trigger
Expand All @@ -13,7 +13,7 @@ exports[`<Tooltip /> hides on ESC: after mouse rest timeout 1`] = `
<reach-portal>
<div
data-reach-tooltip="true"
id="tooltip--22"
id="tooltip--REACH_ID_"
role="tooltip"
style="left: 0px; top: 8px;"
>
Expand All @@ -39,12 +39,13 @@ exports[`<Tooltip /> shows without timeout when one tooltip is already visible:
<body>
<div>
<button
aria-describedby="tooltip--13"
aria-describedby="tooltip--REACH_ID_"
data-reach-tooltip-trigger=""
>
First Trigger
</button>
<button
aria-describedby="tooltip--REACH_ID_"
data-reach-tooltip-trigger=""
>
Second Trigger
Expand All @@ -53,26 +54,37 @@ exports[`<Tooltip /> shows without timeout when one tooltip is already visible:
<reach-portal>
<div
data-reach-tooltip="true"
id="tooltip--13"
id="tooltip--REACH_ID_"
role="tooltip"
style="left: 0px; top: 8px;"
>
First
</div>
</reach-portal>
<reach-portal>
<div
data-reach-tooltip="true"
id="tooltip--REACH_ID_"
role="tooltip"
style="left: 0px; top: 8px;"
>
Second
</div>
</reach-portal>
</body>
`;

exports[`<Tooltip /> shows without timeout when one tooltip is already visible: after switch without timeout 1`] = `
<body>
<div>
<button
aria-describedby="tooltip--REACH_ID_"
data-reach-tooltip-trigger=""
>
First Trigger
</button>
<button
aria-describedby="tooltip--14"
aria-describedby="tooltip--REACH_ID_"
data-reach-tooltip-trigger=""
>
Second Trigger
Expand All @@ -81,7 +93,17 @@ exports[`<Tooltip /> shows without timeout when one tooltip is already visible:
<reach-portal>
<div
data-reach-tooltip="true"
id="tooltip--14"
id="tooltip--REACH_ID_"
role="tooltip"
style="left: 0px; top: 8px;"
>
First
</div>
</reach-portal>
<reach-portal>
<div
data-reach-tooltip="true"
id="tooltip--REACH_ID_"
role="tooltip"
style="left: 0px; top: 8px;"
>
Expand All @@ -107,7 +129,7 @@ exports[`<Tooltip /> shows/hides on hover: after mouse rest timeout 1`] = `
<body>
<div>
<button
aria-describedby="tooltip--1"
aria-describedby="tooltip--REACH_ID_"
data-reach-tooltip-trigger=""
>
Trigger
Expand All @@ -116,7 +138,7 @@ exports[`<Tooltip /> shows/hides on hover: after mouse rest timeout 1`] = `
<reach-portal>
<div
data-reach-tooltip="true"
id="tooltip--1"
id="tooltip--REACH_ID_"
role="tooltip"
style="left: 0px; top: 8px;"
>
Expand Down Expand Up @@ -166,10 +188,21 @@ exports[`<Tooltip /> shows/hides when trigger is activeElement: not visible 1`]
<body>
<div>
<button
aria-describedby="tooltip--REACH_ID_"
data-reach-tooltip-trigger=""
>
Trigger
</button>
</div>
<reach-portal>
<div
data-reach-tooltip="true"
id="tooltip--REACH_ID_"
role="tooltip"
style="left: 0px; top: 8px;"
>
Content
</div>
</reach-portal>
</body>
`;
20 changes: 10 additions & 10 deletions packages/tooltip/__tests__/tooltip.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,11 @@ describe("<Tooltip />", () => {

expect(baseElement).toMatchSnapshot("not visible");

mouseOver(trigger);
act(() => void mouseOver(trigger));
act(() => void jest.advanceTimersByTime(MOUSE_REST_TIMEOUT));
expect(baseElement).toMatchSnapshot("after mouse rest timeout");

mouseLeave(trigger);
act(() => void mouseLeave(trigger));
act(() => void jest.advanceTimersByTime(LEAVE_TIMEOUT));
expect(baseElement).toMatchSnapshot("after leave timeout");
});
Expand All @@ -38,10 +38,10 @@ describe("<Tooltip />", () => {
);

const trigger = getByText("Trigger");
mouseOver(trigger);
act(() => void mouseOver(trigger));
act(() => void jest.advanceTimersByTime(MOUSE_REST_TIMEOUT));
const tooltip = getByText("Content");
expect(tooltip).toBeInstanceOf(HTMLSpanElement);
expect(tooltip.tagName).toBe("SPAN");
});

it("shows/hides when trigger is activeElement", () => {
Expand All @@ -54,10 +54,10 @@ describe("<Tooltip />", () => {

expect(baseElement).toMatchSnapshot("not visible");

focus(trigger);
act(() => void focus(trigger));
expect(baseElement).toMatchSnapshot("after focus");

blur(trigger);
act(() => void blur(trigger));
act(() => void jest.advanceTimersByTime(LEAVE_TIMEOUT));
expect(baseElement).toMatchSnapshot("after blur");
});
Expand All @@ -76,12 +76,12 @@ describe("<Tooltip />", () => {
const firstTrigger = getByText("First Trigger");
const secondTrigger = getByText("Second Trigger");

mouseOver(firstTrigger);
act(() => void mouseOver(firstTrigger));
act(() => void jest.advanceTimersByTime(MOUSE_REST_TIMEOUT));
expect(baseElement).toMatchSnapshot("after mouse rest timeout");

mouseLeave(firstTrigger);
mouseOver(secondTrigger);
act(() => void mouseLeave(firstTrigger));
act(() => void mouseOver(secondTrigger));
expect(baseElement).toMatchSnapshot("after switch without timeout");
});

Expand All @@ -98,7 +98,7 @@ describe("<Tooltip />", () => {
act(() => void jest.advanceTimersByTime(MOUSE_REST_TIMEOUT));
expect(baseElement).toMatchSnapshot("after mouse rest timeout");

keyDown(trigger, { key: "Escape" });
act(() => void keyDown(trigger, { key: "Escape" }));
expect(baseElement).toMatchSnapshot("not visible after ESC");
});
});
7 changes: 4 additions & 3 deletions test/setupTests.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,11 @@ import "@testing-library/jest-dom/extend-expect";

beforeEach(() => {
jest.unmock("@reach/utils");
jest.unmock("@reach/auto-id");
const utils = require("@reach/utils");
const autoId = require("@reach/auto-id");
utils.checkStyles = jest.fn();
autoId.useId = (fallback: string) => fallback || "REACH_ID_";
});

afterEach(() => {
//
});
afterEach(() => {});

0 comments on commit fdadbea

Please sign in to comment.