Visual Regression Tests (Screenshot Tests)

[silentHoo]

Since we already have some components, we naturally want to have tests for them. We should deal with: https://storybook.js.org/docs/react/workflows/snapshot-testing

Procedure

• Use stencil stack as Prio 1 and test it
• If flaky: try Puppeteer solution or BackstopJS or a state-of-the-art tool

Acceptance criteria

• Visual tests can be run locally on the developer computer.
• Visual tests can be run in the GitHub pipeline.
• One or two visual tests for a component run successfully.

Done

• [ ] ino-button
• [ ] ino-card
• [ ] ino-carousel
• [ ] ino-carousel-slide
• [ ] ino-checkbox
• [ ] ino-chip
• [ ] ino-chip-set
• [ ] ino-control-item
• [ ] ino-datepicker
• [ ] ino-dialog
• [ ] ino-fab
• [ ] ino-fab-set
• [ ] ino-form-row
• [ ] ino-header
• [ ] ino-icon
• [ ] ino-icon-button
• [ ] ino-img
• [ ] ino-img-list
• [ ] ino-input
• [ ] ino-input-file
• [ ] ino-label
• [ ] ino-list
• [ ] ino-list-divider
• [ ] ino-list-item
• [ ] ino-menu
• [ ] ino-nav-drawer
• [ ] ino-nav-item
• [ ] ino-option
• [ ] ino-option-group
• [ ] ino-popover
• [ ] ino-progress-bar
• [ ] ino-radio
• [ ] ino-radio-group
• [ ] ino-range
• [ ] ino-segment-button
• [ ] ino-segment-group
• [ ] ino-select
• [ ] ino-sidebar
• [ ] ino-snackbar
• [ ] ino-spinner
• [ ] ino-switch
• [ ] ino-tab
• [ ] ino-tab-bar
• [ ] ino-table
• [ ] ino-table-cell
• [ ] ino-table-row
• [ ] ino-textarea
• [ ] ino-tooltip

[silentHoo]

Wait for #316 to be merged.