@kaizen/components 0.0.0-canary-debug-kaizenprovider-20241223004555 → 0.0.0-canary-debug-kaizen-provider-take-2-20241223005900

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

@@ -1,15 +1,15 @@
-import React, { useEffect, useState } from 'react'
-import { render, screen, waitFor, within } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import { vi } from 'vitest'
-import { FilterMultiSelect } from '../index'
-import { FilterBar, type FilterBarProps } from './FilterBar'
-import { useFilterBarContext } from './context/FilterBarContext'
-import { type Filters, type FiltersValues } from './types'
+import React, { useEffect, useState } from "react"
+import { screen, waitFor, within, render } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+import { vi } from "vitest"
+import { FilterMultiSelect } from "../index"
+import { FilterBar, FilterBarProps } from "./FilterBar"
+import { useFilterBarContext } from "./context/FilterBarContext"
+import { Filters, FiltersValues } from "./types"
 
 const user = userEvent.setup()
 
-const TEST_ID__FILTER = 'testid__filter'
+const TEST_ID__FILTER = "testid__filter"
 
 type ValuesSimple = {
   flavour: string
@@ -19,42 +19,42 @@ type ValuesSimple = {
 
 const simpleFilters = [
   {
-    id: 'flavour',
-    name: 'Flavour',
+    id: "flavour",
+    name: "Flavour",
     Component: (
       <FilterBar.Select
         items={[
-          { value: 'jasmine-milk-tea', label: 'Jasmine Milk Tea' },
-          { value: 'honey-milk-tea', label: 'Honey Milk Tea' },
-          { value: 'lychee-green-tea', label: 'Lychee Green Tea' },
+          { value: "jasmine-milk-tea", label: "Jasmine Milk Tea" },
+          { value: "honey-milk-tea", label: "Honey Milk Tea" },
+          { value: "lychee-green-tea", label: "Lychee Green Tea" },
         ]}
         data-testid={TEST_ID__FILTER}
       />
     ),
   },
   {
-    id: 'sugarLevel',
-    name: 'Sugar Level',
+    id: "sugarLevel",
+    name: "Sugar Level",
     Component: (
       <FilterBar.Select
         items={[
-          { value: 0, label: '0%' },
-          { value: 50, label: '50%' },
-          { value: 100, label: '100%' },
+          { value: 0, label: "0%" },
+          { value: 50, label: "50%" },
+          { value: 100, label: "100%" },
         ]}
         data-testid={TEST_ID__FILTER}
       />
     ),
   },
   {
-    id: 'iceLevel',
-    name: 'Ice Level',
+    id: "iceLevel",
+    name: "Ice Level",
     Component: (
       <FilterBar.Select
         items={[
-          { value: 0, label: '0%' },
-          { value: 50, label: '50%' },
-          { value: 100, label: '100%' },
+          { value: 0, label: "0%" },
+          { value: 50, label: "50%" },
+          { value: 100, label: "100%" },
         ]}
         data-testid={TEST_ID__FILTER}
       />
@@ -65,50 +65,24 @@ const simpleFilters = [
 type ValuesRemovable = {
   flavour: string
   topping: string
-  others: string
 }
 
 const filtersRemovable = [
   {
-    id: 'flavour',
-    name: 'Flavour',
+    id: "flavour",
+    name: "Flavour",
     Component: (
-      <FilterBar.Select items={[{ value: 'jasmine-milk-tea', label: 'Jasmine Milk Tea' }]} />
+      <FilterBar.Select
+        items={[{ value: "jasmine-milk-tea", label: "Jasmine Milk Tea" }]}
+      />
     ),
     isRemovable: true,
   },
   {
-    id: 'topping',
-    name: 'Topping',
-    Component: <FilterBar.Select items={[{ value: 'pearls', label: 'Pearls' }]} />,
-    isRemovable: true,
-  },
-  {
-    id: 'others',
-    name: 'Others',
+    id: "topping",
+    name: "Topping",
     Component: (
-      <FilterBar.MultiSelect
-        items={[
-          { value: 'gluten-free', label: 'Gluten Free' },
-          { value: 'no-sugar', label: 'No Sugar' },
-          { value: 'dairy-free', label: 'Dairy Free' },
-        ]}
-      >
-        {(): JSX.Element => (
-          <>
-            <FilterMultiSelect.SearchInput />
-            <FilterMultiSelect.ListBox>
-              {({ allItems }): JSX.Element | JSX.Element[] =>
-                allItems.map((item) => <FilterMultiSelect.Option key={item.key} item={item} />)
-              }
-            </FilterMultiSelect.ListBox>
-            <FilterMultiSelect.MenuFooter>
-              <FilterMultiSelect.SelectAllButton />
-              <FilterMultiSelect.ClearButton />
-            </FilterMultiSelect.MenuFooter>
-          </>
-        )}
-      </FilterBar.MultiSelect>
+      <FilterBar.Select items={[{ value: "pearls", label: "Pearls" }]} />
     ),
     isRemovable: true,
   },
@@ -121,17 +95,21 @@ type ValuesDependent = {
 
 const filtersDependent = [
   {
-    id: 'flavour',
-    name: 'Flavour',
+    id: "flavour",
+    name: "Flavour",
     Component: (
-      <FilterBar.Select items={[{ value: 'jasmine-milk-tea', label: 'Jasmine Milk Tea' }]} />
+      <FilterBar.Select
+        items={[{ value: "jasmine-milk-tea", label: "Jasmine Milk Tea" }]}
+      />
     ),
   },
   {
-    id: 'topping',
-    name: 'Topping',
-    Component: <FilterBar.Select items={[{ value: 'pearls', label: 'Pearls' }]} />,
-    isUsableWhen: (state) => state.flavour.value !== undefined,
+    id: "topping",
+    name: "Topping",
+    Component: (
+      <FilterBar.Select items={[{ value: "pearls", label: "Pearls" }]} />
+    ),
+    isUsableWhen: state => state.flavour.value !== undefined,
   },
 ] satisfies Filters<ValuesDependent>
 
@@ -140,10 +118,12 @@ const FilterBarWrapper = <T extends FiltersValues>({
   defaultValues,
   ...customProps
 }: Partial<FilterBarProps<T>> & {
-  filters: FilterBarProps<T>['filters']
-  defaultValues?: FilterBarProps<T>['values']
+  filters: FilterBarProps<T>["filters"]
+  defaultValues?: FilterBarProps<T>["values"]
 }): JSX.Element => {
-  const [activeValues, setActiveValues] = useState<Partial<T>>(defaultValues ?? {})
+  const [activeValues, setActiveValues] = useState<Partial<T>>(
+    defaultValues ?? {}
+  )
 
   return (
     <>
@@ -160,106 +140,112 @@ const FilterBarWrapper = <T extends FiltersValues>({
 
 const waitForI18nContent = async (): Promise<void> => {
   await waitFor(() => {
-    expect(screen.getByRole('button', { name: 'Clear all filters' })).toBeVisible()
+    expect(
+      screen.getByRole("button", { name: "Clear all filters" })
+    ).toBeVisible()
   })
 }
 
-describe('<FilterBar />', () => {
-  it('renders filters in the provided order', async () => {
-    const { getAllByTestId } = render(<FilterBarWrapper<ValuesSimple> filters={simpleFilters} />)
+describe("<FilterBar />", () => {
+  it("renders filters in the provided order", async () => {
+    const { getAllByTestId } = render(
+      <FilterBarWrapper<ValuesSimple> filters={simpleFilters} />
+    )
     await waitForI18nContent()
 
     const filters = getAllByTestId(TEST_ID__FILTER)
     expect(filters.length).toBe(3)
-    expect(filters[0]).toHaveTextContent('Flavour')
-    expect(filters[1]).toHaveTextContent('Sugar Level')
-    expect(filters[2]).toHaveTextContent('Ice Level')
+    expect(filters[0]).toHaveTextContent("Flavour")
+    expect(filters[1]).toHaveTextContent("Sugar Level")
+    expect(filters[2]).toHaveTextContent("Ice Level")
   })
 
-  it('retains Filter accessibility', async () => {
+  it("retains Filter accessibility", async () => {
     render(<FilterBarWrapper filters={simpleFilters} />)
 
-    const filterButton = screen.getByRole('button', { name: 'Flavour' })
+    const filterButton = screen.getByRole("button", { name: "Flavour" })
     await user.click(filterButton)
 
     await waitFor(() => {
-      expect(screen.getByRole('dialog', { name: 'Flavour' })).toBeVisible()
+      expect(screen.getByRole("dialog", { name: "Flavour" })).toBeVisible()
     })
   })
 
-  describe('Removable filters', () => {
-    it('shows inactive filters in the Add Filters menu only', async () => {
+  describe("Removable filters", () => {
+    it("shows inactive filters in the Add Filters menu only", async () => {
       const { getByRole, queryByText } = render(
-        <FilterBarWrapper<ValuesRemovable> filters={filtersRemovable} />,
+        <FilterBarWrapper<ValuesRemovable> filters={filtersRemovable} />
       )
       await waitForI18nContent()
 
-      expect(queryByText('Topping')).not.toBeInTheDocument()
+      expect(queryByText("Topping")).not.toBeInTheDocument()
 
-      const addFiltersButton = getByRole('button', { name: 'Add Filters' })
+      const addFiltersButton = getByRole("button", { name: "Add Filters" })
       await user.click(addFiltersButton)
 
-      const list = getByRole('list')
-      const menuOption = within(list).getByRole('button', { name: 'Topping' })
+      const list = getByRole("list")
+      const menuOption = within(list).getByRole("button", { name: "Topping" })
 
       await waitFor(() => {
         expect(menuOption).toBeVisible()
       })
     })
 
-    it('shows removable filter as active if there is a default value', async () => {
+    it("shows removable filter as active if there is a default value", async () => {
       const { getByRole } = render(
         <FilterBarWrapper<ValuesRemovable>
           filters={filtersRemovable}
-          defaultValues={{ topping: 'pearls' }}
-        />,
+          defaultValues={{ topping: "pearls" }}
+        />
       )
       await waitForI18nContent()
-      expect(getByRole('button', { name: 'Topping : Pearls' })).toBeVisible()
-      expect(getByRole('button', { name: 'Remove filter - Topping' })).toBeVisible()
+      expect(getByRole("button", { name: "Topping : Pearls" })).toBeVisible()
+      expect(
+        getByRole("button", { name: "Remove filter - Topping" })
+      ).toBeVisible()
     })
 
-    it('does not show active removable filters in the Add Filters menu', async () => {
+    it("does not show active removable filters in the Add Filters menu", async () => {
       const { getByRole } = render(
         <FilterBarWrapper<ValuesRemovable>
           filters={filtersRemovable}
-          defaultValues={{ topping: 'pearls' }}
-        />,
+          defaultValues={{ topping: "pearls" }}
+        />
       )
       await waitForI18nContent()
 
-      const addFiltersButton = getByRole('button', { name: 'Add Filters' })
+      const addFiltersButton = getByRole("button", { name: "Add Filters" })
       await user.click(addFiltersButton)
 
-      const list = getByRole('list')
-      const menuOption = within(list).queryByRole('button', { name: 'Topping' })
+      const list = getByRole("list")
+      const menuOption = within(list).queryByRole("button", { name: "Topping" })
       await waitFor(() => {
         expect(menuOption).not.toBeInTheDocument()
       })
     })
 
-    it('clears the value of a filter if it is removed', async () => {
+    it("clears the value of a filter if it is removed", async () => {
       const { getByRole } = render(
         <FilterBarWrapper<ValuesRemovable>
           filters={filtersRemovable}
-          defaultValues={{ topping: 'pearls' }}
-        />,
+          defaultValues={{ topping: "pearls" }}
+        />
       )
       await waitForI18nContent()
 
-      const filterButton = getByRole('button', { name: 'Topping : Pearls' })
+      const filterButton = getByRole("button", { name: "Topping : Pearls" })
       expect(filterButton).toBeVisible()
 
-      await user.click(getByRole('button', { name: 'Remove filter - Topping' }))
+      await user.click(getByRole("button", { name: "Remove filter - Topping" }))
       await waitFor(() => {
         expect(filterButton).not.toBeInTheDocument()
       })
 
-      const addFiltersButton = getByRole('button', { name: 'Add Filters' })
+      const addFiltersButton = getByRole("button", { name: "Add Filters" })
       await user.click(addFiltersButton)
 
-      const list = getByRole('list')
-      const menuOption = within(list).getByRole('button', { name: 'Topping' })
+      const list = getByRole("list")
+      const menuOption = within(list).getByRole("button", { name: "Topping" })
       await waitFor(() => {
         expect(menuOption).toBeVisible()
       })
@@ -268,171 +254,132 @@ describe('<FilterBar />', () => {
       await waitFor(() => {
         expect(list).not.toBeInTheDocument()
       })
-      expect(getByRole('button', { name: 'Topping' })).toBeVisible()
+      expect(getByRole("button", { name: "Topping" })).toBeVisible()
     })
 
-    it('adds new filters in the provided order', async () => {
+    it("adds new filters in the provided order", async () => {
       const { getByRole, getAllByTestId } = render(
         <FilterBarWrapper<ValuesSimple>
-          filters={simpleFilters.map((filter) => ({
+          filters={simpleFilters.map(filter => ({
             ...filter,
             isRemovable: true,
           }))}
-        />,
+        />
       )
       await waitForI18nContent()
 
-      const addFiltersButton = getByRole('button', { name: 'Add Filters' })
+      const addFiltersButton = getByRole("button", { name: "Add Filters" })
       await user.click(addFiltersButton)
 
-      const menuOptionIceLevel = getByRole('button', { name: 'Ice Level' })
+      const menuOptionIceLevel = getByRole("button", { name: "Ice Level" })
       await user.click(menuOptionIceLevel)
       await user.click(addFiltersButton)
 
-      const menuOptionFlavour = getByRole('button', { name: 'Flavour' })
+      const menuOptionFlavour = getByRole("button", { name: "Flavour" })
       await user.click(menuOptionFlavour)
       await user.click(addFiltersButton)
 
-      const menuOptionSugarLevel = getByRole('button', { name: 'Sugar Level' })
+      const menuOptionSugarLevel = getByRole("button", { name: "Sugar Level" })
       await user.click(menuOptionSugarLevel)
 
       const filters = getAllByTestId(TEST_ID__FILTER)
       expect(filters.length).toBe(3)
-      expect(filters[0]).toHaveTextContent('Ice Level')
-      expect(filters[1]).toHaveTextContent('Flavour')
-      expect(filters[2]).toHaveTextContent('Sugar Level')
-    })
-
-    it('moves focus to recently added filter button', async () => {
-      const { getByRole } = render(
-        <FilterBarWrapper<ValuesSimple>
-          filters={simpleFilters.map((filter) => ({
-            ...filter,
-            isRemovable: true,
-          }))}
-        />,
-      )
-      await waitForI18nContent()
-
-      const addFiltersButton = getByRole('button', { name: 'Add Filters' })
-      await user.click(addFiltersButton)
-
-      const menuOptionIceLevel = getByRole('button', { name: 'Ice Level' })
-      await user.click(menuOptionIceLevel)
-
-      expect(getByRole('button', { name: 'Ice Level' })).toHaveFocus()
-    })
-
-    it('moves focus to recently added filter button in the FilterMultiSelect case', async () => {
-      const { getByRole } = render(<FilterBarWrapper<ValuesRemovable> filters={filtersRemovable} />)
-      await waitForI18nContent()
-
-      const addFiltersButton = getByRole('button', { name: 'Add Filters' })
-      await user.click(addFiltersButton)
-
-      const menuOptionOthers = getByRole('button', { name: 'Others' })
-      await user.click(menuOptionOthers)
-
-      expect(getByRole('button', { name: 'Others' })).toHaveFocus()
-    })
-
-    it('restores focus to the add filter button after remove', async () => {
-      const { getByRole } = render(
-        <FilterBarWrapper<ValuesRemovable>
-          filters={filtersRemovable}
-          defaultValues={{ topping: 'pearls' }}
-        />,
-      )
-      await waitForI18nContent()
-
-      const filterButton = getByRole('button', { name: 'Topping : Pearls' })
-      expect(filterButton).toBeVisible()
-
-      await user.click(getByRole('button', { name: 'Remove filter - Topping' }))
-      await waitFor(() => {
-        expect(filterButton).not.toBeInTheDocument()
-      })
-
-      expect(getByRole('button', { name: 'Add Filters' })).toHaveFocus()
+      expect(filters[0]).toHaveTextContent("Ice Level")
+      expect(filters[1]).toHaveTextContent("Flavour")
+      expect(filters[2]).toHaveTextContent("Sugar Level")
     })
   })
 
-  describe('Dependent filters', () => {
-    describe('Condition not met', () => {
-      it('does not show a dependent filter', async () => {
-        const { queryByRole, getByRole } = render(<FilterBarWrapper filters={filtersDependent} />)
+  describe("Dependent filters", () => {
+    describe("Condition not met", () => {
+      it("does not show a dependent filter", async () => {
+        const { queryByRole, getByRole } = render(
+          <FilterBarWrapper filters={filtersDependent} />
+        )
         await waitForI18nContent()
-        expect(queryByRole('button', { name: 'Topping' })).not.toBeInTheDocument()
-        expect(getByRole('button', { name: 'Add Filters' })).toBeDisabled()
+        expect(
+          queryByRole("button", { name: "Topping" })
+        ).not.toBeInTheDocument()
+        expect(getByRole("button", { name: "Add Filters" })).toBeDisabled()
       })
 
-      it('clears the value if the filter is not usable', async () => {
+      it("clears the value if the filter is not usable", async () => {
         const { getByTestId } = render(
           <FilterBarWrapper
             filters={filtersDependent}
             defaultValues={{
-              topping: 'pearls',
+              topping: "pearls",
             }}
-          />,
+          />
         )
         await waitForI18nContent()
-        expect(getByTestId('testid__values').textContent).toBe(JSON.stringify({}))
+        expect(getByTestId("testid__values").textContent).toBe(
+          JSON.stringify({})
+        )
       })
     })
 
-    describe('Condition met', () => {
-      it('shows a non-removable dependent filter in active filters', async () => {
+    describe("Condition met", () => {
+      it("shows a non-removable dependent filter in active filters", async () => {
         const { queryByRole, getByRole, findByRole } = render(
-          <FilterBarWrapper filters={filtersDependent} />,
+          <FilterBarWrapper filters={filtersDependent} />
         )
         await waitForI18nContent()
 
-        const flavourButton = getByRole('button', { name: 'Flavour' })
-        expect(queryByRole('button', { name: 'Topping' })).not.toBeInTheDocument()
+        const flavourButton = getByRole("button", { name: "Flavour" })
+        expect(
+          queryByRole("button", { name: "Topping" })
+        ).not.toBeInTheDocument()
 
         await user.click(flavourButton)
-        const flavourOption = await findByRole('option', {
-          name: 'Jasmine Milk Tea',
+        const flavourOption = await findByRole("option", {
+          name: "Jasmine Milk Tea",
         })
         await user.click(flavourOption)
 
         await waitFor(() => {
-          expect(getByRole('button', { name: 'Topping' })).toBeVisible()
+          expect(getByRole("button", { name: "Topping" })).toBeVisible()
         })
       })
 
-      it('shows a removable dependent filter in Add Filters menu', async () => {
+      it("shows a removable dependent filter in Add Filters menu", async () => {
         const { getByRole, findByRole } = render(
           <FilterBarWrapper
             filters={[
               {
-                id: 'flavour',
-                name: 'Flavour',
+                id: "flavour",
+                name: "Flavour",
                 Component: (
                   <FilterBar.Select
-                    items={[{ value: 'jasmine-milk-tea', label: 'Jasmine Milk Tea' }]}
+                    items={[
+                      { value: "jasmine-milk-tea", label: "Jasmine Milk Tea" },
+                    ]}
                   />
                 ),
               },
               {
-                id: 'topping',
-                name: 'Topping',
-                Component: <FilterBar.Select items={[{ value: 'pearls', label: 'Pearls' }]} />,
-                isUsableWhen: (state) => state.flavour.value !== undefined,
+                id: "topping",
+                name: "Topping",
+                Component: (
+                  <FilterBar.Select
+                    items={[{ value: "pearls", label: "Pearls" }]}
+                  />
+                ),
+                isUsableWhen: state => state.flavour.value !== undefined,
                 isRemovable: true,
               },
             ]}
-          />,
+          />
         )
         await waitForI18nContent()
 
-        const addFiltersButton = getByRole('button', { name: 'Add Filters' })
+        const addFiltersButton = getByRole("button", { name: "Add Filters" })
         expect(addFiltersButton).toBeDisabled()
 
-        const flavourButton = getByRole('button', { name: 'Flavour' })
+        const flavourButton = getByRole("button", { name: "Flavour" })
         await user.click(flavourButton)
-        const flavourOption = await findByRole('option', {
-          name: 'Jasmine Milk Tea',
+        const flavourOption = await findByRole("option", {
+          name: "Jasmine Milk Tea",
         })
         await user.click(flavourOption)
 
@@ -442,8 +389,8 @@ describe('<FilterBar />', () => {
 
         await user.click(addFiltersButton)
 
-        const list = getByRole('list')
-        const menuOption = within(list).getByRole('button', { name: 'Topping' })
+        const list = getByRole("list")
+        const menuOption = within(list).getByRole("button", { name: "Topping" })
 
         await waitFor(() => {
           expect(menuOption).toBeVisible()
@@ -451,13 +398,13 @@ describe('<FilterBar />', () => {
       })
     })
 
-    describe('Condition result change', () => {
-      it('clears the value for an unusable filter', async () => {
+    describe("Condition result change", () => {
+      it("clears the value for an unusable filter", async () => {
         const checkValues = vi.fn()
 
         const Wrapper = (): JSX.Element => {
           const [values, setValues] = useState<Partial<ValuesDependent>>({
-            topping: 'pearls',
+            topping: "pearls",
           })
 
           return (
@@ -477,21 +424,23 @@ describe('<FilterBar />', () => {
         const { queryByRole, getByRole } = render(<Wrapper />)
         await waitForI18nContent()
 
-        expect(queryByRole('button', { name: 'Topping : Pearls' })).not.toBeInTheDocument()
+        expect(
+          queryByRole("button", { name: "Topping : Pearls" })
+        ).not.toBeInTheDocument()
 
-        await user.click(getByRole('button', { name: 'Check values' }))
+        await user.click(getByRole("button", { name: "Check values" }))
         await waitFor(() => {
           expect(checkValues).toHaveBeenCalledWith({})
         })
       })
 
-      it('clears the value and removes a filter which loses usability', async () => {
+      it("clears the value and removes a filter which loses usability", async () => {
         const checkValues = vi.fn()
 
         const Wrapper = (): JSX.Element => {
           const [values, setValues] = useState<Partial<ValuesDependent>>({
-            flavour: 'jasmine-milk-tea',
-            topping: 'pearls',
+            flavour: "jasmine-milk-tea",
+            topping: "pearls",
           })
 
           return (
@@ -501,7 +450,10 @@ describe('<FilterBar />', () => {
                 values={values}
                 onValuesChange={setValues}
               />
-              <button type="button" onClick={() => setValues({ ...values, flavour: undefined })}>
+              <button
+                type="button"
+                onClick={() => setValues({ ...values, flavour: undefined })}
+              >
                 Clear Flavour
               </button>
               <button type="button" onClick={() => checkValues(values)}>
@@ -514,12 +466,14 @@ describe('<FilterBar />', () => {
         const { getByRole } = render(<Wrapper />)
         await waitForI18nContent()
 
-        expect(getByRole('button', { name: 'Flavour : Jasmine Milk Tea' })).toBeVisible()
-        const toppingsButton = getByRole('button', { name: 'Topping : Pearls' })
+        expect(
+          getByRole("button", { name: "Flavour : Jasmine Milk Tea" })
+        ).toBeVisible()
+        const toppingsButton = getByRole("button", { name: "Topping : Pearls" })
         expect(toppingsButton).toBeVisible()
 
-        await user.click(getByRole('button', { name: 'Clear Flavour' }))
-        await user.click(getByRole('button', { name: 'Check values' }))
+        await user.click(getByRole("button", { name: "Clear Flavour" }))
+        await user.click(getByRole("button", { name: "Check values" }))
 
         await waitFor(() => {
           expect(checkValues).toHaveBeenCalledWith({})
@@ -528,8 +482,8 @@ describe('<FilterBar />', () => {
       })
     })
 
-    describe('Multiple dependencies', () => {
-      it('handles complex dependencies', async () => {
+    describe("Multiple dependencies", () => {
+      it("handles complex dependencies", async () => {
         type ValuesComplexDeps = {
           coffee: string
           milk: string
@@ -540,117 +494,124 @@ describe('<FilterBar />', () => {
 
         const filters = [
           {
-            id: 'coffee',
-            name: 'Coffee',
+            id: "coffee",
+            name: "Coffee",
             Component: (
               <FilterBar.Select
                 items={[
-                  { value: 'long-black', label: 'Long Black' },
-                  { value: 'latte', label: 'Latte' },
+                  { value: "long-black", label: "Long Black" },
+                  { value: "latte", label: "Latte" },
                 ]}
               />
             ),
           },
           {
-            id: 'milk',
-            name: 'Milk',
+            id: "milk",
+            name: "Milk",
             Component: (
               <FilterBar.Select
                 items={[
-                  { value: 'full-cream', label: 'Full Cream' },
-                  { value: 'oat', label: 'Oat' },
+                  { value: "full-cream", label: "Full Cream" },
+                  { value: "oat", label: "Oat" },
                 ]}
               />
             ),
-            isUsableWhen: (state) => state.coffee.value === 'latte',
+            isUsableWhen: state => state.coffee.value === "latte",
           },
           {
-            id: 'syrup',
-            name: 'Syrup',
+            id: "syrup",
+            name: "Syrup",
             Component: (
               <FilterBar.Select
                 items={[
-                  { value: 'vanilla', label: 'Vanilla' },
-                  { value: 'caramel', label: 'Caramel' },
+                  { value: "vanilla", label: "Vanilla" },
+                  { value: "caramel", label: "Caramel" },
                 ]}
               />
             ),
             isRemovable: true,
-            isUsableWhen: (state) => state.milk.value !== undefined && !state.sugar.isActive,
+            isUsableWhen: state =>
+              state.milk.value !== undefined && !state.sugar.isActive,
           },
           {
-            id: 'sugar',
-            name: 'Sugar',
-            Component: <FilterBar.Select items={[{ value: 'yes', label: 'Yes' }]} />,
+            id: "sugar",
+            name: "Sugar",
+            Component: (
+              <FilterBar.Select items={[{ value: "yes", label: "Yes" }]} />
+            ),
             isRemovable: true,
-            isUsableWhen: (state) => state.milk.value !== undefined && !state.syrup.isActive,
+            isUsableWhen: state =>
+              state.milk.value !== undefined && !state.syrup.isActive,
           },
           {
-            id: 'ice',
-            name: 'Ice',
+            id: "ice",
+            name: "Ice",
             Component: (
               <FilterBar.Select
                 items={[
-                  { value: 'yes', label: 'Yes' },
-                  { value: 'no', label: 'No' },
+                  { value: "yes", label: "Yes" },
+                  { value: "no", label: "No" },
                 ]}
               />
             ),
-            isUsableWhen: (state) => state.coffee.value !== undefined,
+            isUsableWhen: state => state.coffee.value !== undefined,
           },
         ] satisfies Filters<ValuesComplexDeps>
 
         const { queryByRole, getByRole } = render(
-          <FilterBarWrapper filters={filters} defaultValues={{ milk: 'full-cream' }} />,
+          <FilterBarWrapper
+            filters={filters}
+            defaultValues={{ milk: "full-cream" }}
+          />
         )
         await waitForI18nContent()
 
-        const coffeeButton = getByRole('button', { name: 'Coffee' })
+        const coffeeButton = getByRole("button", { name: "Coffee" })
         expect(coffeeButton).toBeVisible()
-        expect(queryByRole('button', { name: 'Milk' })).not.toBeInTheDocument()
-        expect(queryByRole('button', { name: 'Syrup' })).not.toBeInTheDocument()
-        expect(queryByRole('button', { name: 'Sugar' })).not.toBeInTheDocument()
-        expect(queryByRole('button', { name: 'Ice' })).not.toBeInTheDocument()
+        expect(queryByRole("button", { name: "Milk" })).not.toBeInTheDocument()
+        expect(queryByRole("button", { name: "Syrup" })).not.toBeInTheDocument()
+        expect(queryByRole("button", { name: "Sugar" })).not.toBeInTheDocument()
+        expect(queryByRole("button", { name: "Ice" })).not.toBeInTheDocument()
 
-        const addFiltersButton = getByRole('button', { name: 'Add Filters' })
+        const addFiltersButton = getByRole("button", { name: "Add Filters" })
         expect(addFiltersButton).toBeDisabled()
 
         await user.click(coffeeButton)
-        await user.click(getByRole('option', { name: 'Long Black' }))
+        await user.click(getByRole("option", { name: "Long Black" }))
 
         await waitFor(() => {
-          expect(coffeeButton).toHaveAccessibleName('Coffee : Long Black')
+          expect(coffeeButton).toHaveAccessibleName("Coffee : Long Black")
         })
-        const iceButton = getByRole('button', { name: 'Ice' })
+        const iceButton = getByRole("button", { name: "Ice" })
         expect(iceButton).toBeVisible()
         expect(addFiltersButton).toBeDisabled()
 
         await user.click(coffeeButton)
-        await user.click(getByRole('option', { name: 'Latte' }))
+        await user.click(getByRole("option", { name: "Latte" }))
 
         await waitFor(() => {
-          expect(coffeeButton).toHaveAccessibleName('Coffee : Latte')
+          expect(coffeeButton).toHaveAccessibleName("Coffee : Latte")
         })
-        const milkButton = getByRole('button', { name: 'Milk' })
+        const milkButton = getByRole("button", { name: "Milk" })
         expect(milkButton).toBeVisible()
         expect(addFiltersButton).toBeDisabled()
 
         await user.click(milkButton)
-        await user.click(getByRole('option', { name: 'Oat' }))
+        await user.click(getByRole("option", { name: "Oat" }))
 
         await waitFor(() => {
-          expect(milkButton).toHaveAccessibleName('Milk : Oat')
+          expect(milkButton).toHaveAccessibleName("Milk : Oat")
         })
         expect(addFiltersButton).not.toBeDisabled()
 
         await user.click(addFiltersButton)
 
-        const list = getByRole('list')
-        const menuOptionSugar = within(list).getByRole('button', {
-          name: 'Sugar',
+        const list = getByRole("list")
+        const menuOptionSugar = within(list).getByRole("button", {
+          name: "Sugar",
         })
-        const menuOptionSyrup = within(list).getByRole('button', {
-          name: 'Syrup',
+        const menuOptionSyrup = within(list).getByRole("button", {
+          name: "Syrup",
         })
         expect(menuOptionSugar).toBeVisible()
         expect(menuOptionSyrup).toBeVisible()
@@ -660,11 +621,11 @@ describe('<FilterBar />', () => {
         await waitFor(() => {
           expect(list).not.toBeInTheDocument()
         })
-        const sugarButton = getByRole('button', { name: 'Sugar' })
+        const sugarButton = getByRole("button", { name: "Sugar" })
         expect(sugarButton).toBeVisible()
         expect(addFiltersButton).toBeDisabled()
 
-        await user.click(getByRole('button', { name: 'Remove filter - Sugar' }))
+        await user.click(getByRole("button", { name: "Remove filter - Sugar" }))
 
         await waitFor(() => {
           expect(sugarButton).not.toBeInTheDocument()
@@ -674,8 +635,72 @@ describe('<FilterBar />', () => {
     })
   })
 
-  describe('External events', () => {
-    it('allows updating the values via an external event', async () => {
+  describe("Clear all", () => {
+    it("clears all the values of all the filters", async () => {
+      const { getByRole } = render(
+        <FilterBarWrapper<ValuesSimple>
+          filters={simpleFilters}
+          defaultValues={{
+            flavour: "jasmine-milk-tea",
+            sugarLevel: 50,
+            iceLevel: 100,
+          }}
+        />
+      )
+      await waitForI18nContent()
+
+      const flavourButton = getByRole("button", {
+        name: "Flavour : Jasmine Milk Tea",
+      })
+      const sugarLevelButton = getByRole("button", {
+        name: "Sugar Level : 50%",
+      })
+      const iceLevelButton = getByRole("button", { name: "Ice Level : 100%" })
+
+      expect(flavourButton).toHaveAccessibleName("Flavour : Jasmine Milk Tea")
+      expect(sugarLevelButton).toHaveAccessibleName("Sugar Level : 50%")
+      expect(iceLevelButton).toHaveAccessibleName("Ice Level : 100%")
+
+      await user.click(getByRole("button", { name: "Clear all filters" }))
+
+      await waitFor(() => {
+        expect(flavourButton).toHaveAccessibleName("Flavour")
+        expect(sugarLevelButton).toHaveAccessibleName("Sugar Level")
+        expect(iceLevelButton).toHaveAccessibleName("Ice Level")
+      })
+    })
+
+    it("removes all removable filters", async () => {
+      const { getByRole } = render(
+        <FilterBarWrapper<ValuesRemovable>
+          filters={filtersRemovable}
+          defaultValues={{
+            flavour: "jasmine-milk-tea",
+            topping: "pearls",
+          }}
+        />
+      )
+      await waitForI18nContent()
+
+      const flavourButton = getByRole("button", {
+        name: "Flavour : Jasmine Milk Tea",
+      })
+      const toppingButton = getByRole("button", { name: "Topping : Pearls" })
+
+      expect(flavourButton).toBeVisible()
+      expect(toppingButton).toBeVisible()
+
+      await user.click(getByRole("button", { name: "Clear all filters" }))
+
+      await waitFor(() => {
+        expect(flavourButton).not.toBeInTheDocument()
+        expect(toppingButton).not.toBeInTheDocument()
+      })
+    })
+  })
+
+  describe("External events", () => {
+    it("allows updating the values via an external event", async () => {
       const Wrapper = (): JSX.Element => {
         type ExternalEventValues = {
           flavour: string
@@ -685,13 +710,13 @@ describe('<FilterBar />', () => {
 
         const filters = [
           {
-            id: 'flavour',
-            name: 'Flavour',
+            id: "flavour",
+            name: "Flavour",
             Component: (
               <FilterBar.Select
                 items={[
-                  { value: 'honey-milk-tea', label: 'Honey Milk Tea' },
-                  { value: 'lychee-green-tea', label: 'Lychee Green Tea' },
+                  { value: "honey-milk-tea", label: "Honey Milk Tea" },
+                  { value: "lychee-green-tea", label: "Lychee Green Tea" },
                 ]}
               />
             ),
@@ -700,8 +725,15 @@ describe('<FilterBar />', () => {
 
         return (
           <div>
-            <FilterBar filters={filters} values={values} onValuesChange={setValues} />
-            <button type="button" onClick={() => setValues({ flavour: 'honey-milk-tea' })}>
+            <FilterBar
+              filters={filters}
+              values={values}
+              onValuesChange={setValues}
+            />
+            <button
+              type="button"
+              onClick={() => setValues({ flavour: "honey-milk-tea" })}
+            >
               Update Flavour to honey-milk-tea
             </button>
           </div>
@@ -711,17 +743,19 @@ describe('<FilterBar />', () => {
       const { getByRole } = render(<Wrapper />)
       await waitForI18nContent()
 
-      const flavourButton = getByRole('button', { name: 'Flavour' })
-      expect(flavourButton).toHaveAccessibleName('Flavour')
+      const flavourButton = getByRole("button", { name: "Flavour" })
+      expect(flavourButton).toHaveAccessibleName("Flavour")
 
-      await user.click(getByRole('button', { name: 'Update Flavour to honey-milk-tea' }))
+      await user.click(
+        getByRole("button", { name: "Update Flavour to honey-milk-tea" })
+      )
 
       await waitFor(() => {
-        expect(flavourButton).toHaveAccessibleName('Flavour : Honey Milk Tea')
+        expect(flavourButton).toHaveAccessibleName("Flavour : Honey Milk Tea")
       })
     })
 
-    it('shows a removable filter when a value is set', async () => {
+    it("shows a removable filter when a value is set", async () => {
       const Wrapper = (): JSX.Element => {
         type ExternalEventValues = {
           flavour: string
@@ -731,13 +765,13 @@ describe('<FilterBar />', () => {
 
         const filters = [
           {
-            id: 'flavour',
-            name: 'Flavour',
+            id: "flavour",
+            name: "Flavour",
             Component: (
               <FilterBar.Select
                 items={[
-                  { value: 'honey-milk-tea', label: 'Honey Milk Tea' },
-                  { value: 'lychee-green-tea', label: 'Lychee Green Tea' },
+                  { value: "honey-milk-tea", label: "Honey Milk Tea" },
+                  { value: "lychee-green-tea", label: "Lychee Green Tea" },
                 ]}
               />
             ),
@@ -747,8 +781,15 @@ describe('<FilterBar />', () => {
 
         return (
           <div>
-            <FilterBar filters={filters} values={values} onValuesChange={setValues} />
-            <button type="button" onClick={() => setValues({ flavour: 'honey-milk-tea' })}>
+            <FilterBar
+              filters={filters}
+              values={values}
+              onValuesChange={setValues}
+            />
+            <button
+              type="button"
+              onClick={() => setValues({ flavour: "honey-milk-tea" })}
+            >
               Update Flavour to honey-milk-tea
             </button>
           </div>
@@ -758,19 +799,23 @@ describe('<FilterBar />', () => {
       const { getByRole, queryByRole } = render(<Wrapper />)
       await waitForI18nContent()
 
-      expect(queryByRole('button', { name: 'Flavour' })).not.toBeInTheDocument()
+      expect(queryByRole("button", { name: "Flavour" })).not.toBeInTheDocument()
 
-      await user.click(getByRole('button', { name: 'Update Flavour to honey-milk-tea' }))
+      await user.click(
+        getByRole("button", { name: "Update Flavour to honey-milk-tea" })
+      )
 
       await waitFor(() => {
-        expect(getByRole('button', { name: 'Flavour : Honey Milk Tea' })).toBeVisible()
+        expect(
+          getByRole("button", { name: "Flavour : Honey Milk Tea" })
+        ).toBeVisible()
       })
     })
   })
 
-  describe('Context use cases', () => {
-    describe('getActiveFilterValues()', () => {
-      type Items = { value: string; label: string }[]
+  describe("Context use cases", () => {
+    describe("getActiveFilterValues()", () => {
+      type Items = Array<{ value: string; label: string }>
 
       type AsyncValues = {
         city: string[]
@@ -789,20 +834,25 @@ describe('<FilterBar />', () => {
         const activeFilterVals = getActiveFilterValues()
 
         useEffect(() => {
-          fetcher(activeFilterVals).then((fetchedItems) => {
+          fetcher(activeFilterVals).then(fetchedItems => {
             if (JSON.stringify(fetchedItems) !== JSON.stringify(items)) {
               setItems(fetchedItems)
             }
           })
-        }, [activeFilterVals, fetcher, items])
+        }, [JSON.stringify(activeFilterVals)])
 
         return (
           <FilterBar.MultiSelect id={id} items={items}>
             {() => (
               <FilterMultiSelect.ListBox>
                 {({ allItems }) => (
-                  <FilterMultiSelect.ListBoxSection items={allItems} sectionName="All Items">
-                    {(item) => <FilterMultiSelect.Option key={item.key} item={item} />}
+                  <FilterMultiSelect.ListBoxSection
+                    items={allItems}
+                    sectionName="All Items"
+                  >
+                    {item => (
+                      <FilterMultiSelect.Option key={item.key} item={item} />
+                    )}
                   </FilterMultiSelect.ListBoxSection>
                 )}
               </FilterMultiSelect.ListBox>
@@ -812,84 +862,92 @@ describe('<FilterBar />', () => {
       }
 
       const fetchCityOptions = vi.fn((filterValues: Partial<AsyncValues>) => {
-        const isSupermanInFilterValue = filterValues.hero?.includes('superman')
-        const isBatmanInFilterValue = filterValues.hero?.includes('batman')
+        const isSupermanInFilterValue = filterValues.hero?.includes("superman")
+        const isBatmanInFilterValue = filterValues.hero?.includes("batman")
 
         if (isBatmanInFilterValue && !isSupermanInFilterValue) {
-          return Promise.resolve([{ value: 'gotham', label: 'Gotham' }])
+          return Promise.resolve([{ value: "gotham", label: "Gotham" }])
         }
 
         return Promise.resolve([
-          { value: 'gotham', label: 'Gotham' },
-          { value: 'metro', label: 'Metropolis' },
+          { value: "gotham", label: "Gotham" },
+          { value: "metro", label: "Metropolis" },
         ])
       })
 
       const fetchHeroOptions = vi.fn((filterValues: Partial<AsyncValues>) => {
-        const isGothamInFilterValue = filterValues.city?.includes('gotham')
-        const isMetroInFilterValue = filterValues.city?.includes('metro')
+        const isGothamInFilterValue = filterValues.city?.includes("gotham")
+        const isMetroInFilterValue = filterValues.city?.includes("metro")
 
         if (isGothamInFilterValue && !isMetroInFilterValue) {
-          return Promise.resolve([{ value: 'batman', label: 'Batman' }])
+          return Promise.resolve([{ value: "batman", label: "Batman" }])
         }
 
         return Promise.resolve([
-          { value: 'superman', label: 'Superman' },
-          { value: 'batman', label: 'Batman' },
+          { value: "superman", label: "Superman" },
+          { value: "batman", label: "Batman" },
         ])
       })
 
       const config = [
         {
-          id: 'city',
-          name: 'City',
-          Component: <MockFilterAsyncComponent id="city" fetcher={fetchCityOptions} />,
+          id: "city",
+          name: "City",
+          Component: (
+            <MockFilterAsyncComponent id="city" fetcher={fetchCityOptions} />
+          ),
         },
         {
-          id: 'hero',
-          name: 'Hero',
-          Component: <MockFilterAsyncComponent id="Hero" fetcher={fetchHeroOptions} />,
+          id: "hero",
+          name: "Hero",
+          Component: (
+            <MockFilterAsyncComponent id="Hero" fetcher={fetchHeroOptions} />
+          ),
         },
       ] satisfies Filters<AsyncValues>
 
-      it('can re-fetch options with all active filter values pulled off of the FilterBarContext', async () => {
+      it("can re-fetch options with all active filter values pulled off of the FilterBarContext", async () => {
         const { getByRole, queryByRole } = render(
-          <FilterBarWrapper<AsyncValues> filters={config} defaultValues={{}} />,
+          <FilterBarWrapper<AsyncValues> filters={config} defaultValues={{}} />
         )
 
-        await user.click(getByRole('button', { name: 'City' }))
+        await user.click(getByRole("button", { name: "City" }))
 
         await waitFor(() => {
-          expect(getByRole('option', { name: 'Gotham' })).toBeVisible()
-          expect(getByRole('option', { name: 'Metropolis' })).toBeVisible()
+          expect(getByRole("option", { name: "Gotham" })).toBeVisible()
+          expect(getByRole("option", { name: "Metropolis" })).toBeVisible()
         })
 
-        await user.click(getByRole('option', { name: 'Gotham' }))
+        await user.click(getByRole("option", { name: "Gotham" }))
 
         // close city filter
         await user.click(document.body)
 
-        await user.click(getByRole('button', { name: 'Hero' }))
+        await user.click(getByRole("button", { name: "Hero" }))
 
         await waitFor(() => {
-          expect(getByRole('option', { name: 'Batman' })).toBeVisible()
-          expect(queryByRole('option', { name: 'Superman' })).not.toBeInTheDocument()
+          expect(getByRole("option", { name: "Batman" })).toBeVisible()
+          expect(
+            queryByRole("option", { name: "Superman" })
+          ).not.toBeInTheDocument()
         })
 
-        await user.click(getByRole('option', { name: 'Batman' }))
+        await user.click(getByRole("option", { name: "Batman" }))
 
         await user.click(document.body)
 
-        await user.click(getByRole('button', { name: 'City : Gotham' }))
+        await user.click(getByRole("button", { name: "City : Gotham" }))
 
         await waitFor(() => {
-          expect(getByRole('option', { name: 'Gotham' })).toBeVisible()
-          expect(queryByRole('option', { name: 'Metropolis' })).not.toBeInTheDocument()
+          expect(getByRole("option", { name: "Gotham" })).toBeVisible()
+          expect(
+            queryByRole("option", { name: "Metropolis" })
+          ).not.toBeInTheDocument()
         })
       })
     })
 
-    describe('openFilter()', () => {
+    describe("openFilter()", () => {
       type CycleFilterValues = {
         cycle: string
         customDate: Date
@@ -901,9 +959,9 @@ describe('<FilterBar />', () => {
         return (
           <FilterBar.Select
             id={id}
-            items={[{ value: 'custom', label: 'Custom Date' }]}
-            onSelectionChange={(key) => {
-              if (key === 'custom') openFilter('customDate')
+            items={[{ value: "custom", label: "Custom Date" }]}
+            onSelectionChange={key => {
+              if (key === "custom") openFilter("customDate")
             }}
           />
         )
@@ -911,27 +969,29 @@ describe('<FilterBar />', () => {
 
       const cycleFilters = [
         {
-          id: 'cycle',
-          name: 'Cycle',
+          id: "cycle",
+          name: "Cycle",
           Component: <CycleFilter />,
         },
         {
-          id: 'customDate',
-          name: 'Custom Date',
+          id: "customDate",
+          name: "Custom Date",
           Component: <FilterBar.DatePicker />,
         },
       ] satisfies Filters<CycleFilterValues>
 
       it("opens the Custom Date filter when Cycle's 'custom' value is selected", async () => {
-        const { getByRole } = render(<FilterBarWrapper<CycleFilterValues> filters={cycleFilters} />)
+        const { getByRole } = render(
+          <FilterBarWrapper<CycleFilterValues> filters={cycleFilters} />
+        )
         await waitForI18nContent()
 
-        const customDateButton = getByRole('button', { name: 'Custom Date' })
-        expect(customDateButton).toHaveAttribute('aria-expanded', 'false')
+        const customDateButton = getByRole("button", { name: "Custom Date" })
+        expect(customDateButton).toHaveAttribute("aria-expanded", "false")
 
-        await user.click(getByRole('button', { name: 'Cycle' }))
+        await user.click(getByRole("button", { name: "Cycle" }))
 
-        const customDateOption = getByRole('option', { name: 'Custom Date' })
+        const customDateOption = getByRole("option", { name: "Custom Date" })
         await waitFor(() => {
           expect(customDateOption).toBeVisible()
         })
@@ -939,7 +999,7 @@ describe('<FilterBar />', () => {
         await user.click(customDateOption)
 
         await waitFor(() => {
-          expect(customDateButton).toHaveAttribute('aria-expanded', 'true')
+          expect(customDateButton).toHaveAttribute("aria-expanded", "true")
         })
       })
     })