Add e2e test for image detail page

[krysal]

Fixes

Fixes #472 by @krysal

Description

This PR:

• adds a playwright test to ensure the image detail page load correctly from links in the search results page
• renames the /photos/ route to /image/ as Openverse serves more than photos
• moves the test of the image's author display to a playwright test

I wanted to add these tests to the GitHub action workflow but they're still kind of flaky, depending on internet to make requests as the route.fulfill method doesn't seem to work.

Testing Instructions

npm run e2e:ci

Checklist

• My pull request has a descriptive title (not a vague title like Update index.md).
• My pull request targets the default branch of the repository (main) or a parent feature branch.
• My commit messages follow best practices.
• My code follows the established code style of the repository.
• I added or updated tests for the changes I made (if applicable).
• I added or updated documentation (if applicable).
• I tried running the project locally and verified that there are no visible errors.

Developer Certificate of Origin

Developer Certificate of Origin

Developer Certificate of Origin
Version 1.1

Copyright (C) 2004, 2006 The Linux Foundation and its contributors.
1 Letterman Drive
Suite D4700
San Francisco, CA, 94129

Everyone is permitted to copy and distribute verbatim copies of this
license document, but changing it is not allowed.


Developer's Certificate of Origin 1.1

By making a contribution to this project, I certify that:

(a) The contribution was created in whole or in part by me and I
    have the right to submit it under the open source license
    indicated in the file; or

(b) The contribution is based upon previous work that, to the best
    of my knowledge, is covered under an appropriate open source
    license and I have the right under that license to submit that
    work with modifications, whether created in whole or in part
    by me, under the same open source license (unless I am
    permitted to submit under a different license), as indicated
    in the file; or

(c) The contribution was provided directly to me by some other
    person who certified (a), (b) or (c) and I have not modified
    it.

(d) I understand and agree that this project and the contribution
    are public and that a record of the contribution (including all
    personal information I submit with it, including my sign-off) is
    maintained indefinitely and may be redistributed consistent with
    this project or the open source license(s) involved.

[sarayourfriend]

LGTM! I ran the tests locally and they passed 🎉 Nice work! 🚀

[obulat]

Did you plan to add any more tests, @krysal ?

I think it is important for e2e tests to test both Server-side rendering and client-side rendering. For single image result I think it might get flaky to try to navigate from search result to single image result, as we cannot guarantee the order of the results.

And still, I think we should add a test that would check not for the specific author name or title, but that the items like author or title are there when navigating from search result to single image result.

[zackkrida]

Just a note—if we're going to rename routes we'll need to add a redirect somewhere so old urls aren't broken

[krysal]

@obulat I think in this case both modes are tested at least very basically. The client-side navigation in the case I added to test/e2e/search.spec.js, and the server-side with the new test/e2e/image-detail.spec.js but thinking about this, adding the check for the breadcrumb is perfect here! The unit test does this by modifying a property directly, so these tests double-check it doing what a real user would do and see.

I updated the test to be more general, although before I wanted to make it really specific, controlling the data passed to pages and asserting the specific names, title, and text info in general, as is the only way to make sure the correct data is shown, but this is complicated in the server-side mode.

At first, my intention was to replace the unit test that I had commented and add the test for navigation from the search results. Do you have in mind another thing specifically that should be tested here?

---

@zackkrida Good call, I'll add the redirect.

[obulat]

The tests currently mock the client-side requests, but not the server-side ones. So, the first server-side render is happening without mocking.
But I've found a tutorial about mocking the server-side requests in Next.js (the Nuxt of the React world :) ): https://frontend-digest.com/using-playwright-to-test-next-js-applications-80a767540091. I guess I should open a new issue for that.

[obulat]

LGTM!