[Housekeeping] Setup Cypress

kirbydesign / designsystem

Kirby Design System

https://cookbook.kirby.design

MIT License

82 stars 22 forks source link

[Housekeeping] Setup Cypress #3446

Closed jakobe closed 2 months ago

jakobe commented 2 months ago

[ ] Add Cypress dep(s)
[ ] Setup Component testing (for 1 existing component, e.g. Badge)
[ ] Investigate Chromatic support for component tests
- [ ] If not supported, investigate e2e Cypress tests x Chromatic

Scope:

Focus on getting Cypress test up and running
validate for simple components (e.g. badge, button etc)
spike on Chromatic support
validate if this is what we want

Descope:

actual Chromatic integration comes later (descope)
complex components come later (e.g. Modal)

jakobe commented 2 months ago

Short summary: Cypress snapshots (serializes) the markup and styles which are sent to Chromatic and recreated (deserialized) and then snapshotted as and image. This doesn't play well with Web Comps, as the deserialized view doesn't contain the styles of the web component :( See more in this issue: https://github.com/chromaui/chromatic-e2e/issues/129

TL;DR: Cypress+Chromatic doesn't seem the best fit for us at the moment - maybe stick with Storybook for visual snapshots?