Update tests

test/playwright/utils/navigation.ts

@@ -11,9 +11,10 @@ import {
   SupportedSearchType,
   VIDEO,
 } from '~/constants/media'
-import { SCREEN_SIZES } from '~/constants/screens'
+import { SCREEN_SIZES, Breakpoint } from '~/constants/screens'
 
 import enMessages from '~/locales/en.json'
+import type { OpenverseCookieState } from '~/types/cookies'
 
 const messages: Record<string, Record<string, unknown>> = {
   ltr: enMessages,
@@ -449,12 +450,30 @@ export const pathWithDir = (rawPath: string, dir: string) => {
 
 export const enableNewHeader = async (page: Page) => {
   // Add the new_header cookie
-  await page.context().addCookies([
-    {
-      name: 'features',
-      value: '%7B%22new_header%22%3A%22on%22%7D',
-      domain: 'localhost',
-      path: '/',
-    },
-  ])
+  await setCookies(page, { features: { new_header: 'on' } })
+}
+
+export const setBpCookie = async (page: Page, value: string) => {
+  await setCookies(page, { uiBreakpoint: value as Breakpoint })
+}
+
+export const dismissAllBanners = async (page: Page) => {
+  await setCookies(page, {
+    uiDismissedBanners: [
+      'translation-ru',
+      'translation-es',
+      'translation-ar',
+      'cc-referral',
+    ],
+  })
+}
+
+export const setCookies = async (page: Page, cookies: OpenverseCookieState) => {
+  for (const [name, value] of Object.entries(cookies)) {
+    await page
+      .context()
+      .addCookies([
+        { name, value: JSON.stringify(value), domain: 'localhost', path: '/' },
+      ])
+  }
 }

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

@@ -24,8 +24,8 @@ for (const dir of languageDirections) {
         if (!isMobileBreakpoint(breakpoint)) {
           await context.addCookies([
             {
-              name: 'ui',
-              value: JSON.stringify({ isDesktopLayout: true }),
+              name: 'uiIsDesktopLayout',
+              value: JSON.stringify(true),
               domain: 'localhost',
               path: '/',
             },

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

@@ -3,13 +3,13 @@ import { test } from '@playwright/test'
 import { removeHiddenOverflow } from '~~/test/playwright/utils/page'
 import breakpoints from '~~/test/playwright/utils/breakpoints'
 import {
-  closeFilters,
-  dismissTranslationBanner,
+  dismissAllBanners,
   enableNewHeader,
   goToSearchTerm,
-  isPageDesktop,
   languageDirections,
   openFirstResult,
+  setBpCookie,
+  setCookies,
 } from '~~/test/playwright/utils/navigation'
 
 import { supportedMediaTypes } from '~/constants/media'
@@ -19,12 +19,13 @@ test.describe.configure({ mode: 'parallel' })
 for (const mediaType of supportedMediaTypes) {
   for (const dir of languageDirections) {
     test.describe(`${mediaType} ${dir} single-result page snapshots`, () => {
-      breakpoints.describeEvery(({ expectSnapshot }) => {
+      breakpoints.describeEvery(({ breakpoint, expectSnapshot }) => {
         test.beforeEach(async ({ page }) => {
           await enableNewHeader(page)
+          await setBpCookie(page, breakpoint)
+          await dismissAllBanners(page)
+          await setCookies(page, { uiIsFilterDismissed: true })
           await goToSearchTerm(page, 'birds', { dir })
-          if (isPageDesktop(page)) await closeFilters(page)
-          await dismissTranslationBanner(page)
         })
 
         test(`from search results`, async ({ page }) => {

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

@@ -3,9 +3,10 @@ import { test } from '@playwright/test'
 import breakpoints from '~~/test/playwright/utils/breakpoints'
 import { removeHiddenOverflow } from '~~/test/playwright/utils/page'
 import {
-  dismissTranslationBanner,
   pathWithDir,
   languageDirections,
+  setBpCookie,
+  dismissAllBanners,
 } from '~~/test/playwright/utils/navigation'
 
 test.describe.configure({ mode: 'parallel' })
@@ -14,14 +15,14 @@ const contentPages = ['about', '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 }) => {
+      breakpoints.describeEvery(({ breakpoint, expectSnapshot }) => {
+        test.beforeEach(async ({ page }) => {
+          await setBpCookie(page, breakpoint)
+          await dismissAllBanners(page)
+          await page.goto(pathWithDir(contentPage, dir))
           await removeHiddenOverflow(page)
+        })
+        test('full page', async ({ page }) => {
           // Make sure header is not hovered on
           await page.mouse.move(150, 150)
           await expectSnapshot(`${contentPage}-${dir}`, page, {

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

@@ -3,10 +3,11 @@ import { test } from '@playwright/test'
 import breakpoints from '~~/test/playwright/utils/breakpoints'
 import { removeHiddenOverflow } from '~~/test/playwright/utils/page'
 import {
-  dismissTranslationBanner,
   pathWithDir,
   languageDirections,
   enableNewHeader,
+  setBpCookie,
+  dismissAllBanners,
 } from '~~/test/playwright/utils/navigation'
 
 test.describe.configure({ mode: 'parallel' })
@@ -21,13 +22,13 @@ const contentPages = [
 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)
-      })
-
-      breakpoints.describeEvery(({ expectSnapshot }) => {
+      breakpoints.describeEvery(({ breakpoint, expectSnapshot }) => {
+        test.beforeEach(async ({ page }) => {
+          await setBpCookie(page, breakpoint)
+          await dismissAllBanners(page)
+          await enableNewHeader(page)
+          await page.goto(pathWithDir(contentPage, dir))
+        })
         test('full page', async ({ page }) => {
           await removeHiddenOverflow(page)
           // Make sure header is not hovered on