Use correct color for different routes in the default layout (#2108)

* Add failing e2e tests
* Fix the layout turning yellow
* Use recursive type for cookies
* Update comments

src/composables/use-match-routes.ts

@@ -1,36 +1,35 @@
-import {
-  useContext,
-  ref,
-  useRoute,
-  useRouter,
-  Ref,
-} from "@nuxtjs/composition-api"
+import { ref, useRoute, useRouter, Ref } from "@nuxtjs/composition-api"
 
 import { ALL_MEDIA, searchTypes, supportedSearchTypes } from "~/constants/media"
 import usePages from "~/composables/use-pages"
 
 /**
  * Reactive property that returns true only on the matching routes.
- * Note that routes are matched by name, not the url path.
- *
- * Routes are also localized before comparison, so 'search' becomes
- * 'search__en', for example.
+ * Note that routes are matched by their non-localized name.
  *
  */
 export const useMatchRoute = (
   routes: string[] = []
 ): { matches: Ref<boolean> } => {
-  const { app } = useContext()
   const route = useRoute()
   const router = useRouter()
 
-  const localizedRoutes = routes.map(
-    (route) => app.localeRoute({ name: route })?.name
-  )
-  const matches = ref(localizedRoutes.includes(route.value.name))
+  /**
+   * The route name is localized, so it includes the locale code after `__`.
+   * We remove the locale from the route name to match it with the
+   * non-localized routes array.
+   *
+   * @param route - the localized route name (e.g. `search__en`)
+   */
+  const routeNameMatches = (route: string | null | undefined) => {
+    if (!route) return false
+    return routes.includes(route.split("__")[0])
+  }
+
+  const matches = ref(routeNameMatches(route.value.name))
 
   router.beforeEach((to, _from, next) => {
-    matches.value = localizedRoutes.includes(to.name)
+    matches.value = routeNameMatches(to.name)
     next()
   })
 
@@ -52,8 +51,8 @@ export const useMatchSearchRoutes = () => {
 }
 
 /**
- * Reactive property that returns true only on the `search` routes.
- * Homepage, single image result and other content pages return `false`
+ * Reactive property that returns true only on the `single result` routes.
+ * Homepage, search results and other content pages return `false`
  */
 export const useMatchSingleResultRoutes = () => {
   const routes = [
@@ -71,7 +70,8 @@ export const useMatchSingleResultRoutes = () => {
 }
 
 /**
- * Matches the content pages (about, search help, etc.) and the preferences page.
+ * Reactive property that returns true only on the 'content' routes:
+ * about, search help, etc. and the preferences page.
  */
 export const useMatchContentPageRoutes = () => {
   const routes = usePages()

src/layouts/default.vue

@@ -69,6 +69,7 @@ import {
   onMounted,
   provide,
   ref,
+  useContext,
   watch,
 } from "@nuxtjs/composition-api"
 import { PortalTarget as VTeleportTarget } from "portal-vue"
@@ -93,8 +94,8 @@ import VModalTarget from "~/components/VModal/VModalTarget.vue"
 import VGlobalAudioSection from "~/components/VGlobalAudioSection/VGlobalAudioSection.vue"
 import VSearchGridFilter from "~/components/VFilters/VSearchGridFilter.vue"
 
-const embeddedPage = {
-  name: "embedded",
+export default {
+  name: "DefaultLayout",
   components: {
     VBanners,
     VHeaderDesktop: () => import("~/components/VHeader/VHeaderDesktop.vue"),
@@ -109,6 +110,7 @@ const embeddedPage = {
     VSearchGridFilter,
   },
   setup() {
+    const { app } = useContext()
     const uiStore = useUiStore()
     const featureFlagStore = useFeatureFlagStore()
     const searchStore = useSearchStore()
@@ -131,15 +133,19 @@ const embeddedPage = {
     const { matches: isSingleResultRoute } = useMatchSingleResultRoutes()
     const { matches: isContentPageRoute } = useMatchContentPageRoutes()
 
+    const nuxtError = computed(() => app.nuxt.err)
+
     const isWhite = computed(
       () =>
-        isSearchRoute.value ||
-        isSingleResultRoute.value ||
-        isContentPageRoute.value
+        !nuxtError.value &&
+        (isSearchRoute.value ||
+          isSingleResultRoute.value ||
+          isContentPageRoute.value)
     )
 
     const isSearchHeader = computed(
-      () => isSearchRoute.value || isSingleResultRoute.value
+      () =>
+        !nuxtError.value && (isSearchRoute.value || isSingleResultRoute.value)
     )
 
     const isDesktopLayout = computed(() => uiStore.isDesktopLayout)
@@ -198,7 +204,6 @@ const embeddedPage = {
     return this.$nuxtI18nHead({ addSeoAttributes: true, addDirAttribute: true })
   },
 }
-export default embeddedPage
 </script>
 
 <style scoped>

test/playwright/e2e/load-more.spec.ts

@@ -1,8 +1,8 @@
 import { expect, Page, test } from "@playwright/test"
 
 import {
+  enableNewHeader,
   goToSearchTerm,
-  OLD_HEADER,
   renderModes,
   t,
 } from "~~/test/playwright/utils/navigation"
@@ -12,10 +12,6 @@ import { AUDIO, IMAGE, SupportedMediaType } from "~/constants/media"
 
 test.describe.configure({ mode: "parallel" })
 
-test.beforeEach(async ({ context }) => {
-  await mockProviderApis(context)
-})
-
 const loadMoreButton = `button:has-text("${t("browse-page.load", "ltr")}")`
 
 const openSingleMediaView = async (
@@ -46,6 +42,11 @@ const openSingleMediaView = async (
  */
 
 test.describe("Load more button", () => {
+  test.beforeEach(async ({ context, page }) => {
+    await mockProviderApis(context)
+    await enableNewHeader(page)
+  })
+
   test("Clicking sends 2 requests on All view with enough results", async ({
     page,
   }) => {
@@ -125,7 +126,6 @@ test.describe("Load more button", () => {
         await goToSearchTerm(page, "horses snort", {
           mode,
           searchType: AUDIO,
-          headerMode: OLD_HEADER,
         })
         await expect(page.locator(loadMoreButton)).not.toBeVisible()
       })

test/playwright/playwright.config.ts

@@ -59,7 +59,6 @@ const config: PlaywrightTestConfig = {
       maxDiffPixelRatio: 0,
     },
   },
-  retries: 2,
 }
 
 export default config

test/playwright/utils/navigation.ts

@@ -468,9 +468,13 @@ export const enableOldHeader = async (page: Page) => {
   await setCookies(page.context(), { features: { new_header: "off" } })
 }
 
+export interface CookieMap {
+  [key: string]: string | boolean | string[] | CookieMap
+}
+
 export const setCookies = async (
   context: BrowserContext,
-  cookies: Record<string, string | boolean | string[] | Record<string, string>>
+  cookies: CookieMap
 ) => {
   await context.addCookies(
     Object.entries(cookies).map(([name, value]) => ({

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

@@ -1,4 +1,4 @@
-import { test } from "@playwright/test"
+import { expect, test } from "@playwright/test"
 
 import breakpoints from "~~/test/playwright/utils/breakpoints"
 import { removeHiddenOverflow } from "~~/test/playwright/utils/page"
@@ -21,6 +21,8 @@ const contentPages = [
 for (const contentPage of contentPages) {
   for (const dir of languageDirections) {
     test.describe(`${contentPage} ${dir} page snapshots`, () => {
+      test.describe.configure({ retries: 2 })
+
       breakpoints.describeEvery(({ breakpoint, expectSnapshot }) => {
         test.beforeEach(async ({ context, page }) => {
           await enableNewHeader(page)
@@ -44,3 +46,47 @@ for (const contentPage of contentPages) {
     })
   }
 }
+
+test.describe("Layout color is set correctly", () => {
+  breakpoints.describeLg(() => {
+    test.use({
+      viewport: { width: 1024, height: 700 },
+    })
+    test.beforeEach(async ({ page }) => {
+      await enableNewHeader(page)
+    })
+
+    test("Change language on homepage and search", async ({ page }) => {
+      await page.goto("/")
+      await page.getByRole("combobox", { name: "Language" }).selectOption("ar")
+
+      await page.getByPlaceholder("البحث عن محتوى").fill("cat")
+      await page.getByRole("button", { name: "يبحث" }).click()
+      await page.waitForNavigation()
+
+      expect(await page.screenshot()).toMatchSnapshot("search-page-rtl-lg.png")
+    })
+
+    test("Change language on homepage and go to content page", async ({
+      page,
+    }) => {
+      await page.goto("/ar")
+      await page.getByRole("combobox", { name: "لغة" }).selectOption("en")
+
+      await page.getByRole("link", { name: "About" }).click()
+      await page.mouse.move(100, 100)
+
+      expect(await page.screenshot({ fullPage: true })).toMatchSnapshot(
+        "about-ltr-lg.png"
+      )
+    })
+
+    test("Nonexistent `image` page", async ({ page }) => {
+      await page.goto("/image/non-existent")
+
+      expect(await page.screenshot({ fullPage: true })).toMatchSnapshot(
+        "non-existent-ltr-lg.png"
+      )
+    })
+  })
+})

test/tapes/response-622.json5

@@ -0,0 +1,72 @@
+{
+    meta: {
+        createdAt: '2023-01-30T15:49:52.087Z',
+        host: 'https://api.openverse.engineering',
+        resHumanReadable: true,
+    },
+    req: {
+        headers: {
+            connection: 'close',
+        },
+        url: '/v1/images/non-existent/',
+        method: 'GET',
+        body: '',
+    },
+    res: {
+        status: 404,
+        headers: {
+            date: [
+                'Mon, 30 Jan 2023 15:49:53 GMT',
+            ],
+            'content-type': [
+                'text/html; charset=utf-8',
+            ],
+            'transfer-encoding': [
+                'chunked',
+            ],
+            connection: [
+                'close',
+            ],
+            vary: [
+                'Authorization, Origin',
+            ],
+            'x-frame-options': [
+                'DENY',
+            ],
+            'x-content-type-options': [
+                'nosniff',
+            ],
+            'referrer-policy': [
+                'same-origin',
+            ],
+            'cross-origin-opener-policy': [
+                'same-origin',
+            ],
+            'x-request-id': [
+                '0669a006e1cc43fe85b623c9a4fac47b',
+            ],
+            'cache-control': [
+                'max-age=14400',
+            ],
+            'cf-cache-status': [
+                'MISS',
+            ],
+            'server-timing': [
+                'cf-q-config;dur=5.0000089686364e-06',
+            ],
+            'strict-transport-security': [
+                'max-age=15552000; includeSubDomains; preload',
+            ],
+            server: [
+                'cloudflare',
+            ],
+            'cf-ray': [
+                '791b5c2baebbb9db-OTP',
+            ],
+            'alt-svc': [
+                'h3=":443"; ma=86400, h3-29=":443"; ma=86400',
+            ],
+        },
+        body: '\n<!doctype html>\n<html lang="en">\n<head>\n  <title>Not Found</title>\n</head>\n<body>\n  <h1>Not Found</h1><p>The requested resource was not found on this server.</p>\n<script defer src="https://static.cloudflareinsights.com/beacon.min.js/vaafb692b2aea4879b33c060e79fe94621666317369993" integrity="sha512-0ahDYl866UMhKuYcW078ScMalXqtFJggm7TmlUtp0UlD4eQk0Ixfnm5ykXKvGJNFjLMoortdseTfsRT8oCfgGA==" data-cf-beacon=\'{"rayId":"791b5c2baebbb9db","token":"b84c1fc0e0174d7bafb20aa9869dd416","version":"2022.11.3","si":100}\' crossorigin="anonymous"></script>\n</body>\n</html>\n',
+    },
+}