Do you use our Storybook instance?

[zackkrida]

This is a question for Openverse developers, particularly those of @WordPress/openverse-frontend; do you use our Storybook instance at just frontend/run storybook? If yes, please explain your usage in the comments.

[obulat]

The main use case for me is to have the component tests there.

If a PR breaks something like a component's focus state, a storybook test can catch it.
There are also some parts of the pages such as the media reuse that can be tested in Storybook but not as a part of a regular Playwright test (because of a random 1px difference due to scrolling).

[zackkrida]

If a PR breaks something like a component's focus state, a storybook test can catch it.

This could be addressed in Playwright visual regression tests though, couldn't it?

[obulat]

Mostly, yes. Sometimes, it's not possible to create the same test in Playwright VRT if the part needs to be snapshotted with a surrounding area, as for the VImageCell (there's no selector for the focus ring)

[zackkrida]

Ah I see, yeah it may require a full-page snapshot with the desired focus ring present. Which would definitely be a ➕ for making sure the focus state looks correct in-context (for example, isn't overlapped by other elements) but would make the stored screenshot files a bit larger.

[sarayourfriend]

This is also the thing I was going to say. Storybook is most useful I think as a testing area, and we can probably leverage it more, by doing component unit testing there instead of in jest. If jest was focused on testing stores and other "pure code" things, with storybook focused on the functionality of individual components, I think our tests would be better off (it's easier to write idiomatic code in Playwright for testing and the actual browser environment vs the emulated one of jest catches issues with interactions that could be problematic).

[dhruvkb]

I use it while building components, where I need to test a lot of different data, states and variants for the component. In a lot of cases, the component may be new and not used in any real page yet, the state or data may be hard to simulate in a real world scenario and, if nothing else, the Nuxt dev server is too slow to iterate on the components.

Additionally, if we were utilising it to the fullest, I think it's valuable to have a place where we can connect components to Figma and write documentation explaining more about the component, and when, how and why it should be used.