@kaizen/components 1.61.1 → 1.61.3

package/src/DatePicker/DatePicker.spec.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react"
-import { screen, waitFor, within } from "@testing-library/react"
+import { render, screen, waitFor, within } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
-import { renderWithIntl } from "~tests"
+import { vi } from "vitest"
 import { DatePicker } from "./DatePicker"
 import { DatePickerProps } from "."
 
@@ -27,14 +27,14 @@ const DatePickerWrapper = ({
 
 describe("<DatePicker />", () => {
   it("should not show the calendar initially", async () => {
-    renderWithIntl(<DatePickerWrapper />)
+    render(<DatePickerWrapper />)
     await waitFor(() => {
       expect(screen.queryByRole("dialog")).not.toBeInTheDocument()
     })
   })
 
   it("should have an empty input value when a date is not provided", async () => {
-    renderWithIntl(<DatePickerWrapper />)
+    render(<DatePickerWrapper />)
     await waitFor(() => {
       const input = screen.getByLabelText("Input label", { selector: "input" })
       expect(input).toHaveValue("")
@@ -42,7 +42,7 @@ describe("<DatePicker />", () => {
   })
 
   it("should pre-fill the input when an initial date is provided", async () => {
-    renderWithIntl(<DatePickerWrapper selectedDay={new Date("2022-03-01")} />)
+    render(<DatePickerWrapper selectedDay={new Date("2022-03-01")} />)
     await waitFor(() => {
       expect(screen.getByDisplayValue("Mar 1, 2022")).toBeInTheDocument()
     })
@@ -68,7 +68,7 @@ describe("<DatePicker />", () => {
       )
     }
 
-    renderWithIntl(<DelayedSelectedDate />)
+    render(<DelayedSelectedDate />)
     expect(screen.getByRole("combobox")).toBeInTheDocument()
     expect(screen.getByRole("combobox")).toHaveValue("")
     await waitFor(() => {
@@ -77,7 +77,7 @@ describe("<DatePicker />", () => {
   })
 
   it("allows you to tab through input, button and calendar", async () => {
-    renderWithIntl(<DatePickerWrapper />)
+    render(<DatePickerWrapper />)
     const input = screen.getByLabelText("Input label", { selector: "input" })
 
     await user.tab()
@@ -112,9 +112,7 @@ describe("<DatePicker />", () => {
   }, 6000)
 
   it("should validate and close the calendar when the user presses the Enter key while focus is in the input", async () => {
-    renderWithIntl(
-      <DatePickerWrapper disabledDates={[new Date("2022-05-01")]} />
-    )
+    render(<DatePickerWrapper disabledDates={[new Date("2022-05-01")]} />)
 
     const input = screen.getByLabelText("Input label", { selector: "input" })
     await user.click(input)
@@ -139,7 +137,7 @@ describe("<DatePicker />", () => {
 describe("<DatePicker /> - Focus element", () => {
   describe("Click on input", () => {
     beforeEach(async () => {
-      renderWithIntl(<DatePickerWrapper selectedDay={new Date("2022-03-01")} />)
+      render(<DatePickerWrapper selectedDay={new Date("2022-03-01")} />)
 
       const input = screen.getByLabelText("Input label", { selector: "input" })
       await user.click(input)
@@ -181,7 +179,7 @@ describe("<DatePicker /> - Focus element", () => {
 
   describe("Keydown arrow on input", () => {
     it("shows focus within the calendar", async () => {
-      renderWithIntl(<DatePickerWrapper selectedDay={new Date("2022-03-01")} />)
+      render(<DatePickerWrapper selectedDay={new Date("2022-03-01")} />)
 
       const input = screen.getByLabelText("Input label", { selector: "input" })
       await user.tab()
@@ -200,7 +198,7 @@ describe("<DatePicker /> - Focus element", () => {
     })
 
     it("returns focus to the input when the user escapes from the calendar", async () => {
-      renderWithIntl(<DatePickerWrapper selectedDay={new Date("2022-03-01")} />)
+      render(<DatePickerWrapper selectedDay={new Date("2022-03-01")} />)
 
       const input = screen.getByLabelText("Input label", { selector: "input" })
       await user.tab()
@@ -222,7 +220,7 @@ describe("<DatePicker /> - Focus element", () => {
 
   describe("Click on calendar button", () => {
     beforeEach(async () => {
-      renderWithIntl(<DatePickerWrapper selectedDay={new Date("2022-03-01")} />)
+      render(<DatePickerWrapper selectedDay={new Date("2022-03-01")} />)
 
       const calendarButton = screen.getByRole("button", {
         name: "Change date, Mar 1, 2022",
@@ -258,7 +256,7 @@ describe("<DatePicker /> - Focus element", () => {
     let calendarButton: HTMLElement
 
     beforeEach(async () => {
-      renderWithIntl(<DatePickerWrapper selectedDay={new Date("2022-03-01")} />)
+      render(<DatePickerWrapper selectedDay={new Date("2022-03-01")} />)
 
       calendarButton = screen.getByRole("button", {
         name: "Change date, Mar 1, 2022",
@@ -305,7 +303,7 @@ describe("<DatePicker /> - Focus element", () => {
 
 describe("<DatePicker /> - Input format", () => {
   it("formats values when focus is on the input", async () => {
-    renderWithIntl(<DatePickerWrapper selectedDay={new Date("2022-03-01")} />)
+    render(<DatePickerWrapper selectedDay={new Date("2022-03-01")} />)
 
     const input = screen.getByLabelText("Input label", { selector: "input" })
     expect(input).toHaveValue("Mar 1, 2022")
@@ -318,7 +316,7 @@ describe("<DatePicker /> - Input format", () => {
   })
 
   it("formats values when the input loses focus - onBlur", async () => {
-    renderWithIntl(<DatePickerWrapper selectedDay={new Date("2022-03-01")} />)
+    render(<DatePickerWrapper selectedDay={new Date("2022-03-01")} />)
 
     const input = screen.getByLabelText("Input label", { selector: "input" })
     expect(input).toHaveValue("Mar 1, 2022")
@@ -340,7 +338,7 @@ describe("<DatePicker /> - Input format", () => {
 describe("<DatePicker /> - Validation", () => {
   describe("Custom Validation", () => {
     it("displays custom validation message when provided (overrides inbuilt validation)", async () => {
-      renderWithIntl(
+      render(
         <DatePickerWrapper
           status="error"
           validationMessage="Custom validation message"
@@ -358,8 +356,8 @@ describe("<DatePicker /> - Validation", () => {
     })
 
     it("does not show inbuilt validation message when onValidate is set", async () => {
-      const onValidate = jest.fn()
-      renderWithIntl(
+      const onValidate = vi.fn()
+      render(
         <DatePickerWrapper
           selectedDay={new Date("potato")}
           onValidate={onValidate}
@@ -377,8 +375,8 @@ describe("<DatePicker /> - Validation", () => {
     })
 
     it("triggers validation when initial selected date is invalid", async () => {
-      const onValidate = jest.fn()
-      renderWithIntl(
+      const onValidate = vi.fn()
+      render(
         <DatePickerWrapper
           onValidate={onValidate}
           selectedDay={new Date("potato")}
@@ -390,8 +388,8 @@ describe("<DatePicker /> - Validation", () => {
     })
 
     it("triggers validation when initial selected date is disabled", async () => {
-      const onValidate = jest.fn()
-      renderWithIntl(
+      const onValidate = vi.fn()
+      render(
         <DatePickerWrapper
           onValidate={onValidate}
           disabledBefore={new Date("2022-05-15")}
@@ -404,8 +402,8 @@ describe("<DatePicker /> - Validation", () => {
     })
 
     it("does not trigger validation when initial selected date is empty", async () => {
-      const onValidate = jest.fn()
-      renderWithIntl(
+      const onValidate = vi.fn()
+      render(
         <DatePickerWrapper onValidate={onValidate} selectedDay={undefined} />
       )
       await waitFor(() => {
@@ -414,8 +412,8 @@ describe("<DatePicker /> - Validation", () => {
     })
 
     it("does not trigger validation when initial selected date is valid", async () => {
-      const onValidate = jest.fn()
-      renderWithIntl(
+      const onValidate = vi.fn()
+      render(
         <DatePickerWrapper
           onValidate={onValidate}
           selectedDay={new Date("2022-05-05")}
@@ -427,8 +425,8 @@ describe("<DatePicker /> - Validation", () => {
     })
 
     it("triggers validation when selected date is updated to invalid", async () => {
-      const onValidate = jest.fn()
-      renderWithIntl(
+      const onValidate = vi.fn()
+      render(
         <DatePickerWrapper
           onValidate={onValidate}
           defaultMonth={new Date("2022-03-01")}
@@ -451,7 +449,7 @@ describe("<DatePicker /> - Validation", () => {
 
   describe("Inbuilt Validation", () => {
     it("displays error message when selected day is invalid", async () => {
-      renderWithIntl(<DatePickerWrapper selectedDay={new Date("potato")} />)
+      render(<DatePickerWrapper selectedDay={new Date("potato")} />)
 
       await waitFor(() => {
         const icon = screen.getByLabelText("error message")
@@ -461,7 +459,7 @@ describe("<DatePicker /> - Validation", () => {
     })
 
     it("displays error message when selected day is disabled", async () => {
-      renderWithIntl(
+      render(
         <DatePickerWrapper
           disabledBefore={new Date("2022-05-15")}
           selectedDay={new Date("2022-05-05")}
@@ -476,7 +474,7 @@ describe("<DatePicker /> - Validation", () => {
     })
 
     it("displays error message when input date is invalid", async () => {
-      renderWithIntl(<DatePickerWrapper />)
+      render(<DatePickerWrapper />)
 
       const input = screen.getByLabelText("Input label", { selector: "input" })
       await user.type(input, "05/05/2022Blah")
@@ -491,9 +489,7 @@ describe("<DatePicker /> - Validation", () => {
     })
 
     it("displays error message when input date is disabled", async () => {
-      renderWithIntl(
-        <DatePickerWrapper disabledBefore={new Date("2022-05-15")} />
-      )
+      render(<DatePickerWrapper disabledBefore={new Date("2022-05-15")} />)
 
       const input = screen.getByLabelText("Input label", { selector: "input" })
       await user.type(input, "05/05/2022")

package/src/DatePicker/subcomponents/DateInputField/DateInputField.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 { enUS } from "date-fns/locale"
-import { renderWithIntl } from "~tests"
+import { vi } from "vitest"
 import { DateInputField, DateInputFieldProps } from "./DateInputField"
 
 const user = userEvent.setup()
@@ -10,8 +10,8 @@ const user = userEvent.setup()
 const defaultProps: DateInputFieldProps = {
   id: "test__date-input-field",
   labelText: "Bacon expiry",
-  onButtonClick: jest.fn(),
-  onKeyDown: jest.fn(),
+  onButtonClick: vi.fn(),
+  onKeyDown: vi.fn(),
   value: undefined,
   locale: enUS,
 }
@@ -23,7 +23,7 @@ const DateInputFieldWrapper = (
 describe("<DateInputField />", () => {
   describe("Input", () => {
     it("associates the description with the input", async () => {
-      renderWithIntl(<DateInputFieldWrapper />)
+      render(<DateInputFieldWrapper />)
       await waitFor(() => {
         expect(
           screen.getByRole("textbox", {
@@ -37,7 +37,7 @@ describe("<DateInputField />", () => {
 
   describe("Icon button", () => {
     it("has helpful label", async () => {
-      renderWithIntl(<DateInputFieldWrapper />)
+      render(<DateInputFieldWrapper />)
       await waitFor(() => {
         expect(
           screen.getByRole("button", { name: "Choose date" })
@@ -46,7 +46,7 @@ describe("<DateInputField />", () => {
     })
 
     it("has helpful label showing the current date when one is selected", async () => {
-      renderWithIntl(
+      render(
         <DateInputFieldWrapper
           value="Mar 1, 2022"
           onChange={(): void => undefined}
@@ -62,7 +62,7 @@ describe("<DateInputField />", () => {
 
   describe("States", () => {
     it("disables both input and icon button", async () => {
-      renderWithIntl(<DateInputFieldWrapper disabled />)
+      render(<DateInputFieldWrapper disabled />)
       const input = screen.getByRole("textbox", { name: "Bacon expiry" })
       const calendarButton = screen.getByRole("button", { name: "Choose date" })
       await waitFor(() => {
@@ -74,7 +74,7 @@ describe("<DateInputField />", () => {
 
   describe("Validation", () => {
     it("shows validation message", async () => {
-      renderWithIntl(
+      render(
         <DateInputFieldWrapper
           status="error"
           validationMessage="There is an error"
@@ -87,7 +87,7 @@ describe("<DateInputField />", () => {
     })
 
     it("does not show validation message when field is disabled", async () => {
-      renderWithIntl(
+      render(
         <DateInputFieldWrapper
           status="error"
           validationMessage="There is an error"
@@ -106,7 +106,7 @@ describe("<DateInputField />", () => {
 
   describe("Refs", () => {
     it("correctly passes through input and button refs", async () => {
-      const onButtonClick = jest.fn()
+      const onButtonClick = vi.fn()
 
       const Wrapper = (): JSX.Element => {
         const inputRef = useRef<HTMLInputElement>(null)
@@ -125,7 +125,7 @@ describe("<DateInputField />", () => {
               ref={ref}
               id="test__date-input-field--ref"
               labelText="Adventure time"
-              onButtonClick={jest.fn<void, []>()}
+              onButtonClick={vi.fn()}
               locale={enUS}
             />
             <button type="button" onClick={handleClick}>
@@ -135,7 +135,7 @@ describe("<DateInputField />", () => {
         )
       }
 
-      renderWithIntl(<Wrapper />)
+      render(<Wrapper />)
 
       await user.click(screen.getByText("Click me"))
       expect(onButtonClick).toHaveBeenCalledWith(

package/src/DatePicker/utils/validateDate.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 { validateDate } from "./validateDate"
 
 describe("validateDate", () => {
@@ -40,7 +39,7 @@ describe("validateDate", () => {
     })
     expect(newDate).toBeUndefined()
 
-    renderWithIntl(validationMessage)
+    render(validationMessage)
     await waitFor(() => {
       expect(screen.getByText("Date is invalid")).toBeVisible()
     })
@@ -64,7 +63,7 @@ describe("validateDate", () => {
     })
     expect(newDate).toBeUndefined()
 
-    renderWithIntl(validationMessage)
+    render(validationMessage)
     await waitFor(() => {
       expect(screen.getByText("Date is invalid")).toBeVisible()
     })
@@ -88,7 +87,7 @@ describe("validateDate", () => {
     })
     expect(newDate).toBeUndefined()
 
-    renderWithIntl(validationMessage)
+    render(validationMessage)
     await waitFor(() => {
       expect(screen.getByText("potato is an invalid date")).toBeVisible()
     })
@@ -117,7 +116,7 @@ describe("validateDate", () => {
     })
     expect(newDate).toBeUndefined()
 
-    renderWithIntl(validationMessage)
+    render(validationMessage)
     await waitFor(() => {
       expect(
         screen.getByText("03/01/2022 is not available, try another date")

package/src/EmptyState/EmptyState.spec.tsx

@@ -2,7 +2,7 @@ import React from "react"
 import { cleanup, render } from "@testing-library/react"
 import { EmptyState, EmptyStateProps } from "./EmptyState"
 
-jest.mock("~components/Illustration", () => ({
+vi.mock("~components/Illustration", () => ({
   EmptyStatesPositive: (): JSX.Element => (
     <div>EmptyStatesPositive_Component</div>
   ),

package/src/ErrorPage/ErrorPage.spec.tsx

@@ -1,28 +1,28 @@
 import React from "react"
-import { screen, waitFor } from "@testing-library/react"
-import { renderWithIntl } from "~tests"
+import { screen, waitFor, render } from "@testing-library/react"
+import { vi } from "vitest"
 import { ErrorPage } from "./ErrorPage"
 
 describe("<ErrorPage />", () => {
   beforeAll(() => {
-    window.HTMLMediaElement.prototype.load = jest.fn()
-    window.HTMLMediaElement.prototype.play = jest
+    window.HTMLMediaElement.prototype.load = vi.fn()
+    window.HTMLMediaElement.prototype.play = vi
       .fn()
       .mockResolvedValue(undefined)
-    window.HTMLMediaElement.prototype.pause = jest.fn()
-    window.matchMedia = jest.fn().mockImplementation(() => ({
+    window.HTMLMediaElement.prototype.pause = vi.fn()
+    window.matchMedia = vi.fn().mockImplementation(() => ({
       media: "",
       onchange: null,
-      addListener: jest.fn(),
-      removeListener: jest.fn(),
-      addEventListener: jest.fn(),
-      removeEventListener: jest.fn(),
+      addListener: vi.fn(),
+      removeListener: vi.fn(),
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
       matches: false,
     }))
   })
 
   it("shows the correct content for error 400", async () => {
-    renderWithIntl(<ErrorPage code="400" />)
+    render(<ErrorPage code="400" />)
     await waitFor(() => {
       expect(screen.getByText("Problem loading page")).toBeVisible()
       expect(
@@ -35,7 +35,7 @@ describe("<ErrorPage />", () => {
   })
 
   it("shows the correct content for error 401", async () => {
-    renderWithIntl(<ErrorPage code="401" />)
+    render(<ErrorPage code="401" />)
     await waitFor(() => {
       expect(screen.getByText("You can't view this page")).toBeVisible()
       expect(
@@ -48,7 +48,7 @@ describe("<ErrorPage />", () => {
   })
 
   it("shows the correct content for error 403", async () => {
-    renderWithIntl(<ErrorPage code="403" />)
+    render(<ErrorPage code="403" />)
     await waitFor(() => {
       expect(screen.getByText("You can't view this page")).toBeVisible()
       expect(
@@ -61,7 +61,7 @@ describe("<ErrorPage />", () => {
   })
 
   it("shows the correct content for error 404", async () => {
-    renderWithIntl(<ErrorPage code="404" />)
+    render(<ErrorPage code="404" />)
     await waitFor(() => {
       expect(screen.getByText("Page not found")).toBeVisible()
       expect(
@@ -74,7 +74,7 @@ describe("<ErrorPage />", () => {
   })
 
   it("shows the correct content for error 422", async () => {
-    renderWithIntl(<ErrorPage code="422" />)
+    render(<ErrorPage code="422" />)
     await waitFor(() => {
       expect(screen.getByText("Change couldn't be made")).toBeVisible()
       expect(
@@ -87,7 +87,7 @@ describe("<ErrorPage />", () => {
   })
 
   it("shows the correct content for error 500", async () => {
-    renderWithIntl(<ErrorPage code="500" />)
+    render(<ErrorPage code="500" />)
     await waitFor(() => {
       expect(
         screen.getByText("Something's gone wrong on our side")
@@ -102,7 +102,7 @@ describe("<ErrorPage />", () => {
   })
 
   it("shows the correct content for error 502", async () => {
-    renderWithIntl(<ErrorPage code="502" />)
+    render(<ErrorPage code="502" />)
     await waitFor(() => {
       expect(screen.getByText("You can't view this page")).toBeVisible()
       expect(
@@ -115,7 +115,7 @@ describe("<ErrorPage />", () => {
   })
 
   it("shows the correct content for error 503", async () => {
-    renderWithIntl(<ErrorPage code="503" />)
+    render(<ErrorPage code="503" />)
     await waitFor(() => {
       expect(screen.getByText("You can't view this page")).toBeVisible()
       expect(
@@ -128,7 +128,7 @@ describe("<ErrorPage />", () => {
   })
 
   it("shows the correct content for error 504", async () => {
-    renderWithIntl(<ErrorPage code="504" />)
+    render(<ErrorPage code="504" />)
     await waitFor(() => {
       expect(screen.getByText("You can't view this page")).toBeVisible()
       expect(