Add VR tests for footer and 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
       })
     })
   }

test/storybook/visual-regression/v-footer.spec.ts

@@ -0,0 +1,37 @@
+import { test } from '@playwright/test'
+
+import breakpoints from '~~/test/playwright/utils/breakpoints'
+import { languageDirections } from '~~/test/playwright/utils/navigation'
+
+const footerKinds = ['internal', 'content'] as const
+
+const defaultUrl = '/iframe.html?id=components-vfooter--'
+
+const pageUrl = (
+  dir: typeof languageDirections[number],
+  footerKind: typeof footerKinds[number]
+) => {
+  const url = `${defaultUrl}${footerKind}`
+  return dir === 'ltr' ? url : `${url}&globals=languageDirection:rtl`
+}
+
+test.describe.configure({ mode: 'parallel' })
+
+test.describe('VFooter', () => {
+  for (const dir of languageDirections) {
+    for (const footerKind of footerKinds) {
+      breakpoints.describeEvery(({ expectSnapshot }) => {
+        test(`footer-${footerKind}-${dir}`, async ({ page }) => {
+          await page.goto(pageUrl(dir, footerKind))
+          if (dir === 'rtl') {
+            await page.locator('#language').selectOption({ value: 'ar' })
+          }
+          await expectSnapshot(
+            `footer-${footerKind}-${dir}`,
+            page.locator('footer')
+          )
+        })
+      })
+    }
+  }
+})