@kaizen/components 1.52.1 → 1.53.0

package/src/Filter/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/hooks/{useStartDateValidation.spec.tsx → useStartDateValidation.spec.ts}

@@ -1,11 +1,12 @@
-import React, { act } from "react"
+import { act } from "react"
+import { waitFor } from "@testing-library/react"
 import { renderHook } from "@testing-library/react-hooks"
-import { LabelledMessage } from "~components/LabelledMessage"
+import { renderWithIntl } from "~tests"
 import { useStartDateValidation } from "./useStartDateValidation"
 
 describe("useStartDateValidation()", () => {
   describe("validateDate()", () => {
-    it("returns a validation message and no date", () => {
+    it("returns a validation message and no date", async () => {
       const { result } = renderHook(() =>
         useStartDateValidation({
           inputLabel: "Start date",
@@ -21,14 +22,15 @@ describe("useStartDateValidation()", () => {
         expect(newDate).toBeUndefined()
       })
 
-      expect(result.current.validationMessage).toStrictEqual({
-        status: "error",
-        message: (
-          <LabelledMessage
-            label="Start date"
-            message="potato is an invalid date"
-          />
-        ),
+      expect(result.current.validationMessage?.status).toBe("error")
+
+      const { container } = renderWithIntl(
+        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,3 +1,5 @@
+import { screen, waitFor } from "@testing-library/react"
+import { renderWithIntl } from "~tests"
 import { validateEndDateBeforeStartDate } from "./validateEndDateBeforeStartDate"
 
 describe("validateEndDateBeforeStartDate()", () => {
@@ -83,19 +85,28 @@ describe("validateEndDateBeforeStartDate()", () => {
       })
     })
 
-    it("returns a response with an error status and validation message", () => {
-      expect(result.validationResponse).toStrictEqual({
+    it("returns a response with an error status and validation message", async () => {
+      const { validationMessage, ...response } = result.validationResponse
+
+      expect(response).toStrictEqual({
         date: endDate,
         inputValue: endDateInputValue,
-        validationMessage: {
-          status: "error",
-          message: 'Cannot be earlier than the selection in "Start date"',
-        },
         isInvalid: false,
         isDisabled: false,
         isEmpty: false,
         isValidDate: true,
       })
+
+      expect(validationMessage?.status).toBe("error")
+
+      renderWithIntl(validationMessage?.message)
+      await waitFor(() => {
+        expect(
+          screen.getByText(
+            'Cannot be earlier than the selection in "Start date"'
+          )
+        ).toBeVisible()
+      })
     })
 
     it("returns the new end date", () => {

package/src/Filter/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/utils/{validateEndDateBeforeStartDate.ts → validateEndDateBeforeStartDate.tsx}

@@ -1,4 +1,5 @@
 import React from "react"
+import { FormattedMessage } from "@cultureamp/i18n-react-intl"
 import { DateValidationResponse } from "~components/Filter/FilterDatePicker"
 import { getNodeText } from "~utils/getNodeText"
 import { isValidRange } from "./isValidRange"
@@ -37,9 +38,14 @@ export const validateEndDateBeforeStartDate = ({
         ...baseResponse,
         validationMessage: {
           status: "error",
-          message: `Cannot be earlier than the selection in "${getNodeText(
-            startDateFieldLabel
-          )}"`,
+          message: (
+            <FormattedMessage
+              id="date.validation.rangeEndBeforeRangeStart"
+              defaultMessage='Cannot be earlier than the selection in "{startDateFieldLabel}"'
+              description="Error message when the user tries to select an end date earlier than the start date"
+              values={{ startDateFieldLabel: getNodeText(startDateFieldLabel) }}
+            />
+          ),
         },
       },
       newDate: endDate,

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

@@ -1,7 +1,8 @@
 import React, { useState } from "react"
 import { Selection } from "@react-types/shared"
-import { render, waitFor } from "@testing-library/react"
+import { waitFor } 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"
@@ -72,13 +73,8 @@ const FilterMultiSelectWrapper = ({
 }
 
 describe("<FilterMultiSelect>", () => {
-  it("does not show the popover initially", () => {
-    const { queryByRole } = render(<FilterMultiSelectWrapper />)
-    expect(queryByRole("listbox")).not.toBeInTheDocument()
-  })
-
   it("opens the popover using the trigger button", async () => {
-    const { getByRole } = render(<FilterMultiSelectWrapper />)
+    const { getByRole } = renderWithIntl(<FilterMultiSelectWrapper />)
 
     const triggerButton = getByRole("button", { name: "Engineer : Front-End" })
     await user.click(triggerButton)
@@ -89,7 +85,7 @@ describe("<FilterMultiSelect>", () => {
   })
 
   it("selects an unselected option on click", async () => {
-    const { getByRole } = render(<FilterMultiSelectWrapper isOpen />)
+    const { getByRole } = renderWithIntl(<FilterMultiSelectWrapper isOpen />)
 
     const devOpsOption = getByRole("option", {
       name: "Dev-ops",
@@ -103,7 +99,7 @@ describe("<FilterMultiSelect>", () => {
   })
 
   it("deselects a selected option on click", async () => {
-    const { getByRole } = render(<FilterMultiSelectWrapper isOpen />)
+    const { getByRole } = renderWithIntl(<FilterMultiSelectWrapper isOpen />)
 
     const devOpsOption = getByRole("option", {
       name: "Front-End",
@@ -117,7 +113,7 @@ describe("<FilterMultiSelect>", () => {
   })
 
   it("filters out options which do not match the search term", async () => {
-    const { getByRole, getAllByRole } = render(
+    const { getByRole, getAllByRole } = renderWithIntl(
       <FilterMultiSelectWrapper isOpen />
     )
     expect(getAllByRole("option")).toHaveLength(5)
@@ -131,7 +127,7 @@ describe("<FilterMultiSelect>", () => {
 
   describe("Clear button", () => {
     it("deselects all options when unfiltered", async () => {
-      const { getByRole, queryAllByRole } = render(
+      const { getByRole, queryAllByRole } = renderWithIntl(
         <FilterMultiSelectWrapper
           isOpen
           selectedKeys={new Set(["id-fe", "id-devops"])}
@@ -147,7 +143,7 @@ describe("<FilterMultiSelect>", () => {
     })
 
     it("deselects only selected filtered options", async () => {
-      const { getByRole, queryAllByRole } = render(
+      const { getByRole, queryAllByRole } = renderWithIntl(
         <FilterMultiSelectWrapper
           isOpen
           selectedKeys={new Set(["id-fe", "id-devops"])}
@@ -176,7 +172,7 @@ describe("<FilterMultiSelect>", () => {
       options.filter(option => option.hasAttribute("aria-disabled"))
 
     it("selects all non-disabled options when unfiltered", async () => {
-      const { getByRole, queryAllByRole } = render(
+      const { getByRole, queryAllByRole } = renderWithIntl(
         <FilterMultiSelectWrapper isOpen selectedKeys={new Set([])} />
       )
 
@@ -191,7 +187,7 @@ describe("<FilterMultiSelect>", () => {
     })
 
     it("selects only non-disabled filtered options", async () => {
-      const { getByRole, queryAllByRole } = render(
+      const { getByRole, queryAllByRole } = renderWithIntl(
         <FilterMultiSelectWrapper isOpen selectedKeys={new Set([])} />
       )
 

package/src/Filter/FilterMultiSelect/_docs/FilterMultiSelect.mdx

@@ -8,7 +8,7 @@ import * as FilterMultiSelectStories from "./FilterMultiSelect.stories"
 
 <ResourceLinks
   sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/FilterMultiSelect"
-  className="!mb-8"
+
 />
 
 <KAIOInstallation exportNames="FilterMultiSelect" />