@kaizen/components 1.52.1 → 1.54.0

package/src/Filter/FilterBar/FilterBar.spec.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from "react"
-import { render, screen, waitFor, within } from "@testing-library/react"
+import { screen, waitFor, within } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
+import { renderWithIntl } from "~tests"
 import { FilterMultiSelect } from "../index"
 import { FilterBar, FilterBarProps } from "./FilterBar"
 import { useFilterBarContext } from "./context/FilterBarContext"
@@ -137,11 +138,21 @@ const FilterBarWrapper = <T extends FiltersValues>({
   )
 }
 
+const waitForI18nContent = async (): Promise<void> => {
+  await waitFor(() => {
+    expect(
+      screen.getByRole("button", { name: "Clear all filters" })
+    ).toBeVisible()
+  })
+}
+
 describe("<FilterBar />", () => {
-  it("renders filters in the provided order", () => {
-    const { getAllByTestId } = render(
+  it("renders filters in the provided order", async () => {
+    const { getAllByTestId } = renderWithIntl(
       <FilterBarWrapper<ValuesSimple> filters={simpleFilters} />
     )
+    await waitForI18nContent()
+
     const filters = getAllByTestId(TEST_ID__FILTER)
     expect(filters.length).toBe(3)
     expect(filters[0]).toHaveTextContent("Flavour")
@@ -150,7 +161,7 @@ describe("<FilterBar />", () => {
   })
 
   it("retains Filter accessibility", async () => {
-    render(<FilterBarWrapper filters={simpleFilters} />)
+    renderWithIntl(<FilterBarWrapper filters={simpleFilters} />)
 
     const filterButton = screen.getByRole("button", { name: "Flavour" })
     await user.click(filterButton)
@@ -162,9 +173,11 @@ describe("<FilterBar />", () => {
 
   describe("Removable filters", () => {
     it("shows inactive filters in the Add Filters menu only", async () => {
-      const { getByRole, queryByText } = render(
+      const { getByRole, queryByText } = renderWithIntl(
         <FilterBarWrapper<ValuesRemovable> filters={filtersRemovable} />
       )
+      await waitForI18nContent()
+
       expect(queryByText("Topping")).not.toBeInTheDocument()
 
       const addFiltersButton = getByRole("button", { name: "Add Filters" })
@@ -178,13 +191,14 @@ describe("<FilterBar />", () => {
       })
     })
 
-    it("shows removable filter as active if there is a default value", () => {
-      const { getByRole } = render(
+    it("shows removable filter as active if there is a default value", async () => {
+      const { getByRole } = renderWithIntl(
         <FilterBarWrapper<ValuesRemovable>
           filters={filtersRemovable}
           defaultValues={{ topping: "pearls" }}
         />
       )
+      await waitForI18nContent()
       expect(getByRole("button", { name: "Topping : Pearls" })).toBeVisible()
       expect(
         getByRole("button", { name: "Remove filter - Topping" })
@@ -192,12 +206,13 @@ describe("<FilterBar />", () => {
     })
 
     it("does not show active removable filters in the Add Filters menu", async () => {
-      const { getByRole } = render(
+      const { getByRole } = renderWithIntl(
         <FilterBarWrapper<ValuesRemovable>
           filters={filtersRemovable}
           defaultValues={{ topping: "pearls" }}
         />
       )
+      await waitForI18nContent()
 
       const addFiltersButton = getByRole("button", { name: "Add Filters" })
       await user.click(addFiltersButton)
@@ -210,12 +225,13 @@ describe("<FilterBar />", () => {
     })
 
     it("clears the value of a filter if it is removed", async () => {
-      const { getByRole } = render(
+      const { getByRole } = renderWithIntl(
         <FilterBarWrapper<ValuesRemovable>
           filters={filtersRemovable}
           defaultValues={{ topping: "pearls" }}
         />
       )
+      await waitForI18nContent()
 
       const filterButton = getByRole("button", { name: "Topping : Pearls" })
       expect(filterButton).toBeVisible()
@@ -242,7 +258,7 @@ describe("<FilterBar />", () => {
     })
 
     it("adds new filters in the provided order", async () => {
-      const { getByRole, getAllByTestId } = render(
+      const { getByRole, getAllByTestId } = renderWithIntl(
         <FilterBarWrapper<ValuesSimple>
           filters={simpleFilters.map(filter => ({
             ...filter,
@@ -250,6 +266,7 @@ describe("<FilterBar />", () => {
           }))}
         />
       )
+      await waitForI18nContent()
 
       const addFiltersButton = getByRole("button", { name: "Add Filters" })
       await user.click(addFiltersButton)
@@ -275,18 +292,19 @@ describe("<FilterBar />", () => {
 
   describe("Dependent filters", () => {
     describe("Condition not met", () => {
-      it("does not show a dependent filter", () => {
-        const { queryByRole, getByRole } = render(
+      it("does not show a dependent filter", async () => {
+        const { queryByRole, getByRole } = renderWithIntl(
           <FilterBarWrapper filters={filtersDependent} />
         )
+        await waitForI18nContent()
         expect(
           queryByRole("button", { name: "Topping" })
         ).not.toBeInTheDocument()
         expect(getByRole("button", { name: "Add Filters" })).toBeDisabled()
       })
 
-      it("clears the value if the filter is not usable", () => {
-        const { getByTestId } = render(
+      it("clears the value if the filter is not usable", async () => {
+        const { getByTestId } = renderWithIntl(
           <FilterBarWrapper
             filters={filtersDependent}
             defaultValues={{
@@ -294,6 +312,7 @@ describe("<FilterBar />", () => {
             }}
           />
         )
+        await waitForI18nContent()
         expect(getByTestId("testid__values").textContent).toEqual(
           JSON.stringify({})
         )
@@ -302,9 +321,10 @@ describe("<FilterBar />", () => {
 
     describe("Condition met", () => {
       it("shows a non-removable dependent filter in active filters", async () => {
-        const { queryByRole, getByRole, findByRole } = render(
+        const { queryByRole, getByRole, findByRole } = renderWithIntl(
           <FilterBarWrapper filters={filtersDependent} />
         )
+        await waitForI18nContent()
 
         const flavourButton = getByRole("button", { name: "Flavour" })
         expect(
@@ -323,7 +343,7 @@ describe("<FilterBar />", () => {
       })
 
       it("shows a removable dependent filter in Add Filters menu", async () => {
-        const { getByRole, findByRole } = render(
+        const { getByRole, findByRole } = renderWithIntl(
           <FilterBarWrapper
             filters={[
               {
@@ -351,6 +371,7 @@ describe("<FilterBar />", () => {
             ]}
           />
         )
+        await waitForI18nContent()
 
         const addFiltersButton = getByRole("button", { name: "Add Filters" })
         expect(addFiltersButton).toBeDisabled()
@@ -400,7 +421,9 @@ describe("<FilterBar />", () => {
           )
         }
 
-        const { queryByRole, getByRole } = render(<Wrapper />)
+        const { queryByRole, getByRole } = renderWithIntl(<Wrapper />)
+        await waitForI18nContent()
+
         expect(
           queryByRole("button", { name: "Topping : Pearls" })
         ).not.toBeInTheDocument()
@@ -440,7 +463,9 @@ describe("<FilterBar />", () => {
           )
         }
 
-        const { getByRole } = render(<Wrapper />)
+        const { getByRole } = renderWithIntl(<Wrapper />)
+        await waitForI18nContent()
+
         expect(
           getByRole("button", { name: "Flavour : Jasmine Milk Tea" })
         ).toBeVisible()
@@ -533,12 +558,13 @@ describe("<FilterBar />", () => {
           },
         ] satisfies Filters<ValuesComplexDeps>
 
-        const { queryByRole, getByRole } = render(
+        const { queryByRole, getByRole } = renderWithIntl(
           <FilterBarWrapper
             filters={filters}
             defaultValues={{ milk: "full-cream" }}
           />
         )
+        await waitForI18nContent()
 
         const coffeeButton = getByRole("button", { name: "Coffee" })
         expect(coffeeButton).toBeVisible()
@@ -611,7 +637,7 @@ describe("<FilterBar />", () => {
 
   describe("Clear all", () => {
     it("clears all the values of all the filters", async () => {
-      const { getByRole } = render(
+      const { getByRole } = renderWithIntl(
         <FilterBarWrapper<ValuesSimple>
           filters={simpleFilters}
           defaultValues={{
@@ -621,6 +647,7 @@ describe("<FilterBar />", () => {
           }}
         />
       )
+      await waitForI18nContent()
 
       const flavourButton = getByRole("button", {
         name: "Flavour : Jasmine Milk Tea",
@@ -644,7 +671,7 @@ describe("<FilterBar />", () => {
     })
 
     it("removes all removable filters", async () => {
-      const { getByRole } = render(
+      const { getByRole } = renderWithIntl(
         <FilterBarWrapper<ValuesRemovable>
           filters={filtersRemovable}
           defaultValues={{
@@ -653,6 +680,7 @@ describe("<FilterBar />", () => {
           }}
         />
       )
+      await waitForI18nContent()
 
       const flavourButton = getByRole("button", {
         name: "Flavour : Jasmine Milk Tea",
@@ -712,7 +740,8 @@ describe("<FilterBar />", () => {
         )
       }
 
-      const { getByRole } = render(<Wrapper />)
+      const { getByRole } = renderWithIntl(<Wrapper />)
+      await waitForI18nContent()
 
       const flavourButton = getByRole("button", { name: "Flavour" })
       expect(flavourButton.textContent).toEqual("Flavour")
@@ -767,7 +796,8 @@ describe("<FilterBar />", () => {
         )
       }
 
-      const { getByRole, queryByRole } = render(<Wrapper />)
+      const { getByRole, queryByRole } = renderWithIntl(<Wrapper />)
+      await waitForI18nContent()
 
       expect(queryByRole("button", { name: "Flavour" })).not.toBeInTheDocument()
 
@@ -877,7 +907,7 @@ describe("<FilterBar />", () => {
       ] satisfies Filters<AsyncValues>
 
       it("can re-fetch options with all active filter values pulled off of the FilterBarContext", async () => {
-        const { getByRole, queryByRole } = render(
+        const { getByRole, queryByRole } = renderWithIntl(
           <FilterBarWrapper<AsyncValues> filters={config} defaultValues={{}} />
         )
 
@@ -951,9 +981,10 @@ describe("<FilterBar />", () => {
       ] satisfies Filters<CycleFilterValues>
 
       it("opens the Custom Date filter when Cycle's 'custom' value is selected", async () => {
-        const { getByRole } = render(
+        const { getByRole } = renderWithIntl(
           <FilterBarWrapper<CycleFilterValues> filters={cycleFilters} />
         )
+        await waitForI18nContent()
 
         const customDateButton = getByRole("button", { name: "Custom Date" })
         expect(customDateButton).toHaveAttribute("aria-expanded", "false")

package/src/Filter/FilterBar/_docs/FilterBar.mdx

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

package/src/Filter/FilterBar/subcomponents/AddFiltersMenu/AddFiltersMenu.spec.tsx

@@ -1,6 +1,7 @@
 import React from "react"
-import { render, waitFor } from "@testing-library/react"
+import { waitFor, screen } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
+import { renderWithIntl } from "~tests"
 import {
   FilterBarProvider,
   FilterBarProviderProps,
@@ -52,22 +53,25 @@ describe("<AddFiltersMenu />", () => {
       },
     ] satisfies Filters<Values>
 
-    const { getByRole, queryByRole } = render(
-      <AddFiltersMenuWrapper filters={filters} />
-    )
+    renderWithIntl(<AddFiltersMenuWrapper filters={filters} />)
 
-    const addFiltersButton = getByRole("button", { name: "Add Filters" })
+    await waitFor(() => {
+      expect(screen.getByRole("button", { name: "Add Filters" })).toBeVisible()
+    })
+    const addFiltersButton = screen.getByRole("button", { name: "Add Filters" })
     await user.click(addFiltersButton)
 
     await waitFor(() => {
-      expect(getByRole("list")).toBeVisible()
+      expect(screen.getByRole("list")).toBeVisible()
     })
-    expect(getByRole("button", { name: "Coffee" })).toBeVisible()
-    expect(queryByRole("button", { name: "Tea" })).not.toBeInTheDocument()
-    expect(getByRole("button", { name: "Milk" })).toBeVisible()
+    expect(screen.getByRole("button", { name: "Coffee" })).toBeVisible()
+    expect(
+      screen.queryByRole("button", { name: "Tea" })
+    ).not.toBeInTheDocument()
+    expect(screen.getByRole("button", { name: "Milk" })).toBeVisible()
   })
 
-  it("disables the Add Filters button when there are no inactive filters", () => {
+  it("disables the Add Filters button when there are no inactive filters", async () => {
     const filters = [
       {
         id: "coffee",
@@ -76,9 +80,13 @@ describe("<AddFiltersMenu />", () => {
       },
     ] satisfies Filters<Values>
 
-    const { getByRole } = render(<AddFiltersMenuWrapper filters={filters} />)
+    renderWithIntl(<AddFiltersMenuWrapper filters={filters} />)
 
-    const addFiltersButton = getByRole("button", { name: "Add Filters" })
-    expect(addFiltersButton).toBeDisabled()
+    await waitFor(() => {
+      const addFiltersButton = screen.getByRole("button", {
+        name: "Add Filters",
+      })
+      expect(addFiltersButton).toBeDisabled()
+    })
   })
 })

package/src/Filter/FilterBar/subcomponents/AddFiltersMenu/AddFiltersMenu.tsx

@@ -1,10 +1,20 @@
 import React from "react"
+import { useIntl } from "@cultureamp/i18n-react-intl"
 import { Button } from "~components/Button"
 import { AddIcon } from "~components/Icon"
 import { Menu, MenuList, MenuItem } from "~components/Menu"
 import { useFilterBarContext } from "../../context/FilterBarContext"
 
 export const AddFiltersMenu = (): JSX.Element => {
+  const { formatMessage } = useIntl()
+
+  const menuButtonLabel = formatMessage({
+    id: "filterBar.addFiltersMenu.buttonLabel",
+    defaultMessage: "Add Filters",
+    description:
+      "Menu button label to show additional available filter options",
+  })
+
   const { getInactiveFilters, showFilter } = useFilterBarContext()
   const inactiveFilters = getInactiveFilters()
 
@@ -12,7 +22,7 @@ export const AddFiltersMenu = (): JSX.Element => {
     <Menu
       button={
         <Button
-          label="Add Filters"
+          label={menuButtonLabel}
           secondary
           disabled={inactiveFilters.length === 0}
           icon={<AddIcon role="presentation" />}

package/src/Filter/FilterBar/subcomponents/ClearAllButton/ClearAllButton.tsx

@@ -1,15 +1,30 @@
 import React from "react"
+import { useIntl } from "@cultureamp/i18n-react-intl"
 import { Button } from "~components/Button"
 import { useFilterBarContext } from "../../context/FilterBarContext"
 import styles from "./ClearAllButton.module.scss"
 
 export const ClearAllButton = (): JSX.Element => {
+  const { formatMessage } = useIntl()
+
+  const clearButtonLabel = formatMessage({
+    id: "filterBar.clearAllButton.label",
+    defaultMessage: "Clear all",
+    description: "Button label to clear all values within the filter bar",
+  })
+
+  const clearButtonAriaLabel = formatMessage({
+    id: "filterBar.clearAllButton.ariaLabel",
+    defaultMessage: "Clear all filters",
+    description: "Button aria-label to clear all values within the filter bar",
+  })
+
   const { clearAllFilters } = useFilterBarContext()
 
   return (
     <Button
-      label="Clear all"
-      aria-label="Clear all filters"
+      label={clearButtonLabel}
+      aria-label={clearButtonAriaLabel}
       classNameOverride={styles.clearAllButton}
       secondary
       onClick={clearAllFilters}

package/src/Filter/FilterBar/subcomponents/FilterBarButton/FilterBarButton.spec.tsx

@@ -1,6 +1,7 @@
 import React from "react"
-import { render, waitFor } from "@testing-library/react"
+import { screen, waitFor } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
+import { renderWithIntl } from "~tests"
 import { FilterBarProvider } from "../../context/FilterBarContext"
 import { FilterBarButton, FilterBarButtonProps } from "./FilterBarButton"
 
@@ -41,20 +42,28 @@ const FilterBarButtonWrapper = (
 )
 
 describe("<FilterBarButton />", () => {
-  it("does not show a remove button when it is not removable", () => {
-    const { getByRole, queryByRole } = render(<FilterBarButtonWrapper />)
-    expect(getByRole("button", { name: "Coffee" })).toBeVisible()
+  it("does not show a remove button when it is not removable", async () => {
+    const { getByRole, queryByRole } = renderWithIntl(
+      <FilterBarButtonWrapper />
+    )
+    await waitFor(() => {
+      expect(getByRole("button", { name: "Coffee" })).toBeVisible()
+    })
     expect(
       queryByRole("button", { name: "Remove filter - Coffee" })
     ).not.toBeInTheDocument()
   })
 
   it("shows a remove button when it is removable", async () => {
-    const { getByRole } = render(<FilterBarButtonWrapper isRemovable />)
-    const filterButton = getByRole("button", { name: "Coffee" })
-    expect(filterButton).toBeVisible()
+    renderWithIntl(<FilterBarButtonWrapper isRemovable />)
+    const filterButton = await screen.findByRole("button", { name: "Coffee" })
+    await waitFor(() => {
+      expect(filterButton).toBeVisible()
+    })
 
-    const removeButton = getByRole("button", { name: "Remove filter - Coffee" })
+    const removeButton = screen.getByRole("button", {
+      name: "Remove filter - Coffee",
+    })
     expect(removeButton).toBeVisible()
 
     await user.click(removeButton)

package/src/Filter/FilterBar/subcomponents/FilterBarDatePicker/FilterBarDatePicker.spec.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from "react"
-import { render, screen, waitFor, within } from "@testing-library/react"
+import { screen, waitFor, within } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
+import { renderWithIntl } from "~tests"
 import {
   FilterAttributes,
   FilterBarProvider,
@@ -56,35 +57,46 @@ const FilterBarDatePickerWrapper = ({
 }
 
 describe("<FilterBarDatePicker />", () => {
-  it("shows the name in the trigger button", () => {
-    const { getByRole } = render(<FilterBarDatePickerWrapper />)
-    const triggerButton = getByRole("button", { name: "Drank" })
-    expect(triggerButton).toBeInTheDocument()
+  it("shows the name in the trigger button", async () => {
+    renderWithIntl(<FilterBarDatePickerWrapper />)
+    await waitFor(() => {
+      const triggerButton = screen.getByRole("button", { name: "Drank" })
+      expect(triggerButton).toBeInTheDocument()
+    })
   })
 
   describe("Removable", () => {
-    it("does not show the remove button when isRemovable is false", () => {
-      const { queryByRole } = render(<FilterBarDatePickerWrapper />)
-      expect(
-        queryByRole("button", { name: "Remove filter - Drank" })
-      ).not.toBeInTheDocument()
+    it("does not show the remove button when isRemovable is false", async () => {
+      renderWithIntl(<FilterBarDatePickerWrapper />)
+      await waitFor(() => {
+        expect(
+          screen.getByRole("button", { name: "Drank" })
+        ).toBeInTheDocument()
+        expect(
+          screen.queryByRole("button", { name: "Remove filter - Drank" })
+        ).not.toBeInTheDocument()
+      })
     })
 
-    it("shows the remove button when isRemovable is true", () => {
-      const { getByRole } = render(
+    it("shows the remove button when isRemovable is true", async () => {
+      renderWithIntl(
         <FilterBarDatePickerWrapper
           filterAttributes={{ isRemovable: true }}
           defaultValues={{ drank: new Date("2023-05-01") }}
         />
       )
-      expect(
-        getByRole("button", { name: "Remove filter - Drank" })
-      ).toBeVisible()
+      await waitFor(() => {
+        expect(
+          screen.getByRole("button", { name: "Remove filter - Drank" })
+        ).toBeVisible()
+      })
     })
   })
 
   it("can toggle its open state", async () => {
-    const { getByRole, queryByRole } = render(<FilterBarDatePickerWrapper />)
+    const { getByRole, queryByRole } = renderWithIntl(
+      <FilterBarDatePickerWrapper />
+    )
     const triggerButton = getByRole("button", { name: "Drank" })
 
     await user.click(triggerButton)
@@ -100,20 +112,22 @@ describe("<FilterBarDatePicker />", () => {
     })
   })
 
-  it("shows a selected value when provided", () => {
-    const { getByRole } = render(
+  it("shows a selected value when provided", async () => {
+    const { getByRole } = renderWithIntl(
       <FilterBarDatePickerWrapper
         defaultValues={{ drank: new Date("2023-06-06") }}
       />
     )
-    const triggerButton = getByRole("button", {
-      name: "Drank : 6 Jun 2023",
+    await waitFor(() => {
+      const triggerButton = getByRole("button", {
+        name: "Drank : 6 Jun 2023",
+      })
+      expect(triggerButton).toBeInTheDocument()
     })
-    expect(triggerButton).toBeInTheDocument()
   })
 
   it("updates the selected value in the trigger button when selecting a date", async () => {
-    render(
+    renderWithIntl(
       <FilterBarDatePickerWrapper
         defaultValues={{ drank: new Date("2023-06-06") }}
       />
@@ -143,7 +157,7 @@ describe("<FilterBarDatePicker />", () => {
 
   it("allows calling additional functions on selection change", async () => {
     const onChange = jest.fn()
-    render(<FilterBarDatePickerWrapper onDateChange={onChange} />)
+    renderWithIntl(<FilterBarDatePickerWrapper onDateChange={onChange} />)
 
     const triggerButton = screen.getByRole("button", { name: "Drank" })
     await user.click(triggerButton)