@kaizen/components 1.61.0 → 1.61.2

package/src/Filter/FilterDatePicker/FilterDatePicker.spec.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react"
 import { render, screen, waitFor, within } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
-import { renderWithIntl } from "~tests"
+
 import { FilterButton } from "~components/Filter/FilterButton"
 import { FilterDatePicker, FilterDatePickerProps } from "."
 
@@ -42,9 +42,7 @@ describe("<FilterDatePicker />", () => {
 
   describe("Filter button", () => {
     it("should show the selected date in the button", async () => {
-      renderWithIntl(
-        <FilterDatePickerWrapper selectedDate={new Date("2022-05-01")} />
-      )
+      render(<FilterDatePickerWrapper selectedDate={new Date("2022-05-01")} />)
       await waitFor(() => {
         const filterButton = screen.getByRole("button", {
           name: "Drank : 1 May 2022",
@@ -54,7 +52,7 @@ describe("<FilterDatePicker />", () => {
     })
 
     it("should show the calendar when the filter button is clicked", async () => {
-      renderWithIntl(<FilterDatePickerWrapper />)
+      render(<FilterDatePickerWrapper />)
 
       const filterButton = screen.getByRole("button", {
         name: "Drank",
@@ -67,7 +65,7 @@ describe("<FilterDatePicker />", () => {
   })
 
   it("closes the popover when a valid date has been submitted via the calendar picker", async () => {
-    const { getByRole } = renderWithIntl(<FilterDatePickerWrapper />)
+    const { getByRole } = render(<FilterDatePickerWrapper />)
     const triggerButton = getByRole("button", {
       name: "Drank",
     })
@@ -90,7 +88,7 @@ describe("<FilterDatePicker />", () => {
 
   describe("Text input", () => {
     it("validates the date on blur", async () => {
-      const { getByRole, getByLabelText, getByText } = renderWithIntl(
+      const { getByRole, getByLabelText, getByText } = render(
         <FilterDatePickerWrapper />
       )
       const triggerButton = getByRole("button", {
@@ -116,7 +114,7 @@ describe("<FilterDatePicker />", () => {
 
     describe("Pressing Enter in the text input", () => {
       it("closes the popover when a valid date has been submitted via the text input field", async () => {
-        const { getByRole, getByLabelText } = renderWithIntl(
+        const { getByRole, getByLabelText } = render(
           <FilterDatePickerWrapper />
         )
         const triggerButton = getByRole("button", {
@@ -141,7 +139,7 @@ describe("<FilterDatePicker />", () => {
       })
 
       it("does not close the popover when an invalid date has been submitted via the text input field", async () => {
-        const { getByRole, getByLabelText, getByText } = renderWithIntl(
+        const { getByRole, getByLabelText, getByText } = render(
           <FilterDatePickerWrapper />
         )
         const triggerButton = getByRole("button", {
@@ -168,10 +166,9 @@ describe("<FilterDatePicker />", () => {
   })
 
   it("does not close the popover when the text input field has been cleared", async () => {
-    const { getByRole, getByLabelText, getByText, queryByText } =
-      renderWithIntl(
-        <FilterDatePickerWrapper selectedDate={new Date("32/13/2022")} />
-      )
+    const { getByRole, getByLabelText, getByText, queryByText } = render(
+      <FilterDatePickerWrapper selectedDate={new Date("32/13/2022")} />
+    )
     const triggerButton = getByRole("button", {
       name: "Drank : Invalid Date",
     })
@@ -198,7 +195,7 @@ describe("<FilterDatePicker />", () => {
   })
 
   it("does not close the popover when there is a selected date and the user navigates months", async () => {
-    const { getByRole } = renderWithIntl(
+    const { getByRole } = render(
       <FilterDatePickerWrapper selectedDate={new Date("01/01/2022")} />
     )
     const triggerButton = getByRole("button", {
@@ -224,7 +221,7 @@ describe("<FilterDatePicker />", () => {
   })
 
   it("updates the selected value in the trigger button when typing a date", async () => {
-    const { getByRole, getByLabelText } = renderWithIntl(
+    const { getByRole, getByLabelText } = render(
       <FilterDatePickerWrapper selectedDate={new Date("06-06-2022")} />
     )
     const triggerButton = getByRole("button", {

package/src/Filter/FilterDatePicker/hooks/useDateInputHandlers.spec.ts

@@ -1,16 +1,16 @@
 import { ChangeEvent, FocusEvent, KeyboardEvent } from "react"
 import { renderHook, act } from "@testing-library/react"
 import { enAU } from "date-fns/locale"
+import { vi } from "vitest"
 import * as isSelectingDayInCalendar from "~components/Calendar/utils/isSelectingDayInCalendar"
 import { useDateInputHandlers } from "./useDateInputHandlers"
-
 const locale = enAU
-const setInputValue = jest.fn()
-const onDateChange = jest.fn()
+const setInputValue = vi.fn()
+const onDateChange = vi.fn()
 
 describe("useDateInputHandlers", () => {
   beforeEach(() => {
-    jest.clearAllMocks()
+    vi.clearAllMocks()
   })
 
   describe("onChange", () => {
@@ -34,7 +34,7 @@ describe("useDateInputHandlers", () => {
     })
 
     it("calls custom onChange when provided", () => {
-      const onChangeMock = jest.fn<void, [ChangeEvent]>()
+      const onChangeMock = vi.fn()
 
       const { result } = renderHook(() =>
         useDateInputHandlers({
@@ -97,7 +97,7 @@ describe("useDateInputHandlers", () => {
     })
 
     it("calls custom onFocus when provided", () => {
-      const onFocusMock = jest.fn<void, [FocusEvent<HTMLInputElement>]>()
+      const onFocusMock = vi.fn()
 
       const { result } = renderHook(() =>
         useDateInputHandlers({
@@ -122,7 +122,7 @@ describe("useDateInputHandlers", () => {
 
   describe("onBlur", () => {
     it("does not do anything when selecting a day in the calendar", () => {
-      const onBlurMock = jest.fn<void, [FocusEvent<HTMLInputElement>]>()
+      const onBlurMock = vi.fn()
       const { result } = renderHook(() =>
         useDateInputHandlers({
           locale,
@@ -136,10 +136,7 @@ describe("useDateInputHandlers", () => {
         currentTarget: { value: "" },
       } as FocusEvent<HTMLInputElement>
 
-      const spy = jest.spyOn(
-        isSelectingDayInCalendar,
-        "isSelectingDayInCalendar"
-      )
+      const spy = vi.spyOn(isSelectingDayInCalendar, "isSelectingDayInCalendar")
       spy.mockReturnValue(true)
 
       act(() => {
@@ -238,7 +235,7 @@ describe("useDateInputHandlers", () => {
     })
 
     it("calls custom onBlur when provided on input with value", () => {
-      const onBlurMock = jest.fn<void, [FocusEvent<HTMLInputElement>]>()
+      const onBlurMock = vi.fn()
       const { result } = renderHook(() =>
         useDateInputHandlers({
           locale,
@@ -260,7 +257,7 @@ describe("useDateInputHandlers", () => {
     })
 
     it("calls custom onBlur when provided on empty", () => {
-      const onBlurMock = jest.fn<void, [FocusEvent<HTMLInputElement>]>()
+      const onBlurMock = vi.fn()
       const { result } = renderHook(() =>
         useDateInputHandlers({
           locale,
@@ -305,7 +302,7 @@ describe("useDateInputHandlers", () => {
     })
 
     it("calls onDateSubmit when provided", () => {
-      const onDateSubmit = jest.fn<void, [Date]>()
+      const onDateSubmit = vi.fn()
 
       const { result } = renderHook(() =>
         useDateInputHandlers({
@@ -330,7 +327,7 @@ describe("useDateInputHandlers", () => {
     })
 
     it("calls custom onKeyDown when provided", () => {
-      const onKeyDownMock = jest.fn<void, [KeyboardEvent]>()
+      const onKeyDownMock = vi.fn()
 
       const { result } = renderHook(() =>
         useDateInputHandlers({

package/src/Filter/FilterDatePicker/hooks/useDateValidation.spec.ts

@@ -1,6 +1,6 @@
 import { act } from "react"
-import { waitFor, renderHook } from "@testing-library/react"
-import { renderWithIntl } from "~tests"
+import { waitFor, renderHook, render } from "@testing-library/react"
+
 import { useDateValidation } from "./useDateValidation"
 
 describe("useDateValidation()", () => {
@@ -40,9 +40,7 @@ describe("useDateValidation()", () => {
 
       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("Date:potato is an invalid date")
       })

package/src/Filter/FilterDatePicker/subcomponents/FilterDatePickerField/FilterDatePickerField.spec.tsx

@@ -1,12 +1,11 @@
-import React, { useState, FocusEvent } from "react"
-import { screen, waitFor, within } from "@testing-library/react"
+import React, { useState } from "react"
+import { screen, waitFor, within, render } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
-import { renderWithIntl } from "~tests"
 import { FilterDatePickerField, FilterDatePickerFieldProps } from "."
 
 const user = userEvent.setup()
 
-const inputDateOnSubmit = jest.fn<void, [Date | undefined]>()
+const inputDateOnSubmit = vi.fn()
 
 const FilterDatePickerFieldWrapper = ({
   selectedDate,
@@ -36,19 +35,19 @@ const waitForI18nContent = async (): Promise<void> => {
 
 describe("<FilterDatePickerField />", () => {
   beforeEach(() => {
-    jest.clearAllMocks()
+    vi.clearAllMocks()
   })
 
   describe("Inputs", () => {
     it("has empty inputs when a date is not provided", async () => {
-      renderWithIntl(<FilterDatePickerFieldWrapper />)
+      render(<FilterDatePickerFieldWrapper />)
       await waitForI18nContent()
       const inputDate = screen.getByLabelText("Date")
       expect(inputDate).toHaveValue("")
     })
 
     it("pre-fills the inputs when date is provided", async () => {
-      renderWithIntl(
+      render(
         <FilterDatePickerFieldWrapper selectedDate={new Date("2022-05-01")} />
       )
       await waitForI18nContent()
@@ -57,7 +56,7 @@ describe("<FilterDatePickerField />", () => {
     })
 
     it("allows customising the input labels", async () => {
-      renderWithIntl(
+      render(
         <FilterDatePickerFieldWrapper
           selectedDate={new Date("2022-05-01")}
           inputProps={{
@@ -73,9 +72,9 @@ describe("<FilterDatePickerField />", () => {
 
     describe("onBlur", () => {
       it("updates date input and calendar values correctly on blur", async () => {
-        const inputDateOnBlur = jest.fn<void, [FocusEvent]>()
+        const inputDateOnBlur = vi.fn()
 
-        renderWithIntl(
+        render(
           <FilterDatePickerFieldWrapper
             selectedDate={new Date("2022-05-02")}
             onBlur={inputDateOnBlur}
@@ -108,7 +107,7 @@ describe("<FilterDatePickerField />", () => {
 
     describe("Press Enter key", () => {
       it("updates calendar values and calls submit when the date is valid", async () => {
-        renderWithIntl(
+        render(
           <FilterDatePickerFieldWrapper selectedDate={new Date("2022-05-02")} />
         )
         await waitForI18nContent()
@@ -134,7 +133,7 @@ describe("<FilterDatePickerField />", () => {
       })
 
       it("does not call submit when the date is invalid", async () => {
-        renderWithIntl(
+        render(
           <FilterDatePickerFieldWrapper selectedDate={new Date("2022-05-02")} />
         )
         await waitForI18nContent()
@@ -152,7 +151,7 @@ describe("<FilterDatePickerField />", () => {
     })
 
     it("updates the calendar month to match the new start date input", async () => {
-      renderWithIntl(
+      render(
         <FilterDatePickerFieldWrapper selectedDate={new Date("2022-05-02")} />
       )
       await waitForI18nContent()
@@ -175,7 +174,7 @@ describe("<FilterDatePickerField />", () => {
 
   describe("Calendar", () => {
     it("shows the default month as the start month when there isn't a selected value", async () => {
-      renderWithIntl(
+      render(
         <FilterDatePickerFieldWrapper defaultMonth={new Date("2022-05-02")} />
       )
       await waitForI18nContent()
@@ -183,7 +182,7 @@ describe("<FilterDatePickerField />", () => {
     })
 
     it("shows the selected start date month as the start month when provided", async () => {
-      renderWithIntl(
+      render(
         <FilterDatePickerFieldWrapper selectedDate={new Date("2022-05-01")} />
       )
       await waitForI18nContent()
@@ -191,9 +190,7 @@ describe("<FilterDatePickerField />", () => {
     })
 
     it("shows the current month as the start month when selected date is invalid", async () => {
-      renderWithIntl(
-        <FilterDatePickerFieldWrapper selectedDate={new Date("potato")} />
-      )
+      render(<FilterDatePickerFieldWrapper selectedDate={new Date("potato")} />)
       await waitForI18nContent()
       const currentMonth = new Date().toLocaleDateString("en-AU", {
         month: "long",
@@ -203,7 +200,7 @@ describe("<FilterDatePickerField />", () => {
     })
 
     it("calls the onDateSubmit when selecting a date", async () => {
-      renderWithIntl(
+      render(
         <FilterDatePickerFieldWrapper defaultMonth={new Date("2022-05-01")} />
       )
       const targetMonth = screen.getByRole("grid", { name: "May 2022" })
@@ -218,7 +215,7 @@ describe("<FilterDatePickerField />", () => {
     })
 
     it("updates the input when changing the date", async () => {
-      renderWithIntl(
+      render(
         <FilterDatePickerFieldWrapper selectedDate={new Date("2022-05-15")} />
       )
       await waitForI18nContent()
@@ -240,7 +237,7 @@ describe("<FilterDatePickerField />", () => {
     })
 
     it("clears the inputs when clearing the calendar value", async () => {
-      renderWithIntl(
+      render(
         <FilterDatePickerFieldWrapper selectedDate={new Date("2022-05-15")} />
       )
       await waitForI18nContent()
@@ -266,7 +263,7 @@ describe("<FilterDatePickerField />", () => {
 
     describe("Custom validation", () => {
       it("shows validation messages passed in from the consumer", async () => {
-        renderWithIntl(
+        render(
           <FilterDatePickerFieldWrapper
             onValidate={(): void => undefined}
             validationMessage={{
@@ -282,7 +279,7 @@ describe("<FilterDatePickerField />", () => {
 
     describe("Inbuilt validation", () => {
       it("shows inbuilt validation messages", async () => {
-        const { container } = renderWithIntl(<FilterDatePickerFieldWrapper />)
+        const { container } = render(<FilterDatePickerFieldWrapper />)
         await waitForI18nContent()
 
         const inputDate = screen.getByLabelText("Date")
@@ -301,7 +298,7 @@ describe("<FilterDatePickerField />", () => {
       })
 
       it("shows inbuilt validation messages for pre-existing values", async () => {
-        const { container } = renderWithIntl(
+        const { container } = render(
           <FilterDatePickerFieldWrapper
             selectedDate={new Date("2022-05-15")}
             disabledDays={[new Date("2022-05-15")]}
@@ -317,9 +314,7 @@ describe("<FilterDatePickerField />", () => {
     })
 
     it("does not call onDateSubmit when the input value is invalid", async () => {
-      const { getByLabelText } = renderWithIntl(
-        <FilterDatePickerFieldWrapper />
-      )
+      const { getByLabelText } = render(<FilterDatePickerFieldWrapper />)
       await waitForI18nContent()
 
       const inputDate = getByLabelText("Date")
@@ -333,7 +328,7 @@ describe("<FilterDatePickerField />", () => {
     })
 
     it("re-validates values when selecting a value using the calendar", async () => {
-      const { container } = renderWithIntl(
+      const { container } = render(
         <FilterDatePickerFieldWrapper
           selectedDate={new Date("potato")}
           defaultMonth={new Date("2022-05-01")}

package/src/Filter/FilterDatePicker/utils/getDateValidationHandler.spec.tsx

@@ -1,13 +1,9 @@
 import React from "react"
 import { LabelledMessage } from "~components/LabelledMessage"
-import { DateValidationResponse, ValidationMessage } from "../types"
 import { getDateValidationHandler } from "./getDateValidationHandler"
 
-const onValidate = jest.fn<void, [DateValidationResponse]>()
-const setInbuiltValidationMessage = jest.fn<
-  void,
-  [ValidationMessage | undefined]
->()
+const onValidate = vi.fn()
+const setInbuiltValidationMessage = vi.fn()
 
 describe("getDateValidationHandler()", () => {
   afterEach(() => {

package/src/Filter/FilterDatePicker/utils/validateDate.spec.ts

@@ -1,5 +1,4 @@
-import { waitFor, screen } from "@testing-library/react"
-import { renderWithIntl } from "~tests"
+import { waitFor, screen, render } from "@testing-library/react"
 import { validateDate } from "./validateDate"
 
 describe("validateDate()", () => {
@@ -41,7 +40,7 @@ describe("validateDate()", () => {
 
     expect(validationMessage?.status).toBe("error")
 
-    renderWithIntl(validationMessage?.message)
+    render(validationMessage?.message)
     await waitFor(() => {
       expect(screen.getByText("Date is invalid")).toBeVisible()
     })
@@ -67,7 +66,7 @@ describe("validateDate()", () => {
 
     expect(validationMessage?.status).toBe("error")
 
-    renderWithIntl(validationMessage?.message)
+    render(validationMessage?.message)
     await waitFor(() => {
       expect(screen.getByText("Date is invalid")).toBeVisible()
     })
@@ -93,7 +92,7 @@ describe("validateDate()", () => {
 
     expect(validationMessage?.status).toBe("error")
 
-    renderWithIntl(validationMessage?.message)
+    render(validationMessage?.message)
     await waitFor(() => {
       expect(screen.getByText("potato is an invalid date")).toBeVisible()
     })
@@ -124,7 +123,7 @@ describe("validateDate()", () => {
 
     expect(validationMessage?.status).toBe("error")
 
-    renderWithIntl(validationMessage?.message)
+    render(validationMessage?.message)
     await waitFor(() => {
       expect(
         screen.getByText("03/01/2022 is not available, try another date")

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

@@ -1,7 +1,6 @@
 import React, { useState } from "react"
 import { render, waitFor } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
-import { renderWithIntl } from "~tests"
 import { DateRange } from "~components/Calendar"
 import { FilterButton } from "~components/Filter/FilterButton"
 import { FilterDateRangePicker, FilterDateRangePickerProps } from "./index"
@@ -82,7 +81,7 @@ describe("<FilterDateRangePicker />", () => {
     })
 
     it("should show the calendar when the filter button is clicked", async () => {
-      const { queryByRole, getByRole, getByText } = renderWithIntl(
+      const { queryByRole, getByRole, getByText } = render(
         <FilterDateRangePickerWrapper defaultMonth={new Date("2022-05-01")} />
       )
       expect(queryByRole("dialog")).not.toBeInTheDocument()
@@ -96,7 +95,7 @@ describe("<FilterDateRangePicker />", () => {
     })
 
     it("should not show a date range in the button if the selected range is not valid", async () => {
-      const { getByRole, getByLabelText } = renderWithIntl(
+      const { getByRole, getByLabelText } = render(
         <FilterDateRangePickerWrapper
           selectedRange={{ from: new Date("2022-05-01") }}
         />

package/src/Filter/FilterDateRangePicker/_docs/FilterDateRangePicker.stickersheet.stories.tsx

@@ -135,6 +135,33 @@ const StickerSheetTemplate: StickerSheetStory = {
                   "data-testid": "test__filter-drp-field--validation--end",
                 }}
               />
+              <FilterDateRangePickerField
+                id="stickersheet--filter-drp-field--validation-merged"
+                label="Dates"
+                locale="en-US"
+                selectedRange={rangeFieldValidation}
+                onRangeChange={setRangeFieldValidation}
+                onValidate={{
+                  dateStart: action("Validation story: date start onValidate"),
+                  dateEnd: action("Validation story: date end onValidate"),
+                }}
+                validationMessage={{
+                  dateStart: {
+                    status: "error",
+                    message:
+                      "(Start date custom message) Jelly-filled doughnuts are my favourite!",
+                  },
+                  dateEnd: {
+                    status: "caution",
+                    message:
+                      "(End date custom message) Jelly-filled doughnuts are dangerous!",
+                  },
+                }}
+                inputEndDateProps={{
+                  "data-testid":
+                    "test__filter-drp-field--validation-merged--end",
+                }}
+              />
             </StickerSheet.Row>
           </StickerSheet.Body>
         </StickerSheet>

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