Add VR test for two-digit filter count

test/playwright/visual-regression/components/filters.spec.ts

@@ -1,14 +1,29 @@
-import { expect, test } from "@playwright/test"
+import { expect, Page, test } from "@playwright/test"
 
 import {
   goToSearchTerm,
   languageDirections,
-  t,
+  pathWithDir,
 } from "~~/test/playwright/utils/navigation"
 import breakpoints from "~~/test/playwright/utils/breakpoints"
 
 test.describe.configure({ mode: "parallel" })
 
+const filtersCheckedUrl =
+  "search/image?q=birds&category=photograph,illustration,digitized_artwork&extension=jpg,png,gif,svg&aspect_ratio=tall,wide,square&size=small,medium"
+
+const cleanImageResults = async (page: Page) => {
+  await page.addStyleTag({
+    content: ".image-grid img { filter: brightness(0%); }",
+  })
+  await page.waitForTimeout(500)
+}
+
+const openFiltersTab = async (page: Page) => {
+  await page.locator("#content-settings-button").click()
+  await page.getByRole("tab").last().click()
+}
+
 for (const dir of languageDirections) {
   breakpoints.describeEachDesktop(() => {
     test(`Filters sidebar none selected - ${dir}`, async ({ page }) => {
@@ -19,7 +34,7 @@ for (const dir of languageDirections) {
       )
     })
 
-    test(`Filters sidebar some filters selected - ${dir}`, async ({ page }) => {
+    test(`Filters sidebar 1 filter selected - ${dir}`, async ({ page }) => {
       await goToSearchTerm(page, "birds", { dir })
       await page.locator('input[type="checkbox"]').first().check()
 
@@ -32,20 +47,31 @@ for (const dir of languageDirections) {
   breakpoints.describeEachMobile(({ expectSnapshot }) => {
     test(`Filters modal none selected - ${dir}`, async ({ page }) => {
       await goToSearchTerm(page, "birds", { dir })
-      await page.getByRole("button", { name: "Menu" }).click()
-      await page.getByRole("tab", { name: t("filters.title", dir) }).click()
+      await openFiltersTab(page)
 
       await expectSnapshot(`filters-modal-${dir}.png`, page)
     })
 
     test(`Filters modal some filters selected - ${dir}`, async ({ page }) => {
       await goToSearchTerm(page, "birds", { dir })
-      await page.getByRole("button", { name: "Menu" }).click()
-      await page.getByRole("tab", { name: t("filters.title", dir) }).click()
+      await openFiltersTab(page)
 
       await page.locator('input[type="checkbox"]').first().check()
 
       await expectSnapshot(`filters-modal-filters-selected-${dir}.png`, page)
     })
+
+    test(`Filters modal with two-digits count label - ${dir}`, async ({
+      page,
+    }) => {
+      await page.goto(pathWithDir(filtersCheckedUrl, dir))
+      await cleanImageResults(page)
+      await openFiltersTab(page)
+
+      await expectSnapshot(
+        `filters-modal-two-digits-count-checked-${dir}.png`,
+        page
+      )
+    })
   })
 }

test/tapes/search/audio/q=querywithnoresults&peaks=true_close.json5

@@ -0,0 +1,87 @@
+{
+    meta: {
+        createdAt: '2023-02-17T14:43:58.409Z',
+        host: 'https://api.openverse.engineering',
+        resHumanReadable: true,
+    },
+    req: {
+        headers: {
+            connection: 'close',
+        },
+        url: '/v1/audio/?q=querywithnoresults&peaks=true',
+        method: 'GET',
+        body: '',
+    },
+    res: {
+        status: 200,
+        headers: {
+            date: [
+                'Fri, 17 Feb 2023 14:44:00 GMT',
+            ],
+            'content-type': [
+                'application/json',
+            ],
+            'content-length': [
+                '70',
+            ],
+            connection: [
+                'close',
+            ],
+            vary: [
+                'Accept, Authorization, Origin',
+            ],
+            allow: [
+                'GET, HEAD, OPTIONS',
+            ],
+            'x-frame-options': [
+                'DENY',
+            ],
+            'x-content-type-options': [
+                'nosniff',
+            ],
+            'referrer-policy': [
+                'same-origin',
+            ],
+            'cross-origin-opener-policy': [
+                'same-origin',
+            ],
+            'x-request-id': [
+                '7dcc6d31fb1944448351cc94c5dbab91',
+            ],
+            'cache-control': [
+                'max-age=14400',
+            ],
+            'cf-cache-status': [
+                'MISS',
+            ],
+            'last-modified': [
+                'Fri, 17 Feb 2023 14:44:00 GMT',
+            ],
+            'accept-ranges': [
+                'bytes',
+            ],
+            'server-timing': [
+                'cf-q-config;dur=6.0000002122251e-06',
+            ],
+            'strict-transport-security': [
+                'max-age=15552000; includeSubDomains; preload',
+            ],
+            server: [
+                'cloudflare',
+            ],
+            'cf-ray': [
+                '79af4c6948f6b9d5-OTP',
+            ],
+            'alt-svc': [
+                'h3=":443"; ma=86400, h3-29=":443"; ma=86400',
+            ],
+        },
+        body: {
+            result_count: 0,
+            page_count: 0,
+            page_size: 20,
+            page: 1,
+            results: [],
+        },
+    },
+}