@kaizen/components 1.61.1 → 1.61.2

package/src/Filter/FilterMultiSelect/context/SelectionProvider/SelectionProvider.spec.tsx

@@ -1,9 +1,9 @@
 import React, { useState } from "react"
 import { StaticIntlProvider } from "@cultureamp/i18n-react-intl"
 import { Selection } from "@react-types/shared"
-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 { FilterMultiSelect } from "../../FilterMultiSelect"
 import { ListBox } from "../../subcomponents/ListBox"
 import { SearchInput } from "../../subcomponents/SearchInput"
@@ -104,7 +104,7 @@ describe("<SelectionProvider>", () => {
   describe("<SelectionProviderWrapper /> - Visual content", () => {
     describe("Given no selectedKeys", () => {
       it("shows all the options unselected", async () => {
-        renderWithIntl(<SelectionProviderWrapper />)
+        render(<SelectionProviderWrapper />)
         await waitFor(() => {
           expect(
             screen.getByRole("option", {
@@ -128,7 +128,7 @@ describe("<SelectionProvider>", () => {
       })
 
       it("labels the listbox with the provided label", async () => {
-        renderWithIntl(<SelectionProviderWrapper />)
+        render(<SelectionProviderWrapper />)
         await waitFor(() => {
           const listBox = screen.getByLabelText("selection-label-mock", {
             selector: "ul",
@@ -140,7 +140,7 @@ describe("<SelectionProvider>", () => {
 
     describe("Given selectedKeys is [option-2-value-mock]", () => {
       it("shows only option 2 is selected", async () => {
-        renderWithIntl(
+        render(
           <SelectionProviderWrapper
             selectedKeys={new Set(["option-2-value-mock"])}
           />
@@ -170,7 +170,7 @@ describe("<SelectionProvider>", () => {
 
     describe("Given selectedKeys is 'all'", () => {
       it("shows all options are selected", async () => {
-        renderWithIntl(<SelectionProviderWrapper selectedKeys="all" />)
+        render(<SelectionProviderWrapper selectedKeys="all" />)
         await waitFor(() => {
           expect(
             screen.getByRole("option", {
@@ -197,7 +197,7 @@ describe("<SelectionProvider>", () => {
 
   describe("<SelectionProviderWrapper /> - Mouse interaction", () => {
     it("selects the option when clicks on a non-selected option", async () => {
-      renderWithIntl(<SelectionProviderWrapper />)
+      render(<SelectionProviderWrapper />)
       const option1 = screen.getByRole("option", {
         name: "option-1-label-mock",
       })
@@ -215,8 +215,8 @@ describe("<SelectionProvider>", () => {
     })
 
     it("fires onSelectionChange when clicks on a option", async () => {
-      const spy = jest.fn()
-      renderWithIntl(<SelectionProviderWrapper onSelectionChange={spy} />)
+      const spy = vi.fn()
+      render(<SelectionProviderWrapper onSelectionChange={spy} />)
       const option1 = screen.getByRole("option", {
         name: "option-1-label-mock",
       })
@@ -229,7 +229,7 @@ describe("<SelectionProvider>", () => {
     })
 
     it("selects all options when clicks on Select all button", async () => {
-      renderWithIntl(<SelectionProviderWrapper />)
+      render(<SelectionProviderWrapper />)
       const selectAll = screen.getByRole("button", {
         name: "Select all",
       })
@@ -261,8 +261,8 @@ describe("<SelectionProvider>", () => {
     })
 
     it("fires onSelectionChange when clicks on Select all button", async () => {
-      const spy = jest.fn()
-      renderWithIntl(<SelectionProviderWrapper onSelectionChange={spy} />)
+      const spy = vi.fn()
+      render(<SelectionProviderWrapper onSelectionChange={spy} />)
       const selectAll = screen.getByRole("button", {
         name: "Select all",
       })
@@ -275,7 +275,7 @@ describe("<SelectionProvider>", () => {
     })
 
     it("clears all the selection when clicks on Clear button", async () => {
-      renderWithIntl(
+      render(
         <SelectionProviderWrapper
           selectedKeys={new Set(["option-2-value-mock"])}
         />
@@ -309,8 +309,8 @@ describe("<SelectionProvider>", () => {
     })
 
     it("fires onSelectionChange when clicks on Clear all button", async () => {
-      const spy = jest.fn()
-      renderWithIntl(
+      const spy = vi.fn()
+      render(
         <SelectionProviderWrapper
           onSelectionChange={spy}
           selectedKeys={new Set(["option-2-value-mock"])}
@@ -328,7 +328,7 @@ describe("<SelectionProvider>", () => {
     })
 
     it("de-selects the option when clicks on a selected option", async () => {
-      renderWithIntl(
+      render(
         <SelectionProviderWrapper
           selectedKeys={new Set(["option-2-value-mock"])}
         />
@@ -354,7 +354,7 @@ describe("<SelectionProvider>", () => {
   describe("<SelectionProviderWrapper /> - Keyboard interaction", () => {
     describe("Given no selectedKeys", () => {
       it("focuses on the frist option when tabs onto the list", async () => {
-        renderWithIntl(<SelectionProviderWrapper />)
+        render(<SelectionProviderWrapper />)
         await user.tab()
 
         await waitFor(() => {
@@ -367,7 +367,7 @@ describe("<SelectionProvider>", () => {
 
     describe("Given selectedKeys is [option-2-value-mock, option-3-value-mock]", () => {
       it("focuses the frist selected option when tabs onto the list", async () => {
-        renderWithIntl(
+        render(
           <SelectionProviderWrapper
             selectedKeys={new Set(["option-2-value-mock"])}
           />
@@ -383,7 +383,7 @@ describe("<SelectionProvider>", () => {
     })
 
     it("moves the focus down when hits arrow down key", async () => {
-      renderWithIntl(<SelectionProviderWrapper />)
+      render(<SelectionProviderWrapper />)
       await user.tab()
       await user.keyboard("{ArrowDown}")
 
@@ -395,7 +395,7 @@ describe("<SelectionProvider>", () => {
     })
 
     it("keeps the focus at the last element when hits arrow down key on it", async () => {
-      renderWithIntl(
+      render(
         <SelectionProviderWrapper
           selectedKeys={new Set(["option-3-value-mock"])}
         />
@@ -411,7 +411,7 @@ describe("<SelectionProvider>", () => {
     })
 
     it("moves the focus up when hits arrow up key", async () => {
-      renderWithIntl(
+      render(
         <SelectionProviderWrapper
           selectedKeys={new Set(["option-3-value-mock"])}
         />
@@ -427,7 +427,7 @@ describe("<SelectionProvider>", () => {
     })
 
     it("keeps the focus ring at the first element when hits arrow up key on it", async () => {
-      renderWithIntl(<SelectionProviderWrapper />)
+      render(<SelectionProviderWrapper />)
       await user.tab()
       await user.keyboard("{ArrowUp}")
 
@@ -439,7 +439,7 @@ describe("<SelectionProvider>", () => {
     })
 
     it("selects the option when hits enter on a non-selected option", async () => {
-      renderWithIntl(<SelectionProviderWrapper />)
+      render(<SelectionProviderWrapper />)
 
       await user.tab()
       await user.keyboard("{Enter}")
@@ -455,7 +455,7 @@ describe("<SelectionProvider>", () => {
     })
 
     it("de-selects the option when hits enter on a selected option", async () => {
-      renderWithIntl(
+      render(
         <SelectionProviderWrapper
           selectedKeys={new Set(["option-2-value-mock"])}
         />
@@ -475,8 +475,8 @@ describe("<SelectionProvider>", () => {
     })
 
     it("fires onSelectionChange when hits enter on a option", async () => {
-      const spy = jest.fn()
-      renderWithIntl(<SelectionProviderWrapper onSelectionChange={spy} />)
+      const spy = vi.fn()
+      render(<SelectionProviderWrapper onSelectionChange={spy} />)
 
       await user.tab()
       await user.keyboard("{Enter}")
@@ -490,7 +490,7 @@ describe("<SelectionProvider>", () => {
   describe("<SelectionProviderWrapper /> - Search Filtering", () => {
     describe("With no onSearchInputChange callback", () => {
       it("shows only the matched options", async () => {
-        renderWithIntl(<SelectionProviderWrapper />)
+        render(<SelectionProviderWrapper />)
         const searchInput = screen.getByRole("searchbox")
         await user.type(searchInput, "1")
 
@@ -515,9 +515,9 @@ describe("<SelectionProvider>", () => {
     })
     describe("With a onSearchInputChange callback", () => {
       it("Does not filter the matched options", async () => {
-        const onSearchInputChange = jest.fn()
+        const onSearchInputChange = vi.fn()
 
-        renderWithIntl(
+        render(
           <SelectionProviderWrapper onSearchInputChange={onSearchInputChange} />
         )
         const searchInput = screen.getByRole("searchbox")
@@ -544,9 +544,9 @@ describe("<SelectionProvider>", () => {
       })
 
       it("Calls back to the consumer with the search text", async () => {
-        const onSearchInputChange = jest.fn()
+        const onSearchInputChange = vi.fn()
 
-        renderWithIntl(
+        render(
           <SelectionProviderWrapper onSearchInputChange={onSearchInputChange} />
         )
         const searchInput = screen.getByRole("searchbox")
@@ -563,7 +563,7 @@ describe("<SelectionProvider>", () => {
 
   describe("<SelectionProviderWrapper /> - controlling items from the consumer", () => {
     it("renders only items passed", async () => {
-      const { rerender } = renderWithIntl(<SelectionProviderWrapper />)
+      const { rerender } = render(<SelectionProviderWrapper />)
       await waitFor(() => {
         expect(
           screen.getByRole("option", {

package/src/Filter/FilterMultiSelect/subcomponents/MultiSelectOption/MultiSelectOption.spec.tsx

@@ -3,14 +3,16 @@
 import React from "react"
 import { useOption } from "@react-aria/listbox"
 import { render, screen } from "@testing-library/react"
+import { vi, beforeEach, Mock } from "vitest"
 import { ItemType } from "../../types"
 import { MultiSelectOption, MultiSelectOptionProps } from "./MultiSelectOption"
+import styles from "./MultiSelectOption.module.scss"
 
-jest.mock("@react-aria/listbox", () => ({
-  useOption: jest.fn(),
+vi.mock("@react-aria/listbox", () => ({
+  useOption: vi.fn(),
 }))
 
-jest.mock("../../context", () => ({
+vi.mock("../../context", () => ({
   useSelectionContext: (): { selectionState: Record<string, unknown> } => ({
     selectionState: {},
   }),
@@ -36,7 +38,7 @@ const MultiSelectOptionWrapper = ({
 describe("<MultiSelectOptionWrapper /> - Visual content", () => {
   describe("Given item is unselected", () => {
     beforeEach(() => {
-      ;(useOption as jest.Mock).mockReturnValue({
+      ;(useOption as Mock).mockReturnValue({
         optionProps: {},
         isSelected: false,
         isDisabled: false,
@@ -56,7 +58,7 @@ describe("<MultiSelectOptionWrapper /> - Visual content", () => {
 
   describe("Given item is disabled", () => {
     beforeEach(() => {
-      ;(useOption as jest.Mock).mockReturnValue({
+      ;(useOption as Mock).mockReturnValue({
         optionProps: {},
         isSelected: false,
         isDisabled: true,
@@ -66,13 +68,13 @@ describe("<MultiSelectOptionWrapper /> - Visual content", () => {
 
     it("has a disabled class", () => {
       const label = screen.getByLabelText("label-mock")
-      expect(label).toHaveClass("isDisabled")
+      expect(label).toHaveClass(styles.isDisabled)
     })
   })
 
   describe("Given count is provided", () => {
     beforeEach(() => {
-      ;(useOption as jest.Mock).mockReturnValue({
+      ;(useOption as Mock).mockReturnValue({
         optionProps: {},
         isSelected: false,
         isDisabled: false,

package/src/Filter/FilterMultiSelect/subcomponents/SearchInput/SearchInput.spec.tsx

@@ -1,14 +1,14 @@
 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, Mock } from "vitest"
 import { useSelectionContext } from "../../context"
 import { SearchInput } from "."
 
 const user = userEvent.setup()
 
-jest.mock("../../context", () => ({
-  useSelectionContext: jest.fn(),
+vi.mock("../../context", () => ({
+  useSelectionContext: vi.fn(),
 }))
 
 const SearchInputWrapper = (): JSX.Element => <SearchInput label="label-mock" />
@@ -16,10 +16,10 @@ const SearchInputWrapper = (): JSX.Element => <SearchInput label="label-mock" />
 describe("<SearchInput /> - interaction", () => {
   describe("Given searchQuery is provided", () => {
     it("shows searchQuery as value", async () => {
-      ;(useSelectionContext as jest.Mock).mockReturnValue({
+      ;(useSelectionContext as Mock).mockReturnValue({
         searchQuery: "search-query-mock",
       })
-      renderWithIntl(<SearchInputWrapper />)
+      render(<SearchInputWrapper />)
       await waitFor(() => {
         expect(screen.getByRole("searchbox")).toHaveValue("search-query-mock")
       })
@@ -27,12 +27,12 @@ describe("<SearchInput /> - interaction", () => {
   })
 
   it("triggers setSearchQuery with input value when user types the input", async () => {
-    const spy = jest.fn()
-    ;(useSelectionContext as jest.Mock).mockReturnValue({
+    const spy = vi.fn()
+    ;(useSelectionContext as Mock).mockReturnValue({
       setSearchQuery: spy,
     })
 
-    renderWithIntl(<SearchInputWrapper />)
+    render(<SearchInputWrapper />)
     const search = screen.getByRole("searchbox")
     await user.type(search, "want to search this text")
 
@@ -40,13 +40,13 @@ describe("<SearchInput /> - interaction", () => {
   })
 
   it("triggers setSearchQuery with input value when clear the input", async () => {
-    const spy = jest.fn()
-    ;(useSelectionContext as jest.Mock).mockReturnValue({
+    const spy = vi.fn()
+    ;(useSelectionContext as Mock).mockReturnValue({
       searchQuery: "search-query-mock",
       setSearchQuery: spy,
     })
 
-    renderWithIntl(<SearchInputWrapper />)
+    render(<SearchInputWrapper />)
     const clearButton = screen.getByRole("button")
     await user.click(clearButton)
 

package/src/Filter/FilterMultiSelect/subcomponents/SelectionControlButton/ClearButton/ClearButton.spec.tsx

@@ -1,24 +1,24 @@
 import React from "react"
 import { render, screen, waitFor } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
+import { Mock, vi } from "vitest"
 import { useSelectionContext } from "../../../context"
 import { ClearButton } from "."
-
 const user = userEvent.setup()
 
-jest.mock("../../../context", () => ({
-  useSelectionContext: jest.fn(),
+vi.mock("../../../context", () => ({
+  useSelectionContext: vi.fn(),
 }))
 
 describe("<ClearButton /> - interaction", () => {
   describe("Given selection is not empty", () => {
     it("triggers selectionManager.selSelectedKeys() with focused keys filtered out when button is clicked", async () => {
-      const spy = jest.fn()
+      const spy = vi.fn()
       const selectedAndFocused = "selectedAndFocused"
       const selectedButNotFocused = "selectedButNotFocused"
       const selectedKeys: string[] = [selectedAndFocused, selectedButNotFocused]
       const filteredKeys: string[] = [selectedAndFocused]
-      ;(useSelectionContext as jest.Mock).mockReturnValue({
+      ;(useSelectionContext as Mock).mockReturnValue({
         selectionState: {
           collection: {
             getKeys: () => filteredKeys,
@@ -43,10 +43,10 @@ describe("<ClearButton /> - interaction", () => {
 
   describe("Given selection is empty", () => {
     it("does not trigger selectionManager.setSelectedKeys() when clicks on the button", async () => {
-      const spy = jest.fn()
+      const spy = vi.fn()
       const filteredKeys: string[] = []
       const selectedKeys: string[] = []
-      ;(useSelectionContext as jest.Mock).mockReturnValue({
+      ;(useSelectionContext as Mock).mockReturnValue({
         selectionState: {
           collection: {
             getKeys: () => filteredKeys,

package/src/Filter/FilterMultiSelect/subcomponents/SelectionControlButton/SelectAllButton/SelectAllButton.spec.tsx

@@ -1,26 +1,26 @@
 import React from "react"
 import { render, screen, waitFor } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
+import { Mock, vi } from "vitest"
 import { useSelectionContext } from "../../../context"
 import { SelectAllButton } from "."
-
 const user = userEvent.setup()
 
-jest.mock("../../../context", () => ({
-  useSelectionContext: jest.fn(),
+vi.mock("../../../context", () => ({
+  useSelectionContext: vi.fn(),
 }))
 
 describe("<SelectAllButton /> - interaction", () => {
   describe("Given not all options are selected", () => {
     it("triggers selectionManager.setSelectedKeys() with currently selected and filtered options when button is clicked", async () => {
-      const spy = jest.fn()
+      const spy = vi.fn()
       const selectedAndFiltered = "selectedAndFiltered"
       const filteredButNotSelected = "focusedButNotSelected"
       const selectedButNotFiltered = "selectedButNotFiltered"
       const selectedKeys = [selectedAndFiltered, selectedButNotFiltered]
       const filteredKeys = [selectedAndFiltered, filteredButNotSelected]
 
-      ;(useSelectionContext as jest.Mock).mockReturnValue({
+      ;(useSelectionContext as Mock).mockReturnValue({
         selectionState: {
           collection: {
             getKeys: () => filteredKeys,
@@ -45,12 +45,12 @@ describe("<SelectAllButton /> - interaction", () => {
 
   describe("Given all filtered options are selected", () => {
     it("does not trigger selectionManager.setSelectedKeys() when clicks on the button", async () => {
-      const spy = jest.fn()
+      const spy = vi.fn()
       const selectedAndFiltered1 = "selectedAndFiltered1"
       const selectedAndFiltered2 = "selectedAndFocused2"
       const selectedKeys = [selectedAndFiltered1, selectedAndFiltered2]
       const filteredKeys = [selectedAndFiltered1, selectedAndFiltered2]
-      ;(useSelectionContext as jest.Mock).mockReturnValue({
+      ;(useSelectionContext as Mock).mockReturnValue({
         selectionState: {
           collection: {
             getKeys: () => filteredKeys,
@@ -74,7 +74,7 @@ describe("<SelectAllButton /> - interaction", () => {
 
   describe("Given some options are disabled", () => {
     it("triggers selectionManager.setSelectedKeys() on non-disabled options", async () => {
-      const spy = jest.fn()
+      const spy = vi.fn()
       const filtered = "filtered"
       const filteredAndSelected = "filteredAndSelected"
       const filteredAndDisabled = "filteredAndDisabled"
@@ -82,7 +82,7 @@ describe("<SelectAllButton /> - interaction", () => {
       const filteredKeys = [filtered, filteredAndSelected, filteredAndDisabled]
       const disabledKeys = [filteredAndDisabled]
 
-      ;(useSelectionContext as jest.Mock).mockReturnValue({
+      ;(useSelectionContext as Mock).mockReturnValue({
         selectionState: {
           disabledKeys,
           collection: {

package/src/Filter/FilterSelect/FilterSelect.spec.tsx

@@ -180,7 +180,7 @@ const defaultProps: FilterSelectProps = {
   items: singleMockItems,
 }
 
-/* eslint-disable jest/expect-expect */
+/* eslint-disable vitest/expect-expect */
 describe("FilterSelect generic", () => {
   it("should prevent adding `options` attribute to option", () => {
     /* @ts-expect-error */
@@ -213,4 +213,4 @@ describe("FilterSelect generic", () => {
     })
   })
 })
-/* eslint-enable jest/expect-expect */
+/* eslint-enable vitest/expect-expect */

package/src/Heading/Heading.spec.tsx

@@ -1,37 +1,8 @@
 import * as React from "react"
 import { render } from "@testing-library/react"
-import { AllowedHeadingTags, Heading, HeadingVariants } from "./"
+import { AllowedHeadingTags, Heading, HeadingVariants } from "."
 
 describe("<Heading />", () => {
-  it("renders the correct classes", () => {
-    const headingMock = render(<Heading variant="display-0">Example</Heading>)
-    const headingClasslist = headingMock.getByText("Example").classList
-    expect(headingClasslist).toContain("heading")
-    expect(headingClasslist).toContain("display-0")
-    expect(headingClasslist).toContain("large")
-  })
-
-  it("adds a .small class instead of .large if a Heading 3 is used", () => {
-    const headingMock = render(
-      <Heading variant="heading-3" tag="div">
-        Example
-      </Heading>
-    )
-    expect(headingMock.getByText("Example").classList).toContain("small")
-    expect(headingMock.getByText("Example").classList).not.toContain("large")
-  })
-
-  it("adds a .dark-reduced-opacity class if the color prop is set to that", () => {
-    const headingMock = render(
-      <Heading variant="heading-3" color="dark-reduced-opacity">
-        Example
-      </Heading>
-    )
-    expect(headingMock.getByText("Example").classList).toContain(
-      "dark-reduced-opacity"
-    )
-  })
-
   it("changes rendered HTML element when passed tag", () => {
     const headingMock = render(
       <Heading variant="display-0" tag="div">
@@ -66,7 +37,6 @@ describe("<Heading />", () => {
       it(`renders the correct element for <Heading variant={${variant}} />`, () => {
         const headingMock = render(<Heading variant={variant}>Example</Heading>)
         expect(headingMock.getByText("Example").tagName.toLowerCase()).toBe(el)
-        expect(headingMock.baseElement).toMatchSnapshot()
       })
     })
   })