@kaizen/components 1.61.1 → 1.61.2

package/src/Filter/FilterDateRangePicker/subcomponents/DateRangeInputField/DateRangeInputField.spec.tsx

@@ -1,8 +1,8 @@
 import React, { useRef } 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 { enAU } from "date-fns/locale"
-import { renderWithIntl } from "~tests"
+import { vi } from "vitest"
 import {
   DateRangeInputField,
   DateRangeInputFieldProps,
@@ -25,9 +25,7 @@ const DateRangeInputFieldWrapper = (
 
 describe("<DateRangeInputField />", () => {
   it("has unique ids for both inputs", async () => {
-    const { container } = renderWithIntl(
-      <DateRangeInputFieldWrapper id="range" />
-    )
+    const { container } = render(<DateRangeInputFieldWrapper id="range" />)
     const inputStart = container.querySelector("#range--from")
     const inputEnd = container.querySelector("#range--to")
     await waitFor(() => {
@@ -37,14 +35,14 @@ describe("<DateRangeInputField />", () => {
   })
 
   it("has an accessible name for the fieldset", async () => {
-    renderWithIntl(<DateRangeInputFieldWrapper />)
+    render(<DateRangeInputFieldWrapper />)
     await waitFor(() => {
       expect(screen.getByRole("group", { name: "Dates" })).toBeVisible()
     })
   })
 
   it("adds description to both inputs", async () => {
-    renderWithIntl(<DateRangeInputFieldWrapper />)
+    render(<DateRangeInputFieldWrapper />)
     const inputStart = screen.getByRole("textbox", { name: "Date from" })
     const inputEnd = screen.getByRole("textbox", { name: "Date to" })
     await waitFor(() => {
@@ -56,7 +54,7 @@ describe("<DateRangeInputField />", () => {
   })
 
   it("adds validation message to description if it exists", async () => {
-    renderWithIntl(
+    render(
       <DateRangeInputFieldWrapper
         validationMessage={{
           dateStart: {
@@ -77,7 +75,7 @@ describe("<DateRangeInputField />", () => {
 
   describe("Disabled", () => {
     it("disables both inputs", async () => {
-      renderWithIntl(<DateRangeInputFieldWrapper disabled />)
+      render(<DateRangeInputFieldWrapper disabled />)
       const inputStart = screen.getByRole("textbox", { name: "Date from" })
       const inputEnd = screen.getByRole("textbox", { name: "Date to" })
       await waitFor(() => {
@@ -89,7 +87,7 @@ describe("<DateRangeInputField />", () => {
 
   describe("Refs", () => {
     it("correctly passes through both input refs", async () => {
-      const onButtonClick = jest.fn()
+      const onButtonClick = vi.fn()
 
       const Wrapper = (): JSX.Element => {
         const inputStartDateRef = useRef<HTMLInputElement>(null)
@@ -119,7 +117,7 @@ describe("<DateRangeInputField />", () => {
         )
       }
 
-      renderWithIntl(<Wrapper />)
+      render(<Wrapper />)
 
       await user.click(screen.getByText("Click me"))
       expect(onButtonClick).toHaveBeenCalledWith(

package/src/Filter/FilterDateRangePicker/subcomponents/DateRangeValidationMessage/DateRangeValidationMessage.spec.tsx

@@ -1,70 +1,8 @@
 import React from "react"
-import { render, screen, within } from "@testing-library/react"
+import { render } from "@testing-library/react"
 import { DateRangeValidationMessage } from "./DateRangeValidationMessage"
 
 describe("<DateRangeValidationMessage />", () => {
-  describe("when the consumer has given it a node", () => {
-    it("will render a single validation field message", () => {
-      render(
-        <DateRangeValidationMessage
-          validationMessage={{
-            dateEnd: {
-              status: "error",
-              message: <p>Validation message</p>,
-            },
-          }}
-        />
-      )
-      expect(screen.getByText("Validation message")).toBeVisible()
-    })
-
-    it("combines multiple validation messages with the same status", () => {
-      const { container } = render(
-        <DateRangeValidationMessage
-          validationMessage={{
-            dateStart: {
-              status: "error",
-              message: '"Date from" is not a valid date selection.',
-            },
-            dateEnd: {
-              status: "error",
-              message:
-                'Date to" cannot be earlier than the "Date from" selection.',
-            },
-          }}
-        />
-      )
-      const validationList = screen.getByRole("list")
-      const { getAllByRole } = within(validationList)
-      const items = getAllByRole("listitem")
-
-      expect(items.length).toBe(2)
-      expect(container.getElementsByClassName("error").length).toBe(1)
-    })
-  })
-
-  describe("when consumer passes validationMessage object and has different status", () => {
-    it("will render two validation field messages", () => {
-      const { container } = render(
-        <DateRangeValidationMessage
-          validationMessage={{
-            dateStart: {
-              status: "error",
-              message: '"Date from" is close to the submission date.',
-            },
-            dateEnd: {
-              status: "caution",
-              message:
-                '"Date to" cannot be earlier than the "Date from" selection.',
-            },
-          }}
-        />
-      )
-      expect(container.getElementsByClassName("error").length).toBe(1)
-      expect(container.getElementsByClassName("caution").length).toBe(1)
-    })
-  })
-
   it("renders an id when passed in", () => {
     const { container } = render(
       <DateRangeValidationMessage

package/src/Filter/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/FilterDateRangePickerField.spec.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react"
-import { screen, waitFor, within } from "@testing-library/react"
+import { screen, waitFor, within, render } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
-import { renderWithIntl } from "~tests"
+import { vi } from "vitest"
 import { DateRange } from "~components/Calendar"
 import { FilterDateRangePickerField, FilterDateRangePickerFieldProps } from "."
 
@@ -36,7 +36,7 @@ const waitForI18nContent = async (): Promise<void> => {
 describe("<FilterDateRangePickerField />", () => {
   describe("Inputs", () => {
     it("has empty inputs when a date range is not provided", async () => {
-      renderWithIntl(<FilterDateRangePickerFieldWrapper />)
+      render(<FilterDateRangePickerFieldWrapper />)
       await waitForI18nContent()
 
       const inputStartDate = screen.getByLabelText("Date from")
@@ -46,7 +46,7 @@ describe("<FilterDateRangePickerField />", () => {
     })
 
     it("pre-fills the inputs when date range is provided", async () => {
-      renderWithIntl(
+      render(
         <FilterDateRangePickerFieldWrapper
           selectedRange={{
             from: new Date("2022-05-01"),
@@ -63,7 +63,7 @@ describe("<FilterDateRangePickerField />", () => {
     })
 
     it("allows customising the input labels", async () => {
-      renderWithIntl(
+      render(
         <FilterDateRangePickerFieldWrapper
           selectedRange={{
             from: new Date("2022-05-01"),
@@ -84,10 +84,10 @@ describe("<FilterDateRangePickerField />", () => {
 
     describe("onBlur", () => {
       it("updates start date input and calendar values correctly on blur", async () => {
-        const startDateOnBlur = jest.fn()
-        const endDateOnBlur = jest.fn()
+        const startDateOnBlur = vi.fn()
+        const endDateOnBlur = vi.fn()
 
-        renderWithIntl(
+        render(
           <FilterDateRangePickerFieldWrapper
             selectedRange={{
               from: new Date("2022-05-02"),
@@ -126,10 +126,10 @@ describe("<FilterDateRangePickerField />", () => {
       })
 
       it("updates end date input and calendar values correctly on blur", async () => {
-        const startDateOnBlur = jest.fn()
-        const endDateOnBlur = jest.fn()
+        const startDateOnBlur = vi.fn()
+        const endDateOnBlur = vi.fn()
 
-        renderWithIntl(
+        render(
           <FilterDateRangePickerFieldWrapper
             selectedRange={{
               from: new Date("2022-05-01"),
@@ -169,7 +169,7 @@ describe("<FilterDateRangePickerField />", () => {
     })
 
     it("updates the calendar month to match the new start date input", async () => {
-      renderWithIntl(
+      render(
         <FilterDateRangePickerFieldWrapper
           selectedRange={{
             from: new Date("2022-05-02"),
@@ -200,7 +200,7 @@ describe("<FilterDateRangePickerField />", () => {
 
   describe("Calendar", () => {
     it("shows the default month as the start month when there isn't a selected value", async () => {
-      renderWithIntl(
+      render(
         <FilterDateRangePickerFieldWrapper
           defaultMonth={new Date("2022-05-02")}
         />
@@ -211,7 +211,7 @@ describe("<FilterDateRangePickerField />", () => {
     })
 
     it("shows the selected start date month as the start month when provided", async () => {
-      renderWithIntl(
+      render(
         <FilterDateRangePickerFieldWrapper
           selectedRange={{
             from: new Date("2022-05-01"),
@@ -225,7 +225,7 @@ describe("<FilterDateRangePickerField />", () => {
     })
 
     it("shows the current month as the start month when selected start date is invalid", async () => {
-      renderWithIntl(
+      render(
         <FilterDateRangePickerFieldWrapper
           selectedRange={{
             from: new Date("potato"),
@@ -242,7 +242,7 @@ describe("<FilterDateRangePickerField />", () => {
     })
 
     it("updates the range start input when changing the start date", async () => {
-      renderWithIntl(
+      render(
         <FilterDateRangePickerFieldWrapper
           selectedRange={{
             from: new Date("2022-05-15"),
@@ -269,7 +269,7 @@ describe("<FilterDateRangePickerField />", () => {
     })
 
     it("updates the range end input when changing the end date", async () => {
-      renderWithIntl(
+      render(
         <FilterDateRangePickerFieldWrapper
           selectedRange={{
             from: new Date("2022-05-15"),
@@ -296,7 +296,7 @@ describe("<FilterDateRangePickerField />", () => {
     })
 
     it("clears the inputs when clearing the calendar value", async () => {
-      renderWithIntl(
+      render(
         <FilterDateRangePickerFieldWrapper
           selectedRange={{
             from: new Date("2022-05-15"),
@@ -332,7 +332,7 @@ describe("<FilterDateRangePickerField />", () => {
 
     describe("Custom validation", () => {
       it("shows validation messages passed in from the consumer", async () => {
-        renderWithIntl(
+        render(
           <FilterDateRangePickerFieldWrapper
             onValidate={{
               dateStart: (): void => undefined,
@@ -359,7 +359,7 @@ describe("<FilterDateRangePickerField />", () => {
 
     describe("Inbuilt validation", () => {
       it("shows inbuilt validation messages for start date", async () => {
-        const { container } = renderWithIntl(
+        const { container } = render(
           <FilterDateRangePickerFieldWrapper
             inputStartDateProps={{ labelText: "Start date" }}
           />
@@ -385,7 +385,7 @@ describe("<FilterDateRangePickerField />", () => {
       })
 
       it("shows inbuilt validation messages for end date", async () => {
-        const { container } = renderWithIntl(
+        const { container } = render(
           <FilterDateRangePickerFieldWrapper
             inputEndDateProps={{ labelText: "End date" }}
           />
@@ -408,7 +408,7 @@ describe("<FilterDateRangePickerField />", () => {
       })
 
       it("shows inbuilt validation messages for pre-existing values", async () => {
-        const { container } = renderWithIntl(
+        const { container } = render(
           <FilterDateRangePickerFieldWrapper
             selectedRange={{
               from: new Date("2022-05-15"),
@@ -436,7 +436,7 @@ describe("<FilterDateRangePickerField />", () => {
           'Date to:Cannot be earlier than the selection in "Date from"'
 
         it("shows error on updating end date input to be before start date", async () => {
-          const { container } = renderWithIntl(
+          const { container } = render(
             <FilterDateRangePickerFieldWrapper
               selectedRange={{
                 from: new Date("2022-05-15"),
@@ -462,7 +462,7 @@ describe("<FilterDateRangePickerField />", () => {
         })
 
         it("removes error on updating start date input to be before end date", async () => {
-          const { container } = renderWithIntl(
+          const { container } = render(
             <FilterDateRangePickerFieldWrapper
               selectedRange={{
                 from: new Date("2022-05-15"),
@@ -508,7 +508,7 @@ describe("<FilterDateRangePickerField />", () => {
         })
 
         it("displays only one date when the start date input is set to be before the end date", async () => {
-          const { container } = renderWithIntl(
+          const { container } = render(
             <FilterDateRangePickerFieldWrapper
               selectedRange={{
                 from: new Date("2022-05-15"),
@@ -539,7 +539,7 @@ describe("<FilterDateRangePickerField />", () => {
         })
 
         it("shows error on updating start date input to be after end date", async () => {
-          const { container } = renderWithIntl(
+          const { container } = render(
             <FilterDateRangePickerFieldWrapper
               selectedRange={{
                 from: new Date("2022-05-15"),
@@ -566,7 +566,7 @@ describe("<FilterDateRangePickerField />", () => {
         })
 
         it("shows error if the pre-existing end date is before start date", async () => {
-          const { container } = renderWithIntl(
+          const { container } = render(
             <FilterDateRangePickerFieldWrapper
               selectedRange={{
                 from: new Date("2022-05-15"),
@@ -588,7 +588,7 @@ describe("<FilterDateRangePickerField />", () => {
 
     describe("Combined validation", () => {
       it("shows custom start date validation with inbuilt end date validation", async () => {
-        const { container } = renderWithIntl(
+        const { container } = render(
           <FilterDateRangePickerFieldWrapper
             onValidate={{
               dateStart: (): void => undefined,
@@ -621,7 +621,7 @@ describe("<FilterDateRangePickerField />", () => {
       })
 
       it("shows custom end date validation with inbuilt start date validation", async () => {
-        const { container } = renderWithIntl(
+        const { container } = render(
           <FilterDateRangePickerFieldWrapper
             onValidate={{
               dateEnd: (): void => undefined,
@@ -656,7 +656,7 @@ describe("<FilterDateRangePickerField />", () => {
     })
 
     it("re-validates values when selecting a value using the calendar", async () => {
-      const { container } = renderWithIntl(
+      const { container } = render(
         <FilterDateRangePickerFieldWrapper
           selectedRange={{
             from: new Date("2022-05-10"),
@@ -687,9 +687,9 @@ describe("<FilterDateRangePickerField />", () => {
   })
 
   it("only returns a valid date to the onRangeChange function", async () => {
-    const onRangeChange = jest.fn()
+    const onRangeChange = vi.fn()
 
-    const { getByLabelText } = renderWithIntl(
+    const { getByLabelText } = render(
       <FilterDateRangePickerFieldWrapper
         selectedRange={{
           from: new Date("2022-05-10"),

package/src/Filter/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/hooks/useEndDateValidation.spec.ts

@@ -1,6 +1,5 @@
 import { act } from "react"
-import { waitFor, renderHook } from "@testing-library/react"
-import { renderWithIntl } from "~tests"
+import { waitFor, renderHook, render } from "@testing-library/react"
 import { useEndDateValidation } from "./useEndDateValidation"
 
 describe("useEndDateValidation()", () => {
@@ -25,9 +24,7 @@ describe("useEndDateValidation()", () => {
 
       expect(result.current.validationMessage?.status).toBe("error")
 
-      const { container } = renderWithIntl(
-        result.current.validationMessage?.message
-      )
+      const { container } = render(result.current.validationMessage?.message)
       await waitFor(() => {
         expect(container).toHaveTextContent(
           "End date:potato is an invalid date"
@@ -57,9 +54,7 @@ describe("useEndDateValidation()", () => {
 
       expect(result.current.validationMessage?.status).toBe("error")
 
-      const { container } = renderWithIntl(
-        result.current.validationMessage?.message
-      )
+      const { container } = render(result.current.validationMessage?.message)
       await waitFor(() => {
         expect(container).toHaveTextContent(
           'Cannot be earlier than the selection in "Start date"'

package/src/Filter/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/hooks/useStartDateValidation.spec.ts

@@ -1,6 +1,5 @@
 import { act } from "react"
-import { waitFor, renderHook } from "@testing-library/react"
-import { renderWithIntl } from "~tests"
+import { waitFor, renderHook, render } from "@testing-library/react"
 import { useStartDateValidation } from "./useStartDateValidation"
 
 describe("useStartDateValidation()", () => {
@@ -23,9 +22,7 @@ describe("useStartDateValidation()", () => {
 
       expect(result.current.validationMessage?.status).toBe("error")
 
-      const { container } = renderWithIntl(
-        result.current.validationMessage?.message
-      )
+      const { container } = render(result.current.validationMessage?.message)
       await waitFor(() => {
         expect(container).toHaveTextContent(
           "Start date:potato is an invalid date"

package/src/Filter/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/utils/validateEndDateBeforeStartDate.spec.ts

@@ -1,5 +1,4 @@
-import { screen, waitFor } from "@testing-library/react"
-import { renderWithIntl } from "~tests"
+import { screen, waitFor, render } from "@testing-library/react"
 import { validateEndDateBeforeStartDate } from "./validateEndDateBeforeStartDate"
 
 describe("validateEndDateBeforeStartDate()", () => {
@@ -99,7 +98,7 @@ describe("validateEndDateBeforeStartDate()", () => {
 
       expect(validationMessage?.status).toBe("error")
 
-      renderWithIntl(validationMessage?.message)
+      render(validationMessage?.message)
       await waitFor(() => {
         expect(
           screen.getByText(

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

@@ -1,8 +1,7 @@
 import React, { useState } from "react"
 import { Selection } from "@react-types/shared"
-import { waitFor } from "@testing-library/react"
+import { waitFor, render } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
-import { renderWithIntl } from "~tests"
 import { FilterMultiSelect, FilterMultiSelectProps } from "./FilterMultiSelect"
 import { ItemType } from "./types"
 import { getSelectedOptionLabels } from "./utils"
@@ -74,7 +73,7 @@ const FilterMultiSelectWrapper = ({
 
 describe("<FilterMultiSelect>", () => {
   it("opens the popover using the trigger button", async () => {
-    const { getByRole } = renderWithIntl(<FilterMultiSelectWrapper />)
+    const { getByRole } = render(<FilterMultiSelectWrapper />)
 
     const triggerButton = getByRole("button", { name: "Engineer : Front-End" })
     await user.click(triggerButton)
@@ -85,7 +84,7 @@ describe("<FilterMultiSelect>", () => {
   })
 
   it("selects an unselected option on click", async () => {
-    const { getByRole } = renderWithIntl(<FilterMultiSelectWrapper isOpen />)
+    const { getByRole } = render(<FilterMultiSelectWrapper isOpen />)
 
     const devOpsOption = getByRole("option", {
       name: "Dev-ops",
@@ -99,7 +98,7 @@ describe("<FilterMultiSelect>", () => {
   })
 
   it("deselects a selected option on click", async () => {
-    const { getByRole } = renderWithIntl(<FilterMultiSelectWrapper isOpen />)
+    const { getByRole } = render(<FilterMultiSelectWrapper isOpen />)
 
     const devOpsOption = getByRole("option", {
       name: "Front-End",
@@ -113,7 +112,7 @@ describe("<FilterMultiSelect>", () => {
   })
 
   it("filters out options which do not match the search term", async () => {
-    const { getByRole, getAllByRole } = renderWithIntl(
+    const { getByRole, getAllByRole } = render(
       <FilterMultiSelectWrapper isOpen />
     )
     expect(getAllByRole("option")).toHaveLength(5)
@@ -127,7 +126,7 @@ describe("<FilterMultiSelect>", () => {
 
   describe("Clear button", () => {
     it("deselects all options when unfiltered", async () => {
-      const { getByRole, queryAllByRole } = renderWithIntl(
+      const { getByRole, queryAllByRole } = render(
         <FilterMultiSelectWrapper
           isOpen
           selectedKeys={new Set(["id-fe", "id-devops"])}
@@ -143,7 +142,7 @@ describe("<FilterMultiSelect>", () => {
     })
 
     it("deselects only selected filtered options", async () => {
-      const { getByRole, queryAllByRole } = renderWithIntl(
+      const { getByRole, queryAllByRole } = render(
         <FilterMultiSelectWrapper
           isOpen
           selectedKeys={new Set(["id-fe", "id-devops"])}
@@ -172,7 +171,7 @@ describe("<FilterMultiSelect>", () => {
       options.filter(option => option.hasAttribute("aria-disabled"))
 
     it("selects all non-disabled options when unfiltered", async () => {
-      const { getByRole, queryAllByRole } = renderWithIntl(
+      const { getByRole, queryAllByRole } = render(
         <FilterMultiSelectWrapper isOpen selectedKeys={new Set([])} />
       )
 
@@ -187,7 +186,7 @@ describe("<FilterMultiSelect>", () => {
     })
 
     it("selects only non-disabled filtered options", async () => {
-      const { getByRole, queryAllByRole } = renderWithIntl(
+      const { getByRole, queryAllByRole } = render(
         <FilterMultiSelectWrapper isOpen selectedKeys={new Set([])} />
       )
 

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

@@ -1,6 +1,7 @@
 import React from "react"
 import { render, screen, waitFor } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
+import { vi } from "vitest"
 import { FilterTriggerButton } from "~components/Filter/FilterMultiSelect/subcomponents/Trigger"
 import { MenuPopup } from "../../subcomponents/MenuPopup"
 import {
@@ -59,7 +60,7 @@ describe("<MenuTriggerProvider /> - Visual content", () => {
     })
 
     it("fires the onOpenChange callback when the trigger is interacted", async () => {
-      const onOpenChange = jest.fn<void, [boolean]>()
+      const onOpenChange = vi.fn()
       render(<MenuTriggerProviderWrapper isOpen onOpenChange={onOpenChange} />)
 
       const trigger = screen.getByRole("button", {