Add e2e test utils for new_header

Rename the tests that use utils functions adding `-old`

src/components/VHeader/VHeaderMobile/VContentSettingsButton.vue

@@ -2,9 +2,9 @@
   <VSearchBarButton
     :icon-path="sourceIcon"
     :aria-label="
-      areFiltersSelected
-        ? $t('header.aria.menu-notification')
-        : $t('header.aria.menu')
+      appliedFilterCount
+        ? $tc('header.content-settings-button.with-count', appliedFilterCount)
+        : $t('header.content-settings-button.simple')
     "
     aria-haspopup="dialog"
     :aria-expanded="isPressed"
@@ -13,7 +13,7 @@
   >
     <template #notification>
       <span
-        v-if="areFiltersSelected"
+        v-if="appliedFilterCount"
         class="absolute top-[-2px] right-[-2px] h-[8px] w-[8px] rounded bg-pink"
       />
     </template>
@@ -32,9 +32,9 @@ export default {
       type: Boolean,
       default: false,
     },
-    areFiltersSelected: {
-      type: Boolean,
-      default: false,
+    appliedFilterCount: {
+      type: Number,
+      default: 0,
     },
   },
   setup() {

src/components/VHeader/VHeaderMobile/VContentSettingsModal.vue

@@ -9,7 +9,7 @@
     <template #trigger="{ visible, a11Props }">
       <VContentSettingsButton
         :is-pressed="visible"
-        :are-filters-selected="areFiltersSelected"
+        :applied-filter-count="appliedFilterCount"
         v-bind="a11Props"
       />
     </template>
@@ -32,7 +32,7 @@
           class="self-center ms-auto"
           size="search-medium"
           :icon-props="{ iconPath: closeIcon }"
-          :aria-label="$t('browse-page.aria.close')"
+          :aria-label="$t('modal.aria-close')"
           @click="closeModal"
         />
       </template>
@@ -120,11 +120,10 @@ export default defineComponent({
     const isClearButtonDisabled = computed(
       () => !searchStore.isAnyFilterApplied
     )
+    const appliedFilterCount = computed(() => searchStore.appliedFilterCount)
     const clearFiltersLabel = computed(() =>
       searchStore.isAnyFilterApplied
-        ? i18n.t('filter-list.clear-numbered', {
-            number: searchStore.appliedFilterCount,
-          })
+        ? i18n.tc('filter-list.clear-numbered', appliedFilterCount.value)
         : i18n.t('filter-list.clear')
     )
 
@@ -145,6 +144,7 @@ export default defineComponent({
       changeSelectedTab,
 
       areFiltersSelected,
+      appliedFilterCount,
       showClearFiltersButton,
       isClearButtonDisabled,
       clearFiltersLabel,

src/locales/en.json

@@ -41,7 +41,6 @@
     "aria": {
       "primary": "primary",
       "menu": "menu",
-      "menu-notification": "Some filters are applied",
       "search": "search",
       "sr-search": "search button"
     },
@@ -60,7 +59,11 @@
       "with-count": "{count} Filter|{count} Filters"
     },
     "see-results": "See results",
-    "back-button": "Go back"
+    "back-button": "Go back",
+    "content-settings-button": {
+      "simple": "Menu",
+      "with-count": "Menu. {count} filter applied|Menu. {count} filters applied"
+    }
   },
   "navigation": {
     "about": "About",
@@ -628,6 +631,7 @@
   "interpunct": "•",
   "modal": {
     "close": "Close",
+    "aria-close": "Close the modal",
     "close-named": "Close {name}"
   },
   "error-images": {

test/README.md

@@ -3,6 +3,6 @@
 Normally when you build Openverse, you download the updated information about locales and translation files to `src/locales` folder. To prevent too many requests during CI, we save the locale files that are necessary to run the app during Playwright tests.
 
 1. `scripts/valid-locales.json` contains a list of valid locales with properties including their translation status (the percentage of strings that are translated).
-2. `es.json` is the `es` locale file used for search navigation tests (`../playwright/e2e/search-navigation.spec.ts`).
+2. `es.json` is the `es` locale file used for search navigation tests (`../playwright/e2e/search-navigation-old.spec.ts`).
 3. `ru.json` is the `ru` locale file used for testing the translation banner because the current translated percentage is ~40%, which is below the banner threshold of 90%.
 4. `ar.json` is the machine-translated `ar` locale file used for RTL testing.

test/playwright/e2e/filters.spec.ts → test/playwright/e2e/filters-old.spec.ts

@@ -48,7 +48,7 @@ for (const searchType of supportedSearchTypes) {
   }) => {
     await goToSearchTerm(page, 'cat', { searchType })
 
-    await openFilters(page)
+    await openFilters(page, 'old')
 
     await assertCheckboxCount(page, 'total', FILTER_COUNTS[searchType])
   })
@@ -58,7 +58,7 @@ test('initial filters are applied based on the url', async ({ page }) => {
   await page.goto(
     '/search/?q=cat&license_type=commercial&license=cc0&searchBy=creator'
   )
-  await openFilters(page)
+  await openFilters(page, 'old')
   const expectedFilters = ['cc0', 'commercial', 'creator']
 
   for (const checkbox of expectedFilters) {
@@ -72,13 +72,13 @@ test('common filters are retained when media type changes from all media to sing
   await page.goto(
     '/search/?q=cat&license_type=commercial&license=cc0&searchBy=creator'
   )
-  await openFilters(page)
+  await openFilters(page, 'old')
   const expectedFilters = ['cc0', 'commercial', 'creator']
 
   for (const checkbox of expectedFilters) {
     await assertCheckboxStatus(page, checkbox)
   }
-  await changeContentType(page, 'Images')
+  await changeContentType(page, 'Images', 'old')
 
   await expect(page).toHaveURL(
     '/search/image?q=cat&license_type=commercial&license=cc0&searchBy=creator'
@@ -94,13 +94,13 @@ test('common filters are retained when media type changes from single type to al
   await page.goto(
     '/search/image?q=cat&license_type=commercial&license=cc0&searchBy=creator'
   )
-  await openFilters(page)
+  await openFilters(page, 'old')
 
   for (const checkbox of ['cc0', 'commercial', 'creator']) {
     await assertCheckboxStatus(page, checkbox)
   }
 
-  await changeContentType(page, 'All content')
+  await changeContentType(page, 'All content', 'old')
 
   for (const checkbox of ['cc0', 'commercial', 'creator']) {
     await assertCheckboxStatus(page, checkbox)
@@ -114,7 +114,7 @@ test('selecting some filters can disable dependent filters', async ({
   page,
 }) => {
   await page.goto('/search/audio?q=cat&license_type=commercial')
-  await openFilters(page)
+  await openFilters(page, 'old')
 
   // by-nc is special because we normally test for fuzzy match, and by-nc matches 3 labels.
   const byNc = page.locator('input[value="by-nc"]')
@@ -144,12 +144,12 @@ test('selecting some filters can disable dependent filters', async ({
  */
 test('filters are updated when media type changes', async ({ page }) => {
   await page.goto('/search/image?q=cat&aspect_ratio=tall&license=cc0')
-  await openFilters(page)
+  await openFilters(page, 'old')
 
   await assertCheckboxStatus(page, 'tall')
   await assertCheckboxStatus(page, 'cc0')
 
-  await changeContentType(page, 'Audio')
+  await changeContentType(page, 'Audio', 'old')
 
   // Only CC0 checkbox is checked, and the filter button label is '1 Filter'
   await assertCheckboxStatus(page, 'cc0')
@@ -164,7 +164,7 @@ test('new media request is sent when a filter is selected', async ({
   page,
 }) => {
   await page.goto('/search/image?q=cat')
-  await openFilters(page)
+  await openFilters(page, 'old')
 
   await assertCheckboxStatus(page, 'cc0', '', 'unchecked')
 
@@ -190,7 +190,7 @@ for (const [searchType, source] of [
     await page.goto(
       `/search/${searchType}?q=birds&source=${source.toLowerCase()}`
     )
-    await openFilters(page)
+    await openFilters(page, 'old')
 
     await assertCheckboxStatus(page, source, '', 'checked')
   })

test/playwright/e2e/mobile-menu.spec.ts → test/playwright/e2e/mobile-menu-old.spec.ts

@@ -3,8 +3,8 @@ import { test, expect } from '@playwright/test'
 import {
   closeMobileMenu,
   goToSearchTerm,
+  openContentTypes,
   openFilters,
-  openMobileMenu,
 } from '~~/test/playwright/utils/navigation'
 
 const mockUaString =
@@ -20,27 +20,27 @@ test.describe.configure({ mode: 'parallel' })
 test('Can open filters menu on mobile at least twice', async ({ page }) => {
   await page.goto('/search/?q=cat')
 
-  await openFilters(page)
+  await openFilters(page, 'old')
   await expect(page.locator(`input[type="checkbox"]`)).toHaveCount(11, {
     timeout: 100,
   })
-  await closeMobileMenu(page)
+  await closeMobileMenu(page, 'old')
   await expect(page.locator(`input[type="checkbox"]`)).toHaveCount(0, {
     timeout: 100,
   })
 
-  await openFilters(page)
+  await openFilters(page, 'old')
   await expect(page.locator(`input[type="checkbox"]`)).toHaveCount(11, {
     timeout: 100,
   })
 })
 
 test('Can open mobile menu at least twice', async ({ page }) => {
   await goToSearchTerm(page, 'cat')
-  await openMobileMenu(page)
+  await openContentTypes(page, 'old')
   await expect(page.locator('button', { hasText: 'Close' })).toBeVisible()
-  await closeMobileMenu(page)
+  await closeMobileMenu(page, 'old')
   await expect(page.locator('button', { hasText: 'Close' })).not.toBeVisible()
-  await openMobileMenu(page)
+  await openContentTypes(page, 'old')
   await expect(page.locator('button', { hasText: 'Close' })).toBeVisible()
 })

test/playwright/e2e/recent-searches.spec.ts

@@ -37,6 +37,8 @@ test('shows recent searches in reverse chronological order', async ({
 test('clicking takes user to that search', async ({ page }) => {
   await executeSearches(page)
   expect(page.url()).toContain('?q=galah')
+  // Click on the input to open the Recent searches
+  await page.locator('input[type="search"]').click()
   await page
     .locator(`[aria-label="Recent searches"]`)
     .locator('[id="option-1"]')
@@ -45,6 +47,9 @@ test('clicking takes user to that search', async ({ page }) => {
 })
 
 test('recent searches shows message when blank', async ({ page }) => {
+  // Click on the input to open the Recent searches
+  await page.locator('input[type="search"]').click()
+
   const recentSearchesText = await page
     .locator('[data-testid="recent-searches"]')
     .textContent()
@@ -53,6 +58,8 @@ test('recent searches shows message when blank', async ({ page }) => {
 
 test('clicking Clear clears the recent searches', async ({ page }) => {
   await executeSearches(page)
+  // Click on the input to open the Recent searches
+  await page.locator('input[type="search"]').click()
   await page.locator('[aria-label="Clear recent searches"]').click()
   const recentSearchesText = await page
     .locator('[data-testid="recent-searches"]')

test/playwright/e2e/search-navigation.spec.ts → test/playwright/e2e/search-navigation-old.spec.ts

@@ -18,7 +18,7 @@ test.describe('search history navigation', () => {
   }) => {
     await goToSearchTerm(page, 'galah')
     // Open filter sidebar
-    await openFilters(page)
+    await openFilters(page, 'old')
 
     // Apply a filter
     await page.click('#modification')

test/playwright/e2e/search-query-client.spec.ts → test/playwright/e2e/search-query-client-old.spec.ts

@@ -51,7 +51,7 @@ test('url filter parameters not used by current mediaType are discarded', async
     query: 'category=photograph',
   })
 
-  await changeContentType(page, 'Audio')
+  await changeContentType(page, 'Audio', 'old')
   await expect(page).toHaveURL('/search/audio?q=cat')
 })
 
@@ -63,7 +63,7 @@ test('url filter types not used by current mediaType are discarded', async ({
     query: 'aspect_ratio=tall',
   })
 
-  await changeContentType(page, 'Audio')
+  await changeContentType(page, 'Audio', 'old')
   await expect(page).toHaveURL('/search/audio?q=cat')
 })
 

test/playwright/e2e/search-query-server.spec.ts → test/playwright/e2e/search-query-server-old.spec.ts

@@ -44,7 +44,7 @@ test('url path /search/ is used to select `all` search tab', async ({
 }) => {
   await page.goto('/search/?q=cat')
 
-  const contentType = await currentContentType(page)
+  const contentType = await currentContentType(page, 'old')
   expect(contentType?.trim()).toEqual('All content')
 })
 
@@ -53,7 +53,7 @@ test('url path /search/audio is used to select `audio` search tab', async ({
 }) => {
   await goToSearchTerm(page, 'cat', { searchType: AUDIO })
 
-  const contentType = await currentContentType(page)
+  const contentType = await currentContentType(page, 'old')
   expect(contentType?.trim()).toEqual('Audio')
 })
 
@@ -64,7 +64,7 @@ test('url query to filter, all tab, one parameter per filter type', async ({
     query: 'license=cc0&license_type=commercial&searchBy=creator',
   })
 
-  await openFilters(page)
+  await openFilters(page, 'old')
   for (const checkbox of ['cc0', 'commercial', 'creator']) {
     await assertCheckboxStatus(page, checkbox)
   }
@@ -77,7 +77,7 @@ test('url query to filter, image tab, several filters for one filter type select
     searchType: IMAGE,
     query: 'searchBy=creator&extension=jpg,png,gif,svg',
   })
-  await openFilters(page)
+  await openFilters(page, 'old')
   const checkboxes = ['jpeg', 'png', 'gif', 'svg']
   for (const checkbox of checkboxes) {
     const forValue = checkbox === 'jpeg' ? 'jpg' : checkbox

test/playwright/e2e/search-types.spec.ts → test/playwright/e2e/search-types-old.spec.ts

@@ -115,7 +115,7 @@ for (const searchType of searchTypes) {
     // Audio is loading a lot of files, so we do not use it for the first SSR page
     const pageToOpen = searchType.id === 'all' ? searchTypes[1] : searchTypes[0]
     await page.goto(pageToOpen.url)
-    await changeContentType(page, searchType.name)
+    await changeContentType(page, searchType.name, 'old')
     await checkSearchResult(page, searchType)
   })
 }

test/playwright/utils/breakpoints.ts

@@ -24,6 +24,12 @@ type BreakpointBlock = (options: {
 const desktopBreakpoints = ['2xl', 'xl', 'lg', 'md'] as const
 const mobileBreakpoints = ['sm', 'xs'] as const
 
+/**
+ * For e2e functionality testing, we need to test mobile and desktop screens.
+ */
+export const testScreens = ['sm', 'xl'] as const
+export type TestScreen = typeof testScreens[number]
+
 // For desktop UA use the default
 const desktopUa = undefined
 const mobileUa =
@@ -138,18 +144,21 @@ const describeEachBreakpoint =
 const describeEvery = describeEachBreakpoint(
   Object.keys(VIEWPORTS) as Breakpoint[]
 )
-const describeEachDesktop = describeEachBreakpoint(desktopBreakpoints)
-const describeEachDesktopExceptMd = describeEachBreakpoint(
+const describeEachDesktopWithMd = describeEachBreakpoint(desktopBreakpoints)
+const describeEachDesktop = describeEachBreakpoint(
   desktopBreakpoints.filter((b) => b !== 'md')
 )
 const describeEachMobile = describeEachBreakpoint(mobileBreakpoints)
+const describeEachMobileWithoutMd = describeEachBreakpoint(mobileBreakpoints)
 
 export default {
   ...breakpointTests,
   describeEachBreakpoint,
   describeEvery,
-  // TODO: replace with describeEachDesktopExceptMd when the new header is ready
   describeEachDesktop,
-  describeEachDesktopExceptMd,
+  // TODO: remove describeEachDesktopWithMd after the new_header is merged
+  describeEachDesktopWithMd,
   describeEachMobile,
+  // TODO: remove describeEachMobileWithoutMd after the new_header is merged
+  describeEachMobileWithoutMd,
 }