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 font-semibold"
+    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/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>
 

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/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)
+    })
+  })
+})