From fdadbea2cbc0d5a874fad04d2d1e6704e4ff1eaa Mon Sep 17 00:00:00 2001
From: chancestrickland <chance.strickland@gmail.com>
Date: Fri, 21 Feb 2020 11:47:03 -0800
Subject: [PATCH] test improvements

---
 packages/auto-id/__tests__/auto-id.test.tsx   |  4 +-
 .../__snapshots__/tabs.test.tsx.snap          | 48 +++++++++---------
 .../__snapshots__/tooltip.test.tsx.snap       | 49 ++++++++++++++++---
 packages/tooltip/__tests__/tooltip.test.tsx   | 20 ++++----
 test/setupTests.ts                            |  7 +--
 5 files changed, 82 insertions(+), 46 deletions(-)

diff --git a/packages/auto-id/__tests__/auto-id.test.tsx b/packages/auto-id/__tests__/auto-id.test.tsx
index aa9f1f973..fb5e0037b 100644
--- a/packages/auto-id/__tests__/auto-id.test.tsx
+++ b/packages/auto-id/__tests__/auto-id.test.tsx
@@ -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() {
diff --git a/packages/tabs/__tests__/__snapshots__/tabs.test.tsx.snap b/packages/tabs/__tests__/__snapshots__/tabs.test.tsx.snap
index ea64d7812..5eb175129 100644
--- a/packages/tabs/__tests__/__snapshots__/tabs.test.tsx.snap
+++ b/packages/tabs/__tests__/__snapshots__/tabs.test.tsx.snap
@@ -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"
         >
@@ -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"
         >
@@ -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"
         >
@@ -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"
         >
@@ -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"
         >
@@ -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"
         >
@@ -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"
         >
@@ -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"
         >
diff --git a/packages/tooltip/__tests__/__snapshots__/tooltip.test.tsx.snap b/packages/tooltip/__tests__/__snapshots__/tooltip.test.tsx.snap
index 97e48f488..36bbcda9f 100644
--- a/packages/tooltip/__tests__/__snapshots__/tooltip.test.tsx.snap
+++ b/packages/tooltip/__tests__/__snapshots__/tooltip.test.tsx.snap
@@ -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
@@ -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;"
     >
@@ -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
@@ -53,13 +54,23 @@ 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>
 `;
 
@@ -67,12 +78,13 @@ exports[`<Tooltip /> shows without timeout when one tooltip is already visible:
 <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
@@ -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;"
     >
@@ -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
@@ -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;"
     >
@@ -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>
 `;
diff --git a/packages/tooltip/__tests__/tooltip.test.tsx b/packages/tooltip/__tests__/tooltip.test.tsx
index b7a870ea4..50d5ad739 100644
--- a/packages/tooltip/__tests__/tooltip.test.tsx
+++ b/packages/tooltip/__tests__/tooltip.test.tsx
@@ -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");
   });
@@ -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", () => {
@@ -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");
   });
@@ -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");
   });
 
@@ -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");
   });
 });
diff --git a/test/setupTests.ts b/test/setupTests.ts
index dff146b41..6b0d43efb 100644
--- a/test/setupTests.ts
+++ b/test/setupTests.ts
@@ -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(() => {});