@kaizen/components 1.61.1 → 1.61.3

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"
@@ -194,11 +194,11 @@ describe("<Select />", () => {
       })
 
       describe("Given the menu is opened", () => {
-        it("moves the focus to the first focusable element inside the menu initially", async () => {
+        it("focuses the listbox initially", async () => {
           const { getByRole } = render(<SelectWrapper defaultOpen />)
           expect(getByRole("listbox")).toBeVisible()
           await waitFor(() => {
-            expect(getByRole("option", { name: "Short black" })).toHaveFocus()
+            expect(getByRole("listbox")).toHaveFocus()
           })
         })
         it("is closed when hits the escape key", async () => {
@@ -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} />
         )
@@ -305,12 +305,12 @@ describe("<Select />", () => {
         })
       })
 
-      it("keeps the focus ring at the first element when hits arrow up key on it", async () => {
+      it("focuses the last item in the list on up arrow press", async () => {
         const { getByRole } = render(<SelectWrapper />)
         await user.tab()
         await user.keyboard("{ArrowUp}")
         await waitFor(() => {
-          expect(getByRole("option", { name: "Short black" })).toHaveFocus()
+          expect(getByRole("option", { name: "Magic" })).toHaveFocus()
         })
       })
 
@@ -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/__future__/Select/Select.tsx

@@ -191,16 +191,7 @@ export const Select = <Option extends SelectOption = SelectOption>({
           trigger(selectToggleProps, selectToggleProps.ref)
         )}
         {state.isOpen && (
-          <Popover
-            id={popoverId}
-            portalContainer={portalContainer}
-            refs={refs}
-            focusOnProps={{
-              onEscapeKey: state.close,
-              onClickOutside: state.close,
-              noIsolation: true,
-            }}
-          >
+          <Popover id={popoverId} portalContainer={portalContainer} refs={refs}>
             <SelectProvider<Option> state={state}>
               <SelectPopoverContents menuProps={menuProps}>
                 {children}

package/src/__future__/Select/subcomponents/ListBox/ListBox.module.scss

@@ -5,8 +5,8 @@
   padding: 0;
   display: grid;
   max-height: 22rem;
+}
 
-  &.focus {
-    outline: none;
-  }
+.listBox:focus-visible {
+  outline: none;
 }

package/src/__future__/Select/subcomponents/ListBox/ListBox.tsx

@@ -23,7 +23,7 @@ export const ListBox = <Option extends SelectOption>({
   const { state } = useSelectContext<Option>()
   const ref = React.useRef<HTMLUListElement>(null)
   const { listBoxProps } = useListBox(
-    { ...menuProps, disallowEmptySelection: true, autoFocus: "first" },
+    { ...menuProps, disallowEmptySelection: true },
     state,
     ref
   )

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

package/src/Heading/__snapshots__/Heading.spec.tsx.snap

@@ -1,85 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<Heading /> defaults to the correct HTML element renders the correct element for <Heading variant={display-0} /> 1`] = `
-<body>
-  <div>
-    <h1
-      class="heading display-0 dark large"
-    >
-      Example
-    </h1>
-  </div>
-</body>
-`;
-
-exports[`<Heading /> defaults to the correct HTML element renders the correct element for <Heading variant={heading-1} /> 1`] = `
-<body>
-  <div>
-    <h1
-      class="heading heading-1 dark large"
-    >
-      Example
-    </h1>
-  </div>
-</body>
-`;
-
-exports[`<Heading /> defaults to the correct HTML element renders the correct element for <Heading variant={heading-2} /> 1`] = `
-<body>
-  <div>
-    <h2
-      class="heading heading-2 dark large"
-    >
-      Example
-    </h2>
-  </div>
-</body>
-`;
-
-exports[`<Heading /> defaults to the correct HTML element renders the correct element for <Heading variant={heading-3} /> 1`] = `
-<body>
-  <div>
-    <h3
-      class="heading heading-3 dark small"
-    >
-      Example
-    </h3>
-  </div>
-</body>
-`;
-
-exports[`<Heading /> defaults to the correct HTML element renders the correct element for <Heading variant={heading-4} /> 1`] = `
-<body>
-  <div>
-    <h4
-      class="heading heading-4 dark small"
-    >
-      Example
-    </h4>
-  </div>
-</body>
-`;
-
-exports[`<Heading /> defaults to the correct HTML element renders the correct element for <Heading variant={heading-5} /> 1`] = `
-<body>
-  <div>
-    <h5
-      class="heading heading-5 dark small"
-    >
-      Example
-    </h5>
-  </div>
-</body>
-`;
-
-exports[`<Heading /> defaults to the correct HTML element renders the correct element for <Heading variant={heading-6} /> 1`] = `
-<body>
-  <div>
-    <h6
-      class="heading heading-6 dark small"
-    >
-      Example
-    </h6>
-  </div>
-</body>
-`;

package/src/Illustration/utils/usePausePlay.spec.tsx

@@ -1,85 +0,0 @@
-import React, { RefObject, act } from "react"
-import { render, renderHook } from "@testing-library/react"
-import { LaunchIcon, PauseIcon } from "~components/Icon"
-import { usePausePlay, usePausePlayHook } from "./usePausePlay"
-
-describe("usePausePlay()", () => {
-  beforeEach(() => {
-    jest.clearAllMocks()
-  })
-
-  let hookResult: usePausePlayHook
-  const mockPause = jest.fn()
-  const mockPlay = jest.fn()
-
-  describe("when toggling a currently playing video", () => {
-    beforeEach(() => {
-      const fakeRef = {
-        current: {
-          pause: mockPause,
-          play: mockPlay,
-          paused: false, // It's playing
-        },
-      } as unknown as RefObject<HTMLVideoElement>
-
-      const { result } = renderHook(() => usePausePlay(fakeRef))
-
-      act(() => {
-        result.current.toggle()
-      })
-
-      hookResult = result.current
-    })
-
-    it("pauses the video", () => {
-      expect(mockPause).toHaveBeenCalled()
-    })
-
-    it("returns the play icon", () => {
-      const { baseElement: original } = render(hookResult.icon)
-      const { baseElement: comparison } = render(
-        <LaunchIcon role="presentation" />
-      )
-      expect(original).toEqual(comparison)
-    })
-
-    it("returns the 'Play animation' label", () => {
-      expect(hookResult.label).toEqual("Play animation")
-    })
-  })
-
-  describe("when toggling a currently paused video", () => {
-    beforeEach(() => {
-      const fakeRef = {
-        current: {
-          pause: mockPause,
-          play: mockPlay,
-          paused: true, // It's not playing
-        },
-      } as unknown as RefObject<HTMLVideoElement>
-
-      const { result } = renderHook(() => usePausePlay(fakeRef))
-
-      act(() => {
-        result.current.toggle()
-      })
-
-      hookResult = result.current
-    })
-    it("starts the video again", () => {
-      expect(mockPlay).toHaveBeenCalled()
-    })
-
-    it("returns the pause icon", () => {
-      const { baseElement: original } = render(hookResult.icon)
-      const { baseElement: comparison } = render(
-        <PauseIcon role="presentation" />
-      )
-      expect(original).toEqual(comparison)
-    })
-
-    it("returns the 'Pause animation' label", () => {
-      expect(hookResult.label).toEqual("Pause animation")
-    })
-  })
-})

package/src/Notification/subcomponents/GenericNotification/GenericNotification.spec.tsx

@@ -1,76 +0,0 @@
-import React, { act } from "react"
-import { fireEvent, waitFor } from "@testing-library/dom"
-import { render } from "@testing-library/react"
-import ReactTestUtils from "react-dom/test-utils"
-import { GenericNotification } from "./GenericNotification"
-
-describe("<GenericNotification />", () => {
-  afterEach(() => {
-    jest.runAllTimers()
-  })
-
-  beforeEach(() => {
-    jest.useFakeTimers()
-  })
-
-  it('begins "hidden" but transitions out of it immediately', async () => {
-    const { container } = render(
-      <GenericNotification type="positive" style="inline" title="Success">
-        This is my positive notification
-      </GenericNotification>
-    )
-
-    await waitFor(() => {
-      expect(container.querySelector(".hidden")).toBeInTheDocument()
-    })
-
-    await act(async () => {
-      jest.advanceTimersByTime(50)
-    })
-
-    await waitFor(() => {
-      expect(container.querySelector(".hidden")).not.toBeInTheDocument()
-    })
-  })
-
-  it("hides the notification and triggers the onHide callback when the cancel button is clicked", async () => {
-    const onHide = jest.fn()
-    const { container, getByTestId } = render(
-      <GenericNotification
-        type="positive"
-        style="inline"
-        title="Success"
-        onHide={onHide}
-      >
-        Notification Text
-      </GenericNotification>
-    )
-
-    // The element should start in a "hidden" state
-    expect(container.querySelector(".hidden")).toBeTruthy()
-
-    // After clicking, the element should fade out, but the onHide not trigger yet.
-    const cancelButton = getByTestId("close-button")
-    const notification = container.querySelector(".notification")
-
-    fireEvent(cancelButton, new MouseEvent("click"))
-
-    await waitFor(() => {
-      expect(notification).toBeTruthy()
-    })
-
-    // Cannot use @testing-library/react `fireEvent` as it relies on jsdom events
-    // TransitionEvent has not been implemented yet, using `ReactTestUtils.Simulate` is a workaround
-    act(() => {
-      notification &&
-        ReactTestUtils.Simulate.transitionEnd(notification, {
-          propertyName: "margin-top",
-        } as any)
-    })
-
-    await waitFor(() => {
-      expect(notification).not.toBeInTheDocument()
-    })
-    await waitFor(() => expect(onHide).toHaveBeenCalledTimes(1))
-  })
-})

package/src/Text/__snapshots__/Text.spec.tsx.snap

@@ -1,49 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<Text /> defaults to the correct HTML element renders the correct element for <Text variant={body} /> 1`] = `
-<body>
-  <div>
-    <p
-      class="text body dark"
-    >
-      Example
-    </p>
-  </div>
-</body>
-`;
-
-exports[`<Text /> defaults to the correct HTML element renders the correct element for <Text variant={extra-small} /> 1`] = `
-<body>
-  <div>
-    <p
-      class="text extra-small dark"
-    >
-      Example
-    </p>
-  </div>
-</body>
-`;
-
-exports[`<Text /> defaults to the correct HTML element renders the correct element for <Text variant={intro-lede} /> 1`] = `
-<body>
-  <div>
-    <p
-      class="text intro-lede dark"
-    >
-      Example
-    </p>
-  </div>
-</body>
-`;
-
-exports[`<Text /> defaults to the correct HTML element renders the correct element for <Text variant={small} /> 1`] = `
-<body>
-  <div>
-    <p
-      class="text small dark"
-    >
-      Example
-    </p>
-  </div>
-</body>
-`;

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

@@ -1,39 +0,0 @@
-import React from "react"
-import { render } from "@testing-library/react"
-import useDebounce from "use-debounce"
-import { AnimationProvider } from "./AppearanceAnim"
-
-jest.mock("use-debounce")
-
-const useDebouncedCallback = useDebounce.useDebouncedCallback as jest.Mock
-let mockReturnValue: Record<string, any>
-
-describe("<AnimationProvider />", () => {
-  beforeEach(() => {
-    mockReturnValue = jest.fn()
-    mockReturnValue.cancel = (): void => undefined
-    useDebouncedCallback.mockImplementation(() => mockReturnValue)
-  })
-
-  describe("When no animationDuration prop is given", () => {
-    it("calls useDebouncedCallback with a 400 ms delay", () => {
-      render(<AnimationProvider isVisible />)
-      expect(useDebouncedCallback).toHaveBeenCalledWith(
-        expect.anything(),
-        400,
-        expect.anything()
-      )
-    })
-  })
-  describe("When an animationDuration prop is given", () => {
-    it("calls useDebouncedCallback with the animationDuration value", () => {
-      const expected = 1000
-      render(<AnimationProvider isVisible animationDuration={expected} />)
-      expect(useDebouncedCallback).toHaveBeenCalledWith(
-        expect.anything(),
-        expected,
-        expect.anything()
-      )
-    })
-  })
-})