Update spacing in the internal header

src/components/VHeader/VHeaderInternal.vue

@@ -4,11 +4,10 @@
     class="main-header z-30 flex h-20 w-full items-stretch justify-between gap-x-2 border-b border-tx py-4 ps-2 pe-3 md:py-4 lg:ps-6 lg:pe-10"
   >
     <VHomeLink variant="dark" class="px-4 hover:bg-yellow" />
-    <nav class="lg:justify-stretch hidden ms-auto lg:flex">
+    <nav class="hidden lg:flex">
       <VPageLinks
         mode="light"
-        class="md:justify-stretch hidden items-center gap-8 text-sm ms-auto md:flex"
-        nav-link-classes="ms-3"
+        class="flex items-center gap-6 text-sm"
         @close="closePageMenu"
       />
     </nav>

test/playwright/utils/navigation.ts

@@ -319,9 +319,22 @@ export const dismissTranslationBanner = async (page: Page) => {
 export const selectHomepageSearchType = async (
   page: Page,
   searchType: SupportedSearchType,
-  dir: LanguageDirection = "ltr"
+  dir: LanguageDirection = "ltr",
+  headerMode: HeaderMode = NEW_HEADER
 ) => {
   const pageWidth = page.viewportSize()?.width
+  // TODO: replace when the search types can only be selected using the popover/modal
+  console.log("Selecting homepage search type in header mode", headerMode)
+  // if (headerMode === NEW_HEADER || (pageWidth && pageWidth > SCREEN_SIZES.sm)) {
+  //   await page.getByRole("button", { name: t("search-type.all", dir) }).click()
+  //
+  //   await page
+  //     .getByRole("radio", { name: searchTypeNames[dir][searchType] })
+  //     .click()
+  // } else {
+  //   await page.click(`button:has-text("${searchTypeNames[dir][searchType]}")`)
+  // }
+
   if (pageWidth && pageWidth > SCREEN_SIZES.sm) {
     await page.click(`[aria-label="${t("search-type.all", dir)}"]`)
     await page.click(
@@ -340,12 +353,14 @@ export const goToSearchTerm = async (
     mode?: RenderMode
     dir?: LanguageDirection
     query?: string // Only for SSR mode
+    headerMode?: HeaderMode
   } = {}
 ) => {
   const searchType = options.searchType || ALL_MEDIA
   const dir = options.dir || "ltr"
   const mode = options.mode ?? "SSR"
   const query = options.query ? `&${options.query}` : ""
+  const headerMode = options.headerMode ?? NEW_HEADER
 
   if (mode === "SSR") {
     const path = `search/${searchTypePath(searchType)}?q=${term}${query}`
@@ -356,7 +371,7 @@ export const goToSearchTerm = async (
     await dismissTranslationBanner(page)
     // Select the search type
     if (searchType !== "all") {
-      await selectHomepageSearchType(page, searchType, dir)
+      await selectHomepageSearchType(page, searchType, dir, headerMode)
     }
     // Type search term
     const searchInput = page.locator('main input[type="search"]')
@@ -365,7 +380,7 @@ export const goToSearchTerm = async (
     // Wait for navigation
     await Promise.all([
       page.waitForNavigation(),
-      page.click(`[aria-label="${t("search.search", dir)}"]`),
+      await page.getByRole("button", { name: t("search.search", dir) }).click(),
     ])
     await page.waitForLoadState("load")
   }

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

@@ -0,0 +1,57 @@
+import { test, Page } from "@playwright/test"
+
+import breakpoints from "~~/test/playwright/utils/breakpoints"
+import { hideInputCursors } from "~~/test/playwright/utils/page"
+import {
+  dismissTranslationBanner,
+  pathWithDir,
+  languageDirections,
+} from "~~/test/playwright/utils/navigation"
+
+test.describe.configure({ mode: "parallel" })
+
+/**
+ * Remove the randomly-selected images from the homepage.
+ */
+const deleteImageCarousel = async (page: Page) => {
+  const element = await page.$('[data-testid="image-carousel"]')
+  await element?.evaluate((node) => node.remove())
+  element?.dispose()
+}
+
+for (const dir of languageDirections) {
+  test.describe(`${dir} homepage snapshots`, () => {
+    const path = pathWithDir("/", dir)
+    test.beforeEach(async ({ page }) => {
+      await page.goto(path)
+      await dismissTranslationBanner(page)
+    })
+
+    breakpoints.describeEvery(({ expectSnapshot }) =>
+      test(`${dir} full page old design`, async ({ page }) => {
+        await deleteImageCarousel(page)
+        await expectSnapshot(`index-${dir}`, page)
+      })
+    )
+
+    test.describe("search input", () => {
+      breakpoints.describeEvery(({ expectSnapshot }) => {
+        test("unfocused", async ({ page }) => {
+          await expectSnapshot(
+            `unfocused-search-${dir}`,
+            page.locator("form:has(input)")
+          )
+        })
+
+        test("focused", async ({ page }) => {
+          await page.focus("input")
+          await hideInputCursors(page)
+          await expectSnapshot(
+            `focused-search-${dir}`,
+            page.locator("form:has(input)")
+          )
+        })
+      })
+    })
+  })
+}

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

@@ -11,15 +11,6 @@ import {
 
 test.describe.configure({ mode: "parallel" })
 
-/**
- * Remove the randomly-selected images from the homepage.
- */
-const deleteImageCarousel = async (page: Page) => {
-  const element = await page.$('[data-testid="image-carousel"]')
-  await element?.evaluate((node) => node.remove())
-  element?.dispose()
-}
-
 /**
  * Make the random set of images uniform by dropping their brightness to zero,
  * and changing them into black circles.
@@ -35,24 +26,14 @@ for (const dir of languageDirections) {
   test.describe(`${dir} homepage snapshots`, () => {
     const path = pathWithDir("/", dir)
     test.beforeEach(async ({ page }) => {
+      await enableNewHeader(page)
       await page.goto(path)
       await dismissTranslationBanner(page)
-      // TODO: Remove this after the cookie-based layout is merged.
-      await page.waitForLoadState("networkidle")
+      await cleanImageCarousel(page)
     })
 
-    breakpoints.describeEvery(({ expectSnapshot }) =>
-      test(`${dir} full page old design`, async ({ page }) => {
-        await deleteImageCarousel(page)
-        await expectSnapshot(`index-old-design-${dir}`, page)
-      })
-    )
-
     breakpoints.describeEvery(({ expectSnapshot }) =>
       test(`${dir} full page`, async ({ page }) => {
-        await enableNewHeader(page)
-        await page.reload() // to show the redesigned page
-        await cleanImageCarousel(page)
         await expectSnapshot(`index-${dir}`, page)
       })
     )