Add Storybook VR tests for filters button

src/components/VHeader/VFilterButton.vue

@@ -3,18 +3,17 @@
     id="filter-button"
     variant="plain"
     size="disabled"
-    class="align-center label-regular h-12 w-12 gap-2 self-center xl:w-auto xl:ps-3 xl:pe-4"
+    class="align-center label-regular h-12 w-12 gap-2 self-center border-tx xl:w-auto xl:ps-3 xl:pe-4"
     :class="
       pressed
-        ? 'border-tx bg-dark-charcoal text-white hover:bg-dark-charcoal-90'
-        : 'border-tx bg-tx hover:border-dark-charcoal-20 '
+        ? 'bg-dark-charcoal text-white hover:bg-dark-charcoal-90'
+        : 'bg-tx hover:border-dark-charcoal-20'
     "
     :pressed="pressed"
     :disabled="disabled"
     aria-controls="filters"
     :aria-label="ariaLabel"
     @click="$emit('toggle')"
-    @keydown.tab.exact="$emit('tab', $event)"
   >
     <VFilterIconOrCounter
       :applied-filter-count="filterCount"
@@ -51,7 +50,6 @@ export default defineComponent({
     },
   },
   emits: {
-    tab: defineEvent<[KeyboardEvent]>(),
     toggle: defineEvent(),
   },
   setup() {

src/components/VHeader/VFilterIconOrCounter.vue

@@ -2,8 +2,8 @@
   <VIcon v-if="showIcon" :icon-path="filterIcon" />
   <p
     v-else
-    class="flex h-6 w-6 items-center justify-center bg-dark-charcoal-10"
-    :class="{ 'bg-dark-charcoal-10 group-hover:bg-dark-charcoal-20': pressed }"
+    class="flex h-6 w-6 items-center justify-center"
+    :class="pressed ? 'bg-tx' : 'bg-dark-charcoal-10'"
   >
     {{ appliedFilterCount }}
   </p>

src/components/VHeader/meta/VFilterButton.stories.mdx

@@ -20,17 +20,19 @@ import { IMAGE } from "~/constants/media"
     appliedFilters: {
       type: "number",
     },
+    disabled: {
+      type: "boolean",
+    },
     toggle: {
       action: "toggle",
     },
-    tab: {
-      action: "tab",
-    },
   }}
 />
 
 export const Template = (args, { argTypes }) => ({
-  template: `<VFilterButton v-bind="args" v-on="args" />`,
+  template: `<div id="wrapper" class="w-40 h-16 bg-dark-charcoal-06 flex align-center justify-center">
+<VFilterButton v-bind="args" v-on="args" />
+</div>`,
   components: { VFilterButton },
   props: Object.keys(argTypes),
   setup() {
@@ -67,8 +69,7 @@ export const Template = (args, { argTypes }) => ({
 <ArgsTable of={VFilterButton} />
 
 The button opens and closes the filters sidebar. It also shows how many filters
-are applied in the mobile view. the field receives an input. It also emits the
-`search` event when the search button is clicked.
+are applied. It also emits the `toggle` event when clicked.
 
 <Canvas>
   <Story

test/storybook/visual-regression/v-filter-button.spec.ts

@@ -9,42 +9,67 @@ const gotoWithArgs = makeGotoWithArgs(
 
 test.describe.configure({ mode: "parallel" })
 
-test.describe("VFilterButton", () => {
-  breakpoints.describeLg(({ expectSnapshot }) => {
-    test("no filters applied", async ({ page }) => {
-      await gotoWithArgs(page, { isMinMd: true })
-      await expectSnapshot("filter-button-at-rest", page)
-    })
-
-    test("no filters pressed", async ({ page }) => {
-      await gotoWithArgs(page, { pressed: true })
-      await expectSnapshot("filter-button-pressed", page)
-    })
-
-    test("filters applied", async ({ page }) => {
-      await gotoWithArgs(page, { appliedFilters: 2 })
-      await expectSnapshot("filter-button-2-filters", page)
-    })
+const wrapper = "#wrapper"
 
-    test("filters applied and pressed", async ({ page }) => {
-      await gotoWithArgs(page, {
-        isMinMd: true,
-        appliedFilters: 2,
-        pressed: true,
+test.describe("VFilterButton", () => {
+  breakpoints.describeMobileAndDesktop(({ expectSnapshot }) => {
+    for (const filterCount of [0, 1, 12]) {
+      test(`resting, ${filterCount} filters`, async ({ page }) => {
+        await gotoWithArgs(page, { appliedFilters: filterCount })
+        await expectSnapshot(
+          `filter-button-at-rest-${filterCount}-checked`,
+          page.locator(wrapper)
+        )
       })
-      await expectSnapshot("filter-button-2-filters-pressed", page)
-    })
-  })
-
-  breakpoints.describeXl(({ expectSnapshot }) => {
-    test("no filters applied", async ({ page }) => {
-      await gotoWithArgs(page)
-      await expectSnapshot("filter-button-no-filters-not-scrolled", page)
-    })
-
-    test("2 filters", async ({ page }) => {
-      await gotoWithArgs(page, { appliedFilters: 2 })
-      await expectSnapshot("filter-button-2-filters-not-scrolled", page)
-    })
+      test(`focused, ${filterCount} filters`, async ({ page }) => {
+        await gotoWithArgs(page, { appliedFilters: filterCount })
+        await expectSnapshot(
+          `filter-button-at-rest-${filterCount}-checked`,
+          page.locator(wrapper)
+        )
+      })
+      test(`pressed, ${filterCount} filters`, async ({ page }) => {
+        await gotoWithArgs(page, {
+          appliedFilters: filterCount,
+          pressed: true,
+        })
+        await expectSnapshot(
+          `filter-button-pressed-${filterCount}-checked`,
+          page.locator(wrapper)
+        )
+      })
+      test(`pressed, hovered, ${filterCount} filters`, async ({ page }) => {
+        await gotoWithArgs(page, {
+          appliedFilters: filterCount,
+          pressed: true,
+        })
+        await page.locator("button", { hasText: "Filter" }).hover()
+        await expectSnapshot(
+          `filter-button-pressed-hovered-${filterCount}-checked`,
+          page.locator(wrapper)
+        )
+      })
+      test(`hovered, ${filterCount} filters`, async ({ page }) => {
+        await gotoWithArgs(page, {
+          appliedFilters: filterCount,
+        })
+        await page.locator("button", { hasText: "Filter" }).hover()
+        await expectSnapshot(
+          `filter-button-hovered-${filterCount}-checked`,
+          page.locator(wrapper)
+        )
+      })
+      test(`focused, pressed ${filterCount} filters`, async ({ page }) => {
+        await gotoWithArgs(page, {
+          appliedFilters: filterCount,
+          pressed: true,
+        })
+        await page.locator("button", { hasText: "Filter" }).focus()
+        await expectSnapshot(
+          `filter-button-focused-pressed-${filterCount}-checked`,
+          page.locator(wrapper)
+        )
+      })
+    }
   })
 })