Enable running the snapshot tests for both color modes

[obulat]

Fixes

Extracted from #4915
Related to #4305 by @zackkrida

Description

This is one idea of how we can implement testing both dark and light theme for visual regressions without running each test twice. It relies on the expectSnapshot function, which now runs 2 snapshot comparisons instead of one.

First, the default snapshot is taken. Then, the theme switcher is used to change the color mode, and the second snapshot is taken. To make sure that we always run both snapshot checks, even if the first one fails, we use the expect.soft that runs the test to the end, but fails if one of the expects in the test fails.

We use the theme switcher to change the color mode. To do this, we add a themeSwitcher to all stories using a decorator, and use the footer switcher for the tests that use the Nuxt app.

expectSnapshot function is extracted from the breakpoints.ts file. It needs the page argument from Playwright test to allow locating the theme switcher. The optional (nullable) parameters were combined to a separate options object, which allows passing only the necessary options instead of having to pass {} blank object for the unused one.

This PR also adds the theme switcher to the Storybook toolbar, so now you can view both color modes. The Storybook switcher's state is synced with the state of our own theme switcher in the story.

The image cell snapshots had to be updated. I made the width smaller to match the real size of images in the grid, and to make the snapshot files smaller, and to fit all of them into a single screen height. View updated image cell story

Testing Instructions

Go to Storybook and see check that the color theme switcher is working. Also, check the follow-up PRs that add the dark snapshots.

Checklist

• My pull request has a descriptive title (not a vague title likeUpdate 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.
• I ran the DAG documentation generator (ov just catalog/generate-docs for catalog
  PRs) or the media properties generator (ov just catalog/generate-docs media-props
  for the catalog or ov just api/generate-docs for the API) where applicable.

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.

[github-actions]

Full-stack documentation: https://docs.openverse.org/_preview/4926

Please note that GitHub pages takes a little time to deploy newly pushed code, if the links above don't work or you see old versions, wait 5 minutes and try again.

You can check the GitHub pages deployment action list to see the current status of the deployments.

[sarayourfriend]

👍 from me! This is great, the refactors are nice and all make sense to me in addition to the new expect.soft usage. Maybe there is a way to get rid of the innerExpectSnapshot and multiple getSnapshotName layers, but I'm not too worried about it and didn't have any immediate ideas, that didn't just involve passing through more parameters and having a bigger final getSnapshotName with more conditions, so it's all good to me!

Nice work 🚀 I left some questions and one whitespace nitpick but nothing blocking from my perspective.

[sarayourfriend]

(Just curiousity) What is the reason to have these watch calls inside onMounted? Does this effectively delay starting the watching until after the component is ready?

[obulat]

I just used the same structure as the withRtl decorator. After your comment, I went back and refactored this. Moved the watch calls out of onMounted. I also found a way of using useGlobals (it didn't work when I try running it in the onMounted, but worked when I moved it out of it), so now the global theme is updated correctly when the Openverse theme switcher value is changed.

[obulat]

I'll make an issue to also refactor the withRtl decorator so that when dir is changed using Openverse footer, the global languageDirection is updated, similar to how with-theme works now.

[sarayourfriend]

nit: Whitespace to help break up the file's components

Suggested change

	}
	export type ExpectSnapshot = <T extends Locator | Page>(
	}
	export type ExpectSnapshot = <T extends Locator | Page>(

[sarayourfriend]

I couldn't find this used anywhere. Is it left over from a previous version, and do we still need to include it?

[obulat]

This is used in storybook visual regression tests, e.g. frontend/test/storybook/visual-regression/v-checkbox.spec.ts. It makes testing the screenshot area (instead of the full page) easier.

[sarayourfriend]

Ah! A diff must have been collapsed when I "ctrl + f" searched for it. Sorry!