Feature/csf

packages/components/src/alert/tests/jest/AlertTrigger.test.tsx

@@ -20,14 +20,14 @@ test("do not dismiss on outside click", async () => {
         </AlertTrigger>
     );
 
-    act(() => {
-        userEvent.click(getByTestId("trigger"));
+    await act(() => {
+        return userEvent.click(getByTestId("trigger"));
     });
 
     await waitFor(() => expect(getByTestId("alert")).toBeInTheDocument());
 
-    act(() => {
-        userEvent.click(document.body);
+    await act(() => {
+        return userEvent.click(document.body);
     });
 
     await waitFor(() => expect(getByTestId("alert")).toBeInTheDocument());

packages/components/src/autocomplete/tests/jest/Autocomplete.test.tsx

@@ -135,8 +135,8 @@ test("when a query is cleared with the clear button, hide the overlay", async ()
 
     await waitFor(() => expect(getByTestId("overlay")).toBeInTheDocument());
 
-    act(() => {
-        userEvent.click(container.querySelector(":scope .o-ui-search-input-clear-button"));
+    await act(() => {
+        return userEvent.click(container.querySelector(":scope .o-ui-search-input-clear-button"));
     });
 
     await waitFor(() => expect(getByTestId("autocomplete")).toHaveValue(""));
@@ -334,8 +334,8 @@ test("when no value is selected, leaving the autocomplete without selecting a ne
 
     await waitFor(() => expect(getByTestId("overlay")).toBeInTheDocument());
 
-    act(() => {
-        userEvent.click(document.body);
+    await act(() => {
+        return userEvent.click(document.body);
     });
 
     await waitFor(() => expect(queryByTestId("overlay")).not.toBeInTheDocument());
@@ -407,14 +407,14 @@ test("when opened, on tab keydown, close and select the next tabbable element",
     await waitFor(() => expect(getByTestId("overlay")).toBeInTheDocument());
 
     // First tab move the focus to the clear button.
-    act(() => {
-        userEvent.tab();
+    await act(() => {
+        return userEvent.tab();
     });
 
     await waitFor(() => expect(getByTestId("overlay")).toBeInTheDocument());
 
-    act(() => {
-        userEvent.tab();
+    await act(() => {
+        return userEvent.tab();
     });
 
     await waitFor(() => expect(queryByTestId("overlay")).not.toBeInTheDocument());
@@ -475,8 +475,8 @@ test("when the clear button is clicked, the focus is moved to the input", async
 
     await waitFor(() => expect(getByTestId("overlay")).toBeInTheDocument());
 
-    act(() => {
-        userEvent.click(container.querySelector(":scope .o-ui-search-input-clear-button"));
+    await act(() => {
+        return userEvent.click(container.querySelector(":scope .o-ui-search-input-clear-button"));
     });
 
     await waitFor(() => expect(getByTestId("autocomplete")).toHaveFocus());
@@ -495,8 +495,8 @@ test("when in a field, clicking on the field label focus the autocomplete", asyn
         </Field>
     );
 
-    act(() => {
-        userEvent.click(getByTestId("label"));
+    await act(() => {
+        return userEvent.click(getByTestId("label"));
     });
 
     await waitFor(() => expect(getByTestId("autocomplete")).toHaveFocus());

packages/components/src/button/tests/jest/ToggleButton.test.tsx

@@ -58,8 +58,8 @@ test("call onChange when the button is selected", async () => {
         </ToggleButton>
     );
 
-    act(() => {
-        userEvent.click(getByTestId("toggle-button"));
+    await act(() => {
+        return userEvent.click(getByTestId("toggle-button"));
     });
 
     await waitFor(() => expect(handler).toHaveBeenLastCalledWith(expect.anything(), true));
@@ -80,12 +80,12 @@ test("call onChange when the button is unselected", async () => {
         </ToggleButton>
     );
 
-    act(() => {
-        userEvent.click(getByTestId("toggle-button"));
+    await act(() => {
+        return userEvent.click(getByTestId("toggle-button"));
     });
 
-    act(() => {
-        userEvent.click(getByTestId("toggle-button"));
+    await act(() => {
+        return userEvent.click(getByTestId("toggle-button"));
     });
 
     await waitFor(() => expect(handler).toHaveBeenLastCalledWith(expect.anything(), false));

packages/components/src/button/tests/jest/ToggleIconButton.test.tsx

@@ -22,8 +22,8 @@ test("call onChange when the button is selected", async () => {
         </ToggleIconButton>
     );
 
-    act(() => {
-        userEvent.click(getByTestId("toggle-icon-button"));
+    await act(() => {
+        return userEvent.click(getByTestId("toggle-icon-button"));
     });
 
     await waitFor(() => expect(handler).toHaveBeenLastCalledWith(expect.anything(), true));
@@ -45,12 +45,12 @@ test("call onChange when the button is unselected", async () => {
         </ToggleIconButton>
     );
 
-    act(() => {
-        userEvent.click(getByTestId("toggle-icon-button"));
+    await act(() => {
+        return userEvent.click(getByTestId("toggle-icon-button"));
     });
 
-    act(() => {
-        userEvent.click(getByTestId("toggle-icon-button"));
+    await act(() => {
+        return userEvent.click(getByTestId("toggle-icon-button"));
     });
 
     await waitFor(() => expect(handler).toHaveBeenLastCalledWith(expect.anything(), false));

packages/components/src/checkbox/tests/jest/Checkbox.test.tsx

@@ -53,8 +53,8 @@ test("call onChange, when the checkbox is checked", async () => {
         <Checkbox onChange={handler} data-testid="checkbox">Milky Way</Checkbox>
     );
 
-    act(() => {
-        userEvent.click(getInput(getByTestId("checkbox")));
+    await act(() => {
+        return userEvent.click(getInput(getByTestId("checkbox")));
     });
 
     await waitFor(() => expect(handler).toHaveBeenLastCalledWith(expect.anything(), true));
@@ -68,12 +68,12 @@ test("call onChange when the checkbox is unchecked", async () => {
         <Checkbox onChange={handler} data-testid="checkbox">Milky Way</Checkbox>
     );
 
-    act(() => {
-        userEvent.click(getInput(getByTestId("checkbox")));
+    await act(() => {
+        return userEvent.click(getInput(getByTestId("checkbox")));
     });
 
-    act(() => {
-        userEvent.click(getInput(getByTestId("checkbox")));
+    await act(() => {
+        return userEvent.click(getInput(getByTestId("checkbox")));
     });
 
     await waitFor(() => expect(handler).toHaveBeenLastCalledWith(expect.anything(), false));
@@ -87,8 +87,8 @@ test("call onValueChange when the checkbox is checked", async () => {
         <Checkbox onValueChange={handler} data-testid="checkbox">Milky Way</Checkbox>
     );
 
-    act(() => {
-        userEvent.click(getInput(getByTestId("checkbox")));
+    await act(() => {
+        return userEvent.click(getInput(getByTestId("checkbox")));
     });
 
     await waitFor(() => expect(handler).toHaveBeenLastCalledWith(expect.anything(), true));
@@ -102,12 +102,12 @@ test("call onValueChange when the checkbox is unchecked", async () => {
         <Checkbox onValueChange={handler} data-testid="checkbox">Milky Way</Checkbox>
     );
 
-    act(() => {
-        userEvent.click(getInput(getByTestId("checkbox")));
+    await act(() => {
+        return userEvent.click(getInput(getByTestId("checkbox")));
     });
 
-    act(() => {
-        userEvent.click(getInput(getByTestId("checkbox")));
+    await act(() => {
+        return userEvent.click(getInput(getByTestId("checkbox")));
     });
 
     await waitFor(() => expect(handler).toHaveBeenLastCalledWith(expect.anything(), false));
@@ -121,8 +121,8 @@ test("call onValueChange when the checkbox goes from indeterminate to checked",
         <Checkbox defaultIndeterminate onValueChange={handler} data-testid="checkbox">Milky Way</Checkbox>
     );
 
-    act(() => {
-        userEvent.click(getInput(getByTestId("checkbox")));
+    await act(() => {
+        return userEvent.click(getInput(getByTestId("checkbox")));
     });
 
     await waitFor(() => expect(handler).toHaveBeenLastCalledWith(expect.anything(), true));
@@ -136,8 +136,8 @@ test("dont call onValueChange when the checkbox is disabled", async () => {
         <Checkbox disabled onValueChange={handler} data-testid="checkbox">Milky Way</Checkbox>
     );
 
-    act(() => {
-        userEvent.click(getInput(getByTestId("checkbox")));
+    await act(() => {
+        return userEvent.click(getInput(getByTestId("checkbox")));
     });
 
     await waitFor(() => expect(handler).not.toHaveBeenCalled());

packages/components/src/checkbox/tests/jest/CheckboxGroup.test.tsx

@@ -89,16 +89,16 @@ test("when a checkbox value is not provided, the value is autogenerated", async
         </CheckboxGroup>
     );
 
-    act(() => {
-        userEvent.click(getInput(getAllByTestId("checkbox")[0]));
+    await act(() => {
+        return userEvent.click(getInput(getAllByTestId("checkbox")[0]));
     });
 
-    act(() => {
-        userEvent.click(getInput(getAllByTestId("checkbox")[1]));
+    await act(() => {
+        return userEvent.click(getInput(getAllByTestId("checkbox")[1]));
     });
 
-    act(() => {
-        userEvent.click(getInput(getAllByTestId("checkbox")[2]));
+    await act(() => {
+        return userEvent.click(getInput(getAllByTestId("checkbox")[2]));
     });
 
     await waitFor(() => expect(handler).toHaveBeenLastCalledWith(expect.anything(), ["0", "1", "2"]));
@@ -133,8 +133,8 @@ test("call onChange when a single checkbox is selected", async () => {
         </CheckboxGroup>
     );
 
-    act(() => {
-        userEvent.click(getInput(getAllByTestId("checkbox")[0]));
+    await act(() => {
+        return userEvent.click(getInput(getAllByTestId("checkbox")[0]));
     });
 
     await waitFor(() => expect(handler).toHaveBeenLastCalledWith(expect.anything(), ["1"]));
@@ -154,12 +154,12 @@ test("call onChange when multiple checkbox are selected", async () => {
 
     const buttons = getAllByTestId("checkbox");
 
-    act(() => {
-        userEvent.click(getInput(buttons[0]));
+    await act(() => {
+        return userEvent.click(getInput(buttons[0]));
     });
 
-    act(() => {
-        userEvent.click(getInput(buttons[2]));
+    await act(() => {
+        return userEvent.click(getInput(buttons[2]));
     });
 
     await waitFor(() => expect(handler).toHaveBeenLastCalledWith(expect.anything(), ["1", "3"]));
@@ -179,16 +179,16 @@ test("call onChange when a checkbox is unselected", async () => {
 
     const buttons = getAllByTestId("checkbox");
 
-    act(() => {
-        userEvent.click(getInput(buttons[0]));
+    await act(() => {
+        return userEvent.click(getInput(buttons[0]));
     });
 
-    act(() => {
-        userEvent.click(getInput(buttons[2]));
+    await act(() => {
+        return userEvent.click(getInput(buttons[2]));
     });
 
-    act(() => {
-        userEvent.click(getInput(buttons[0]));
+    await act(() => {
+        return userEvent.click(getInput(buttons[0]));
     });
 
     await waitFor(() => expect(handler).toHaveBeenLastCalledWith(expect.anything(), ["3"]));
@@ -206,12 +206,12 @@ test("pass an empty array when no checkbox are selected", async () => {
         </CheckboxGroup>
     );
 
-    act(() => {
-        userEvent.click(getInput(getAllByTestId("checkbox")[0]));
+    await act(() => {
+        return userEvent.click(getInput(getAllByTestId("checkbox")[0]));
     });
 
-    act(() => {
-        userEvent.click(getInput(getAllByTestId("checkbox")[0]));
+    await act(() => {
+        return userEvent.click(getInput(getAllByTestId("checkbox")[0]));
     });
 
     await waitFor(() => expect(handler).toHaveBeenLastCalledWith(expect.anything(), []));
@@ -229,8 +229,8 @@ test("call the checkbox onValueChange handler when a checkbox is selected", asyn
         </CheckboxGroup>
     );
 
-    act(() => {
-        userEvent.click(getInput(getAllByTestId("checkbox")[0]));
+    await act(() => {
+        return userEvent.click(getInput(getAllByTestId("checkbox")[0]));
     });
 
     await waitFor(() => expect(handler).toHaveBeenLastCalledWith(expect.anything(), true));
@@ -248,8 +248,8 @@ test("call the checkbox onChange handler when a checkbox is selected", async ()
         </CheckboxGroup>
     );
 
-    act(() => {
-        userEvent.click(getInput(getAllByTestId("checkbox")[0]));
+    await act(() => {
+        return userEvent.click(getInput(getAllByTestId("checkbox")[0]));
     });
 
     await waitFor(() => expect(handler).toHaveBeenLastCalledWith(expect.anything(), true));
@@ -324,8 +324,8 @@ describe("with toggle buttons", () => {
             </CheckboxGroup>
         );
 
-        act(() => {
-            userEvent.click(getByTestId("button-1"));
+        await act(() => {
+            return userEvent.click(getByTestId("button-1"));
         });
 
         await waitFor(() => expect(getByTestId("button-1")).toHaveAttribute("aria-checked", "true"));
@@ -342,8 +342,8 @@ describe("with toggle buttons", () => {
             </CheckboxGroup>
         );
 
-        act(() => {
-            userEvent.click(getByTestId("button-1"));
+        await act(() => {
+            return userEvent.click(getByTestId("button-1"));
         });
 
         await waitFor(() => expect(handler).toHaveBeenLastCalledWith(expect.anything(), ["1"]));
@@ -361,12 +361,12 @@ describe("with toggle buttons", () => {
             </CheckboxGroup>
         );
 
-        act(() => {
-            userEvent.click(getByTestId("button-1"));
+        await act(() => {
+            return userEvent.click(getByTestId("button-1"));
         });
 
-        act(() => {
-            userEvent.click(getByTestId("button-1"));
+        await act(() => {
+            return userEvent.click(getByTestId("button-1"));
         });
 
         await waitFor(() => expect(handler).toHaveBeenLastCalledWith(expect.anything(), []));