@kaizen/components 1.61.1 → 1.61.2

package/src/TitleBlockZen/TitleBlockZen.spec.tsx

@@ -1,12 +1,28 @@
 import React from "react"
 import { render, waitFor, screen, within } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
-import { mockMatchMedia } from "~components/utils/useMediaQueries.spec"
+import { vi } from "vitest"
 import { CustomBreadcrumbProps, SectionTitleRenderProps } from "./types"
 import { TitleBlockZen } from "./index"
 
 const user = userEvent.setup()
 
+const mockMatchMedia = (matches: boolean = false): void => {
+  Object.defineProperty(window, "matchMedia", {
+    writable: true,
+    value: vi.fn().mockImplementation(query => ({
+      matches,
+      media: query,
+      onchange: null,
+      addListener: vi.fn(), // Deprecated
+      removeListener: vi.fn(), // Deprecated
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+      dispatchEvent: vi.fn(),
+    })),
+  })
+}
+
 describe("<TitleBlockZen />", () => {
   beforeEach(() => {
     mockMatchMedia()
@@ -41,7 +57,7 @@ describe("<TitleBlockZen />", () => {
   })
 
   describe("when the primary action is a button with only an onClick", () => {
-    const testOnClickFn = jest.fn()
+    const testOnClickFn = vi.fn()
     const primaryActionAsButton = {
       label: "primaryActionLabel",
       onClick: testOnClickFn,
@@ -84,7 +100,7 @@ describe("<TitleBlockZen />", () => {
   })
 
   describe("when the primary action is disabled", () => {
-    const testOnClickFn = jest.fn()
+    const testOnClickFn = vi.fn()
     const primaryActionAsButton = {
       label: "primaryActionLabel",
       onClick: testOnClickFn,
@@ -166,7 +182,7 @@ describe("<TitleBlockZen />", () => {
   })
 
   describe("when the primary action is a button with both an href and an onClick", () => {
-    const testOnClickFn = jest.fn()
+    const testOnClickFn = vi.fn()
     const primaryActionAsLinkAndOnClick = {
       label: "primaryActionLabel",
       href: "#primaryActionHref",
@@ -307,7 +323,7 @@ describe("<TitleBlockZen />", () => {
   })
 
   describe("when the default action is a button with only an onClick", () => {
-    const testOnClickFn = jest.fn()
+    const testOnClickFn = vi.fn()
     const defaultActionAsButton = {
       label: "defaultActionLabel",
       onClick: testOnClickFn,
@@ -363,7 +379,7 @@ describe("<TitleBlockZen />", () => {
   })
 
   describe("when the default action is a button with both an href and an onClick", () => {
-    const testOnClickFn = jest.fn()
+    const testOnClickFn = vi.fn()
     const defaultActionAsLinkAndOnClick = {
       label: "defaultActionLabel",
       href: "#defaultActionHref",
@@ -423,7 +439,7 @@ describe("<TitleBlockZen />", () => {
   })
 
   describe("when the default action is disabled", () => {
-    const testOnClickFn = jest.fn()
+    const testOnClickFn = vi.fn()
     const defaultActionAsButton = {
       label: "defaultActionLabel",
       onClick: testOnClickFn,
@@ -504,7 +520,7 @@ describe("<TitleBlockZen />", () => {
   })
 
   describe("when a secondary action is passed with both an href and an onClick", () => {
-    const testOnClickFn = jest.fn()
+    const testOnClickFn = vi.fn()
     const secondaryActionWithLinkAndOnClick = {
       label: "secondaryActionLabel",
       href: "#secondaryActionHref",
@@ -516,8 +532,8 @@ describe("<TitleBlockZen />", () => {
     })
 
     it("renders the secondary action with both the href and onClick", async () => {
-      const mockWarnFn = jest.fn()
-      const spy = jest
+      const mockWarnFn = vi.fn()
+      const spy = vi
         .spyOn(global.console, "warn")
         .mockImplementation(mockWarnFn)
       const { getByTestId } = render(
@@ -543,8 +559,8 @@ describe("<TitleBlockZen />", () => {
     })
 
     it("renders the action as a single mobile actions drawer item with an onClick", async () => {
-      const mockWarnFn = jest.fn()
-      const spy = jest
+      const mockWarnFn = vi.fn()
+      const spy = vi
         .spyOn(global.console, "warn")
         .mockImplementation(mockWarnFn)
       const { getAllByTestId } = render(
@@ -681,7 +697,7 @@ describe("<TitleBlockZen />", () => {
   })
 
   describe("when a disabled secondary action is passed with only an onClick", () => {
-    const testOnClickFn = jest.fn()
+    const testOnClickFn = vi.fn()
     const secondaryActionWithOnClick = {
       label: "secondaryActionLabel",
       onClick: testOnClickFn,
@@ -708,7 +724,7 @@ describe("<TitleBlockZen />", () => {
   })
 
   describe("when a disabled secondary overflow menu item is passed with only an onClick for the action", () => {
-    const testOnClickFn = jest.fn()
+    const testOnClickFn = vi.fn()
     const secondaryOverflowMenuItemWithOnClick = {
       label: "secondaryActionOverflowMenuItemLabel",
       action: testOnClickFn,
@@ -737,54 +753,6 @@ describe("<TitleBlockZen />", () => {
     })
   })
 
-  describe("survey status", () => {
-    it("doesn't render tag when field is omitted", async () => {
-      render(<TitleBlockZen title="Test Title">Example</TitleBlockZen>)
-
-      await waitFor(() => {
-        expect(
-          screen.queryByTestId("survey-status-tag")
-        ).not.toBeInTheDocument()
-      })
-    })
-
-    it.each([
-      ["draft", "statusDraft"],
-      ["live", "statusLive"],
-      ["closed", "statusClosed"],
-      ["scheduled", "statusClosed"],
-      ["sentimentPositive", "sentimentPositive"],
-      ["default", "default"],
-    ])(
-      "renders tag with correct text and variant when %s status",
-      async (status, expectedClassName) => {
-        render(
-          <TitleBlockZen
-            title="Test Title"
-            surveyStatus={{
-              text: `${status} text`,
-              status: `${status}` as
-                | "draft"
-                | "live"
-                | "scheduled"
-                | "closed"
-                | "sentimentPositive"
-                | "default",
-            }}
-          >
-            Example
-          </TitleBlockZen>
-        )
-
-        const tagElement = (await screen.findByTestId("survey-status-tag"))
-          .firstChild
-
-        expect(tagElement).toHaveTextContent(`${status} text`)
-        expect(tagElement).toHaveClass(expectedClassName)
-      }
-    )
-  })
-
   describe("automation ID behaviour", () => {
     describe("when default automation IDs are not provided alongside required conditional renders", () => {
       it("renders the default automation IDs", () => {
@@ -807,7 +775,7 @@ describe("<TitleBlockZen />", () => {
             breadcrumb={{
               text: "Test Breadcrumb",
               path: "/",
-              handleClick: jest.fn(),
+              handleClick: vi.fn(),
             }}
             sectionTitle="Test Section Title"
             sectionTitleDescription="Test Section Title Description"
@@ -845,7 +813,7 @@ describe("<TitleBlockZen />", () => {
             breadcrumb={{
               text: "Test Breadcrumb",
               path: "/",
-              handleClick: jest.fn(),
+              handleClick: vi.fn(),
             }}
             sectionTitle="Test Section Title"
             sectionTitleDescription="Test Section Title Description"
@@ -909,7 +877,7 @@ describe("<TitleBlockZen />", () => {
     })
 
     it("renders a custom component when you pass a 'render' prop", async () => {
-      const mockFn = jest.fn()
+      const mockFn = vi.fn()
 
       const CustomComponent = (props: CustomBreadcrumbProps): JSX.Element => (
         // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
@@ -1018,7 +986,7 @@ describe("<TitleBlockZen />", () => {
       })
 
       it("will render custom button with functional onClick", async () => {
-        const testClickFunc = jest.fn()
+        const testClickFunc = vi.fn()
         render(
           <TitleBlockZen
             title="Test Title"
@@ -1045,7 +1013,7 @@ describe("<TitleBlockZen />", () => {
       })
 
       it("will render custom button with children and not label", () => {
-        const testClickFunc = jest.fn()
+        const testClickFunc = vi.fn()
         render(
           <TitleBlockZen
             title="Test Title"
@@ -1177,7 +1145,7 @@ describe("<TitleBlockZen />", () => {
       })
 
       it("will render the component in the top list of the Drawer content if it is a clickable button", () => {
-        const testClickFunc = jest.fn()
+        const testClickFunc = vi.fn()
         render(
           <TitleBlockZen
             title="Test Title"

package/src/TitleBlockZen/_docs/TitleBlockZen.stories.tsx

@@ -75,13 +75,6 @@ const meta = {
       <NavigationTab key="6" text="Label" href="#" />,
     ],
   },
-  decorators: [
-    Story => (
-      <div style={{ margin: "-1rem" }}>
-        <Story />
-      </div>
-    ),
-  ],
 } satisfies Meta<typeof TitleBlockZen>
 
 export default meta
@@ -152,7 +145,7 @@ export const HasLongTitle: Story = {
   args: { title: "A long title with over thirty characters" },
 }
 
-export const StickerSheetDefault: Story = {
+export const StickerSheetBreadcrumbs: Story = {
   parameters: {
     docs: {
       canvas: {
@@ -208,4 +201,81 @@ export const StickerSheetDefault: Story = {
       </StickerSheet.Row>
     </StickerSheet>
   ),
+  name: "Sticker Sheet (Breadcrumb)",
+}
+
+export const StickerSheetDefault: Story = {
+  render: () => (
+    <StickerSheet title="Survey Status">
+      <StickerSheet.Body>
+        <StickerSheet.Row rowTitle="Draft">
+          <TitleBlockZen
+            title="Draft Title"
+            surveyStatus={{
+              text: "draft text",
+              status: "draft",
+            }}
+          >
+            Draft
+          </TitleBlockZen>
+        </StickerSheet.Row>
+        <StickerSheet.Row rowTitle="Default">
+          <TitleBlockZen
+            title="Default Title"
+            surveyStatus={{
+              text: "default text",
+              status: "default",
+            }}
+          >
+            Default
+          </TitleBlockZen>
+        </StickerSheet.Row>
+        <StickerSheet.Row rowTitle="Scheduled">
+          <TitleBlockZen
+            title="Scheduled Title"
+            surveyStatus={{
+              text: "scheduled text",
+              status: "scheduled",
+            }}
+          >
+            Due
+          </TitleBlockZen>
+        </StickerSheet.Row>
+        <StickerSheet.Row rowTitle="Live">
+          <TitleBlockZen
+            title="Live Title"
+            surveyStatus={{
+              text: "live text",
+              status: "live",
+            }}
+          >
+            Overdue
+          </TitleBlockZen>
+        </StickerSheet.Row>
+        <StickerSheet.Row rowTitle="Closed">
+          <TitleBlockZen
+            title="Closed Title"
+            surveyStatus={{
+              text: "closed text",
+              status: "closed",
+            }}
+          >
+            Completed
+          </TitleBlockZen>
+        </StickerSheet.Row>
+        <StickerSheet.Row rowTitle="Sentiment Positive">
+          <TitleBlockZen
+            title="Sentiment Positive Title"
+            surveyStatus={{
+              text: "sentimentPositive text",
+              status: "sentimentPositive",
+            }}
+          >
+            Completed
+          </TitleBlockZen>
+        </StickerSheet.Row>
+      </StickerSheet.Body>
+    </StickerSheet>
+  ),
+  name: "Sticker Sheet (Survey Status)",
 }

package/src/TitleBlockZen/subcomponents/MobileActions.spec.tsx

@@ -1,8 +1,8 @@
 import React from "react"
 import { render, screen, waitFor } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
+import { vi } from "vitest"
 import { MobileActions } from "./MobileActions"
-
 const user = userEvent.setup()
 
 const MENU_LINKS = [
@@ -147,7 +147,7 @@ describe("<MobileActions />", () => {
 
 describe("when autoHide is true", () => {
   beforeEach(() => {
-    window.alert = jest.fn()
+    window.alert = vi.fn()
     render(
       <MobileActions
         primaryAction={{

package/src/TitleBlockZen/subcomponents/NavigationTabs.spec.tsx

@@ -1,7 +1,9 @@
 import React from "react"
 import { render, screen, waitFor } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
+import { vi } from "vitest"
 import { NavigationTab, CustomNavigationTabProps } from "./NavigationTabs"
+import styles from "./NavigationTabs.module.scss"
 
 const user = userEvent.setup()
 
@@ -33,7 +35,7 @@ describe("NavigationTabs", () => {
 
   describe("with a render prop", () => {
     it("renders the component passed with the navigation tab props", async () => {
-      const handleClick = jest.fn()
+      const handleClick = vi.fn()
       const text = "I am also navigation tabs"
       const href = "www.cultureamp.com"
       render(
@@ -50,7 +52,11 @@ describe("NavigationTabs", () => {
       const button = screen.getByRole("button", {
         name: `${href} - ${text} - true`,
       })
-      expect(button).toHaveClass("linkAnchor", "active", "lightBackground")
+      expect(button).toHaveClass(
+        styles.linkAnchor,
+        styles.active,
+        styles.lightBackground
+      )
 
       await user.click(button)
       await waitFor(() => {

package/src/ToggleSwitch/ToggleSwitch/ToggleSwitch.spec.tsx

@@ -1,13 +1,13 @@
 import React from "react"
 import { render, screen, waitFor } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
+import { vi } from "vitest"
 import { ToggleSwitch, ToggleSwitchProps } from "./ToggleSwitch"
-
 const user = userEvent.setup()
 
 const defaultToggleSwitchProps = {
   id: "someToggleSwitchId",
-  onToggle: jest.fn(),
+  onToggle: vi.fn(),
 }
 
 const renderToggleSwitch = (

package/src/__actions__/Menu/v1/Menu.spec.tsx

@@ -23,7 +23,7 @@ describe("Dropdown", () => {
   })
 
   it("shows menu & handles onClick set by the consumer when clicking on the button", async () => {
-    const onButtonClick = jest.fn<void, []>()
+    const onButtonClick = vi.fn()
 
     render(
       <Menu button={<Button label="Button" onClick={onButtonClick} />}>
@@ -42,7 +42,7 @@ describe("Dropdown", () => {
     })
   })
   it("shows menu & handles onMouseDown set by the consumer when mousing down on the button", async () => {
-    const onMouseDown = jest.fn<void, []>()
+    const onMouseDown = vi.fn()
 
     render(
       <Menu button={<Button label="Button" onMouseDown={onMouseDown} />}>

package/src/__containers__/GuidanceBlock/v1/GuidanceBlock.spec.tsx

@@ -1,25 +1,25 @@
 import React from "react"
 import { cleanup, render, waitFor } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
+import { vi } from "vitest"
 import { Informative } from "~components/Illustration"
 import { GuidanceBlock } from "./GuidanceBlock"
-
 const user = userEvent.setup()
 
 // eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
-window.matchMedia = jest.fn().mockImplementation(() => ({
+window.matchMedia = vi.fn().mockImplementation(() => ({
   matches: false,
   media: "",
   onchange: null,
-  addListener: jest.fn(),
-  removeListener: jest.fn(),
+  addListener: vi.fn(),
+  removeListener: vi.fn(),
 }))
 
 describe("GuidanceBlock", () => {
   afterEach(cleanup)
 
   it("calls the action function when action button is clicked", async () => {
-    const onAction = jest.fn()
+    const onAction = vi.fn()
     const { container } = render(
       <GuidanceBlock
         illustration={<Informative alt="" />}

package/src/__containers__/GuidanceBlock/v2/GuidanceBlock.spec.tsx

@@ -1,25 +1,25 @@
 import React from "react"
 import { cleanup, render, waitFor } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
+import { vi } from "vitest"
 import { Informative } from "~components/Illustration"
 import { GuidanceBlock } from "./GuidanceBlock"
-
 const user = userEvent.setup()
 
 // eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
-window.matchMedia = jest.fn().mockImplementation(() => ({
+window.matchMedia = vi.fn().mockImplementation(() => ({
   matches: false,
   media: "",
   onchange: null,
-  addListener: jest.fn(),
-  removeListener: jest.fn(),
+  addListener: vi.fn(),
+  removeListener: vi.fn(),
 }))
 
 describe("GuidanceBlock", () => {
   afterEach(cleanup)
 
   it("calls the action function when action button is clicked", async () => {
-    const onAction = jest.fn()
+    const onAction = vi.fn()
     const { container } = render(
       <GuidanceBlock
         illustration={<Informative alt="" />}

package/src/__future__/Select/Select.spec.tsx

@@ -1,9 +1,9 @@
 import React from "react"
 import { render, waitFor, screen, within } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
+import { vi } from "vitest"
 import { Select, SelectProps } from "./Select"
 import { singleMockItems } from "./_docs/mockData"
-
 const user = userEvent.setup()
 
 const SelectWrapper = ({
@@ -87,7 +87,7 @@ describe("<Select />", () => {
       })
 
       it("fires the onOpenChange callback when the trigger is interacted", async () => {
-        const onOpenChange = jest.fn()
+        const onOpenChange = vi.fn()
         const { getByRole } = render(
           <SelectWrapper
             selectedKey="batch-brew"
@@ -267,7 +267,7 @@ describe("<Select />", () => {
 
     describe("Selection - Mouse interaction", () => {
       it("fires onSelectionChange when clicks on a option", async () => {
-        const spy = jest.fn()
+        const spy = vi.fn()
         const { getByRole } = render(
           <SelectWrapper defaultOpen onSelectionChange={spy} />
         )
@@ -335,7 +335,7 @@ describe("<Select />", () => {
       })
 
       it("fires onSelectionChange when hits enter on a option", async () => {
-        const spy = jest.fn()
+        const spy = vi.fn()
         const { getByRole } = render(<SelectWrapper onSelectionChange={spy} />)
 
         await user.tab()

package/src/__overlays__/Tooltip/v1/Tooltip.spec.tsx

@@ -48,7 +48,7 @@ describe("<Tooltip />", () => {
     // Non-semantic elements without roles should not have aria-description on them.
     // They won't read to all screen readers as expected and may be reported in Storybook's accessibility tab (which uses Axe under the hood)
     it("doesn't add an accessible description when wrapping a non-semantic element", async () => {
-      const warn = jest.spyOn(console, "warn").mockImplementation()
+      const warn = vi.spyOn(console, "warn").mockImplementation(vi.fn())
 
       render(
         <Tooltip

package/src/__overlays__/Tooltip/v1/utils/isSemanticElement.spec.tsx

@@ -1,13 +1,13 @@
 import React from "react"
+import { vi } from "vitest"
 import { ArrowRightIcon } from "~components/Icon"
 import { Button, IconButton } from "~components/__actions__/v2"
 import { isSemanticElement } from "./isSemanticElement"
-
 describe("isSemanticElement", () => {
   it("returns true if provided a native element with a semantic role", () => {
     expect(
       isSemanticElement(
-        <button onClick={jest.fn()} type="button">
+        <button onClick={vi.fn()} type="button">
           click
         </button>
       )
@@ -28,19 +28,14 @@ describe("isSemanticElement", () => {
   it("will return true if provided a non-semantic element with a semantic role", () => {
     expect(
       isSemanticElement(
-        <span
-          tabIndex={0}
-          role="button"
-          onKeyDown={jest.fn}
-          onClick={jest.fn()}
-        >
+        <span tabIndex={0} role="button" onKeyDown={vi.fn()} onClick={vi.fn()}>
           custom semantic el
         </span>
       )
     ).toBe(true)
     expect(
       isSemanticElement(
-        <div tabIndex={0} role="button" onKeyDown={jest.fn} onClick={jest.fn()}>
+        <div tabIndex={0} role="button" onKeyDown={vi.fn()} onClick={vi.fn()}>
           custom semantic el
         </div>
       )

package/src/utils/useMediaQueries.spec.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import { render, screen } from "@testing-library/react"
+import { vi } from "vitest"
 import { useMediaQueries, subtractOnePixel } from "./useMediaQueries"
-
 const ExampleComponent = (): JSX.Element => {
   const { queries, components } = useMediaQueries({
     prefersReducedMotion: "(prefers-reduced-motion: reduce)",
@@ -27,15 +27,15 @@ const ExampleComponent = (): JSX.Element => {
 export const mockMatchMedia = (matches: boolean = false): void => {
   Object.defineProperty(window, "matchMedia", {
     writable: true,
-    value: jest.fn().mockImplementation(query => ({
+    value: vi.fn().mockImplementation(query => ({
       matches,
       media: query,
       onchange: null,
-      addListener: jest.fn(), // Deprecated
-      removeListener: jest.fn(), // Deprecated
-      addEventListener: jest.fn(),
-      removeEventListener: jest.fn(),
-      dispatchEvent: jest.fn(),
+      addListener: vi.fn(), // Deprecated
+      removeListener: vi.fn(), // Deprecated
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+      dispatchEvent: vi.fn(),
     })),
   })
 }