@kaizen/components 1.61.1 → 1.61.3

package/src/RichTextEditor/utils/core/createRichTextEditor.spec.ts

@@ -1,14 +1,14 @@
 import { findByText, queryByText, getByText } from "@testing-library/dom"
 import { Command, EditorState } from "prosemirror-state"
+import { vi } from "vitest"
 import { createRichTextEditor } from "./createRichTextEditor"
 import { testEditorState } from "./fixtures/testState"
-
 describe("createRichTextEditor()", () => {
   const attributes = { "aria-labelledby": "label-text-123" }
 
   it("initializes an editor with the correct content", async () => {
     const node = document.createElement("div")
-    const onChange = jest.fn()
+    const onChange = vi.fn()
 
     createRichTextEditor({
       node,
@@ -23,7 +23,7 @@ describe("createRichTextEditor()", () => {
 
   it("returns the expected API shape", async () => {
     const node = document.createElement("div")
-    const onChange = jest.fn()
+    const onChange = vi.fn()
 
     const returnValue = createRichTextEditor({
       node,
@@ -39,7 +39,7 @@ describe("createRichTextEditor()", () => {
 
   it("destroys the instance", async () => {
     const node = document.createElement("div")
-    const onChange = jest.fn()
+    const onChange = vi.fn()
 
     const { destroy } = createRichTextEditor({
       node,
@@ -58,7 +58,7 @@ describe("createRichTextEditor()", () => {
 
   it("updates the DOM when commands are dispatched", async () => {
     const node = document.createElement("div")
-    const onChange = jest.fn()
+    const onChange = vi.fn()
 
     const command: Command = (state, dispatch) => {
       // Insert text at the current selection point, which is the start because
@@ -87,7 +87,7 @@ describe("createRichTextEditor()", () => {
 
   it("calls onChange when the editor state changes", async () => {
     const node = document.createElement("div")
-    const onChange = jest.fn()
+    const onChange = vi.fn()
     const command: Command = (state, dispatch) => {
       if (!dispatch) return false
       dispatch(state.tr.insertText("Prepended content. "))
@@ -110,7 +110,7 @@ describe("createRichTextEditor()", () => {
 
   it("calls onChange with the updated state", async () => {
     const node = document.createElement("div")
-    const onChange = jest.fn()
+    const onChange = vi.fn()
     const command: Command = (state, dispatch) => {
       if (!dispatch) return false
       dispatch(state.tr.insertText("Prepended content. "))
@@ -155,7 +155,7 @@ describe("createRichTextEditor()", () => {
 
   it("defaults to editable", async () => {
     const node = document.createElement("div")
-    const onChange = jest.fn()
+    const onChange = vi.fn()
 
     createRichTextEditor({
       node,
@@ -169,7 +169,7 @@ describe("createRichTextEditor()", () => {
 
   it("respects initial isEditable value", async () => {
     const node = document.createElement("div")
-    const onChange = jest.fn()
+    const onChange = vi.fn()
 
     createRichTextEditor({
       node,
@@ -185,7 +185,7 @@ describe("createRichTextEditor()", () => {
   it("updates editable status", async () => {
     let editable = true
     const node = document.createElement("div")
-    const onChange = jest.fn()
+    const onChange = vi.fn()
     const noopCommand: Command = (state, dispatch) => {
       if (!dispatch) return false
       dispatch(state.tr)
@@ -211,7 +211,7 @@ describe("createRichTextEditor()", () => {
   it("aria-labelledby is present", async () => {
     const editable = true
     const node = document.createElement("div")
-    const onChange = jest.fn()
+    const onChange = vi.fn()
     const noopCommand: Command = (state, dispatch) => {
       if (!dispatch) return false
       dispatch(state.tr)

package/src/RichTextEditor/utils/core/hooks/useRichTextEditor.spec.tsx

@@ -2,9 +2,9 @@ import React, { useEffect } from "react"
 import { render, screen, waitFor } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
 import { Command, EditorState } from "prosemirror-state"
+import { vi } from "vitest"
 import { testEditorState } from "../fixtures/testState"
 import { useRichTextEditor } from "./useRichTextEditor"
-
 const user = userEvent.setup()
 
 const Scenario = ({
@@ -76,7 +76,7 @@ describe("useRichTextEditor()", () => {
   })
 
   it("updates the editorState when commands are dispatched", async () => {
-    const onChange = jest.fn()
+    const onChange = vi.fn()
     render(<Scenario onChange={onChange} />)
 
     await waitFor(() => {

package/src/SplitButton/SplitButton.spec.tsx

@@ -1,7 +1,7 @@
 import React from "react"
-import { screen, waitFor } from "@testing-library/react"
+import { screen, waitFor, render } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
-import { renderWithIntl } from "~tests"
+import { vi } from "vitest"
 import { MenuItem, MenuList } from "~components/__actions__/v2"
 import { SplitButton, SplitButtonProps } from "./SplitButton"
 
@@ -13,7 +13,7 @@ const SplitButtonWrapper = (
   <SplitButton
     actionButtonProps={{
       label: "Action Text",
-      onClick: jest.fn(),
+      onClick: vi.fn(),
     }}
     dropdownButtonProps={{
       "aria-label": "Dropdown Label",
@@ -30,7 +30,7 @@ const SplitButtonWrapper = (
 
 describe("<SplitButton />", () => {
   it("renders the correct structure", async () => {
-    renderWithIntl(<SplitButtonWrapper />)
+    render(<SplitButtonWrapper />)
     await waitFor(() => {
       expect(screen.getByText("Action Text")).toBeInTheDocument()
     })
@@ -46,7 +46,7 @@ describe("<SplitButton />", () => {
   })
 
   it("disables both buttons when disabled is true", async () => {
-    renderWithIntl(<SplitButtonWrapper disabled />)
+    render(<SplitButtonWrapper disabled />)
     await waitFor(() => {
       expect(screen.getByText("Action Text").closest("button")).toBeDisabled()
     })

package/src/SplitButton/subcomponents/DropdownButton/DropdownButton.spec.tsx

@@ -1,6 +1,5 @@
 import React from "react"
-import { screen, waitFor } from "@testing-library/react"
-import { renderWithIntl } from "~tests"
+import { screen, waitFor, render } from "@testing-library/react"
 import { DropdownButton, DropdownButtonProps } from "./DropdownButton"
 
 const DropdownButtonWrapper = (
@@ -9,7 +8,7 @@ const DropdownButtonWrapper = (
 
 describe("<DropdownButton />", () => {
   it("renders icon with default aria-label", async () => {
-    renderWithIntl(<DropdownButtonWrapper />)
+    render(<DropdownButtonWrapper />)
     await waitFor(() => {
       const button = screen.getByRole("button", { name: "Additional actions" })
       expect(button.getAttribute("aria-label")).toBe("Additional actions")
@@ -18,7 +17,7 @@ describe("<DropdownButton />", () => {
   })
 
   it("renders custom aria-label", async () => {
-    renderWithIntl(<DropdownButtonWrapper aria-label="Custom aria label" />)
+    render(<DropdownButtonWrapper aria-label="Custom aria label" />)
     await waitFor(() => {
       const button = screen.getByRole("button", { name: "Custom aria label" })
       expect(button.getAttribute("aria-label")).toBe("Custom aria label")

package/src/Text/Text.spec.tsx

@@ -1,30 +1,8 @@
 import * as React from "react"
 import { render } from "@testing-library/react"
-import { AllowedTextColors, AllowedTextTags, Text, TextVariants } from "./"
+import { AllowedTextTags, Text, TextVariants } from "."
 
 describe("<Text />", () => {
-  describe("renders the correct variant classes", () => {
-    const testCases: TextVariants[] = [
-      "intro-lede",
-      "body",
-      "small",
-      "extra-small",
-    ]
-
-    testCases.forEach(variant => {
-      it(`renders the correct element for <Text variant={${variant}} />`, () => {
-        const textMock = render(
-          <Text variant={variant} tag="div">
-            Example
-          </Text>
-        )
-        const textClasslist = textMock.getByText("Example").classList
-        expect(textClasslist).toContain("text")
-        expect(textClasslist).toContain(variant)
-      })
-    })
-  })
-
   describe("changes rendered HTML element when passed tag", () => {
     const testCases: TextVariants[] = [
       "intro-lede",
@@ -45,30 +23,6 @@ describe("<Text />", () => {
     })
   })
 
-  describe("renders the correct color classes", () => {
-    const testCases: AllowedTextColors[] = [
-      "dark",
-      "dark-reduced-opacity",
-      "white",
-      "white-reduced-opacity",
-      "positive",
-      "negative",
-    ]
-
-    testCases.forEach(color => {
-      it(`renders the correct class for <Text color={${color}} />`, () => {
-        const textMock = render(
-          <Text variant="body" color={color} tag="div">
-            Example
-          </Text>
-        )
-        const textClasslist = textMock.getByText("Example").classList
-        expect(textClasslist).toContain("text")
-        expect(textClasslist).toContain(color)
-      })
-    })
-  })
-
   it("passes through data attributes", () => {
     const { getByTestId } = render(
       <Text variant="intro-lede" data-testid="test-id">
@@ -91,17 +45,7 @@ describe("<Text />", () => {
       it(`renders the correct element for <Text variant={${variant}} />`, () => {
         const textMock = render(<Text variant={variant}>Example</Text>)
         expect(textMock.getByText("Example").tagName.toLowerCase()).toBe(el)
-        expect(textMock.baseElement).toMatchSnapshot()
       })
     })
   })
-
-  it("allows consumers to provide a className", () => {
-    const { getByText } = render(
-      <Text variant="body" classNameOverride="example-classname">
-        Example
-      </Text>
-    )
-    expect(getByText("Example").classList).toContain("example-classname")
-  })
 })

package/src/TextArea/TextArea.spec.tsx

@@ -1,8 +1,8 @@
 import React from "react"
 import { render, waitFor } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
+import { vi } from "vitest"
 import { TextArea } from "./TextArea"
-
 const user = userEvent.setup()
 
 describe("<TextArea />", () => {
@@ -22,7 +22,7 @@ describe("<TextArea />", () => {
   })
 
   it("calls the `onChange` event when the value is updated", async () => {
-    const mockFn = jest.fn()
+    const mockFn = vi.fn()
     const { getByRole } = render(<TextArea onChange={mockFn} />)
 
     await user.type(getByRole("textbox"), "Hello")

package/src/TimeField/TimeField.spec.tsx

@@ -1,12 +1,12 @@
 import React, { useState } from "react"
 import { render, screen, waitFor } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
+import { vi } from "vitest"
 import { TimeField, TimeFieldProps } from "./TimeField"
 import { ValueType } from "./types"
-
 const user = userEvent.setup()
 
-const mockOnChange = jest.fn()
+const mockOnChange = vi.fn()
 const LABEL = "Launch Time Label"
 
 const pressArrowKey =

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(() => {