convert jest tests to typescript

gsoft-inc · Aug 23, 2021 · ca9d28b · ca9d28b
1 parent 2c7d2f1
commit ca9d28b
Show file tree

Hide file tree

Showing 106 changed files with 412 additions and 341 deletions.
diff --git a/jest/utils/errorHandling.js → jest/utils/errorHandling.tsx b/jest/utils/errorHandling.js → jest/utils/errorHandling.tsx
@@ -1,8 +1,8 @@
 const React = require("react");
-
+import {ReactNode, Component} from "react"
 // React logs errors to the console when an error is thrown, even when a boundary exists. Silence it temporarily.
 // https://github.com/facebook/react/issues/15520
-function muteConsoleErrors(patterns) {
+function muteConsoleErrors(patterns: string[]) {
     const nativeConsoleError = console.error.bind(console);
 
     console.error = message => {
@@ -16,16 +16,21 @@ function muteConsoleErrors(patterns) {
     };
 }
 
-class ErrorBoundary extends React.Component {
-    constructor() {
-        super();
+interface ErrorBoundaryProps {
+    onError: (error: Error) => void;
+    children?: ReactNode;
+}
+
+class ErrorBoundary extends Component<ErrorBoundaryProps, { hasError: boolean}> {
+    constructor(props: ErrorBoundaryProps) {
+        super(props);
 
         this.state = {
             hasError: false
         };
     }
 
-    componentDidCatch(error) {
+    componentDidCatch(error: Error) {
         const { onError } = this.props;
 
         onError(error);
@@ -52,3 +57,5 @@ module.exports = {
     muteConsoleErrors,
     ErrorBoundary
 };
+
+export { muteConsoleErrors, ErrorBoundary }
diff --git a/jest/utils/waitDelay.js → jest/utils/waitDelay.ts b/jest/utils/waitDelay.js → jest/utils/waitDelay.ts
@@ -1,7 +1,9 @@
-async function waitDelay(delayMs) {
+async function waitDelay(delayMs: number) {
     await new Promise(resolve => setTimeout(resolve, delayMs));
 }
 
 module.exports = {
     waitDelay
 };
+
+export {waitDelay}
diff --git a/package.json b/package.json
@@ -96,6 +96,7 @@
     "@testing-library/react-hooks": "7.0.1",
     "@testing-library/user-event": "13.2.0",
     "@types/react": "17.0.14",
+    "@types/jest": "27.0.1",
     "@types/react-dom": "17.0.9",
     "@types/react-is": "17.0.2",
     "@types/resize-observer-browser": "0.1.6",

diff --git a/...c/accordion/tests/jest/Accordion.test.jsx → ...c/accordion/tests/jest/Accordion.test.tsx b/...c/accordion/tests/jest/Accordion.test.jsx → ...c/accordion/tests/jest/Accordion.test.tsx
@@ -210,7 +210,7 @@ test("when multiple, call onExpansionChange when the expanded tabs change", asyn
 // ***** Refs *****
 
 test("accordion ref is a DOM element", async () => {
-    const ref = createRef();
+    const ref = createRef<HTMLElement>();
 
     render(
         <Accordion ref={ref}>
@@ -228,7 +228,7 @@ test("accordion ref is a DOM element", async () => {
 });
 
 test("header ref is a DOM element", async () => {
-    const ref = createRef();
+    const ref = createRef<HTMLElement>();
 
     render(
         <Accordion>
@@ -246,7 +246,7 @@ test("header ref is a DOM element", async () => {
 });
 
 test("content ref is a DOM element", async () => {
-    const ref = createRef();
+    const ref = createRef<HTMLElement>();
 
     render(
         <Accordion>

diff --git a/...nents/src/alert/tests/jest/Alert.test.jsx → ...nents/src/alert/tests/jest/Alert.test.tsx b/...nents/src/alert/tests/jest/Alert.test.jsx → ...nents/src/alert/tests/jest/Alert.test.tsx
@@ -1,7 +1,7 @@
 import { Alert } from "@react-components/alert";
 import { Content } from "@react-components/placeholders";
 import { Heading } from "@react-components/typography";
-import { createRef } from "react";
+import { Ref, createRef } from "react";
 import { render, waitFor } from "@testing-library/react";
 
 // ***** Behaviors *****
@@ -53,10 +53,10 @@ test("when autoFocusButton value is not defined, autofocus the primary button",
 // ***** Refs *****
 
 test("ref is a DOM element", async () => {
-    const ref = createRef();
+    const ref = createRef<HTMLElement>();
 
     render(
-        <Alert ref={ref}>
+        <Alert ref={ref} primaryButtonLabel="Primary">
             <Heading>Autopilot</Heading>
             <Content>Are you use sure you want to engage autopilot?</Content>
         </Alert>
@@ -69,10 +69,11 @@ test("ref is a DOM element", async () => {
 });
 
 test("when using a callback ref, ref is a DOM element", async () => {
-    let refNode = null;
+    let refNode: HTMLElement = null;
 
     render(
         <Alert
+            primaryButtonLabel="Primary"
             ref={node => {
                 refNode = node;
             }}
@@ -92,7 +93,7 @@ test("set ref once", async () => {
     const handler = jest.fn();
 
     render(
-        <Alert ref={handler}>
+        <Alert ref={handler} primaryButtonLabel="Primary">
             <Heading>Autopilot</Heading>
             <Content>Are you use sure you want to engage autopilot?</Content>
         </Alert>

diff --git a/...rc/alert/tests/jest/AlertTrigger.test.jsx → ...rc/alert/tests/jest/AlertTrigger.test.tsx b/...rc/alert/tests/jest/AlertTrigger.test.jsx → ...rc/alert/tests/jest/AlertTrigger.test.tsx
@@ -2,8 +2,8 @@ import { Alert, AlertTrigger } from "@react-components/alert";
 import { Button } from "@react-components/button";
 import { Content } from "@react-components/placeholders";
 import { Heading } from "@react-components/typography";
+import { Ref, createRef } from "react";
 import { act } from "@testing-library/react-hooks";
-import { createRef } from "react";
 import { render, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
@@ -13,7 +13,7 @@ test("do not dismiss on outside click", async () => {
     const { getByTestId } = render(
         <AlertTrigger>
             <Button data-testid="trigger">Trigger</Button>
-            <Alert data-testid="alert">
+            <Alert data-testid="alert" primaryButtonLabel="Primary">
                 <Heading>Autopilot</Heading>
                 <Content>Are you use sure you want to engage autopilot?</Content>
             </Alert>
@@ -36,12 +36,12 @@ test("do not dismiss on outside click", async () => {
 // ***** Refs *****
 
 test("ref is a DOM element", async () => {
-    const ref = createRef();
+    const ref = createRef<HTMLElement>();
 
     render(
         <AlertTrigger defaultOpen ref={ref}>
             <Button>Trigger</Button>
-            <Alert>
+            <Alert primaryButtonLabel="Primary">
                 <Heading>Autopilot</Heading>
                 <Content>Are you use sure you want to engage autopilot?</Content>
             </Alert>
@@ -55,7 +55,7 @@ test("ref is a DOM element", async () => {
 });
 
 test("when using a callback ref, ref is a DOM element", async () => {
-    let refNode = null;
+    let refNode: HTMLElement = null;
 
     render(
         <AlertTrigger
@@ -65,7 +65,7 @@ test("when using a callback ref, ref is a DOM element", async () => {
             }}
         >
             <Button>Trigger</Button>
-            <Alert>
+            <Alert primaryButtonLabel="Primary">
                 <Heading>Autopilot</Heading>
                 <Content>Are you use sure you want to engage autopilot?</Content>
             </Alert>
@@ -84,7 +84,7 @@ test("set ref once", async () => {
     render(
         <AlertTrigger defaultOpen ref={handler}>
             <Button>Trigger</Button>
-            <Alert>
+            <Alert primaryButtonLabel="Primary">
                 <Heading>Autopilot</Heading>
                 <Content>Are you use sure you want to engage autopilot?</Content>
             </Alert>

diff --git a/...complete/tests/jest/Autocomplete.test.jsx → ...complete/tests/jest/Autocomplete.test.tsx b/...complete/tests/jest/Autocomplete.test.jsx → ...complete/tests/jest/Autocomplete.test.tsx
@@ -10,6 +10,7 @@ import { waitDelay } from "@utils/waitDelay";
 import userEvent from "@testing-library/user-event";
 
 beforeAll(() => {
+    // @ts-ignore
     Transition.disableAnimation = true;
 });
 
@@ -804,7 +805,7 @@ test("call onSelectionChange when a value is selected", async () => {
 });
 
 test("calling the focus function on the autocomplete ref will focus the autocomplete", async () => {
-    const ref = createRef();
+    const ref = createRef<HTMLInputElement>();
 
     const { getByTestId } = render(
         <Autocomplete
@@ -830,7 +831,7 @@ test("calling the focus function on the autocomplete ref will focus the autocomp
 // ***** Refs *****
 
 test("ref is a DOM element", async () => {
-    const ref = createRef();
+    const ref = createRef<HTMLInputElement>();
 
     render(
         <Autocomplete defaultOpen ref={ref} aria-label="Planet">
@@ -848,7 +849,7 @@ test("ref is a DOM element", async () => {
 });
 
 test("when using a callback ref, ref is a DOM element", async () => {
-    let refNode = null;
+    let refNode: HTMLElement = null;
 
     render(
         <Autocomplete

diff --git a/...nts/src/avatar/tests/jest/Avatar.test.jsx → ...nts/src/avatar/tests/jest/Avatar.test.tsx b/...nts/src/avatar/tests/jest/Avatar.test.jsx → ...nts/src/avatar/tests/jest/Avatar.test.tsx
@@ -1,5 +1,5 @@
 import { Avatar } from "@react-components/avatar";
-import { createRef } from "react";
+import { Ref, createRef } from "react";
 import { render, waitFor } from "@testing-library/react";
 
 // ***** Aria *****
@@ -23,7 +23,7 @@ test("when an image src is provided and a custom aria-label is provided, the ari
 // ***** Refs *****
 
 test("ref is a DOM element", async () => {
-    const ref = createRef();
+    const ref = createRef<HTMLElement>();
 
     render(
         <Avatar name="Elon Musk" ref={ref} />
@@ -36,7 +36,7 @@ test("ref is a DOM element", async () => {
 });
 
 test("when using a callback ref, ref is a DOM element", async () => {
-    let refNode = null;
+    let refNode: HTMLElement = null;
 
     render(
         <Avatar

diff --git a/...rc/avatar/tests/jest/AvatarGroup.test.jsx → ...rc/avatar/tests/jest/AvatarGroup.test.tsx b/...rc/avatar/tests/jest/AvatarGroup.test.jsx → ...rc/avatar/tests/jest/AvatarGroup.test.tsx
@@ -1,11 +1,11 @@
 import { Avatar, AvatarGroup } from "@react-components/avatar";
-import { createRef } from "react";
+import { Ref, createRef } from "react";
 import { render, waitFor } from "@testing-library/react";
 
 // ***** Refs *****
 
 test("ref is a DOM element", async () => {
-    const ref = createRef();
+    const ref = createRef<HTMLElement>();
 
     render(
         <AvatarGroup ref={ref}>
@@ -21,7 +21,7 @@ test("ref is a DOM element", async () => {
 });
 
 test("when using a callback ref, ref is a DOM element", async () => {
-    let refNode = null;
+    let refNode: HTMLElement = null;
 
     render(
         <AvatarGroup

diff --git a/...nents/src/badge/tests/jest/Badge.test.jsx → ...nents/src/badge/tests/jest/Badge.test.tsx b/...nents/src/badge/tests/jest/Badge.test.jsx → ...nents/src/badge/tests/jest/Badge.test.tsx
@@ -1,10 +1,10 @@
-import { Badge } from "@react-components/badge";
+import { Badge, BadgeProps } from "@react-components/badge";
 import { Text } from "@react-components/typography";
 import { createRef } from "react";
 import { forwardRef } from "react";
 import { render, waitFor } from "@testing-library/react";
 
-const SquareBadge = forwardRef(({ children, ...rest }, ref) => {
+const SquareBadge = forwardRef<HTMLElement, BadgeProps>(({ children, ...rest }, ref) => {
     return (
         <Badge
             {...rest}
@@ -19,7 +19,7 @@ const SquareBadge = forwardRef(({ children, ...rest }, ref) => {
 // ***** Refs *****
 
 test("ref is a DOM element", async () => {
-    const ref = createRef();
+    const ref = createRef<HTMLElement>();
 
     render(
         <SquareBadge ref={ref}>
@@ -34,7 +34,7 @@ test("ref is a DOM element", async () => {
 });
 
 test("when using a callback ref, ref is a DOM element", async () => {
-    let refNode = null;
+    let refNode: HTMLElement = null;
 
     render(
         <SquareBadge

diff --git a/...omponents/src/box/tests/jest/Box.test.jsx → ...omponents/src/box/tests/jest/Box.test.tsx b/...omponents/src/box/tests/jest/Box.test.jsx → ...omponents/src/box/tests/jest/Box.test.tsx
@@ -1,11 +1,11 @@
 import { Box } from "@react-components/box";
-import { createRef } from "react";
+import { Ref, createRef } from "react";
 import { render, waitFor } from "@testing-library/react";
 
 // ***** Refs *****
 
 test("ref is a DOM element", async () => {
-    const ref = createRef();
+    const ref = createRef<HTMLElement>();
 
     render(
         <Box ref={ref}>Box</Box>
@@ -18,7 +18,7 @@ test("ref is a DOM element", async () => {
 });
 
 test("when using a callback ref, ref is a DOM element", async () => {
-    let refNode = null;
+    let refNode: HTMLElement = null;
 
     render(
         <Box

diff --git a/...nts/src/button/tests/jest/Button.test.jsx → ...nts/src/button/tests/jest/Button.test.tsx b/...nts/src/button/tests/jest/Button.test.jsx → ...nts/src/button/tests/jest/Button.test.tsx
@@ -1,6 +1,6 @@
 import { Button } from "@react-components/button";
+import { Ref, createRef } from "react";
 import { act, render, waitFor } from "@testing-library/react";
-import { createRef } from "react";
 import { waitDelay } from "@utils/waitDelay";
 
 // ***** Behaviors *****
@@ -66,7 +66,7 @@ test("when type is specified, the type is forwarded", async () => {
 // ***** Api *****
 
 test("can focus the button with the focus api", async () => {
-    let refNode = null;
+    let refNode: HTMLElement = null;
 
     render(
         <Button
@@ -86,7 +86,7 @@ test("can focus the button with the focus api", async () => {
 // ***** Refs *****
 
 test("ref is a DOM element", async () => {
-    const ref = createRef();
+    const ref = createRef<HTMLButtonElement>();
 
     render(
         <Button ref={ref}>Cutoff</Button>
@@ -99,7 +99,7 @@ test("ref is a DOM element", async () => {
 });
 
 test("when using a callback ref, ref is a DOM element", async () => {
-    let refNode = null;
+    let refNode: HTMLElement = null;
 
     render(
         <Button

diff --git a/...rc/button/tests/jest/ButtonGroup.test.jsx → ...rc/button/tests/jest/ButtonGroup.test.tsx b/...rc/button/tests/jest/ButtonGroup.test.jsx → ...rc/button/tests/jest/ButtonGroup.test.tsx
@@ -1,8 +1,8 @@
-import { Button, ButtonGroup } from "@react-components/button";
+import { Button, ButtonGroup, ButtonGroupProps } from "@react-components/button";
 import { createRef, forwardRef } from "react";
 import { render, waitFor } from "@testing-library/react";
 
-const Group = forwardRef((props, ref) => {
+const Group = forwardRef<HTMLElement, Omit<ButtonGroupProps, "children">>((props, ref) => {
     return (
         <ButtonGroup
             {...props}
@@ -17,7 +17,7 @@ const Group = forwardRef((props, ref) => {
 // ***** Refs *****
 
 test("ref is a DOM element", async () => {
-    const ref = createRef();
+    const ref = createRef<HTMLElement>();
 
     render(
         <Group ref={ref} />
@@ -30,7 +30,7 @@ test("ref is a DOM element", async () => {
 });
 
 test("when using a callback ref, ref is a DOM element", async () => {
-    let refNode = null;
+    let refNode: HTMLElement = null;
 
     render(
         <Group