From a70f8129ebac6e21a13e0b1dc457b69b9d364c48 Mon Sep 17 00:00:00 2001
From: jbpenrath <jb.penrath@gmail.com>
Date: Mon, 29 Apr 2024 15:29:33 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=85(react)=20remove=20warnings=20during?=
 =?UTF-8?q?=20tests?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Numerous warnings was raised during tests. We remove most of them. Some
needs to be discussed before fix.
---
 .../src/components/DataGrid/index.spec.tsx    |  4 +--
 .../Forms/DatePicker/DateRangePicker.spec.tsx | 25 +++++++++++++++++++
 .../Forms/DatePicker/index.stories.tsx        |  9 ++++++-
 .../src/components/Forms/Radio/index.spec.tsx |  9 ++++++-
 .../src/components/Forms/Select/mono.spec.tsx | 10 +++++---
 .../components/Forms/Select/multi.spec.tsx    | 10 +++++---
 .../components/Forms/TextArea/index.spec.tsx  |  2 +-
 7 files changed, 58 insertions(+), 11 deletions(-)

diff --git a/packages/react/src/components/DataGrid/index.spec.tsx b/packages/react/src/components/DataGrid/index.spec.tsx
index c219e12..f310d99 100644
--- a/packages/react/src/components/DataGrid/index.spec.tsx
+++ b/packages/react/src/components/DataGrid/index.spec.tsx
@@ -110,7 +110,7 @@ describe("<DataGrid/>", () => {
 
     // Resolve request.
     database.sort((a, b) => a.firstName.localeCompare(b.firstName));
-    await act(() =>
+    await act(async () =>
       deferred.resolve(
         JSON.stringify({
           rows: database.slice(0, 10),
@@ -182,7 +182,7 @@ describe("<DataGrid/>", () => {
     });
 
     // Resolve page 2 mock.
-    await act(() =>
+    await act(async () =>
       deferred.resolve(
         JSON.stringify({
           rows: database.slice(10, 20),
diff --git a/packages/react/src/components/Forms/DatePicker/DateRangePicker.spec.tsx b/packages/react/src/components/Forms/DatePicker/DateRangePicker.spec.tsx
index 472feee..93f80e8 100644
--- a/packages/react/src/components/Forms/DatePicker/DateRangePicker.spec.tsx
+++ b/packages/react/src/components/Forms/DatePicker/DateRangePicker.spec.tsx
@@ -76,6 +76,7 @@ describe("<DateRangePicker/>", () => {
     render(
       <CunninghamProvider>
         <DateRangePicker
+          label="Pick a date"
           startLabel="Pick a date"
           endLabel="Pick a date"
           name="datepicker"
@@ -127,6 +128,7 @@ describe("<DateRangePicker/>", () => {
     render(
       <CunninghamProvider>
         <DateRangePicker
+          label="Pick a date"
           startLabel="Start date"
           endLabel="End date"
           name="datepicker"
@@ -157,6 +159,7 @@ describe("<DateRangePicker/>", () => {
     render(
       <CunninghamProvider>
         <DateRangePicker
+          label="Pick a date"
           startLabel="Start date"
           endLabel="End date"
           name="datepicker"
@@ -176,6 +179,7 @@ describe("<DateRangePicker/>", () => {
     render(
       <CunninghamProvider>
         <DateRangePicker
+          label="Pick a date"
           startLabel="Start date"
           endLabel="End date"
           name="datepicker"
@@ -235,6 +239,7 @@ describe("<DateRangePicker/>", () => {
     render(
       <CunninghamProvider>
         <DateRangePicker
+          label="Pick a date"
           startLabel="Start date"
           endLabel="End date"
           name="datepicker"
@@ -310,6 +315,7 @@ describe("<DateRangePicker/>", () => {
     render(
       <CunninghamProvider>
         <DateRangePicker
+          label="Pick a date"
           startLabel="Start date"
           endLabel="End date"
           name="datepicker"
@@ -375,6 +381,7 @@ describe("<DateRangePicker/>", () => {
     render(
       <CunninghamProvider>
         <DateRangePicker
+          label="Pick a date"
           startLabel="Start date"
           endLabel="End date"
           defaultValue={[
@@ -439,6 +446,7 @@ describe("<DateRangePicker/>", () => {
     render(
       <CunninghamProvider>
         <DateRangePicker
+          label="Pick a date"
           startLabel="Start date"
           endLabel="End date"
           name="datepicker"
@@ -491,6 +499,7 @@ describe("<DateRangePicker/>", () => {
     render(
       <CunninghamProvider>
         <DateRangePicker
+          label="Pick a date"
           startLabel="Start date"
           endLabel="End date"
           name="datepicker"
@@ -543,6 +552,7 @@ describe("<DateRangePicker/>", () => {
     render(
       <CunninghamProvider>
         <DateRangePicker
+          label="Pick a date"
           startLabel="Start date"
           endLabel="End date"
           name="datepicker"
@@ -597,6 +607,7 @@ describe("<DateRangePicker/>", () => {
     render(
       <CunninghamProvider>
         <DateRangePicker
+          label="Pick a date"
           startLabel="Start date"
           endLabel="End date"
           name="datepicker"
@@ -656,6 +667,7 @@ describe("<DateRangePicker/>", () => {
     render(
       <CunninghamProvider>
         <DateRangePicker
+          label="Pick a date"
           startLabel="Start date"
           endLabel="End date"
           name="datepicker"
@@ -719,6 +731,7 @@ describe("<DateRangePicker/>", () => {
       render(
         <CunninghamProvider>
           <DateRangePicker
+            label="Pick a date"
             startLabel="Start date"
             endLabel="End date"
             name="datepicker"
@@ -745,6 +758,7 @@ describe("<DateRangePicker/>", () => {
       render(
         <CunninghamProvider>
           <DateRangePicker
+            label="Pick a date"
             startLabel="Start date"
             endLabel="End date"
             name="datepicker"
@@ -760,6 +774,7 @@ describe("<DateRangePicker/>", () => {
     render(
       <CunninghamProvider>
         <DateRangePicker
+          label="Pick a date"
           startLabel="Start date"
           endLabel="End date"
           name="datepicker"
@@ -778,6 +793,7 @@ describe("<DateRangePicker/>", () => {
     render(
       <CunninghamProvider>
         <DateRangePicker
+          label="Pick a date"
           startLabel="Start date"
           endLabel="End date"
           name="datepicker"
@@ -840,6 +856,7 @@ describe("<DateRangePicker/>", () => {
       render(
         <CunninghamProvider>
           <DateRangePicker
+            label="Pick a date"
             startLabel="Start date"
             endLabel="End date"
             name="datepicker"
@@ -861,6 +878,7 @@ describe("<DateRangePicker/>", () => {
       render(
         <CunninghamProvider>
           <DateRangePicker
+            label="Pick a date"
             startLabel="Start date"
             endLabel="End date"
             name="datepicker"
@@ -877,6 +895,7 @@ describe("<DateRangePicker/>", () => {
     render(
       <CunninghamProvider>
         <DateRangePicker
+          label="Pick a date"
           startLabel="Start date"
           endLabel="End date"
           name="datepicker"
@@ -913,6 +932,7 @@ describe("<DateRangePicker/>", () => {
     render(
       <CunninghamProvider>
         <DateRangePicker
+          label="Pick a date"
           startLabel="Start date"
           endLabel="End date"
           name="datepicker"
@@ -934,6 +954,7 @@ describe("<DateRangePicker/>", () => {
     render(
       <CunninghamProvider>
         <DateRangePicker
+          label="Pick a date"
           startLabel="Start date"
           endLabel="End date"
           name="datepicker"
@@ -988,6 +1009,7 @@ describe("<DateRangePicker/>", () => {
             <div>Value = {value?.join(" ")}|</div>
             <Button onClick={() => setValue(null)}>Clear</Button>
             <DateRangePicker
+              label="Pick a date"
               startLabel="Start date"
               endLabel="End date"
               value={value}
@@ -1053,6 +1075,7 @@ describe("<DateRangePicker/>", () => {
             <div>Value = {value?.join(" ")}|</div>
             <Button onClick={() => setValue(null)}>Clear</Button>
             <DateRangePicker
+              label="Pick a date"
               startLabel="Start date"
               endLabel="End date"
               value={value}
@@ -1104,6 +1127,7 @@ describe("<DateRangePicker/>", () => {
           <div>
             <form onSubmit={onSubmit}>
               <DateRangePicker
+                label="Pick a date"
                 startLabel="Pick a date"
                 endLabel="Pick a date"
                 name="datepicker"
@@ -1179,6 +1203,7 @@ describe("<DateRangePicker/>", () => {
     render(
       <CunninghamProvider>
         <DateRangePicker
+          label="Pick a date"
           startLabel="Start"
           endLabel="End"
           className="my-custom-class"
diff --git a/packages/react/src/components/Forms/DatePicker/index.stories.tsx b/packages/react/src/components/Forms/DatePicker/index.stories.tsx
index d119d0a..d50189f 100644
--- a/packages/react/src/components/Forms/DatePicker/index.stories.tsx
+++ b/packages/react/src/components/Forms/DatePicker/index.stories.tsx
@@ -165,7 +165,11 @@ export const ReactHookForm = () => {
 export const RangeDefault = () => {
   return (
     <div style={{ minHeight: "400px" }}>
-      <DateRangePicker startLabel="Start date" endLabel="Due date" />
+      <DateRangePicker
+        label="Pick a date"
+        startLabel="Start date"
+        endLabel="Due date"
+      />
     </div>
   );
 };
@@ -173,6 +177,7 @@ export const RangeDefault = () => {
 export const RangeDefaultValue = () => {
   return (
     <DateRangePicker
+      label="Pick a date"
       startLabel="Start date"
       endLabel="Due date"
       defaultValue={[
@@ -200,6 +205,7 @@ export const RangeControlled = () => {
         }}
       >
         <DateRangePicker
+          label="Pick a date"
           startLabel="Start date"
           endLabel="Due date"
           minValue="2023-01-23T00:00:00.000+00:00"
@@ -230,6 +236,7 @@ export const RangeControlledFull = () => {
         }}
       >
         <DateRangePicker
+          label="Pick a date"
           startLabel="Start date"
           endLabel="Due date"
           minValue="2023-01-23T00:00:00.000+00:00"
diff --git a/packages/react/src/components/Forms/Radio/index.spec.tsx b/packages/react/src/components/Forms/Radio/index.spec.tsx
index 0bddeb6..91ae7f1 100644
--- a/packages/react/src/components/Forms/Radio/index.spec.tsx
+++ b/packages/react/src/components/Forms/Radio/index.spec.tsx
@@ -141,7 +141,14 @@ describe("<Radio/>", () => {
   });
 
   it("renders with className", async () => {
-    render(<Radio label="Agree" checked={true} className="my-custom-class" />);
+    render(
+      <Radio
+        label="Agree"
+        checked={true}
+        readOnly={true}
+        className="my-custom-class"
+      />,
+    );
     expect(
       document.querySelector(".c__checkbox.my-custom-class"),
     ).toBeInTheDocument();
diff --git a/packages/react/src/components/Forms/Select/mono.spec.tsx b/packages/react/src/components/Forms/Select/mono.spec.tsx
index 080d7cc..fea220a 100644
--- a/packages/react/src/components/Forms/Select/mono.spec.tsx
+++ b/packages/react/src/components/Forms/Select/mono.spec.tsx
@@ -1,5 +1,5 @@
 import userEvent from "@testing-library/user-event";
-import { render, screen, waitFor } from "@testing-library/react";
+import { act, render, screen, waitFor } from "@testing-library/react";
 import { expect } from "vitest";
 import React, { createRef, FormEvent, useState } from "react";
 import { within } from "@testing-library/dom";
@@ -835,7 +835,9 @@ describe("<Select/>", () => {
       expect(document.activeElement?.tagName).toEqual("INPUT");
 
       // Blur the select.
-      ref.current?.blur();
+      await act(async () => {
+        ref.current?.blur();
+      });
 
       // Make sure the select is blured.
       await waitFor(() => expectMenuToBeClosed(menu));
@@ -2017,7 +2019,9 @@ describe("<Select/>", () => {
       expect(document.activeElement?.className).toContain("c__select__wrapper");
 
       // Blur the select.
-      ref.current?.blur();
+      await act(async () => {
+        ref.current?.blur();
+      });
 
       // Make sure the select is blured.
       await waitFor(() => expectMenuToBeClosed(menu));
diff --git a/packages/react/src/components/Forms/Select/multi.spec.tsx b/packages/react/src/components/Forms/Select/multi.spec.tsx
index d957cd0..ee77008 100644
--- a/packages/react/src/components/Forms/Select/multi.spec.tsx
+++ b/packages/react/src/components/Forms/Select/multi.spec.tsx
@@ -1,5 +1,5 @@
 import userEvent from "@testing-library/user-event";
-import { render, screen, waitFor } from "@testing-library/react";
+import { act, render, screen, waitFor } from "@testing-library/react";
 import React, { createRef, FormEvent, useState } from "react";
 import { expect } from "vitest";
 import { within } from "@testing-library/dom";
@@ -836,7 +836,9 @@ describe("<Select multi={true} />", () => {
       expect(document.activeElement?.className).toContain("c__select__wrapper");
 
       // Blur the select.
-      ref.current?.blur();
+      await act(async () => {
+        ref.current?.blur();
+      });
 
       // Make sure the select is blured.
       await waitFor(() => expectMenuToBeClosed(menu));
@@ -1736,7 +1738,9 @@ describe("<Select multi={true} />", () => {
       expect(document.activeElement?.tagName).toEqual("INPUT");
 
       // Blur the select.
-      ref.current?.blur();
+      await act(async () => {
+        ref.current?.blur();
+      });
 
       // Make sure the select is blured.
       await waitFor(() => expectMenuToBeClosed(menu));
diff --git a/packages/react/src/components/Forms/TextArea/index.spec.tsx b/packages/react/src/components/Forms/TextArea/index.spec.tsx
index eea9b45..72f93a9 100644
--- a/packages/react/src/components/Forms/TextArea/index.spec.tsx
+++ b/packages/react/src/components/Forms/TextArea/index.spec.tsx
@@ -194,7 +194,7 @@ describe("<TextArea/>", () => {
 
   it("renders with className", async () => {
     render(<TextArea className="my-custom-class" />);
-    screen.debug();
+
     expect(
       document.querySelector(".c__field--textarea.my-custom-class"),
     ).toBeInTheDocument();