✅(react) remove warnings during tests

Numerous warnings was raised during tests. We remove most of them. Some
needs to be discussed before fix.

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),

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"

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"

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();

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));

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));

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();