@kaizen/components 1.61.1 → 1.61.2

package/src/Illustration/subcomponents/VideoPlayer/VideoPlayer.spec.tsx

@@ -1,15 +1,15 @@
 import React from "react"
 import { render, screen } from "@testing-library/react"
-import userEvent from "@testing-library/user-event"
+import { vi } from "vitest"
 import { VideoPlayer } from "./VideoPlayer"
 
 const matchMedia = {
   media: "",
   onchange: null,
-  addListener: jest.fn(),
-  removeListener: jest.fn(),
-  addEventListener: jest.fn(),
-  removeEventListener: jest.fn(),
+  addListener: vi.fn(),
+  removeListener: vi.fn(),
+  addEventListener: vi.fn(),
+  removeEventListener: vi.fn(),
 }
 const mockPrefersReducedMotion = {
   matches: true,
@@ -19,35 +19,36 @@ const mockDoesNotPreferReducedMotion = {
   matches: false,
   ...matchMedia,
 }
-const mockPlay = jest.fn().mockResolvedValue(undefined)
-const mockLoad = jest.fn()
-const mockPause = jest.fn()
+const mockPlay = vi.fn().mockResolvedValue(undefined)
+const mockLoad = vi.fn()
+const mockPause = vi.fn()
 
 describe("<VideoPlayer />", () => {
   beforeEach(() => {
     window.HTMLMediaElement.prototype.load = mockLoad
     window.HTMLMediaElement.prototype.play = mockPlay
     window.HTMLMediaElement.prototype.pause = mockPause
-    window.matchMedia = jest
+    window.matchMedia = vi
       .fn()
       .mockImplementation(() => mockDoesNotPreferReducedMotion)
     // this will stop throwing the unstable_flushDiscreteUpdates console error cause by react bug
     // https://stackoverflow.com/a/65338472/18285270
     Object.defineProperty(HTMLMediaElement.prototype, "muted", {
-      set: jest.fn(),
+      set: vi.fn(),
     })
   })
 
   afterEach(() => {
-    jest.clearAllMocks()
+    vi.clearAllMocks()
   })
 
-  it("renders a video player in the document and autoplay", async () => {
+  it("renders a video player in the document and autoplay", () => {
     render(
       <VideoPlayer
         autoplay
         fallback="illustrations/heart/spot/moods-cautionary.svg"
         source="illustrations/heart/spot/moods-cautionary.webm"
+        data-testid="kz-video-player"
       />
     )
     const videoPlayer = screen.getByTestId("kz-video-player")
@@ -55,92 +56,37 @@ describe("<VideoPlayer />", () => {
     expect(mockPlay).toHaveBeenCalled()
   })
 
-  describe("use-reduced-motion", () => {
-    it("respects the use-reduced-motion preferences of the user", () => {
-      window.matchMedia = jest
-        .fn()
-        .mockImplementation(() => mockPrefersReducedMotion)
-      render(
-        <VideoPlayer
-          autoplay
-          fallback="illustrations/heart/spot/moods-cautionary.svg"
-          source="illustrations/heart/spot/moods-cautionary.webm"
-        />
-      )
-      const videoPlayer = screen.getByTestId("kz-video-player")
-      expect(videoPlayer).not.toHaveAttribute("autoplay")
-      expect(mockPause).toHaveBeenCalled()
-    })
-
-    it("defaults to autoplay when user does not set use-reduced-motion preferences", () => {
-      window.matchMedia = jest
-        .fn()
-        .mockImplementation(() => mockDoesNotPreferReducedMotion)
-      render(
-        <VideoPlayer
-          autoplay
-          fallback="illustrations/heart/spot/moods-cautionary.svg"
-          source="illustrations/heart/spot/moods-cautionary.webm"
-        />
-      )
-      const videoPlayer = screen.getByTestId("kz-video-player")
-      expect(videoPlayer).toHaveAttribute("autoplay")
-      expect(mockPlay).toHaveBeenCalled()
-    })
-  })
-
-  describe("when the aspect ratio is set as a prop", () => {
-    it("has aspect ratio class", () => {
-      window.matchMedia = jest
-        .fn()
-        .mockImplementation(() => mockDoesNotPreferReducedMotion)
-      const { container } = render(
-        <VideoPlayer
-          aspectRatio="landscape"
-          autoplay
-          fallback="illustrations/heart/spot/moods-cautionary.svg"
-          source="illustrations/heart/spot/moods-cautionary.webm"
-        />
-      )
-      expect(container.querySelector(".aspectRatioWrapper")).toBeTruthy()
-      expect(container.querySelector(".landscape")).toBeTruthy()
-    })
-  })
-
-  describe("when the aspect ratio is not set as a prop", () => {
-    it("does not have aspect ratio class", () => {
-      window.matchMedia = jest
-        .fn()
-        .mockImplementation(() => mockDoesNotPreferReducedMotion)
-      const { container } = render(
-        <VideoPlayer
-          autoplay
-          fallback="illustrations/heart/spot/moods-cautionary.svg"
-          source="illustrations/heart/spot/moods-cautionary.webm"
-        />
-      )
-      expect(container.querySelector(".aspectRatioWrapper")).toBeFalsy()
-      expect(container.querySelector(".landscape")).toBeFalsy()
-    })
+  it("respects the use-reduced-motion preferences of the user", () => {
+    window.matchMedia = vi
+      .fn()
+      .mockImplementation(() => mockPrefersReducedMotion)
+    render(
+      <VideoPlayer
+        autoplay
+        fallback="illustrations/heart/spot/moods-cautionary.svg"
+        source="illustrations/heart/spot/moods-cautionary.webm"
+        data-testid="kz-video-player"
+      />
+    )
+    const videoPlayer = screen.getByTestId("kz-video-player")
+    expect(videoPlayer).not.toHaveAttribute("autoplay")
+    expect(mockPause).toHaveBeenCalled()
   })
 
-  describe("Pausing/Playing animations", () => {
-    it("restarts the animation when pause button is clicked", () => {
-      const { container, getByRole } = render(
-        <VideoPlayer
-          fallback="illustrations/heart/spot/moods-cautionary.svg"
-          source="illustrations/heart/spot/moods-cautionary.webm"
-        />
-      )
-
-      const videoElement = container.querySelector("video")!
-
-      expect(videoElement.paused).toEqual(true)
-
-      const button = getByRole("button")
-      userEvent.click(button)
-
-      expect(mockPlay).toHaveBeenCalled()
-    })
+  it("defaults to autoplay when user does not set use-reduced-motion preferences", () => {
+    window.matchMedia = vi
+      .fn()
+      .mockImplementation(() => mockDoesNotPreferReducedMotion)
+    render(
+      <VideoPlayer
+        autoplay
+        fallback="illustrations/heart/spot/moods-cautionary.svg"
+        source="illustrations/heart/spot/moods-cautionary.webm"
+        data-testid="kz-video-player"
+      />
+    )
+    const videoPlayer = screen.getByTestId("kz-video-player")
+    expect(videoPlayer).toHaveAttribute("autoplay")
+    expect(mockPlay).toHaveBeenCalled()
   })
 })

package/src/Illustration/subcomponents/VideoPlayer/VideoPlayer.stickersheet.stories.tsx

@@ -0,0 +1,68 @@
+import React from "react"
+import { Meta } from "@storybook/react"
+import {
+  StickerSheet,
+  StickerSheetStory,
+} from "~storybook/components/StickerSheet"
+import { VideoPlayer } from "./index"
+
+export default {
+  title: "Components/Illustrations/VideoPlayer",
+  parameters: {
+    controls: { disable: true },
+    chromatic: { disable: false },
+  },
+} satisfies Meta
+
+const StickerSheetTemplate: StickerSheetStory = {
+  render: ({ isReversed }) => (
+    <StickerSheet isReversed={isReversed} title="Aspect Ratio">
+      <StickerSheet.Body>
+        <StickerSheet.Row rowTitle="default">
+          <div className="border border-dashed border-grey-500">
+            <VideoPlayer
+              autoplay={false}
+              fallback="illustrations/heart/scene/brand-moments-positive-outro"
+              source="illustrations/heart/scene/brand-moments-positive-outro"
+            />
+          </div>
+        </StickerSheet.Row>
+        <StickerSheet.Row rowTitle="landscape">
+          <div className="border border-dashed border-grey-500">
+            <VideoPlayer
+              autoplay={false}
+              aspectRatio="landscape"
+              fallback="illustrations/heart/scene/brand-moments-positive-outro"
+              source="illustrations/heart/scene/brand-moments-positive-outro"
+            />
+          </div>
+        </StickerSheet.Row>
+        <StickerSheet.Row rowTitle="portrait">
+          <div className="border border-dashed border-grey-500">
+            <VideoPlayer
+              autoplay={false}
+              aspectRatio="portrait"
+              fallback="illustrations/heart/scene/brand-moments-positive-outro"
+              source="illustrations/heart/scene/brand-moments-positive-outro"
+            />
+          </div>
+        </StickerSheet.Row>
+        <StickerSheet.Row rowTitle="square">
+          <div className="border border-dashed border-grey-500">
+            <VideoPlayer
+              autoplay={false}
+              aspectRatio="square"
+              fallback="illustrations/heart/scene/brand-moments-positive-outro"
+              source="illustrations/heart/scene/brand-moments-positive-outro"
+            />
+          </div>
+        </StickerSheet.Row>
+      </StickerSheet.Body>
+    </StickerSheet>
+  ),
+}
+
+export const StickerSheetDefault: StickerSheetStory = {
+  ...StickerSheetTemplate,
+  name: "Sticker Sheet (Default)",
+}

package/src/Illustration/subcomponents/VideoPlayer/VideoPlayer.stories.tsx

@@ -0,0 +1,37 @@
+import React from "react"
+import { Meta, StoryObj } from "@storybook/react"
+import { userEvent, within, expect, waitFor } from "@storybook/test"
+import { VideoPlayer } from "./index"
+
+const meta = {
+  title: "Components/Illustrations/VideoPlayer",
+  component: VideoPlayer,
+  args: {
+    autoplay: false,
+    fallback: "illustrations/heart/scene/brand-moments-positive-outro",
+    source: "illustrations/heart/scene/brand-moments-positive-outro",
+  },
+} satisfies Meta<typeof VideoPlayer>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const PausePlay: Story = {
+  render: args => <VideoPlayer {...args} />,
+  name: "VideoPlayer: Pause/Play",
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const element = canvas.getByRole("button")
+
+    waitFor(() => {
+      userEvent.click(element)
+      expect(element).toHaveAttribute("aria-label", "Pause animation")
+    })
+
+    waitFor(() => {
+      userEvent.click(element)
+      expect(element).toHaveAttribute("aria-label", "Play animation")
+    })
+  },
+}

package/src/Input/InputRange/InputRange.spec.tsx

@@ -1,10 +1,10 @@
 import React from "react"
 import { render, screen, fireEvent, waitFor } from "@testing-library/react"
+import { vi } from "vitest"
 import { InputRange } from "./index"
-
 describe("<InputRange />", () => {
   it("fires onChange after interaction", async () => {
-    const onChange = jest.fn()
+    const onChange = vi.fn()
     render(
       <InputRange
         id="unique-3"

package/src/Input/InputSearch/InputSearch.spec.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import { render, waitFor } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
-import { renderWithIntl } from "~tests"
+import { vi } from "vitest"
 import { InputSearchProps } from "./InputSearch"
 import { InputSearch } from "."
 
@@ -10,7 +10,7 @@ const user = userEvent.setup()
 const defaultInputProps = {
   id: "someInputId",
   value: "somevalue",
-  onChange: jest.fn(),
+  onChange: vi.fn(),
 }
 
 const renderInput = (
@@ -18,9 +18,7 @@ const renderInput = (
 ): ReturnType<typeof render> => {
   const mergedInputProps = { ...defaultInputProps, ...props }
 
-  return renderWithIntl(
-    <InputSearch {...mergedInputProps} data-testid="someInputId" />
-  )
+  return render(<InputSearch {...mergedInputProps} data-testid="someInputId" />)
 }
 
 describe("<InputSearch />", () => {

package/src/KaizenProvider/KaizenProvider.spec.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import { render } from "@testing-library/react"
+import { vi } from "vitest"
 import { KaizenProvider, KaizenProviderProps } from "./KaizenProvider"
-
 const KaizenProviderWrapper = ({
   children,
   ...restProps
@@ -9,7 +9,7 @@ const KaizenProviderWrapper = ({
   <KaizenProvider {...restProps}>{children}</KaizenProvider>
 )
 
-jest.mock("./subcomponents/OptionalIntlProvider", () => ({
+vi.mock("./subcomponents/OptionalIntlProvider", () => ({
   OptionalIntlProvider: ({ children }: { children: React.ReactElement }) => (
     <div>{children}</div>
   ),

package/src/KaizenProvider/subcomponents/OptionalIntlProvider/OptionalIntlProvider.spec.tsx

@@ -1,9 +1,10 @@
 import React from "react"
 import { render, screen } from "@testing-library/react"
 import { IntlProvider } from "react-intl"
+import { vi } from "vitest"
 import { OptionalIntlProvider } from "."
 
-jest.mock("@cultureamp/i18n-react-intl", () => ({
+vi.mock("@cultureamp/i18n-react-intl", () => ({
   StaticIntlProvider: ({ children }: { children: React.ReactElement }) => (
     <div data-testid="mockedIntlProvider">{children}</div>
   ),
@@ -35,5 +36,3 @@ describe("<OptionalIntlProvider>", () => {
     expect(childrenResult).toBeInTheDocument()
   })
 })
-
-/* eslint-enable jest/expect-expect */

package/src/Modal/ConfirmationModal/ConfirmationModal.spec.tsx

@@ -1,9 +1,9 @@
 import React from "react"
 import { render, waitFor } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
+import { vi } from "vitest"
 import { mockMatchMedia } from "~components/utils/useMediaQueries.spec"
 import { ConfirmationModal, ConfirmationModalProps } from "./ConfirmationModal"
-
 const user = userEvent.setup()
 
 const ConfirmationModalWrapper = ({
@@ -28,8 +28,8 @@ describe("<ConfirmationModal />", () => {
   })
 
   it("supports a dismiss action when dismiss button is pressed", async () => {
-    const handleConfirm = jest.fn()
-    const handleDismiss = jest.fn()
+    const handleConfirm = vi.fn()
+    const handleDismiss = vi.fn()
     const { getByLabelText } = render(
       <ConfirmationModalWrapper
         onConfirm={handleConfirm}
@@ -46,8 +46,8 @@ describe("<ConfirmationModal />", () => {
   })
 
   it("supports a dismiss action when cancel button is pressed", async () => {
-    const handleConfirm = jest.fn()
-    const handleDismiss = jest.fn()
+    const handleConfirm = vi.fn()
+    const handleDismiss = vi.fn()
     const { getByText } = render(
       <ConfirmationModalWrapper
         onDismiss={handleDismiss}
@@ -64,8 +64,8 @@ describe("<ConfirmationModal />", () => {
   })
 
   it("supports a confirm action when confirm button is pressed", async () => {
-    const handleConfirm = jest.fn()
-    const handleDismiss = jest.fn()
+    const handleConfirm = vi.fn()
+    const handleDismiss = vi.fn()
     const { getByText } = render(
       <ConfirmationModalWrapper
         onDismiss={handleDismiss}

package/src/Modal/ContextModal/ContextModal.spec.tsx

@@ -1,9 +1,9 @@
 import React from "react"
 import { render, waitFor } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
+import { vi } from "vitest"
 import { mockMatchMedia } from "~components/utils/useMediaQueries.spec"
 import { ContextModal, ContextModalProps } from "./ContextModal"
-
 const user = userEvent.setup()
 
 const ContextModalWrapper = ({
@@ -29,8 +29,8 @@ describe("<ContextModal />", () => {
   })
 
   it("supports a dismiss action when dismiss button is pressed", async () => {
-    const handleConfirm = jest.fn()
-    const handleDismiss = jest.fn()
+    const handleConfirm = vi.fn()
+    const handleDismiss = vi.fn()
     const { getByLabelText } = render(
       <ContextModalWrapper onConfirm={handleConfirm} onDismiss={handleDismiss}>
         Example modal body
@@ -44,8 +44,8 @@ describe("<ContextModal />", () => {
   })
 
   it("supports a confirm action when confirm button is pressed", async () => {
-    const handleConfirm = jest.fn()
-    const handleDismiss = jest.fn()
+    const handleConfirm = vi.fn()
+    const handleDismiss = vi.fn()
     const { getByText } = render(
       <ContextModalWrapper onDismiss={handleDismiss} onConfirm={handleConfirm}>
         Example modal body

package/src/Modal/GenericModal/GenericModal.spec.tsx

@@ -1,11 +1,11 @@
 import React from "react"
 import { render, screen, waitFor } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
+import { vi } from "vitest"
 import { GenericModal, GenericModalProps } from "./GenericModal"
 import { ModalAccessibleLabel } from "./subcomponents/ModalAccessibleLabel"
 import { ModalBody } from "./subcomponents/ModalBody"
 import { ModalHeader } from "./subcomponents/ModalHeader"
-
 const user = userEvent.setup()
 
 const GenericModalWrapper = ({
@@ -50,7 +50,7 @@ describe("<GenericModal />", () => {
   })
 
   it("closes the modal when escape key is pressed", async () => {
-    const handleDismiss = jest.fn()
+    const handleDismiss = vi.fn()
 
     render(<GenericModalWrapper onEscapeKeyup={handleDismiss} />)
 
@@ -70,7 +70,7 @@ describe("<GenericModal />", () => {
   })
 
   it("closes the modal when a click is outside of the modal content", async () => {
-    const handleDismiss = jest.fn()
+    const handleDismiss = vi.fn()
     render(<GenericModalWrapper onOutsideModalClick={handleDismiss} />)
 
     await user.click(screen.getByTestId("GenericModalTestId-scrollLayer"))
@@ -80,7 +80,7 @@ describe("<GenericModal />", () => {
   })
 
   it("calls onAfterLeave after it closes", async () => {
-    const mockOnAfterLeave = jest.fn()
+    const mockOnAfterLeave = vi.fn()
     render(<GenericModalWrapper onAfterLeave={mockOnAfterLeave} />)
 
     await user.click(screen.getByTestId("GenericModalTestId-scrollLayer"))

package/src/Modal/InputEditModal/InputEditModal.spec.tsx

@@ -1,9 +1,9 @@
 import React from "react"
 import { render, waitFor } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
+import { vi } from "vitest"
 import { mockMatchMedia } from "~components/utils/useMediaQueries.spec"
 import { InputEditModal, InputEditModalProps } from "./InputEditModal"
-
 const user = userEvent.setup()
 
 const InputEditModalWrapper = ({
@@ -28,8 +28,8 @@ describe("<InputEditModal />", () => {
   })
 
   it("supports a dismiss action when dismiss button is pressed", async () => {
-    const handleSubmit = jest.fn()
-    const handleDismiss = jest.fn()
+    const handleSubmit = vi.fn()
+    const handleDismiss = vi.fn()
     const { getByLabelText } = render(
       <InputEditModalWrapper onSubmit={handleSubmit} onDismiss={handleDismiss}>
         Example modal body
@@ -43,8 +43,8 @@ describe("<InputEditModal />", () => {
   })
 
   it("supports a dismiss action when cancel button is pressed", async () => {
-    const handleSubmit = jest.fn()
-    const handleDismiss = jest.fn()
+    const handleSubmit = vi.fn()
+    const handleDismiss = vi.fn()
     const { getByText } = render(
       <InputEditModalWrapper onDismiss={handleDismiss} onSubmit={handleSubmit}>
         Example modal body
@@ -58,8 +58,8 @@ describe("<InputEditModal />", () => {
   })
 
   it("supports a Submit action when Submit button is pressed", async () => {
-    const handleSubmit = jest.fn()
-    const handleDismiss = jest.fn()
+    const handleSubmit = vi.fn()
+    const handleDismiss = vi.fn()
     const { getByText } = render(
       <InputEditModalWrapper onDismiss={handleDismiss} onSubmit={handleSubmit}>
         Example modal body

package/src/MultiSelect/subcomponents/MultiSelectOptionField/MultiSelectOptionField.spec.tsx

@@ -1,15 +1,15 @@
 import React, { useState } from "react"
 import { render, waitFor } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
+import { vi } from "vitest"
 import { CheckboxProps } from "../Checkbox"
 import {
   MultiSelectOptionField,
   MultiSelectOptionFieldProps,
 } from "./MultiSelectOptionField"
-
 const user = userEvent.setup()
 
-const onChange = jest.fn()
+const onChange = vi.fn()
 
 const MultiSelectOptionFieldWrapper = (
   customProps?: Partial<MultiSelectOptionFieldProps>
@@ -42,7 +42,7 @@ const MultiSelectOptionFieldWrapper = (
 
 describe("<MultiSelectOptionField />", () => {
   afterEach(() => {
-    jest.clearAllMocks()
+    vi.clearAllMocks()
   })
 
   it("has an accessible name", () => {

package/src/MultiSelect/subcomponents/MultiSelectOptions/MultiSelectOptions.spec.tsx

@@ -1,14 +1,14 @@
 import React, { useState } from "react"
 import { render, waitFor } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
+import { vi } from "vitest"
 import {
   MultiSelectOptions,
   MultiSelectOptionsProps,
 } from "./MultiSelectOptions"
-
 const user = userEvent.setup()
 
-const onChange = jest.fn()
+const onChange = vi.fn()
 const testOptions = [
   {
     label: "Pancakes",
@@ -46,7 +46,7 @@ const MultiSelectOptionsWrapper = (
 
 describe("<MultiSelectOptions />", () => {
   afterEach(() => {
-    jest.clearAllMocks()
+    vi.clearAllMocks()
   })
 
   it("contains the number of options available in the accessible description", () => {

package/src/MultiSelect/subcomponents/MultiSelectToggle/MultiSelectToggle.spec.tsx

@@ -1,11 +1,11 @@
 import React from "react"
 import { render, waitFor } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
+import { vi } from "vitest"
 import { MultiSelectToggle, MultiSelectToggleProps } from "./MultiSelectToggle"
-
 const user = userEvent.setup()
 
-const onClick = jest.fn()
+const onClick = vi.fn()
 
 const MultiSelectToggleWrapper = (
   customProps?: Partial<MultiSelectToggleProps>

package/src/Notification/subcomponents/GenericNotification/GenericNotification.stories.tsx

@@ -0,0 +1,60 @@
+import React, { useState } from "react"
+import { Meta, StoryObj } from "@storybook/react"
+import { userEvent, within, expect, waitFor } from "@storybook/test"
+import { GenericNotification } from "./index"
+
+const meta = {
+  title: "Components/Notifications/GenericNotification",
+  component: GenericNotification,
+  args: {
+    variant: "success",
+    style: "inline",
+    title: "Success",
+    children: "This is my positive notification",
+  },
+} satisfies Meta<typeof GenericNotification>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const GenericNotificationTest: Story = {
+  render: () => {
+    const [isHidden, setIsHidden] = useState<boolean>(false)
+
+    return (
+      <div>
+        <span data-testid="hidden-state">{isHidden ? "Hidden" : "Shown"}</span>
+        <GenericNotification
+          variant="success"
+          style="inline"
+          title="Success"
+          data-testid="generic-notification"
+          onHide={() => setIsHidden(true)}
+        >
+          This is my positive notification
+        </GenericNotification>
+      </div>
+    )
+  },
+  name: "Test: Closes when close button is clicked and onHide is called",
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const element = canvas.getByTestId("generic-notification")
+    const hiddenState = canvas.getByTestId("hidden-state")
+
+    await waitFor(() => {
+      expect(element).toBeInTheDocument()
+      expect(hiddenState).toHaveTextContent("Shown")
+    })
+
+    await userEvent.click(canvas.getByTestId("close-button"))
+
+    await waitFor(() => {
+      setTimeout(() => {
+        expect(hiddenState).toHaveTextContent("Hidden")
+        expect(element).not.toBeInTheDocument()
+      }, 1000)
+    })
+  },
+}