Add the new VR tests

Remove the Chrome search input cross in tailwind.css
Move the `self-center` class to weblink button
Add updated snapshots

Extract changes from #1930

src/components/VCopyButton.vue

@@ -4,7 +4,7 @@
     type="button"
     variant="secondary-filled"
     size="disabled"
-    class="py-2 px-3 text-sr"
+    class="py-2 px-3 text-sr font-bold"
     :data-clipboard-target="el"
   >
     <span v-if="!success">

src/components/VHeader/VHeaderMobile/VHeaderMobile.vue

@@ -5,7 +5,6 @@
   >
     <VInputModal
       class="flex w-full"
-      variant="recent-searches"
       :is-active="isRecentSearchesModalOpen"
       @close="deactivate"
     >

src/components/VHeader/VSearchBar/VSearchBar.vue

@@ -273,13 +273,3 @@ export default defineComponent({
   },
 })
 </script>
-
-<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 {
-  -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/components/VHeaderOld/VHeaderOld.vue

@@ -14,6 +14,7 @@
       :is-fetching="isFetching"
       :is-header-scrolled="isHeaderScrolled"
       :is-search-route="isSearchRoute"
+      class="md:h-12"
     />
 
     <VSearchBarOld

src/components/VMediaInfo/VMediaLicense.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="media-attribution">
-    <h3 class="description md:heading-6 mb-4">
+    <h3 class="description-bold md:heading-6 mb-4">
       {{ headerText }}
     </h3>
 

src/layouts/default.vue

@@ -110,7 +110,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
@@ -124,6 +123,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/e2e/search-query-client-old.spec.ts

@@ -4,6 +4,7 @@ import {
   changeContentType,
   goToSearchTerm,
   OLD_HEADER,
+  searchFromHeader,
 } from '~~/test/playwright/utils/navigation'
 import { mockProviderApis } from '~~/test/playwright/utils/route'
 
@@ -70,8 +71,8 @@ test('url filter types not used by current mediaType are discarded', async ({
 
 test('can search for a different term', async ({ page }) => {
   await goToSearchTerm(page, 'cat', { searchType: IMAGE })
-  await page.fill('header input[type="search"]', 'dog')
-  await page.keyboard.press('Enter')
+  await searchFromHeader(page, 'dog')
+
   await expect(page).toHaveURL('/search/image?q=dog')
 })
 
@@ -80,7 +81,6 @@ test('search for a different term keeps query parameters', async ({ page }) => {
     searchType: IMAGE,
     query: 'license=by&extension=jpg',
   })
-  await page.fill('header input[type="search"]', 'dog')
-  await page.keyboard.press('Enter')
+  await searchFromHeader(page, 'dog')
   await expect(page).toHaveURL('/search/image?q=dog&license=by&extension=jpg')
 })

test/playwright/playwright.config.ts

@@ -56,7 +56,7 @@ const config: PlaywrightTestConfig = {
   expect: {
     toMatchSnapshot: {
       // To avoid flaky tests, we allow a small amount of pixel difference.
-      maxDiffPixelRatio: 0.06,
+      maxDiffPixelRatio: 0.02,
     },
   },
 }

test/playwright/utils/breakpoints.ts

@@ -148,17 +148,17 @@ const describeEachDesktopWithMd = describeEachBreakpoint(desktopBreakpoints)
 const describeEachDesktop = describeEachBreakpoint(
   desktopBreakpoints.filter((b) => b !== 'md')
 )
-const describeEachMobile = describeEachBreakpoint(mobileBreakpoints)
+const describeEachMobile = describeEachBreakpoint([...mobileBreakpoints, 'md'])
 const describeEachMobileWithoutMd = describeEachBreakpoint(mobileBreakpoints)
 
 export default {
   ...breakpointTests,
   describeEachBreakpoint,
   describeEvery,
   describeEachDesktop,
-  // TODO: remove describeEachDesktopWithMd after the new_header is merged
+  // Used for VHeaderInternal
   describeEachDesktopWithMd,
   describeEachMobile,
-  // TODO: remove describeEachMobileWithoutMd after the new_header is merged
+  // Used for VHeaderInternal
   describeEachMobileWithoutMd,
 }

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

@@ -0,0 +1,41 @@
+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)
+      // Make sure filters button is not hovered
+      await page.mouse.move(0, 150)
+      await expectSnapshot('audio-results-desktop', page)
+    })
+  })
+})

test/playwright/visual-regression/components/media-reuse.spec.ts

@@ -1,12 +1,14 @@
-import { Route, test } from '@playwright/test'
+import { test } from '@playwright/test'
 
 import breakpoints from '~~/test/playwright/utils/breakpoints'
 import {
   dismissTranslationBanner,
-  pathWithDir,
   languageDirections,
+  pathWithDir,
+  scrollDownAndUp,
   t,
 } from '~~/test/playwright/utils/navigation'
+import { mockProviderApis } from '~~/test/playwright/utils/route'
 
 test.describe.configure({ mode: 'parallel' })
 
@@ -16,22 +18,24 @@ const tabs = [
   { id: 'plain', name: 'Plain text' },
 ]
 
-const cancelImageRequests = (route: Route) =>
-  route.request().resourceType() === 'image' ? route.abort() : route.continue()
-
 test.describe('media-reuse', () => {
   for (const tab of tabs) {
     for (const dir of languageDirections) {
       breakpoints.describeEvery(({ expectSnapshot }) => {
         test(`Should render a ${dir} media reuse section with "${tab.name}" tab open`, async ({
+          context,
           page,
         }) => {
-          await page.route('**/*', cancelImageRequests)
+          await mockProviderApis(context)
 
           await page.goto(
             pathWithDir('/image/f9384235-b72e-4f1e-9b05-e1b116262a29', dir)
           )
           await dismissTranslationBanner(page)
+          // The image is loading from provider, so we need to wait for it to
+          // finish loaded to prevent the shift of the component during snapshots.
+          await scrollDownAndUp(page)
+          await page.waitForLoadState('networkidle')
 
           await page.locator(`#tab-${tab.id}`).click()
           // Make sure the tab is not focused and doesn't have a pink ring

test/storybook/visual-regression/v-header-internal.spec.ts

@@ -11,7 +11,7 @@ const pageUrl = (dir: typeof languageDirections[number]) =>
 
 test.describe('VHeaderInternal', () => {
   for (const dir of languageDirections) {
-    breakpoints.describeEachDesktop(({ expectSnapshot }) => {
+    breakpoints.describeEachDesktopWithMd(({ expectSnapshot }) => {
       test(`desktop-header-internal-${dir}`, async ({ page }) => {
         await page.goto(pageUrl(dir))
         await page.mouse.move(0, 150)
@@ -21,7 +21,7 @@ test.describe('VHeaderInternal', () => {
         )
       })
     })
-    breakpoints.describeEachMobile(({ expectSnapshot }) => {
+    breakpoints.describeEachMobileWithoutMd(({ expectSnapshot }) => {
       test(`mobile-header-internal-${dir}`, async ({ page }) => {
         await page.goto(pageUrl(dir))
         await page.mouse.move(0, 150)