Update tests for new menu roles

cultureamp · Nov 29, 2024 · 291a286 · 291a286
1 parent 2bba299
commit 291a286
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 23 deletions.
diff --git a/packages/components/src/Filter/FilterBar/FilterBar.spec.tsx b/packages/components/src/Filter/FilterBar/FilterBar.spec.tsx
@@ -215,8 +215,7 @@ describe("<FilterBar />", () => {
       const addFiltersButton = getByRole("button", { name: "Add Filters" })
       await user.click(addFiltersButton)
 
-      const list = getByRole("list")
-      const menuOption = within(list).getByRole("button", { name: "Topping" })
+      const menuOption = getByRole("menuitem", { name: "Topping" })
 
       await waitFor(() => {
         expect(menuOption).toBeVisible()
@@ -238,7 +237,7 @@ describe("<FilterBar />", () => {
     })
 
     it("does not show active removable filters in the Add Filters menu", async () => {
-      const { getByRole } = render(
+      const { getByRole, queryByRole } = render(
         <FilterBarWrapper<ValuesRemovable>
           filters={filtersRemovable}
           defaultValues={{ topping: "pearls" }}
@@ -249,15 +248,14 @@ describe("<FilterBar />", () => {
       const addFiltersButton = getByRole("button", { name: "Add Filters" })
       await user.click(addFiltersButton)
 
-      const list = getByRole("list")
-      const menuOption = within(list).queryByRole("button", { name: "Topping" })
+      const menuOption = queryByRole("menuitem", { name: "Topping" })
       await waitFor(() => {
         expect(menuOption).not.toBeInTheDocument()
       })
     })
 
     it("clears the value of a filter if it is removed", async () => {
-      const { getByRole } = render(
+      const { getByRole, queryByRole } = render(
         <FilterBarWrapper<ValuesRemovable>
           filters={filtersRemovable}
           defaultValues={{ topping: "pearls" }}
@@ -276,15 +274,14 @@ describe("<FilterBar />", () => {
       const addFiltersButton = getByRole("button", { name: "Add Filters" })
       await user.click(addFiltersButton)
 
-      const list = getByRole("list")
-      const menuOption = within(list).getByRole("button", { name: "Topping" })
+      const menuOption = getByRole("menuitem", { name: "Topping" })
       await waitFor(() => {
         expect(menuOption).toBeVisible()
       })
 
       await user.click(menuOption)
       await waitFor(() => {
-        expect(list).not.toBeInTheDocument()
+        expect(queryByRole("menu")).not.toBeInTheDocument()
       })
       expect(getByRole("button", { name: "Topping" })).toBeVisible()
     })
@@ -303,15 +300,17 @@ describe("<FilterBar />", () => {
       const addFiltersButton = getByRole("button", { name: "Add Filters" })
       await user.click(addFiltersButton)
 
-      const menuOptionIceLevel = getByRole("button", { name: "Ice Level" })
+      const menuOptionIceLevel = getByRole("menuitem", { name: "Ice Level" })
       await user.click(menuOptionIceLevel)
       await user.click(addFiltersButton)
 
-      const menuOptionFlavour = getByRole("button", { name: "Flavour" })
+      const menuOptionFlavour = getByRole("menuitem", { name: "Flavour" })
       await user.click(menuOptionFlavour)
       await user.click(addFiltersButton)
 
-      const menuOptionSugarLevel = getByRole("button", { name: "Sugar Level" })
+      const menuOptionSugarLevel = getByRole("menuitem", {
+        name: "Sugar Level",
+      })
       await user.click(menuOptionSugarLevel)
 
       const filters = getAllByTestId(TEST_ID__FILTER)
@@ -335,7 +334,7 @@ describe("<FilterBar />", () => {
       const addFiltersButton = getByRole("button", { name: "Add Filters" })
       await user.click(addFiltersButton)
 
-      const menuOptionIceLevel = getByRole("button", { name: "Ice Level" })
+      const menuOptionIceLevel = getByRole("menuitem", { name: "Ice Level" })
       await user.click(menuOptionIceLevel)
 
       expect(getByRole("button", { name: "Ice Level" })).toHaveFocus()
@@ -350,7 +349,7 @@ describe("<FilterBar />", () => {
       const addFiltersButton = getByRole("button", { name: "Add Filters" })
       await user.click(addFiltersButton)
 
-      const menuOptionOthers = getByRole("button", { name: "Others" })
+      const menuOptionOthers = getByRole("menuitem", { name: "Others" })
       await user.click(menuOptionOthers)
 
       expect(getByRole("button", { name: "Others" })).toHaveFocus()
@@ -476,8 +475,7 @@ describe("<FilterBar />", () => {
 
         await user.click(addFiltersButton)
 
-        const list = getByRole("list")
-        const menuOption = within(list).getByRole("button", { name: "Topping" })
+        const menuOption = getByRole("menuitem", { name: "Topping" })
 
         await waitFor(() => {
           expect(menuOption).toBeVisible()
@@ -693,11 +691,10 @@ describe("<FilterBar />", () => {
 
         await user.click(addFiltersButton)
 
-        const list = getByRole("list")
-        const menuOptionSugar = within(list).getByRole("button", {
+        const menuOptionSugar = getByRole("menuitem", {
           name: "Sugar",
         })
-        const menuOptionSyrup = within(list).getByRole("button", {
+        const menuOptionSyrup = getByRole("menuitem", {
           name: "Syrup",
         })
         expect(menuOptionSugar).toBeVisible()
@@ -706,7 +703,7 @@ describe("<FilterBar />", () => {
         await user.click(menuOptionSugar)
 
         await waitFor(() => {
-          expect(list).not.toBeInTheDocument()
+          expect(queryByRole("menu")).not.toBeInTheDocument()
         })
         const sugarButton = getByRole("button", { name: "Sugar" })
         expect(sugarButton).toBeVisible()

diff --git a/packages/components/src/Filter/FilterBar/_docs/FilterBar.spec.stories.tsx b/packages/components/src/Filter/FilterBar/_docs/FilterBar.spec.stories.tsx
@@ -177,7 +177,7 @@ export const ClearAllFromRemovable: Story = {
       })
 
       await waitFor(() => {
-        userEvent.click(canvas.getByRole("button", { name: "Toppings" }))
+        userEvent.click(canvas.getByRole("menuitem", { name: "Toppings" }))
       })
     })
 
@@ -226,7 +226,7 @@ export const ClearAllRemovesItself: Story = {
       await waitFor(() =>
         userEvent.click(canvas.getByRole("button", { name: "Add Filters" }))
       )
-      await userEvent.click(canvas.getByRole("button", { name: "Drank" }))
+      await userEvent.click(canvas.getByRole("menuitem", { name: "Drank" }))
     })
 
     await step(

diff --git a/...ages/components/src/Filter/FilterBar/subcomponents/AddFiltersMenu/AddFiltersMenu.spec.tsx b/...ages/components/src/Filter/FilterBar/subcomponents/AddFiltersMenu/AddFiltersMenu.spec.tsx
@@ -61,7 +61,7 @@ describe("<AddFiltersMenu />", () => {
     await user.click(addFiltersButton)
 
     await waitFor(() => {
-      expect(screen.getByRole("list")).toBeVisible()
+      expect(screen.getByRole("menu")).toBeVisible()
     })
     expect(screen.getByRole("button", { name: "Coffee" })).toBeVisible()
     expect(