Improve e2e tests (#840)

* Improve e2e tests * Use audio data for mocking audio search * Fix unit test warning * Fix url query param order
WordPress · Feb 11, 2022 · 26af972 · 26af972
1 parent 87a291f
commit 26af972
Show file tree

Hide file tree

Showing 12 changed files with 811 additions and 190 deletions.
diff --git a/src/components/VContentReport/VContentReportForm.vue b/src/components/VContentReport/VContentReportForm.vue
@@ -110,6 +110,7 @@
 import { computed, defineComponent, ref } from '@nuxtjs/composition-api'
 
 import VButton from '~/components/VButton.vue'
+import VIcon from '~/components/VIcon/VIcon.vue'
 import VRadio from '~/components/VRadio/VRadio.vue'
 import VDmcaNotice from '~/components/VContentReport/VDmcaNotice.vue'
 import VReportDescForm from '~/components/VContentReport/VReportDescForm.vue'
@@ -124,6 +125,7 @@ export default defineComponent({
   name: 'VContentReportForm',
   components: {
     VButton,
+    VIcon,
     VRadio,
     VDmcaNotice,
     VReportDescForm,

diff --git a/src/components/VContentSwitcher/VContentSwitcherPopover.vue b/src/components/VContentSwitcher/VContentSwitcherPopover.vue
@@ -9,9 +9,11 @@
       <VContentSwitcherButton
         :a11y-props="a11yProps"
         :active-item="activeItem"
+        aria-controls="content-switcher-popover"
       />
     </template>
     <VContentTypes
+      id="content-switcher-popover"
       size="medium"
       :active-item="activeItem"
       @select="selectItem"

diff --git a/src/components/VContentSwitcher/VMobileMenuModal.vue b/src/components/VContentSwitcher/VMobileMenuModal.vue
@@ -4,6 +4,7 @@
       <VContentSwitcherButton
         :a11y-props="triggerA11yProps"
         :active-item="activeItem"
+        aria-controls="content-switcher-modal"
       />
     </div>
     <VMobileModalContent
@@ -13,7 +14,11 @@
       :aria-label="$t('header.filter-button.simple')"
       :initial-focus-element="initialFocusElement"
     >
-      <nav class="p-6" aria-labelledby="content-switcher-heading">
+      <nav
+        id="content-switcher-modal"
+        class="p-6"
+        aria-labelledby="content-switcher-heading"
+      >
         <VContentTypes
           ref="contentTypesNode"
           size="small"

diff --git a/test/e2e/content-types.spec.js b/test/e2e/content-types.spec.js
@@ -1,38 +1,24 @@
 const { test, expect } = require('@playwright/test')
+const { mockAllSearch, changeContentType } = require('./utils')
 
 /**
  * Using SSR:
- * 1. Can open 'all' tab, and see Meta, image grid and Meta search form.
- * 2. Can open 'image' tab, and see Meta, image grid and Meta search form.
- * 3. Can open 'audio' tab, and see Meta, audio grid and Meta search form.
- * 4. Can open 'video' tab, and see Meta, and Meta search form.
+ * 1. Can open 'all' content type page, and see Meta, image grid and Meta search form.
+ * 2. Can open 'image' content type page, and see Meta, image grid and Meta search form.
+ * 3. Can open 'audio' content type page, and see Meta, audio grid and Meta search form.
+ * 4. Can open 'video' content type page, and see Meta, and Meta search form.
  *
  * On client side:
- * 1. Can open 'all' tab, and see Meta, image grid and Meta search form; can load more images.
- * 2. Can open 'image' tab, and see Meta, image grid and Meta search form; can load more images.
- * 3. Can open 'audio' page, and see Meta, audio grid and Meta search form; can not (currently) load more audios.
- * 4. Can open 'video' page, and see Meta, and Meta search form; can not see load more button.
+ * 1. Can open 'all' content type page, and see Meta, image grid and Meta search form; can load more images.
+ * 2. Can open 'image' content type page, and see Meta, image grid and Meta search form; can load more images.
+ * 3. Can open 'audio' content type page, and see Meta, audio grid and Meta search form; can not (currently) load more audios.
+ * 4. Can open 'video' content type page, and see Meta, and Meta search form; can not see load more button.
  */
 
 test.beforeEach(async ({ context }) => {
-  // Block any image or audio (jamendo.com) requests for each test in this file.
-  await context.route(/\.(png|jpeg|jpg|svg)$/, (route) => route.abort())
+  // Block any audio (jamendo.com) requests for each test in this file.
   await context.route('**.jamendo.com**', (route) => route.abort())
-
-  // Replace all the thumbnail requests with a single sample image
-  await context.route(
-    'https://api.openverse.engineering/v1/thumbs/**',
-    (route) => route.fulfill({ path: 'test/e2e/resources/sample_image.jpg' })
-  )
-  // Serve mock data on all image search requests
-  await context.route(
-    'https://api.openverse.engineering/v1/images/**',
-    (route) =>
-      route.fulfill({
-        headers: { 'Access-Control-Allow-Origin': '*' },
-        path: 'test/e2e/resources/mock_data.json',
-      })
-  )
+  await mockAllSearch(context)
 })
 
 const contentTypes = [
@@ -91,9 +77,8 @@ for (const contentType of contentTypes) {
     const pageToOpen =
       contentType.id === 'all' ? contentTypes[1] : contentTypes[0]
     await page.goto(pageToOpen.url)
-    await page.click(`[aria-label="${pageToOpen.name}"]`)
+    await changeContentType(page, contentType.name)
 
-    await page.click(`button[role="radio"]:has-text("${contentType.name}")`)
     const urlParam = contentType.id === 'all' ? '' : contentType.id
     const expectedURL = `/search/${urlParam}?q=cat`
     await expect(page).toHaveURL(expectedURL)

diff --git a/test/e2e/filters.spec.js b/test/e2e/filters.spec.js
@@ -1,83 +1,75 @@
 const { test, expect } = require('@playwright/test')
-
-const openFilters = async (page) => {
-  const filterButtonSelector =
-    '[aria-controls="filter-sidebar"], [aria-controls="filter-modal"]'
-  const isPressed = async () =>
-    await page.getAttribute(filterButtonSelector, 'aria-pressed')
-  if ((await isPressed()) !== 'true') {
-    await page.click(filterButtonSelector)
-    expect(await isPressed()).toEqual('true')
-  }
-}
+const {
+  assertCheckboxCheckedStatus,
+  openFilters,
+  mockAllSearch,
+  changeContentType,
+} = require('./utils')
 
 test.beforeEach(async ({ context }) => {
-  // Block any image or audio (jamendo.com) requests for each test in this file.
-  await context.route(/\.(png|jpeg|jpg|svg)$/, (route) => route.abort())
+  // Block any audio (jamendo.com) requests for each test in this file.
   await context.route(/.+jamendo.com.+/, (route) => route.abort())
 
-  // Replace all the thumbnail requests with a single sample image
-  await context.route(
-    'https://api.openverse.engineering/v1/thumbs/**',
-    (route) => route.fulfill({ path: 'test/e2e/resources/sample_image.jpg' })
-  )
-  // Serve mock data on all image search requests
-  await context.route(
-    'https://api.openverse.engineering/v1/images/?***',
-    (route) => route.fulfill({ path: 'test/e2e/resources/mock_data.json' })
-  )
+  await mockAllSearch(context)
 })
 
-// todo(obulat): remove this test if we do not have filter tags
-test.skip('can unset filters using filter tags', async ({ page }) => {
-  // Serve mock data on all image search requests
-  await page.route('https://api.openverse.engineering/v1/images/?**', (route) =>
-    route.fulfill({ path: 'test/e2e/resources/mock_data.json' })
+test('common filters are retained when media type changes from all media to single type', async ({
+  page,
+}) => {
+  await page.goto(
+    '/search/?q=cat&license_type=commercial&license=cc0&searchBy=creator'
   )
-  await page.goto('/search/image?q=cat&license=cc0')
-
-  const cc0Tag = page.locator('[aria-label="Remove CC0 filter"]')
   await openFilters(page)
-  expect(await page.getAttribute('[aria-label="1 Filter"]', 'aria-label')).toBe(
-    '1 Filter'
+
+  for (let checkbox of ['cc0', 'commercial', 'creator']) {
+    await assertCheckboxCheckedStatus(page, checkbox)
+  }
+  await changeContentType(page, 'Images')
+
+  await expect(page).toHaveURL(
+    '/search/image?q=cat&license_type=commercial&license=cc0&searchBy=creator'
   )
-  const cc0Checkbox = page.locator('label:has-text("CC0")')
-
-  await expect(cc0Checkbox).toBeChecked()
-  await expect(cc0Tag).toHaveCount(1)
-  page.on('requestfinished', (request) => {
-    const url = request.url()
-    // Only check the URL for an image search query `?`, not thumbs or related requests
-    const baseUrl = 'https://api.openverse.engineering/v1/images/?'
-    if (url.startsWith(baseUrl)) {
-      expect(url).toEqual(baseUrl + 'q=cat')
-    }
-  })
-  await cc0Tag.click()
 
-  await expect(page).toHaveURL('/search/image?q=cat')
-  await expect(cc0Checkbox).not.toBeChecked()
-  await expect(page.locator('[aria-label="Remove CC0 filter"]')).toHaveCount(0)
+  for (let checkbox of ['cc0', 'commercial', 'creator']) {
+    await assertCheckboxCheckedStatus(page, checkbox)
+  }
 })
 
-test.skip('filters are updated when media type changes', async ({ page }) => {
-  // Serve mock data on all image search requests
-  await page.route('https://api.openverse.engineering/v1/images?**', (route) =>
-    route.fulfill({ path: 'test/e2e/resources/mock_data.json' })
+test('common filters are retained when media type changes from single type to all media', async ({
+  page,
+}) => {
+  await page.goto(
+    '/search/audio?q=cat&license_type=commercial&license=cc0&searchBy=creator'
   )
-  await page.goto('/search/image?q=cat&aspect_ratio=tall')
   await openFilters(page)
 
-  const tallCheckbox = page.locator('label:has-text("Tall")')
+  for (let checkbox of ['cc0', 'commercial', 'creator']) {
+    await assertCheckboxCheckedStatus(page, checkbox)
+  }
+
+  await changeContentType(page, 'All content')
+
+  await expect(page).toHaveURL(
+    '/search/?q=cat&license_type=commercial&license=cc0&searchBy=creator'
+  )
+
+  for (let checkbox of ['cc0', 'commercial', 'creator']) {
+    await assertCheckboxCheckedStatus(page, checkbox)
+  }
+})
+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 expect(tallCheckbox).toBeChecked()
+  await assertCheckboxCheckedStatus(page, 'Tall')
+  await assertCheckboxCheckedStatus(page, 'cc0')
 
-  await page.click('[aria-label="Images"]')
-  await page.click(`a:has-text("Audio")`)
+  await changeContentType(page, 'Audio')
 
-  await expect(page).toHaveURL('/search/audio?q=cat')
+  await expect(page).toHaveURL('/search/audio?q=cat&license=cc0')
 
-  await expect(tallCheckbox).toHaveCount(0)
+  await expect(page.locator('label:has-text("Tall")')).toHaveCount(0)
+  await assertCheckboxCheckedStatus(page, 'cc0')
 })
 
 test('new media request is sent when a filter is selected', async ({
@@ -90,17 +82,19 @@ test('new media request is sent when a filter is selected', async ({
     'https://api.openverse.engineering/v1/images/?**',
     (route) => {
       apiRequest = route.request().url()
-      route.fulfill({ path: 'test/e2e/resources/mock_data.json' })
+      route.fulfill({
+        path: 'test/e2e/resources/mock_image_data.json',
+        headers: { 'Access-Control-Allow-Origin': '*' },
+      })
     }
   )
   await page.goto('/search/image?q=cat')
   await openFilters(page)
 
-  const cc0Checkbox = page.locator('label:has-text("CC0")')
-  await expect(cc0Checkbox).not.toBeChecked()
-  await cc0Checkbox.click()
+  await assertCheckboxCheckedStatus(page, 'cc0', false)
+  await page.click('label:has-text("CC0")')
 
-  await expect(cc0Checkbox).toBeChecked()
+  await assertCheckboxCheckedStatus(page, 'cc0', true)
   await expect(apiRequest).toEqual(
     'https://api.openverse.engineering/v1/images/?q=cat&license=cc0'
   )

diff --git a/test/e2e/homepage.spec.js b/test/e2e/homepage.spec.js
@@ -14,7 +14,7 @@ test.beforeEach(async ({ context }) => {
     'https://api.openverse.engineering/v1/images/**',
     (route) =>
       route.fulfill({
-        path: 'test/e2e/resources/mock_data.json',
+        path: 'test/e2e/resources/mock_image_data.json',
         headers: { 'Access-Control-Allow-Origin': '*' },
       })
   )