test: 💍 Update test

✅ Closes: #305
melfore · Jan 11, 2024 · 903eb56 · 903eb56
1 parent fbabb03
commit 903eb56
Show file tree

Hide file tree

Showing 10 changed files with 25 additions and 103 deletions.
diff --git a/src/components/AppBar/index.stories.tsx b/src/components/AppBar/index.stories.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { expect, jest } from "@storybook/jest";
 import { Meta, StoryObj } from "@storybook/react";
-import { configure, userEvent, within } from "@storybook/testing-library";
+import { configure, fireEvent, within } from "@storybook/testing-library";
 
 import { Icons } from "../../types/Icon";
 import { getAllComposedDataCy, getComposedDataCy } from "../../utils";
@@ -170,7 +170,7 @@ export const TitleClickable: Story = {
       return;
     }
 
-    await userEvent.click(titleClickable);
+    fireEvent.click(titleClickable);
     await expect(onTitleMock).toHaveBeenCalledTimes(onTitleMock.mock.calls.length);
   },
 };

diff --git a/src/components/BreadCrumbs/index.stories.tsx b/src/components/BreadCrumbs/index.stories.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import AccessibilityIcon from "@mui/icons-material/Accessibility";
 import { expect, jest } from "@storybook/jest";
 import { Meta, StoryObj } from "@storybook/react";
-import { configure, userEvent, within } from "@storybook/testing-library";
+import { configure, fireEvent, within } from "@storybook/testing-library";
 
 import { Icons } from "../../types/Icon";
 import { getComposedDataCy } from "../../utils";
@@ -67,7 +67,7 @@ export const Primary: Story = {
         return;
       }
 
-      await userEvent.click(firstLink);
+      fireEvent.click(firstLink);
       await expect(onClickMock).toHaveBeenCalledTimes(onClickMock.mock.calls.length);
       await expect(onClickMock).toHaveBeenCalledWith(linksMock[firstIndex].href);
     });
@@ -80,7 +80,7 @@ export const Primary: Story = {
         return;
       }
 
-      await userEvent.click(lastLink);
+      fireEvent.click(lastLink);
       await expect(onClickMock).toHaveBeenCalledTimes(onClickMock.mock.calls.length);
     });
   },

diff --git a/src/components/Card/__snapshots__/index.stories.tsx.snap b/src/components/Card/__snapshots__/index.stories.tsx.snap
@@ -85,7 +85,7 @@ exports[`Surfaces/Card Collapsible play-test 1`] = `
   <div class="MuiCardActions-root css-mui-classname"
        style="align-items: center; display: flex; justify-content: space-between; padding: 8px 16px;"
   >
-    <button class="MuiButtonBase-root Mui-focusVisible MuiIconButton-root MuiIconButton-colorInherit MuiIconButton-sizeMedium css-mui-classname"
+    <button class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit MuiIconButton-sizeMedium css-mui-classname"
             tabindex="0"
             type="button"
             data-cy="card-collapse"
@@ -101,24 +101,6 @@ exports[`Surfaces/Card Collapsible play-test 1`] = `
         </path>
       </svg>
       <span class="MuiTouchRipple-root css-mui-classname">
-        <span class="css-mui-classname MuiTouchRipple-ripple MuiTouchRipple-rippleVisible MuiTouchRipple-ripplePulsate"
-              style="width: 41px; height: 41px; top: -0.5px; left: -0.5px;"
-        >
-          <span class="MuiTouchRipple-child MuiTouchRipple-childLeaving MuiTouchRipple-childPulsate">
-          </span>
-        </span>
-        <span class="css-mui-classname MuiTouchRipple-ripple MuiTouchRipple-rippleVisible"
-              style="width: 41px; height: 41px; top: -0.5px; left: -0.5px;"
-        >
-          <span class="MuiTouchRipple-child">
-          </span>
-        </span>
-        <span class="css-mui-classname MuiTouchRipple-ripple MuiTouchRipple-rippleVisible"
-              style="width: 41px; height: 41px; top: -0.5px; left: -0.5px;"
-        >
-          <span class="MuiTouchRipple-child MuiTouchRipple-childLeaving">
-          </span>
-        </span>
       </span>
     </button>
   </div>

