Add VR tests for mobile search header

test/playwright/utils/breakpoints.ts

@@ -21,8 +21,13 @@ type BreakpointBlock = (options: {
   expectSnapshot: ExpectSnapshot
 }) => void
 
-const desktopBreakpoints = ['2xl', 'xl', 'lg'] as const
-const mobileBreakpoints = ['md', 'sm', 'xs'] as const
+export const desktopBreakpoints = ['2xl', 'xl', 'lg'] as const
+export const mobileBreakpoints = ['md', 'sm', 'xs'] as const
+
+export const isMobileBreakpoint = (
+  bp: Breakpoint
+): bp is typeof mobileBreakpoints[number] =>
+  (mobileBreakpoints as unknown as string[]).includes(bp)
 
 // For desktop UA use the default
 const desktopUa = undefined

test/playwright/utils/navigation.ts

@@ -459,10 +459,4 @@ export const enableNewHeader = async (page: Page) => {
       path: '/',
     },
   ])
-  await page.goto('/preferences')
-  const newHeaderCheckboxLocator = 'input#new_header'
-
-  if (!(await page.locator(newHeaderCheckboxLocator).isChecked())) {
-    await page.click(newHeaderCheckboxLocator)
-  }
 }

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

@@ -1,6 +1,8 @@
 import { test } from '@playwright/test'
 
-import breakpoints from '~~/test/playwright/utils/breakpoints'
+import breakpoints, {
+  isMobileBreakpoint,
+} from '~~/test/playwright/utils/breakpoints'
 import { hideInputCursors } from '~~/test/playwright/utils/page'
 import {
   closeFilters,
@@ -15,64 +17,66 @@ test.describe.configure({ mode: 'parallel' })
 
 const headerSelector = '.main-header'
 
-test.describe('header snapshots', () => {
+test.describe('header', () => {
   for (const dir of languageDirections) {
     test.describe(dir, () => {
       test.beforeEach(async ({ page }) => {
         await enableNewHeader(page)
         await goToSearchTerm(page, 'birds', { dir })
       })
 
-      test.describe('header', () => {
-        breakpoints.describeEachDesktop(({ expectSnapshot }) => {
-          test('filters open', async ({ page }) => {
-            await page.mouse.move(0, 150)
-            await expectSnapshot(
-              `filters-open-${dir}`,
-              page.locator(headerSelector)
-            )
-          })
+      breakpoints.describeEvery(({ breakpoint, expectSnapshot }) => {
+        test('filters open', async ({ page }) => {
+          await page.mouse.move(0, 150)
+          await expectSnapshot(
+            `filters-open-${dir}`,
+            page.locator(headerSelector)
+          )
+        })
 
-          test('resting', async ({ page }) => {
-            // By default, filters are open. We need to close them.
+        test('resting', async ({ page }) => {
+          // By default, filters are open on desktop. We need to close them.
+          if (!isMobileBreakpoint(breakpoint)) {
             await closeFilters(page)
-            // Make sure the header is not hovered on
-            await page.mouse.move(0, 150)
-            await expectSnapshot(`resting-${dir}`, page.locator(headerSelector))
-          })
+          }
+          // Make sure the header is not hovered on
+          await page.mouse.move(0, 150)
+          await expectSnapshot(`resting-${dir}`, page.locator(headerSelector))
+        })
 
-          test('scrolled', async ({ page }) => {
+        test('scrolled', async ({ page }) => {
+          if (!isMobileBreakpoint(breakpoint)) {
             await closeFilters(page)
-            await scrollToBottom(page)
-            await page.mouse.move(0, 150)
-            await sleep(200)
-            await expectSnapshot(
-              `scrolled-${dir}`,
-              page.locator(headerSelector)
-            )
-          })
+          }
+          await scrollToBottom(page)
+          await page.mouse.move(0, 150)
+          await sleep(200)
+          await expectSnapshot(`scrolled-${dir}`, page.locator(headerSelector))
+        })
 
-          test('searchbar hovered', async ({ page }) => {
+        test('searchbar hovered', async ({ page }) => {
+          if (!isMobileBreakpoint(breakpoint)) {
             await closeFilters(page)
-            await page.hover('input')
-            await hideInputCursors(page)
-            await expectSnapshot(
-              `searchbar-hovered-${dir}`,
-              page.locator(headerSelector)
-            )
-          })
+          }
+          await page.hover('input')
+          await hideInputCursors(page)
+          await expectSnapshot(
+            `searchbar-hovered-${dir}`,
+            page.locator(headerSelector)
+          )
+        })
 
-          test('searchbar active', async ({ page }) => {
+        test('searchbar active', async ({ page }) => {
+          if (!isMobileBreakpoint(breakpoint)) {
             await closeFilters(page)
-            await hideInputCursors(page)
-            await page.click('input')
-            await expectSnapshot(
-              `searchbar-active-${dir}`,
-              page.locator(headerSelector)
-            )
-          })
+          }
+          await hideInputCursors(page)
+          await page.click('input')
+          const locator = isMobileBreakpoint(breakpoint)
+            ? page
+            : page.locator(headerSelector)
+          await expectSnapshot(`searchbar-active-${dir}`, locator)
         })
-        // TODO: add mobile tests
       })
     })
   }