Add new pages visual regression tests (#1913)

* Move current tests to pages-old and add new ones in pages.spec.ts

* Add snapshots

* Fix the header paddings; search-help footer; footer width on lg

* Rename the test as suggested in the code review

src/components/VHeader/VHeaderDesktop.vue

@@ -1,6 +1,6 @@
 <template>
   <header
-    class="main-header z-30 flex w-full items-stretch justify-between gap-x-2 border-b bg-white py-4 px-7"
+    class="main-header z-30 flex w-full items-stretch justify-between gap-x-2 border-b bg-white py-4 px-6"
     :class="
       isHeaderScrolled || sidebarVisibleRef
         ? 'border-dark-charcoal-20'

src/layouts/default.vue

@@ -21,10 +21,13 @@
         isNewHeaderEnabled ? 'new-layout' : 'old-layout',
       ]"
     >
-      <template v-if="isNewHeaderEnabled">
-        <Nuxt class="main-page min-w-0 !px-6" />
-        <VFooter class="border-t border-dark-charcoal-20" />
-      </template>
+      <div v-if="isNewHeaderEnabled" class="main-page min-w-0">
+        <Nuxt class="!px-6" />
+        <VFooter
+          :mode="isSearchHeader ? 'content' : 'search'"
+          class="border-t border-dark-charcoal-20"
+        />
+      </div>
       <Nuxt v-else class="main-page min-w-0" />
 
       <VSidebarTarget
@@ -198,6 +201,8 @@ export default embeddedPage
   /** Make the main content area span both grid columns when the sidebar is closed... **/
   .main.new-layout > *:first-child {
     grid-column: span 2;
+    /** Make sure the bottom element (footer) is all the way at the bottom of the page **/
+    @apply flex flex-col justify-between;
   }
   /** ...and only one column when it is visible. **/
   .main.new-layout.has-sidebar > *:first-child {

test/playwright/visual-regression/pages/pages-with-old-header.spec.ts

@@ -0,0 +1,40 @@
+import { test } from '@playwright/test'
+
+import breakpoints from '~~/test/playwright/utils/breakpoints'
+import { removeHiddenOverflow } from '~~/test/playwright/utils/page'
+import {
+  dismissTranslationBanner,
+  pathWithDir,
+  languageDirections,
+} from '~~/test/playwright/utils/navigation'
+
+test.describe.configure({ mode: 'parallel' })
+
+const contentPages = [
+  'about',
+  'external-sources',
+  'search-help',
+  'non-existent',
+  'sources',
+]
+for (const contentPage of contentPages) {
+  for (const dir of languageDirections) {
+    test.describe(`${contentPage} ${dir} page snapshots`, () => {
+      test.beforeEach(async ({ page }) => {
+        await page.goto(pathWithDir(contentPage, dir))
+        await dismissTranslationBanner(page)
+      })
+
+      breakpoints.describeEvery(({ expectSnapshot }) => {
+        test('full page', async ({ page }) => {
+          await removeHiddenOverflow(page)
+          // Make sure header is not hovered on
+          await page.mouse.move(150, 150)
+          await expectSnapshot(`${contentPage}-${dir}`, page, {
+            fullPage: true,
+          })
+        })
+      })
+    })
+  }
+}

test/playwright/visual-regression/pages/pages.spec.ts

@@ -6,6 +6,7 @@ import {
   dismissTranslationBanner,
   pathWithDir,
   languageDirections,
+  enableNewHeader,
 } from '~~/test/playwright/utils/navigation'
 
 test.describe.configure({ mode: 'parallel' })
@@ -21,6 +22,7 @@ for (const contentPage of contentPages) {
   for (const dir of languageDirections) {
     test.describe(`${contentPage} ${dir} page snapshots`, () => {
       test.beforeEach(async ({ page }) => {
+        await enableNewHeader(page)
         await page.goto(pathWithDir(contentPage, dir))
         await dismissTranslationBanner(page)
       })