diff --git a/src/components/Card/index.stories.tsx b/src/components/Card/index.stories.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { expect, jest } from "@storybook/jest";
 import { Meta, StoryObj } from "@storybook/react";
-import { configure, userEvent, within } from "@storybook/testing-library";
+import { configure, fireEvent, within } from "@storybook/testing-library";
 
 import { Icons } from "../../types/Icon";
 import { getAllComposedDataCy, getComposedDataCy } from "../../utils";
@@ -72,10 +72,10 @@ export const Collapsible: Story = {
       return;
     }
 
-    await userEvent.click(collapseButton);
+    fireEvent.click(collapseButton);
     await expect(onClickMock).toHaveBeenCalledTimes(onClickMock.mock.calls.length);
 
-    await userEvent.click(collapseButton);
+    fireEvent.click(collapseButton);
     await expect(onClickMock).toHaveBeenCalledTimes(onClickMock.mock.calls.length);
   },
 };

diff --git a/src/components/IconButton/__snapshots__/index.stories.tsx.snap b/src/components/IconButton/__snapshots__/index.stories.tsx.snap
@@ -73,7 +73,7 @@ exports[`Inputs/IconButton Disabled smoke-test 1`] = `
 `;
 
 exports[`Inputs/IconButton Primary play-test 1`] = `
-<button class="MuiButtonBase-root Mui-focusVisible MuiIconButton-root MuiIconButton-colorInherit MuiIconButton-sizeMedium css-mui-classname"
+<button class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit MuiIconButton-sizeMedium css-mui-classname"
         tabindex="0"
         type="button"
         data-cy="icon-button"
@@ -89,18 +89,6 @@ exports[`Inputs/IconButton Primary play-test 1`] = `
     </path>
   </svg>
   <span class="MuiTouchRipple-root css-mui-classname">
-    <span class="css-mui-classname MuiTouchRipple-ripple MuiTouchRipple-rippleVisible MuiTouchRipple-ripplePulsate"
-          style="width: 41px; height: 41px; top: -0.5px; left: -0.5px;"
-    >
-      <span class="MuiTouchRipple-child MuiTouchRipple-childPulsate">
-      </span>
-    </span>
-    <span class="css-mui-classname MuiTouchRipple-ripple MuiTouchRipple-rippleVisible"
-          style="width: 41px; height: 41px; top: -0.5px; left: -0.5px;"
-    >
-      <span class="MuiTouchRipple-child MuiTouchRipple-childLeaving">
-      </span>
-    </span>
   </span>
 </button>
 `;

diff --git a/src/components/IconButton/index.stories.tsx b/src/components/IconButton/index.stories.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import MUIStyleIcon from "@mui/icons-material/Style";
 import { expect, jest } from "@storybook/jest";
 import { Meta, StoryObj } from "@storybook/react";
-import { configure, userEvent, within } from "@storybook/testing-library";
+import { configure, fireEvent, within } from "@storybook/testing-library";
 
 import { Icons } from "../../types/Icon";
 import { getAllComposedDataCy } from "../../utils";
@@ -49,7 +49,7 @@ export const Primary: Story = {
     const canvas = within(canvasElement);
     const button = canvas.getByTestId(DATA_CY_DEFAULT);
     if (button) {
-      await userEvent.click(button);
+      fireEvent.click(button);
       await expect(onClickMock).toHaveBeenCalledTimes(onClickMock.mock.calls.length);
     }
   },

diff --git a/src/components/ListItem/__snapshots__/index.stories.tsx.snap b/src/components/ListItem/__snapshots__/index.stories.tsx.snap
@@ -18,7 +18,7 @@ exports[`Display/ListItem Children smoke-test 1`] = `
 `;
 
 exports[`Display/ListItem Clickable play-test 1`] = `
-<div class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-gutters Mui-focusVisible MuiListItemButton-root MuiListItemButton-gutters css-mui-classname"
+<div class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-gutters MuiListItemButton-root MuiListItemButton-gutters css-mui-classname"
      tabindex="0"
      role="button"
      data-cy="list-item"
