Add Storybook smoketest to GitHub CI

[sarayourfriend]

Fixes

Fixes #518 by @sarayourfriend

Description

Adds a step to our CI to run storybook --ci --smoke-test to ensure PRs don't break Storybook.

Note: this PR will be broken until #517 is merged and a fix for #483 is found. Obviously both of those bugs are rendering our current storybook broken, so adding it to CI while it's broken will well... be broken 😂

Testing Instructions

Verify that the CI is failing on Storybook compilation issues currently. In the future of this PR you'll have to look at past runs before this PR inevitably gets rebased when the referenced bugs are fixed. Of course after those bugs are fixed the CI should pass once this PR is rebased.

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.
• [N/A] I added or updated tests for the changes I made (if applicable).
• [N/A] 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.

[dhruvkb]

LGTM but I agree on keeping this blocked till we can first get it to pass 😄.

[obulat]

Nice to be able not to break things :)

[zackkrida]

Smoke test is failing:

https://github.com/WordPress/openverse-frontend/runs/4535480368?check_suite_focus=true#step:9:428

ERROR in ./src/components/License/meta/VLicense.stories.mdx
Module not found: Error: Can't resolve '~/components/license/VLicense.vue' in '/home/runner/work/openverse-frontend/openverse-frontend/src/components/License/meta'

[zackkrida]

@sarayourfriend while you're out I've rebased this with main to get the license filename issue fixed, I'll merge as well if CI passes.

[zackkrida]

Boo, that got us closer, but gave a new error:

https://github.com/WordPress/openverse-frontend/runs/4537426501?check_suite_focus=true#step:9:195

[zackkrida]

@sarayourfriend I think this works locally if I do pnpm exec nuxt-storybook --smoke-test --ci, but locally pnpm storybook -- --ci --smoke-test gives the same error as here:

https://github.com/WordPress/openverse-frontend/runs/4537426501?check_suite_focus=true#step:9:195

I'm not confident what the fundamental difference is there.

[sarayourfriend]

@zackkrida interesting... I still get a non-zero exit code when I use that alternative command. My understanding is that it shouldn't be different from pnpm storybook -- --ci --smoke-test but the output is different for some reason 🤔

[sarayourfriend]

Figured out how to get Nuxt component discovery to ignore the .types.js files, but still not sure how to get around the eslint rule for filename casing.

It appears that the rule doesn't actually allow for matching against the full path of the file, just the filename, which means that we can't, for example, exclude the meta folders completely from the rule.

We could get it to ignore it by adding a suffix to the file, like targets.utils.js or something like that, but I really loathe having to use arbitrary filenames like that just to get around a linter rule. I commented on this issue about the rule configuration. If the maintainers agree that it would be helpful I'll work on implementing an update to that rule.

In the meantime, I think it might just be best to do something like targets.util.js or whatever until it's possible to plop it into a folder named in a way that it can be broadly ignored or something. This will also come into play if we do something like create component-specific composables that don't make sense to put into the general composables folder.

[krysal]

The smoke test and the removal of warnings for .types.js are already nice improvements here ✨