Enable new header in staging (#2102)

* Enable new header in staging * Update the cookie sameSite in the unit tests based on flags * Set flag back to switchable with default of on * Fix the tests Co-authored-by: Olga Bulat <obulat@gmail.com> Co-authored-by: sarayourfriend <24264157+sarayourfriend@users.noreply.github.com>
WordPress · Jan 18, 2023 · cbd039c · cbd039c
1 parent 7da02a7
commit cbd039c
Show file tree

Hide file tree

Showing 11 changed files with 51 additions and 12 deletions.
diff --git a/feat/feature-flags.json b/feat/feature-flags.json
@@ -14,7 +14,7 @@
         "production": "disabled"
       },
       "description": "Toggle the new header, including recent searches.",
-      "defaultState": "off"
+      "defaultState": "on"
     },
     "feat_disabled": {
       "status": "disabled",

diff --git a/test/playwright/e2e/homepage.spec.ts b/test/playwright/e2e/homepage.spec.ts
@@ -2,9 +2,10 @@ import { expect, Page, test } from "@playwright/test"
 
 import { mockProviderApis } from "~~/test/playwright/utils/route"
 import {
+  enableNewHeader,
   goToSearchTerm,
-  OLD_HEADER,
   searchTypePath,
+  t,
 } from "~~/test/playwright/utils/navigation"
 
 import { supportedSearchTypes } from "~/constants/media"
@@ -19,23 +20,25 @@ for (const searchType of supportedSearchTypes) {
   test(`can change type and search for ${searchType} from homepage`, async ({
     page,
   }) => {
+    await enableNewHeader(page)
     await goToSearchTerm(page, "cat", {
       searchType,
       mode: "CSR",
-      headerMode: OLD_HEADER,
     })
 
     const expectedUrl = `/search/${searchTypePath(searchType)}?q=cat`
     await expect(page).toHaveURL(expectedUrl)
   })
 }
 
+const searchTypePopover = "[aria-labelledby='search-type-button'] > div"
+
 const popoverIsVisible = async (page: Page) =>
-  await expect(page.locator(".popover-content")).toBeVisible()
+  await expect(page.locator(searchTypePopover)).toBeVisible()
 const popoverIsNotVisible = async (page: Page) =>
-  await expect(page.locator(".popover-content")).not.toBeVisible()
+  await expect(page.locator(searchTypePopover)).not.toBeVisible()
 const clickPopoverButton = async (page: Page) =>
-  await page.click('button[aria-label="All content"]')
+  await page.getByRole("button", { name: t("search-type.all") }).click()
 
 test("can close the search type popover by clicking outside", async ({
   page,

diff --git a/test/playwright/e2e/migration-banner.spec.ts b/test/playwright/e2e/migration-banner.spec.ts
@@ -1,5 +1,7 @@
 import { test, expect } from "@playwright/test"
 
+import { enableNewHeader } from "~~/test/playwright/utils/navigation"
+
 test.describe.configure({ mode: "parallel" })
 
 test.describe("migration banner", () => {
@@ -32,14 +34,15 @@ test.describe("migration banner", () => {
   })
 
   test("migration banner goes away on navigation", async ({ page }) => {
+    await enableNewHeader(page)
     await page.goto("/?referrer=creativecommons.org")
 
     const migrationNotice = page.locator('[data-testid="banner-cc-referral"]')
     await expect(migrationNotice).toBeVisible()
 
     // Navigate away from the page
     await Promise.all([
-      page.locator("a.homepage-image").first().click(),
+      page.locator("a.home-cell").first().click(),
       page.waitForLoadState("domcontentloaded"),
     ])
     await expect(migrationNotice).toBeHidden()

diff --git a/test/playwright/e2e/mobile-menu-old.spec.ts b/test/playwright/e2e/mobile-menu-old.spec.ts
@@ -1,7 +1,8 @@
-import { test, expect } from "@playwright/test"
+import { expect, test } from "@playwright/test"
 
 import {
   closeMobileMenu,
+  enableOldHeader,
   goToSearchTerm,
   OLD_HEADER,
   openContentTypes,
@@ -19,6 +20,7 @@ test.use(mobileFixture)
 test.describe.configure({ mode: "parallel" })
 
 test("Can open filters menu on mobile at least twice", async ({ page }) => {
+  await enableOldHeader(page)
   await page.goto("/search/?q=cat")
 
   await openFilters(page, OLD_HEADER)
@@ -37,6 +39,7 @@ test("Can open filters menu on mobile at least twice", async ({ page }) => {
 })
 
 test("Can open mobile menu at least twice", async ({ page }) => {
+  await enableOldHeader(page)
   await goToSearchTerm(page, "cat")
   await openContentTypes(page, OLD_HEADER)
   await expect(page.locator("button", { hasText: "Close" })).toBeVisible()
@@ -47,7 +50,8 @@ test("Can open mobile menu at least twice", async ({ page }) => {
 })
 
 test("Selecting a search type closes the modal", async ({ page }) => {
-  await goToSearchTerm(page, "cat")
+  await enableOldHeader(page)
+  await goToSearchTerm(page, "cat", { headerMode: OLD_HEADER })
   await openContentTypes(page, OLD_HEADER)
   await expect(page.locator("button", { hasText: "Close" })).toBeVisible()
   await page.locator('a[role="radio"]:has-text("Audio")').click()

diff --git a/test/playwright/e2e/translation-banner.spec.ts b/test/playwright/e2e/translation-banner.spec.ts
@@ -1,5 +1,7 @@
 import { test, expect } from "@playwright/test"
 
+import { enableNewHeader } from "~~/test/playwright/utils/navigation"
+
 const russianSearchPath = "/ru/search?q=dog"
 
 test.describe.configure({ mode: "parallel" })
@@ -8,6 +10,7 @@ test.describe("translation banner", () => {
   test("Can see the translation banner and go to the correct link", async ({
     page,
   }) => {
+    await enableNewHeader(page)
     await page.goto(russianSearchPath)
     await expect(
       page.locator(
@@ -50,8 +53,7 @@ test.describe("translation banner", () => {
     const banner = page.locator('.span:has-text("Help us get to 100 percent")')
     await expect(banner).not.toBeVisible({ timeout: 500 })
     // Test that the banner does not re-appear when navigating to the 'About us' page
-    await page.click('[aria-label="меню"]')
-    await page.click('a[role="menuitemcheckbox"]:has-text("Наша история")')
+    await page.locator('a[href="/ru/about"]').click()
     await expect(banner).not.toBeVisible({ timeout: 500 })
 
     await page.goto(russianSearchPath)

diff --git a/test/playwright/utils/navigation.ts b/test/playwright/utils/navigation.ts
@@ -462,6 +462,18 @@ export const enableNewHeader = async (page: Page) => {
   ])
 }
 
+export const enableOldHeader = async (page: Page) => {
+  // Add the new_header cookie
+  await page.context().addCookies([
+    {
+      name: "features",
+      value: "%7B%22new_header%22%3A%22off%22%7D",
+      domain: "localhost",
+      path: "/",
+    },
+  ])
+}
+
 export const setCookies = async (
   context: BrowserContext,
   cookies: Record<string, string | boolean | string[]>

diff --git a/test/playwright/visual-regression/components/audio-results-old.spec.ts b/test/playwright/visual-regression/components/audio-results-old.spec.ts
@@ -3,6 +3,7 @@ import { test } from "@playwright/test"
 import breakpoints from "~~/test/playwright/utils/breakpoints"
 import {
   closeFilters,
+  enableOldHeader,
   OLD_HEADER,
   setCookies,
 } from "~~/test/playwright/utils/navigation"
@@ -11,6 +12,7 @@ test.describe.configure({ mode: "parallel" })
 
 test.describe("audio results", () => {
   test.beforeEach(async ({ page }) => {
+    await enableOldHeader(page)
     await page.goto("/search/audio?q=birds")
   })
 

diff --git a/test/playwright/visual-regression/components/header-old.spec.ts b/test/playwright/visual-regression/components/header-old.spec.ts
@@ -4,6 +4,7 @@ import breakpoints from "~~/test/playwright/utils/breakpoints"
 import { hideInputCursors } from "~~/test/playwright/utils/page"
 import {
   closeFilters,
+  enableOldHeader,
   goToSearchTerm,
   languageDirections,
   OLD_HEADER,
@@ -19,6 +20,7 @@ const headerSelector = ".main-header"
 for (const dir of languageDirections) {
   test.describe(dir, () => {
     test.beforeEach(async ({ page }) => {
+      await enableOldHeader(page)
       await goToSearchTerm(page, "birds", { dir: dir })
     })
 

diff --git a/test/playwright/visual-regression/pages/homepage-old.spec.ts b/test/playwright/visual-regression/pages/homepage-old.spec.ts
@@ -6,6 +6,7 @@ import {
   dismissTranslationBanner,
   pathWithDir,
   languageDirections,
+  enableOldHeader,
 } from "~~/test/playwright/utils/navigation"
 
 test.describe.configure({ mode: "parallel" })
@@ -23,6 +24,7 @@ for (const dir of languageDirections) {
   test.describe(`${dir} homepage snapshots`, () => {
     const path = pathWithDir("/", dir)
     test.beforeEach(async ({ page }) => {
+      await enableOldHeader(page)
       await page.goto(path)
       await dismissTranslationBanner(page)
       await deleteImageCarousel(page)

diff --git a/test/playwright/visual-regression/pages/pages-with-old-header.spec.ts b/test/playwright/visual-regression/pages/pages-with-old-header.spec.ts
@@ -6,6 +6,7 @@ import {
   pathWithDir,
   languageDirections,
   setCookies,
+  enableOldHeader,
 } from "~~/test/playwright/utils/navigation"
 
 test.describe.configure({ mode: "parallel" })
@@ -16,6 +17,7 @@ for (const contentPage of contentPages) {
     test.describe(`${contentPage} ${dir} page snapshots`, () => {
       breakpoints.describeEvery(({ breakpoint, expectSnapshot }) => {
         test("full page", async ({ context, page }) => {
+          await enableOldHeader(page)
           await setCookies(context, {
             uiBreakpoint: breakpoint,
             uiDismissedBanners: ["translation-ar"],

diff --git a/test/unit/specs/stores/ui-store.spec.js b/test/unit/specs/stores/ui-store.spec.js
@@ -1,5 +1,6 @@
 import { setActivePinia, createPinia } from "~~/test/unit/test-utils/pinia"
 
+import { useFeatureFlagStore } from "~/stores/feature-flag"
 import { useUiStore } from "~/stores/ui"
 
 const initialState = {
@@ -31,13 +32,19 @@ const NOT_VISIBLE_AND_NOT_DISMISSED = {
 const cookieOptions = {
   maxAge: 5184000,
   path: "/",
-  sameSite: "none",
+  sameSite: "strict",
   secure: false,
 }
 
 describe("Ui Store", () => {
   beforeEach(() => {
     setActivePinia(createPinia())
+    const featureFlagStore = useFeatureFlagStore()
+    if (featureFlagStore.isOn("new_header")) {
+      cookieOptions.sameSite = "strict"
+    } else {
+      cookieOptions.sameSite = "none"
+    }
   })
   describe("state", () => {
     it("sets the initial state correctly", () => {