@@ -30,12 +30,6 @@ exports[`Display/ListItem Clickable play-test 1`] = `
     John Doe
   </div>
   <span class="MuiTouchRipple-root css-mui-classname">
-    <span class="css-mui-classname MuiTouchRipple-ripple MuiTouchRipple-rippleVisible"
-          style="width: 1251px; height: 1251px; top: -601.5px; left: -1.4998px;"
-    >
-      <span class="MuiTouchRipple-child MuiTouchRipple-childLeaving">
-      </span>
-    </span>
   </span>
 </div>
 `;

diff --git a/src/components/ListItem/index.stories.tsx b/src/components/ListItem/index.stories.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import MUIStyleIcon from "@mui/icons-material/Style";
 import { expect, jest } from "@storybook/jest";
 import { Meta, StoryObj } from "@storybook/react";
-import { configure, userEvent, within } from "@storybook/testing-library";
+import { configure, fireEvent, within } from "@storybook/testing-library";
 
 import { Icons } from "../../types/Icon";
 import { getAllComposedDataCy } from "../../utils";
@@ -64,7 +64,7 @@ export const Clickable: Story = {
     const canvas = within(canvasElement);
     const listItem = canvas.getByTestId(DATA_CY_DEFAULT);
     if (listItem) {
-      await userEvent.click(listItem);
+      fireEvent.click(listItem);
       await expect(onClickMock).toHaveBeenCalledTimes(onClickMock.mock.calls.length);
     }
   },

diff --git a/src/components/Table/__snapshots__/index.stories.tsx.snap b/src/components/Table/__snapshots__/index.stories.tsx.snap
@@ -3908,7 +3908,7 @@ exports[`Display/Table Pagination play-test 1`] = `
             </path>
           </svg>
         </button>
-        <button class="MuiButtonBase-root Mui-focusVisible MuiIconButton-root MuiIconButton-colorInherit MuiIconButton-sizeMedium css-mui-classname"
+        <button class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit MuiIconButton-sizeMedium css-mui-classname"
                 tabindex="0"
                 type="button"
                 data-cy="table-pagination-next"
@@ -3924,18 +3924,6 @@ exports[`Display/Table Pagination play-test 1`] = `
             </path>
           </svg>
           <span class="MuiTouchRipple-root css-mui-classname">
-            <span class="css-mui-classname MuiTouchRipple-ripple MuiTouchRipple-rippleVisible MuiTouchRipple-ripplePulsate"
-                  style="width: 41px; height: 41px; top: -0.5px; left: -0.5px;"
-            >
-              <span class="MuiTouchRipple-child MuiTouchRipple-childPulsate">
-              </span>
-            </span>
-            <span class="css-mui-classname MuiTouchRipple-ripple MuiTouchRipple-rippleVisible"
-                  style="width: 41px; height: 41px; top: -0.5px; left: -0.5px;"
-            >
-              <span class="MuiTouchRipple-child MuiTouchRipple-childLeaving">
-              </span>
-            </span>
           </span>
         </button>
         <button class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit MuiIconButton-sizeMedium css-mui-classname"
@@ -4240,18 +4228,6 @@ exports[`Display/Table Selectable play-test 1`] = `
                   </path>
                 </svg>
                 <span class="MuiTouchRipple-root css-mui-classname">
-                  <span class="css-mui-classname MuiTouchRipple-ripple MuiTouchRipple-rippleVisible MuiTouchRipple-ripplePulsate"
-                        style="width: 39px; height: 39px; top: -0.5px; left: -0.5px;"
-                  >
-                    <span class="MuiTouchRipple-child MuiTouchRipple-childLeaving MuiTouchRipple-childPulsate">
-                    </span>
-                  </span>
-                  <span class="css-mui-classname MuiTouchRipple-ripple MuiTouchRipple-rippleVisible MuiTouchRipple-ripplePulsate"
-                        style="width: 39px; height: 39px; top: -0.5px; left: -0.5px;"
-                  >
-                    <span class="MuiTouchRipple-child MuiTouchRipple-childLeaving MuiTouchRipple-childPulsate">
-                    </span>
-                  </span>
                 </span>
               </span>
             </label>
@@ -4320,7 +4296,7 @@ exports[`Display/Table Selectable play-test 1`] = `
                    data-cy="checkbox"
                    style="margin: 0px;"
             >
