Skip to content

Commit

Permalink
Update tests for new menu roles
Browse files Browse the repository at this point in the history
  • Loading branch information
@dougmacknz
dougmacknz committed Nov 29, 2024
1 parent 2bba299 commit c29449c
Show file tree
Hide file tree
Showing 2 changed files with 19 additions and 22 deletions.
37 changes: 17 additions & 20 deletions packages/components/src/Filter/FilterBar/FilterBar.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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()
Expand All @@ -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" }}
Expand All @@ -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" }}
Expand All @@ -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()
})
Expand All @@ -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)
Expand All @@ -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()
Expand All @@ -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()
Expand Down Expand Up @@ -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()
Expand Down Expand Up @@ -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()
Expand All @@ -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()
Expand Down
4 changes: 2 additions & 2 deletions packages/components/src/Filter/FilterBar/_docs/FilterBar.spec.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -177,7 +177,7 @@ export const ClearAllFromRemovable: Story = {
})

await waitFor(() => {
userEvent.click(canvas.getByRole("button", { name: "Toppings" }))
userEvent.click(canvas.getByRole("menuitem", { name: "Toppings" }))
})
})

Expand Down Expand Up @@ -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(
Expand Down

0 comments on commit c29449c

Please sign in to comment.