Add the new VR tests

src/components/VHeader/VHeaderMobile/VHeaderMobile.vue

@@ -5,7 +5,6 @@
   >
     <VInputModal
       class="flex w-full"
-      variant="recent-searches"
       :is-active="isRecentSearchesModalOpen"
       @close="deactivate"
     >
@@ -361,3 +360,12 @@ export default defineComponent({
   },
 })
 </script>
+<style>
+/* Removes the cross icon to clear the field */
+input[type='search']::-webkit-search-decoration,
+input[type='search']::-webkit-search-cancel-button,
+input[type='search']::-webkit-search-results-button,
+input[type='search']::-webkit-search-results-decoration {
+  -webkit-appearance: none;
+}
+</style>

src/components/VHeader/VSearchBar/VSearchBar.vue

@@ -267,10 +267,10 @@ export default defineComponent({
 
 <style>
 /* Removes the cross icon to clear the field */
-.search-field input[type='search']::-webkit-search-decoration,
-.search-field input[type='search']::-webkit-search-cancel-button,
-.search-field input[type='search']::-webkit-search-results-button,
-.search-field input[type='search']::-webkit-search-results-decoration {
+input[type='search']::-webkit-search-decoration,
+input[type='search']::-webkit-search-cancel-button,
+input[type='search']::-webkit-search-results-button,
+input[type='search']::-webkit-search-results-decoration {
   -webkit-appearance: none;
 }
 </style>

src/components/VHeaderOld/VHeaderFilter.vue

@@ -38,8 +38,6 @@ import {
   watch,
   computed,
   onMounted,
-  inject,
-  Ref,
   toRef,
   onBeforeUnmount,
 } from '@nuxtjs/composition-api'
@@ -49,6 +47,7 @@ import { Portal as VTeleport } from 'portal-vue'
 import { useBodyScrollLock } from '~/composables/use-body-scroll-lock'
 import { useFilterSidebarVisibility } from '~/composables/use-filter-sidebar-visibility'
 import { useFocusFilters } from '~/composables/use-focus-filters'
+import { isMinScreen } from '~/composables/use-media-query'
 
 import { Focus } from '~/utils/focus-management'
 import { defineEvent } from '~/types/emits'
@@ -90,7 +89,7 @@ export default defineComponent({
     const filterSidebar = useFilterSidebarVisibility()
     const disabledRef = toRef(props, 'disabled')
 
-    const isMinScreenMd: Ref<boolean> = inject('isMinScreenMd')
+    const isMinScreenMd = isMinScreen('md')
 
     const open = () => (visibleRef.value = true)
     const close = () => (visibleRef.value = false)

src/layouts/default.vue

@@ -107,7 +107,6 @@ const embeddedPage = {
       mounted.value = true
     })
 
-    const isMinScreenMd = isMinScreen('md')
     /**
      * If we use the `isMinScreen('lg')` composable for conditionally
      * rendering components, we get a server-client side rendering
@@ -121,6 +120,10 @@ const embeddedPage = {
     const isMinScreenLg = computed(() =>
       Boolean(innerIsMinScreenLg.value && mounted.value)
     )
+    const innerIsMinScreenMd = isMinScreen('md')
+    const isMinScreenMd = computed(() =>
+      Boolean(innerIsMinScreenMd.value && mounted.value)
+    )
 
     const isSidebarVisible = computed(() => {
       return isNewHeaderEnabled.value

src/pages/search.vue

@@ -37,9 +37,6 @@
 import { isShallowEqualObjects } from '@wordpress/is-shallow-equal'
 import { computed, defineComponent, inject, ref } from '@nuxtjs/composition-api'
 
-import { Context } from '@nuxt/types'
-
-import { isMinScreen } from '~/composables/use-media-query'
 import { useFilterSidebarVisibility } from '~/composables/use-filter-sidebar-visibility'
 import { Focus, focusIn } from '~/utils/focus-management'
 import { useMediaStore } from '~/stores/media'
@@ -49,6 +46,8 @@ import VSearchGrid from '~/components/VSearchGrid.vue'
 import VSkipToContentContainer from '~/components/VSkipToContentContainer.vue'
 import VScrollButton from '~/components/VScrollButton.vue'
 
+import type { Context } from '@nuxt/types'
+
 export default defineComponent({
   name: 'BrowsePage',
   components: {
@@ -68,7 +67,6 @@ export default defineComponent({
   scrollToTop: false,
   setup() {
     const searchGridRef = ref(null)
-    const isMinScreenMd = isMinScreen('md')
     const { isVisible: isFilterSidebarVisible } = useFilterSidebarVisibility()
     const showScrollButton = inject('showScrollButton')
     const mediaStore = useMediaStore()
@@ -99,7 +97,6 @@ export default defineComponent({
 
     return {
       searchGridRef,
-      isMinScreenMd,
       isFilterSidebarVisible,
       showScrollButton,
       searchTerm,
@@ -156,9 +153,9 @@ export default defineComponent({
       }
       focusIn(document.getElementById('__layout'), Focus.First)
     },
-    fetchMedia(...args: unknown[]) {
+    fetchMedia({ shouldPersistMedia } = { shouldPersistMedia: false }) {
       const mediaStore = useMediaStore(this.$pinia)
-      return mediaStore.fetchMedia(...args)
+      return mediaStore.fetchMedia({ shouldPersistMedia })
     },
   },
 })

src/pages/search/audio.vue

@@ -39,15 +39,17 @@ import {
   defineComponent,
   useMeta,
   ref,
+  inject,
 } from '@nuxtjs/composition-api'
 
-import { isMinScreen } from '~/composables/use-media-query'
 import { useBrowserIsMobile } from '~/composables/use-browser-detection'
 import { useFocusFilters } from '~/composables/use-focus-filters'
 import { Focus } from '~/utils/focus-management'
 
 import { useUiStore } from '~/stores/ui'
 
+import { IsMinScreenMdKey } from '~/types/provides'
+
 import VSnackbar from '~/components/VSnackbar.vue'
 import VAudioTrack from '~/components/VAudioTrack/VAudioTrack.vue'
 import VLoadMore from '~/components/VLoadMore.vue'
@@ -69,7 +71,7 @@ export default defineComponent({
 
     const results = computed(() => props.resultItems.audio)
 
-    const isMinScreenMd = isMinScreen('md', { shouldPassInSSR: true })
+    const isMinScreenMd = inject(IsMinScreenMdKey)
 
     // On SSR, we set the size to small if the User Agent is mobile, otherwise we set the size to medium.
     const isMobile = useBrowserIsMobile()

test/playwright/visual-regression/components/audio-results.spec.ts

@@ -0,0 +1,39 @@
+import { test } from '@playwright/test'
+
+import breakpoints from '~~/test/playwright/utils/breakpoints'
+import {
+  closeFilters,
+  enableNewHeader,
+} from '~~/test/playwright/utils/navigation'
+
+test.describe.configure({ mode: 'parallel' })
+
+test.describe('audio results', () => {
+  test.beforeEach(async ({ page }) => {
+    await enableNewHeader(page)
+    await page.goto('/search/audio?q=birds')
+  })
+
+  breakpoints.describeEachMobile({ uaMocking: false }, ({ expectSnapshot }) => {
+    test('should render small row layout desktop UA with narrow viewport', async ({
+      page,
+    }) => {
+      await expectSnapshot('audio-results-narrow-viewport-desktop-UA', page)
+    })
+  })
+
+  breakpoints.describeEachMobile({ uaMocking: true }, ({ expectSnapshot }) => {
+    test('should render small row layout mobile UA with narrow viewport', async ({
+      page,
+    }) => {
+      await expectSnapshot('audio-results-narrow-viewport-mobile-UA', page)
+    })
+  })
+
+  breakpoints.describeEachDesktop(({ expectSnapshot }) => {
+    test('desktop audio results', async ({ page }) => {
+      await closeFilters(page)
+      await expectSnapshot('audio-results-desktop', page)
+    })
+  })
+})

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

@@ -4,7 +4,9 @@ import breakpoints from '~~/test/playwright/utils/breakpoints'
 import { hideInputCursors } from '~~/test/playwright/utils/page'
 import {
   closeFilters,
+  enableNewHeader,
   goToSearchTerm,
+  isPageDesktop,
   languageDirections,
   scrollToBottom,
   sleep,
@@ -14,66 +16,74 @@ test.describe.configure({ mode: 'parallel' })
 
 const headerSelector = '.main-header'
 
-test.describe('header snapshots', () => {
+test.describe('header', () => {
   for (const dir of languageDirections) {
     test.describe(dir, () => {
       test.beforeEach(async ({ page }) => {
-        await goToSearchTerm(page, 'birds', {
-          dir: dir,
-          query: 'ff_new_header=on',
+        await enableNewHeader(page)
+        await goToSearchTerm(page, 'birds', { dir })
+      })
+      breakpoints.describeEachDesktop(({ expectSnapshot }) => {
+        test('filters open', async ({ page }) => {
+          await page.mouse.move(0, 150)
+          await expectSnapshot(
+            `filters-open-${dir}`,
+            page.locator(headerSelector)
+          )
         })
       })
 
-      test.describe('header', () => {
-        breakpoints.describeEachDesktop(({ expectSnapshot }) => {
-          test('filters open', async ({ page }) => {
-            await page.mouse.move(0, 150)
-            await expectSnapshot(
-              `filters-open-${dir}`,
-              page.locator(headerSelector)
-            )
-          })
+      breakpoints.describeEvery(({ expectSnapshot }) => {
+        test('resting', async ({ page }) => {
+          // By default, filters are open on desktop. We need to close them.
+          if (isPageDesktop(page)) {
+            await closeFilters(page)
+          }
+          // Make sure the header is not hovered on
+          await page.mouse.move(0, 150)
+          await expectSnapshot(`resting-${dir}`, page.locator(headerSelector))
+        })
 
-          test('resting', async ({ page }) => {
-            // By default, filters are open. We need to close them.
-            await closeFilters(page, 'old')
-            // Make sure the header is not hovered on
-            await page.mouse.move(0, 150)
-            await expectSnapshot(`resting-${dir}`, page.locator(headerSelector))
-          })
+        test('scrolled', async ({ page }) => {
+          if (isPageDesktop(page)) {
+            await closeFilters(page)
+          }
+          await scrollToBottom(page)
+          await page.mouse.move(0, 150)
+          await sleep(200)
+          await expectSnapshot(`scrolled-${dir}`, page.locator(headerSelector))
+        })
 
-          test('scrolled', async ({ page }) => {
-            await closeFilters(page, 'old')
-            await scrollToBottom(page)
-            await page.mouse.move(0, 150)
-            await sleep(200)
-            await expectSnapshot(
-              `scrolled-${dir}`,
-              page.locator(headerSelector)
-            )
-          })
+        test('searchbar hovered', async ({ page }) => {
+          if (isPageDesktop(page)) {
+            await closeFilters(page)
+          }
+          await page.hover('input')
+          await hideInputCursors(page)
+          await expectSnapshot(
+            `searchbar-hovered-${dir}`,
+            page.locator(headerSelector)
+          )
+        })
 
-          test('searchbar hovered', async ({ page }) => {
-            await closeFilters(page, 'old')
-            await page.hover('input')
-            await hideInputCursors(page)
+        test('searchbar active', async ({ page }) => {
+          if (isPageDesktop(page)) {
+            await closeFilters(page)
+          }
+          await hideInputCursors(page)
+          await page.click('input')
+          if (!isPageDesktop(page)) {
             await expectSnapshot(
-              `searchbar-hovered-${dir}`,
-              page.locator(headerSelector)
+              `searchbar-active-${dir}`,
+              page.locator('[role="dialog"]')
             )
-          })
-
-          test('searchbar active', async ({ page }) => {
-            await closeFilters(page, 'old')
-            await hideInputCursors(page)
-            await page.click('input')
+          } else {
             await expectSnapshot(
               `searchbar-active-${dir}`,
               page.locator(headerSelector)
             )
-          })
+          }
         })
-        // TODO: add mobile tests
       })
     })
   }