-              <span class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall Mui-focusVisible PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall css-mui-classname"
+              <span class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall css-mui-classname"
                     data-cy="checkbox-check"
               >
                 <input class="PrivateSwitchBase-input css-mui-classname"
@@ -4338,24 +4314,6 @@ exports[`Display/Table Selectable play-test 1`] = `
                   </path>
                 </svg>
                 <span class="MuiTouchRipple-root css-mui-classname">
-                  <span class="css-mui-classname MuiTouchRipple-ripple MuiTouchRipple-rippleVisible MuiTouchRipple-ripplePulsate"
-                        style="width: 39px; height: 39px; top: -0.5px; left: -0.5px;"
-                  >
-                    <span class="MuiTouchRipple-child MuiTouchRipple-childLeaving MuiTouchRipple-childPulsate">
-                    </span>
-                  </span>
-                  <span class="css-mui-classname MuiTouchRipple-ripple MuiTouchRipple-rippleVisible"
-                        style="width: 39px; height: 39px; top: -0.5px; left: -0.5px;"
-                  >
-                    <span class="MuiTouchRipple-child">
-                    </span>
-                  </span>
-                  <span class="css-mui-classname MuiTouchRipple-ripple MuiTouchRipple-rippleVisible"
-                        style="width: 39px; height: 39px; top: -0.5px; left: -0.5px;"
-                  >
-                    <span class="MuiTouchRipple-child MuiTouchRipple-childLeaving">
-                    </span>
-                  </span>
                 </span>
               </span>
             </label>

diff --git a/src/components/Table/index.stories.tsx b/src/components/Table/index.stories.tsx
@@ -6,7 +6,7 @@ import MUIStyleIcon from "@mui/icons-material/Style";
 import MUITextField from "@mui/material/TextField";
 import { expect, jest } from "@storybook/jest";
 import { Meta, StoryObj } from "@storybook/react";
-import { configure, userEvent, within } from "@storybook/testing-library";
+import { configure, fireEvent, within } from "@storybook/testing-library";
 
 import { Icons } from "../../types/Icon";
 import { ITableDataCallbackOptions } from "../../types/Table";
@@ -207,7 +207,7 @@ export const Pagination: Story = {
       return;
     }
 
-    await userEvent.click(nextPageButton);
+    fireEvent.click(nextPageButton);
     expect(onPageMock).toHaveBeenCalledTimes(onPageMock.mock.calls.length);
   },
 };
@@ -224,7 +224,7 @@ export const RowClickable: Story = {
       return;
     }
 
-    await userEvent.click(secondRow);
+    fireEvent.click(secondRow);
     expect(onRowMock).toHaveBeenCalledTimes(onRowMock.mock.calls.length);
   },
 };
@@ -242,12 +242,12 @@ export const Selectable: Story = {
     }
 
     await step("Select all", async () => {
-      await userEvent.click(selectAll);
+      fireEvent.click(selectAll);
       await expect(onSelectMock).toHaveBeenCalledTimes(onSelectMock.mock.calls.length);
     });
 
     await step("Deselect all", async () => {
-      await userEvent.click(selectAll);
+      fireEvent.click(selectAll);
       await expect(onSelectMock).toHaveBeenCalledTimes(onSelectMock.mock.calls.length);
     });
 
@@ -257,12 +257,12 @@ export const Selectable: Story = {
     }
 
     await step("Select one", async () => {
-      await userEvent.click(selectOne);
+      fireEvent.click(selectOne);
       await expect(onSelectMock).toHaveBeenCalledTimes(onSelectMock.mock.calls.length);
     });
 
     await step("Deselect one", async () => {
-      await userEvent.click(selectOne);
+      fireEvent.click(selectOne);
       await expect(onSelectMock).toHaveBeenCalledTimes(onSelectMock.mock.calls.length);
     });
   },
@@ -280,7 +280,7 @@ export const Sortable: Story = {
       return;
     }
 
-    await userEvent.click(firstHeading);
+    fireEvent.click(firstHeading);
     expect(onSortMock).toHaveBeenCalledTimes(onSortMock.mock.calls.length);
   },
 };