KZN-2614-convert-remaining-jest-tests (#4985)

* migrate text jest tests to vitest * migrate heading jest tests to vitest * migrate textfield jest tests to vitest * migrate VideoPlayer jest tests to vitest and interactive stories * remove test for pauseplay, replaced with stories * replace GenericNotification jest tests to interaction stories * convert MenuTriggerProvider from jest to vitest * convert DateInputWithIconButton from jest to vitest * moved TitleBlockZen survey status tests to storybook * lint fix * remove flaky snapshots * fix flaky notification play test * intro timeout to wait for animation * fix lint * intro timeout to wait for animation * intro borders around the video player to showcase aspectratio * exclude the pauseplay story from chromatic * exclude thee genericnotification interaction story from chromatic * Update packages/components/src/Illustration/subcomponents/VideoPlayer/VideoPlayer.stories.tsx * fix videoplayer stickersheet * update generic notification to a story * Update packages/components/src/Illustration/subcomponents/VideoPlayer/VideoPlayer.spec.tsx Co-authored-by: Cassandra <[email protected]> --------- Co-authored-by: Geoffrey Chong <[email protected]> Co-authored-by: Cassandra <[email protected]>
cultureamp · Aug 30, 2024 · 5ae3be7 · 5ae3be7
1 parent 062b57c
commit 5ae3be7
Show file tree

Hide file tree

Showing 20 changed files with 422 additions and 678 deletions.
diff --git a/.changeset/dry-turkeys-lay.md b/.changeset/dry-turkeys-lay.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/.github/workflows/test-unit.yml b/.github/workflows/test-unit.yml
@@ -18,15 +18,6 @@ on:
       - "**/CHANGELOG.md" # only changesets releases touch changelogs
 
 jobs:
-  jest-legacy:
-    if: github.head_ref != 'changeset-release/main'
-    runs-on: ubuntu-latest
-    timeout-minutes: 10
-    steps:
-      - uses: actions/checkout@v4
-      - uses: ./.github/actions/setup
-      - run: pnpm turbo @kaizen/components#test:jest:ci
-
   unit-tests-1:
     if: github.head_ref != 'changeset-release/main'
     name: "test-unit"

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -40,10 +40,7 @@
     "build:global-styles": "postcss ./styles/global.css --output dist/global.css",
     "build:combine-styles": "concat-cli -f ./dist/global.css ./dist/styles.css -o ./dist/styles.css && rm ./dist/global.css",
     "build:styles": "pnpm build:global-styles && pnpm build:combine-styles",
-    "test": "pnpm test:jest && pnpm test:vitest",
-    "test:jest": "FORCE_COLOR=1 jest",
-    "test:jest:ci": "pnpm test:jest --ci",
-    "test:vitest": "vitest --config ../../vite.config.ts ",
+    "test": "vitest --config ../../vite.config.ts",
     "update-icons": "./src/Icon/bin/update-icons.sh",
     "i18n:extract": "pnpm i18n-extract",
     "clean": "rimraf 'dist' 'node_modules' '.turbo'",

diff --git a/...ton/DateInputWithIconButton.jest.spec.tsx → ...onButton/DateInputWithIconButton.spec.tsx b/...ton/DateInputWithIconButton.jest.spec.tsx → ...onButton/DateInputWithIconButton.spec.tsx
@@ -1,6 +1,7 @@
 import React, { useRef } from "react"
 import { render, screen } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
+import { vi } from "vitest"
 import {
   DateInputWithIconButton,
   DateInputWithIconButtonProps,
@@ -11,7 +12,7 @@ const user = userEvent.setup()
 const defaultProps: DateInputWithIconButtonProps = {
   id: "test__date-input-with-icon-button",
   labelText: "Due date",
-  onButtonClick: jest.fn<void, []>(),
+  onButtonClick: vi.fn(),
 }
 
 const DateInputWithIconButtonWrapper = (
@@ -52,10 +53,7 @@ describe("<DateInputWithIconButton />", () => {
 
   describe("Refs", () => {
     it("correctly passes through input and button refs", async () => {
-      const onButtonClick = jest.fn<
-        void,
-        [string | null | undefined, string | null | undefined]
-      >()
+      const onButtonClick = vi.fn()
 
       const Wrapper = (): JSX.Element => {
         const inputRef = useRef<HTMLInputElement>(null)
@@ -74,7 +72,7 @@ describe("<DateInputWithIconButton />", () => {
               ref={ref}
               id="test__date-input-field--ref"
               labelText="label"
-              onButtonClick={jest.fn<void, []>()}
+              onButtonClick={vi.fn()}
             />
             <button type="button" onClick={handleClick}>
               Click me

diff --git a/...rovider/MenuTriggerProvider.jest.spec.tsx → ...ggerProvider/MenuTriggerProvider.spec.tsx b/...rovider/MenuTriggerProvider.jest.spec.tsx → ...ggerProvider/MenuTriggerProvider.spec.tsx
@@ -1,6 +1,7 @@
 import React from "react"
 import { render, screen, waitFor } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
+import { vi } from "vitest"
 import { FilterTriggerButton } from "~components/Filter/FilterMultiSelect/subcomponents/Trigger"
 import { MenuPopup } from "../../subcomponents/MenuPopup"
 import {
@@ -59,7 +60,7 @@ describe("<MenuTriggerProvider /> - Visual content", () => {
     })
 
     it("fires the onOpenChange callback when the trigger is interacted", async () => {
-      const onOpenChange = jest.fn<void, [boolean]>()
+      const onOpenChange = vi.fn()
       render(<MenuTriggerProviderWrapper isOpen onOpenChange={onOpenChange} />)
 
       const trigger = screen.getByRole("button", {

diff --git a/...ponents/src/Heading/Heading.jest.spec.tsx → ...s/components/src/Heading/Heading.spec.tsx b/...ponents/src/Heading/Heading.jest.spec.tsx → ...s/components/src/Heading/Heading.spec.tsx
@@ -3,35 +3,6 @@ import { render } from "@testing-library/react"
 import { AllowedHeadingTags, Heading, HeadingVariants } from "."
 
 describe("<Heading />", () => {
-  it("renders the correct classes", () => {
-    const headingMock = render(<Heading variant="display-0">Example</Heading>)
-    const headingClasslist = headingMock.getByText("Example").classList
-    expect(headingClasslist).toContain("heading")
-    expect(headingClasslist).toContain("display-0")
-    expect(headingClasslist).toContain("large")
-  })
-
-  it("adds a .small class instead of .large if a Heading 3 is used", () => {
-    const headingMock = render(
-      <Heading variant="heading-3" tag="div">
-        Example
-      </Heading>
-    )
-    expect(headingMock.getByText("Example").classList).toContain("small")
-    expect(headingMock.getByText("Example").classList).not.toContain("large")
-  })
-
-  it("adds a .dark-reduced-opacity class if the color prop is set to that", () => {
-    const headingMock = render(
-      <Heading variant="heading-3" color="dark-reduced-opacity">
-        Example
-      </Heading>
-    )
-    expect(headingMock.getByText("Example").classList).toContain(
-      "dark-reduced-opacity"
-    )
-  })
-
   it("changes rendered HTML element when passed tag", () => {
     const headingMock = render(
       <Heading variant="display-0" tag="div">
@@ -66,7 +37,6 @@ describe("<Heading />", () => {
       it(`renders the correct element for <Heading variant={${variant}} />`, () => {
         const headingMock = render(<Heading variant={variant}>Example</Heading>)
         expect(headingMock.getByText("Example").tagName.toLowerCase()).toBe(el)
-        expect(headingMock.baseElement).toMatchSnapshot()
       })
     })
   })

diff --git a/packages/components/src/Heading/__snapshots__/Heading.jest.spec.tsx.snap b/packages/components/src/Heading/__snapshots__/Heading.jest.spec.tsx.snap
diff --git a/packages/components/src/Illustration/subcomponents/VideoPlayer/VideoPlayer.jest.spec.tsx b/packages/components/src/Illustration/subcomponents/VideoPlayer/VideoPlayer.jest.spec.tsx