@madie/madie-design-system 1.2.62 → 2.0.1

package/test/components/Select.test.js

@@ -2,113 +2,105 @@ import * as React from "react";
 import "@testing-library/jest-dom";
 import { describe, expect, test } from "@jest/globals";
 import Select from "../../components/Select/index";
-import { act, Simulate } from "react-dom/test-utils";
 
 import { render, fireEvent, screen } from "@testing-library/react";
 
 import { MenuItem } from "@mui/material";
 
 describe("Select", () => {
+    const { getByTestId, findByText, getByRole } = screen;
     const options = [
         { key: "key1", value: "value1", testId: "testid1", name: "name1" },
         { key: "key2", value: "value2", testId: "testid2", name: "name2" },
         { key: "key3", value: "value2", testId: "testid3", name: "name3" },
     ];
     test("Select exists, and simulates input correctly", async () => {
-        await act(async () => {
-            const { getByTestId } = render(
-                <Select
-                    placeHolder={{ name: "placeholder", value: "" }}
-                    required
-                    label="Test"
-                    id="test-select"
-                    inputProps={{ "data-testid": "test-input" }}
-                    data-testid="test-select"
-                    size="small"
-                    options={options.map(({ key, value, testId, name }) => {
-                        return (
-                            <MenuItem
-                                key={key}
-                                value={value}
-                                data-testid={`option-${testId}`}
-                            >
-                                {name}
-                            </MenuItem>
-                        );
-                    })}
-                />
-            );
-            const selectNode = await getByTestId("test-select");
-            fireEvent.click(selectNode);
-            const inputNode = await getByTestId("test-input");
-            fireEvent.select(inputNode, { target: { value: "value1" } });
-            Simulate.change(inputNode);
-            expect(inputNode.value).toBe("value1");
-        });
+        render(
+            <Select
+                placeHolder={{ name: "placeholder", value: "" }}
+                required
+                label="Test"
+                id="test-select"
+                inputProps={{ "data-testid": "test-input" }}
+                data-testid="test-select"
+                size="small"
+                options={options.map(({ key, value, testId, name }) => {
+                    return (
+                        <MenuItem
+                            key={key}
+                            value={value}
+                            data-testid={`option-${testId}`}
+                        >
+                            {name}
+                        </MenuItem>
+                    );
+                })}
+            />,
+        );
+        const selectNode = await getByTestId("test-select");
+        fireEvent.click(selectNode);
+        const inputNode = await getByTestId("test-input");
+        fireEvent.select(inputNode, { target: { value: "value1" } });
+        fireEvent.change(inputNode);
+        expect(inputNode.value).toBe("value1");
     });
     test("Placeholder value renders", async () => {
-        await act(async () => {
-            const { getByTestId } = render(
-                <Select
-                    placeHolder={{ name: "placeholder", value: "" }}
-                    required
-                    label="Test"
-                    id="test-select"
-                    inputProps={{ "data-testid": "test-input" }}
-                    data-testid="test-select"
-                    size="small"
-                    value=""
-                    options={options.map(({ key, value, testId, name }) => {
-                        return (
-                            <MenuItem
-                                key={key}
-                                value={value}
-                                data-testid={`option-${testId}`}
-                            >
-                                {name}
-                            </MenuItem>
-                        );
-                    })}
-                />
-            );
-            const inputNode = await getByTestId("test-input");
-            expect(inputNode.value).toBe("");
-        });
+        render(
+            <Select
+                placeHolder={{ name: "placeholder", value: "" }}
+                required
+                label="Test"
+                id="test-select"
+                inputProps={{ "data-testid": "test-input" }}
+                data-testid="test-select"
+                size="small"
+                value=""
+                options={options.map(({ key, value, testId, name }) => {
+                    return (
+                        <MenuItem
+                            key={key}
+                            value={value}
+                            data-testid={`option-${testId}`}
+                        >
+                            {name}
+                        </MenuItem>
+                    );
+                })}
+            />,
+        );
+        const inputNode = await getByTestId("test-input");
+        expect(inputNode.value).toBe("");
     });
     test("Select exists, and simulates input correctly", async () => {
-        await act(async () => {
-            const { getByTestId } = render(
-                <Select
-                    label="Test"
-                    value=""
-                    id="test-select"
-                    inputProps={{ "data-testid": "test-input" }}
-                    data-testid="test-select"
-                    size="small"
-                />
-            );
-            const selectNode = await getByTestId("test-select");
-            fireEvent.click(selectNode);
-            const inputNode = await getByTestId("test-input");
-            expect(inputNode.value).toBe("");
-        });
+        render(
+            <Select
+                label="Test"
+                value=""
+                id="test-select"
+                inputProps={{ "data-testid": "test-input" }}
+                data-testid="test-select"
+                size="small"
+            />,
+        );
+        const selectNode = await getByTestId("test-select");
+        fireEvent.click(selectNode);
+        const inputNode = await getByTestId("test-input");
+        expect(inputNode.value).toBe("");
     });
     test("Helper text exists", async () => {
-        await act(async () => {
-            const { findByText } = render(
-                <Select
-                    helperText="helper text"
-                    label="Test"
-                    value=""
-                    id="test-select"
-                    inputProps={{ "data-testid": "test-input" }}
-                    data-testid="test-select"
-                    size="small"
-                />
-            );
-            const helperText = await findByText("helper text");
-            expect(helperText).toBeInTheDocument();
-        });
+        render(
+            <Select
+                helperText="helper text"
+                label="Test"
+                value=""
+                id="test-select"
+                inputProps={{ "data-testid": "test-input" }}
+                data-testid="test-select"
+                size="small"
+            />,
+        );
+        const helperText = await findByText("helper text");
+        expect(helperText).toBeInTheDocument();
     });
 
     test("Select renders disabled", () => {
@@ -122,28 +114,26 @@ describe("Select", () => {
                 inputProps={{ "data-testid": "test-input" }}
                 data-testid="test-select"
                 size="small"
-            />
+            />,
         );
-        const value = screen.getByRole("textbox");
+        const value = getByRole("textbox");
         expect(value).toHaveTextContent("-");
         expect(value).toHaveAttribute("readOnly");
     });
     test("Select renders error", async () => {
-        await act(async () => {
-            const { findByText } = render(
-                <Select
-                    error
-                    helperText="helper text"
-                    label="Test"
-                    value=""
-                    id="test-select"
-                    inputProps={{ "data-testid": "test-input" }}
-                    data-testid="test-select"
-                    size="small"
-                />
-            );
-            const helperText = await findByText("helper text");
-            expect(helperText).toBeInTheDocument();
-        });
+        render(
+            <Select
+                error
+                helperText="helper text"
+                label="Test"
+                value=""
+                id="test-select"
+                inputProps={{ "data-testid": "test-input" }}
+                data-testid="test-select"
+                size="small"
+            />,
+        );
+        const helperText = await findByText("helper text");
+        expect(helperText).toBeInTheDocument();
     });
 });

package/test/components/Tabs.test.js

@@ -1,12 +1,12 @@
 import "@testing-library/jest-dom";
 import { describe, expect, test } from "@jest/globals";
-import { act } from "react-dom/test-utils";
-import { render, waitFor } from "@testing-library/react";
+import { render, waitFor, screen } from "@testing-library/react";
 import Tab from "../../components/Tabs/Tab";
 import Tabs from "../../components/Tabs/index";
 import React from "react";
 
 describe("Tabs", () => {
+    const { findByTestId } = screen;
     const Navigations = () => {
         return (
             <div>
@@ -265,29 +265,27 @@ describe("Tabs", () => {
     };
 
     test("All Tab components render. ", async () => {
-        await act(async () => {
-            const { findByTestId } = await render(<Navigations />);
-            const standardA = await findByTestId("standard-a");
-            const standardB = await findByTestId("standard-b");
-            const standardC = await findByTestId("standard-c");
-            const verticalC = await findByTestId("v-c");
-            const standardD = await findByTestId("standard-d");
-            const largeA = await findByTestId("large-a");
-            const largeB = await findByTestId("large-b");
-            const largeC = await findByTestId("large-c");
-            const largeD = await findByTestId("large-d");
+        render(<Navigations />);
+        const standardA = await findByTestId("standard-a");
+        const standardB = await findByTestId("standard-b");
+        const standardC = await findByTestId("standard-c");
+        const verticalC = await findByTestId("v-c");
+        const standardD = await findByTestId("standard-d");
+        const largeA = await findByTestId("large-a");
+        const largeB = await findByTestId("large-b");
+        const largeC = await findByTestId("large-c");
+        const largeD = await findByTestId("large-d");
 
-            await waitFor(() => {
-                expect(standardA).toBeInTheDocument();
-                expect(standardB).toBeInTheDocument();
-                expect(standardC).toBeInTheDocument();
-                expect(verticalC).toBeInTheDocument();
-                expect(standardD).toBeInTheDocument();
-                expect(largeA).toBeInTheDocument();
-                expect(largeB).toBeInTheDocument();
-                expect(largeC).toBeInTheDocument();
-                expect(largeD).toBeInTheDocument();
-            });
+        await waitFor(() => {
+            expect(standardA).toBeInTheDocument();
+            expect(standardB).toBeInTheDocument();
+            expect(standardC).toBeInTheDocument();
+            expect(verticalC).toBeInTheDocument();
+            expect(standardD).toBeInTheDocument();
+            expect(largeA).toBeInTheDocument();
+            expect(largeB).toBeInTheDocument();
+            expect(largeC).toBeInTheDocument();
+            expect(largeD).toBeInTheDocument();
         });
     });
 });

package/test/components/TextArea.test.js

@@ -1,51 +1,45 @@
-import * as React from "react";
+import React from "react";
 import "@testing-library/jest-dom";
 import { describe, expect, test } from "@jest/globals";
 import TextArea from "../../components/TextArea/index";
-import { act, Simulate } from "react-dom/test-utils";
-import { render, screen } from "@testing-library/react";
+import { render, screen, waitFor, fireEvent } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
-
 describe("TextArea", () => {
     test("TextArea exists, and simulates input correctly", async () => {
-        await act(async () => {
-            const {findByTestId, getByTestId} = render(
-                <TextArea
-                    placeholder="test Name"
-                    required
-                    label="test Name"
-                    id="testName"
-                    data-testid="test-name-text-field"
-                    disabled={false}
-                />
-            );
-            expect(
-                await findByTestId("test-name-text-field")
-            ).toBeInTheDocument();
-            const textNode = await getByTestId("test-name-text-field");
-            expect(textNode).toBeInTheDocument();
-            userEvent.type(textNode, "newVal");
-            Simulate.change(textNode);
+        const { findByTestId, getByTestId } = render(
+            <TextArea
+                placeholder="test Name"
+                required
+                label="test Name"
+                id="testName"
+                data-testid="test-name-text-field"
+                disabled={false}
+            />,
+        );
+        expect(await findByTestId("test-name-text-field")).toBeInTheDocument();
+        const textNode = await getByTestId("test-name-text-field");
+        expect(textNode).toBeInTheDocument();
+        userEvent.type(textNode, "newVal");
+        fireEvent.change(textNode);
+        await waitFor(() => {
             expect(textNode.value).toBe("newVal");
         });
     });
     test("TextArea renders with helper text", async () => {
-        await act(async () => {
-            const {findByText} = render(
-                <TextArea
-                    error={false}
-                    placeholder="test Name"
-                    helperText="helper text"
-                    label="test Name"
-                    id="testName"
-                    inputProps={{"data-testid": "test-name-input"}}
-                    data-testid="test-name-text-field"
-                />
-            );
-            const helperText = await findByText("helper text");
-            expect(helperText).toBeInTheDocument();
-        });
+        const { findByText } = render(
+            <TextArea
+                error={false}
+                placeholder="test Name"
+                helperText="helper text"
+                label="test Name"
+                id="testName"
+                inputProps={{ "data-testid": "test-name-input" }}
+                data-testid="test-name-text-field"
+            />,
+        );
+        const helperText = await findByText("helper text");
+        expect(helperText).toBeInTheDocument();
     });
     test("renders TextArea for disabled mode", async () => {
         render(
@@ -55,72 +49,64 @@ describe("TextArea", () => {
                 helperText="helper text"
                 label="test Name"
                 id="testName"
-                inputProps={{"data-testid": "test-name-input"}}
+                inputProps={{ "data-testid": "test-name-input" }}
                 data-testid="test-name-text-field"
                 value="test value"
-            />
+            />,
         );
         const textArea = await screen.findByRole("textbox");
         expect(textArea).toHaveTextContent("test value");
         expect(textArea).toHaveAttribute("readOnly");
     });
     test("HelperText renders errored", async () => {
-        await act(async () => {
-            const {findByText} = render(
-                <TextArea
-                    error
-                    placeholder="test Name"
-                    helperText="helper text"
-                    label="test Name"
-                    id="testName"
-                    inputProps={{"data-testid": "test-name-input"}}
-                    data-testid="test-name-text-field"
-                />
-            );
-            const helperText = await findByText("helper text");
-            expect(helperText).toBeInTheDocument();
-        });
+        const { findByText } = render(
+            <TextArea
+                error
+                placeholder="test Name"
+                helperText="helper text"
+                label="test Name"
+                id="testName"
+                inputProps={{ "data-testid": "test-name-input" }}
+                data-testid="test-name-text-field"
+            />,
+        );
+        const helperText = await findByText("helper text");
+        expect(helperText).toBeInTheDocument();
     });
     test("TextArea renders with default propTypes left out", async () => {
-        await act(async () => {
-            const {findByText} = render(
-                <TextArea
-                    // error purposely omitted
-                    // disabled purposely omitted
-                    placeholder="test Name"
-                    helperText="helper text"
-                    label="test Name"
-                    id="testName"
-                    inputProps={{"data-testid": "test-name-input"}}
-                    data-testid="test-name-text-field"
-                />
-            );
-            const helperText = await findByText("helper text");
-            expect(helperText).toBeInTheDocument();
-        });
+        const { findByText } = render(
+            <TextArea
+                // error purposely omitted
+                // disabled purposely omitted
+                placeholder="test Name"
+                helperText="helper text"
+                label="test Name"
+                id="testName"
+                inputProps={{ "data-testid": "test-name-input" }}
+                data-testid="test-name-text-field"
+            />,
+        );
+        const helperText = await findByText("helper text");
+        expect(helperText).toBeInTheDocument();
     });
     test("TextArea shows maxLength", async () => {
-        await act(async () => {
-            const {findByTestId, getByTestId, findByText} = render(
-                <TextArea
-                    placeholder="test Name"
-                    required
-                    label="test Name"
-                    id="testName"
-                    data-testid="test-name-text-field"
-                    disabled={false}
-                    maxLength={10}
-                />
-            );
-            expect(
-                await findByTestId("test-name-text-field")
-            ).toBeInTheDocument();
-            const textNode = await getByTestId("test-name-text-field");
-            expect(textNode).toBeInTheDocument();
-            userEvent.type(textNode, "newVal");
-            Simulate.change(textNode);
-            const maxLength = await findByText("/10 Characters");
-            expect(maxLength).toBeInTheDocument();
-        });
+        const { findByTestId, getByTestId, findByText } = render(
+            <TextArea
+                placeholder="test Name"
+                required
+                label="test Name"
+                id="testName"
+                data-testid="test-name-text-field"
+                disabled={false}
+                maxLength={10}
+            />,
+        );
+        expect(await findByTestId("test-name-text-field")).toBeInTheDocument();
+        const textNode = await getByTestId("test-name-text-field");
+        expect(textNode).toBeInTheDocument();
+        userEvent.type(textNode, "newVal");
+        fireEvent.change(textNode);
+        const maxLength = await findByText("/10 Characters");
+        expect(maxLength).toBeInTheDocument();
     });
 });