@kaizen/components 1.61.1 → 1.61.3

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/MultiSelect/subcomponents/Popover/Popover.module.scss

@@ -10,6 +10,7 @@
   border-radius: $border-solid-border-radius;
   background: $color-white;
   overflow: auto;
+  z-index: 100000;
 
   &:focus {
     outline: none;

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)
+    })
+  },
+}

package/src/Pagination/Pagination.spec.tsx

@@ -11,12 +11,12 @@ const defaultProps = {
   ariaLabelNextPage: "Next page",
   ariaLabelPreviousPage: "Previous page",
   ariaLabelPage: "Page",
-  onPageChange: jest.fn<void, [number]>(),
+  onPageChange: vi.fn(),
 }
 
 describe("<Pagination />", () => {
   it("calls onPageChange when clicking page number", async () => {
-    const onPageChange = jest.fn<void, [number]>()
+    const onPageChange = vi.fn()
 
     render(<Pagination {...defaultProps} onPageChange={onPageChange} />)
 

package/src/RichTextEditor/EditableRichTextContent/EditableRichTextContent.spec.tsx

@@ -1,11 +1,11 @@
 import React from "react"
 import { render } from "@testing-library/react"
+import { vi } from "vitest"
 import { RichTextContentProps } from "../RichTextContent"
 import { EditableRichTextContent } from "./EditableRichTextContent"
+const mockFn = vi.fn()
 
-const mockFn = jest.fn()
-
-jest.mock("../RichTextContent", () => ({
+vi.mock("../RichTextContent", () => ({
   __esModule: true,
   RichTextContent: (props: RichTextContentProps): JSX.Element => {
     mockFn(props)
@@ -26,7 +26,7 @@ describe("Content props are passed", () => {
       <EditableRichTextContent
         content={content}
         labelText=""
-        onClick={jest.fn()}
+        onClick={vi.fn()}
         contentProps={{ id: "sampleId" }}
       />
     )

package/src/RichTextEditor/RichTextContent/RichTextContent.tsx

@@ -1,4 +1,4 @@
-import React, { useState, HTMLAttributes } from "react"
+import React, { useState, HTMLAttributes, useId, useEffect } from "react"
 import classnames from "classnames"
 import { OverrideClassName } from "~components/types/OverrideClassName"
 import { createSchemaWithAll } from "../RichTextEditor/schema"
@@ -14,6 +14,13 @@ export type RichTextContentProps = {
 export const RichTextContent = (props: RichTextContentProps): JSX.Element => {
   const { content, classNameOverride, ...restProps } = props
   const [schema] = useState<ProseMirrorModel.Schema>(createSchemaWithAll())
+  const editorId = useId()
+
+  useEffect(() => {
+    // prosemirror only allows us to set this to false (which has caused a strange bug in the platform)
+    // so we have to hack a bit to remove the attribute completely
+    document.getElementById(editorId)?.removeAttribute("contenteditable")
+  }, [])
 
   const [editorRef] = useRichTextEditor(
     ProseMirrorState.EditorState.create({
@@ -23,7 +30,9 @@ export const RichTextContent = (props: RichTextContentProps): JSX.Element => {
       }),
       schema,
     }),
-    undefined,
+    {
+      id: editorId,
+    },
     {
       editable: false,
     }

package/src/RichTextEditor/utils/commands/addMark.spec.ts

@@ -1,4 +1,5 @@
 import { findByText, waitFor } from "@testing-library/dom"
+import { vi } from "vitest"
 import { createRichTextEditor } from "../core"
 import { addMark } from "./addMark"
 import {
@@ -7,9 +8,8 @@ import {
   simulateTextInsert,
 } from "./fixtures/helpers"
 import { testEditorState, testSchema } from "./fixtures/test-state"
-
 describe("addMark()", () => {
-  const onChange = jest.fn()
+  const onChange = vi.fn()
   const attributes = { "aria-labelledby": "label-text-123" }
 
   it("creates an empty wrapper of the given Mark type if no selection is provided", async () => {

package/src/RichTextEditor/utils/commands/fixtures/helpers.ts

@@ -5,14 +5,15 @@ import {
   Transaction,
 } from "prosemirror-state"
 import { findChildrenByType } from "prosemirror-utils"
+//  eslint-disable-next-line import/no-extraneous-dependencies
+import { vi } from "vitest"
 import { ProseMirrorModel } from "../../prosemirror"
-
 /*
  ** This is used handle the JSDom type error issue you may encounter in testing
  ** See https://github.com/jsdom/jsdom/issues/3002
  */
 export const mockRangeForBoundingRect = (): void => {
-  jest.spyOn(document, "createRange").mockImplementation(() => {
+  vi.spyOn(document, "createRange").mockImplementation(() => {
     const range = new Range()
 
     range.getBoundingClientRect = () => ({
@@ -30,7 +31,7 @@ export const mockRangeForBoundingRect = (): void => {
     range.getClientRects = () => ({
       item: () => null,
       length: 0,
-      [Symbol.iterator]: jest.fn(),
+      [Symbol.iterator]: vi.fn(),
     })
 
     return range

package/src/RichTextEditor/utils/commands/getMarkAttrs.spec.ts

@@ -1,12 +1,12 @@
 import { waitFor } from "@testing-library/dom"
 import { EditorState } from "prosemirror-state"
+import { vi } from "vitest"
 import { createRichTextEditor } from "../core"
 import { simulateSelectionByText } from "./fixtures/helpers"
 import { testEditorStateWithMarks, testSchema } from "./fixtures/test-state"
 import { getMarkAttrs } from "./getMarkAttrs"
-
 describe("getMarkAttrs()", () => {
-  const onChange = jest.fn()
+  const onChange = vi.fn()
   const attributes = { "aria-labelledby": "label-text-123" }
 
   it("returns an empty object if the selected Mark has no attributes", async () => {

package/src/RichTextEditor/utils/commands/getMarkRange.spec.ts

@@ -1,12 +1,12 @@
 import { waitFor } from "@testing-library/dom"
 import { EditorState } from "prosemirror-state"
+import { vi } from "vitest"
 import { createRichTextEditor } from "../core"
 import { simulateSelectionByText } from "./fixtures/helpers"
 import { testEditorStateWithMarks } from "./fixtures/test-state"
 import { getMarkRange } from "./getMarkRange"
-
 describe("getMarkRange()", () => {
-  const onChange = jest.fn()
+  const onChange = vi.fn()
   const attributes = { "aria-labelledby": "label-text-123" }
 
   it("returns the entire range of the Mark provided from a resolved position", async () => {

package/src/RichTextEditor/utils/commands/listIsActive.spec.ts

@@ -1,12 +1,12 @@
 import { waitFor } from "@testing-library/dom"
 import { EditorState } from "prosemirror-state"
+import { vi } from "vitest"
 import { createRichTextEditor } from "../core"
 import { simulateSelectionByText } from "./fixtures/helpers"
 import { testEditorStateWitList, testSchema } from "./fixtures/test-state"
 import { listIsActive } from "./listIsActive"
-
 describe("listIsActive()", () => {
-  const onChange = jest.fn()
+  const onChange = vi.fn()
   const attributes = { "aria-labelledby": "label-text-123" }
   const listNodes = [testSchema.nodes.bulletList, testSchema.nodes.orderedList]
 

package/src/RichTextEditor/utils/commands/markContainsSelection.spec.ts

@@ -1,12 +1,12 @@
 import { waitFor } from "@testing-library/dom"
 import { EditorState } from "prosemirror-state"
+import { vi } from "vitest"
 import { createRichTextEditor } from "../core"
 import { simulateSelectionByText } from "./fixtures/helpers"
 import { testEditorStateWithMarks, testSchema } from "./fixtures/test-state"
 import { markContainsSelection } from "./markContainsSelection"
-
 describe("markContainsSelection()", () => {
-  const onChange = jest.fn()
+  const onChange = vi.fn()
   const attributes = { "aria-labelledby": "label-text-123" }
 
   it("will return true if the current select contains the provided Mark", async () => {

package/src/RichTextEditor/utils/commands/markIsActive.spec.ts

@@ -1,5 +1,6 @@
 import { waitFor } from "@testing-library/dom"
 import { EditorState } from "prosemirror-state"
+import { vi } from "vitest"
 import { createRichTextEditor } from "../core"
 import {
   simulateRangeSelection,
@@ -7,9 +8,8 @@ import {
 } from "./fixtures/helpers"
 import { testEditorStateWithMarks, testSchema } from "./fixtures/test-state"
 import { markIsActive } from "./markIsActive"
-
 describe("markIsActive()", () => {
-  const onChange = jest.fn()
+  const onChange = vi.fn()
   const attributes = { "aria-labelledby": "label-text-123" }
 
   it("returns true if the provided Mark Type matches the current selection", async () => {

package/src/RichTextEditor/utils/commands/removeMark.spec.ts

@@ -1,11 +1,11 @@
 import { findByText, getByText, waitFor } from "@testing-library/dom"
+import { vi } from "vitest"
 import { createRichTextEditor } from "../core"
 import { simulateSelectionByText } from "./fixtures/helpers"
 import { testEditorStateWithMarks, testSchema } from "./fixtures/test-state"
 import { removeMark } from "./removeMark"
-
 describe("removeMark()", () => {
-  const onChange = jest.fn()
+  const onChange = vi.fn()
   const attributes = { "aria-labelledby": "label-text-123" }
 
   it("removes the given <strong> Mark from a paragraph in the document", async () => {

package/src/RichTextEditor/utils/commands/updateMark.spec.ts

@@ -1,11 +1,11 @@
 import { getByRole, getByText, waitFor } from "@testing-library/dom"
+import { vi } from "vitest"
 import { createRichTextEditor } from "../core"
 import { simulateSelectionByText } from "./fixtures/helpers"
 import { testEditorStateWithMarks, testSchema } from "./fixtures/test-state"
 import { updateMark } from "./updateMark"
-
 describe("updateMark()", () => {
-  const onChange = jest.fn()
+  const onChange = vi.fn()
   const attributes = { "aria-labelledby": "label-text-123" }
 
   it("can update existing Mark with a nested Mark", async () => {

package/src/RichTextEditor/utils/commands/validateAndRemoveMarks.spec.ts

@@ -1,10 +1,10 @@
 import { findByText, waitFor } from "@testing-library/dom"
+import { vi } from "vitest"
 import { createRichTextEditor } from "../core"
 import { testEditorStateWithMarks, testSchema } from "./fixtures/test-state"
 import { validateAndRemoveMarks } from "./validateAndRemoveMarks"
-
 describe("validateAndRemoveMarks()", () => {
-  const onChange = jest.fn()
+  const onChange = vi.fn()
   const attributes = { "aria-labelledby": "label-text-123" }
 
   it("removes all Marks of the given type that fail the validator method", async () => {
@@ -16,7 +16,7 @@ describe("validateAndRemoveMarks()", () => {
       initialEditorState: testEditorStateWithMarks,
     })
     // The current mockData will always return true so using the mock to represent bad attributes
-    const failingValidatorMethod = jest.fn().mockImplementation(() => false)
+    const failingValidatorMethod = vi.fn().mockImplementation(() => false)
 
     expect(node.querySelectorAll("a").length).toBeGreaterThan(0)