@kaizen/components 1.61.1 → 1.61.2

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)
 

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 =