Add e2e test for image detail page

src/components/ImageGrid/ImageCell.vue

@@ -8,7 +8,7 @@
     <figure class="search-grid_item">
       <i :style="`padding-bottom:${iPadding}%`" />
       <NuxtLink
-        :to="localePath('/photos/' + image.id)"
+        :to="localePath('/image/' + image.id)"
         class="search-grid_image-ctr"
         :style="`width: ${imageWidth}%; top: ${imageTop}%; left:${imageLeft}%;`"
         @click="onGotoDetailPage($event, image)"

src/components/SearchGridCell.vue

@@ -8,7 +8,7 @@
     <figure class="search-grid_item">
       <i :style="`padding-bottom:${iPadding}%`" />
       <NuxtLink
-        :to="localePath('/photos/' + image.id)"
+        :to="localePath('/image/' + image.id)"
         class="search-grid_image-ctr"
         :style="`width: ${imageWidth}%; top: ${imageTop}%; left:${imageLeft}%;`"
         @click="onGotoDetailPage($event, image)"

test/e2e/homepage.spec.js

@@ -2,7 +2,7 @@ const { test, expect } = require('@playwright/test')
 
 test('can change type and search for audio/modification from homepage', async ({
   page,
-  context,
+  baseURL,
 }) => {
   // Go to http://localhost:8444/
   await page.goto('/')
@@ -16,7 +16,6 @@ test('can change type and search for audio/modification from homepage', async ({
   await page.fill('[placeholder="Search all content"]', 'cat')
   // Click button:has-text("Search")
   await page.click('button:has-text("Search")')
-  const BASE_URL = context._options.baseURL
-  const expectedUrl = BASE_URL + '/search/audio?q=cat&license_type=modification'
+  const expectedUrl = baseURL + '/search/audio?q=cat&license_type=modification'
   await expect(page).toHaveURL(expectedUrl)
 })

test/e2e/image-detail.spec.js

@@ -0,0 +1,12 @@
+const { test, expect } = require('@playwright/test')
+
+test.beforeEach(async ({ context }) => {
+  // Block any image request for each test in this file.
+  await context.route(/\.(png|jpeg|jpg|svg)$/, (route) => route.abort())
+})
+
+test('shows the author of the image', async ({ page }) => {
+  await page.goto('image/e9d97a98-621b-4ec2-bf70-f47a74380452')
+  const author = page.locator('a[aria-label^="author"]')
+  await expect(author).toHaveText('mutednarayan')
+})

test/e2e/search.spec.js

@@ -55,3 +55,11 @@ test('shows search result metadata', async ({ page }) => {
   // All search results have been shown, cannot load more
   await expect(loadMoreButton).toHaveCount(0)
 })
+
+test('navigates to the image details page correctly', async ({ page }) => {
+  await page.goto('/search/image?q=honey')
+  const figure = page.locator('figure').first()
+  const imgTitle = await figure.locator('img').getAttribute('alt')
+  await figure.click()
+  await expect(page.locator('h1')).toHaveText(imgTitle)
+})

test/unit/specs/components/ImageDetails/photo-details.spec.js

@@ -110,11 +110,6 @@ describe('PhotoDetails', () => {
     expect(wrapper.html()).toContain(props.image.title)
   })
 
-  // it('renders creator name', () => {
-  //   const wrapper = render(PhotoDetails, options)
-  //   expect(wrapper.html()).toContain(props.image.creator)
-  // })
-
   it('redirects back when clicking on the back to results link', async () => {
     const routerMock = {
       push: jest.fn(),

test/unit/specs/components/search-grid-cell.spec.js

@@ -5,6 +5,7 @@ describe('SearchGridCell', () => {
   const props = {
     image: {
       id: 0,
+      license: 'by',
       title: 'foo',
       provider: 'flickr',
       url: 'foo.bar',