Refactoring: Migration of visual regression tests and testfile restructering

[jeripeierSBB]

For every component we would like to:

• Check if tests are in the appropriate file (should be done already)
• Snapshot tests
  • Should avoid using inline snapshots where possible
  • Should wrap the test with describe('Test name') and contain it('DOM', ...) and it('Shadow DOM') like

  describe('renders', () => {
    beforeEach(async () => {
      element = await fixture(html`<sbb-card></sbb-card>`);
    });

    it('DOM', async () => {
      await expect(element).dom.to.be.equalSnapshot();
    });

    it('Shadow DOM', async () => {
      await expect(element).shadowDom.to.be.equalSnapshot();
    });

    testA11yTreeSnapshot();
  });

• Adapt all Chromatic tests to the new visual tests using the utility functions. Keep the Chromatic tests during migration (We could clean up Chromatic specific stories when the new tests successfully elaborated and everything is migrated.)
  • Try to avoid unnecessary screenshots
    • As a base rule, every viewport should be included. However we have a lot of components where e.g. only viewport sizes make sense to tests (e.g. button)
    • Only test states that makes sense (e.g. no active state if there is non implemented...)

Helpful Commands

• Run all tests: FORCE_LOCAL=true yarn test:visual-regression --watch (start tests on local machine (not Container))
• Run specific file: yarn test:visual-regression --file=$FileDirRelativeToProjectRoot$/$FileName$
• start:visual-regression-app (has to be restarted after every run)

Component list

• elements-experimental/journey-summary @DavideMininni-Fincons test(sbb-journey-summary): add visual tests #2920
• elements-experimental/pearl-chain @TomMenga test(sbb-pearl-chain): add visual spec #2911
• elements-experimental/pearl-chain-time @TomMenga test(sbb-pearl-chain-time): add visual spec #2913
• elements-experimental/pearl-chain-vertical @DavideMininni-Fincons test(sbb-pearl-chain-vertical): add visual tests #2915
• elements-experimental/pearl-chain-vertical-item @DavideMininni-Fincons test(sbb-pearl-chain-vertical): add visual tests #2915
• elements-experimental/teaser-hero @TomMenga test(sbb-teaser-hero, sbb-teaser-paid): add visual spec #2914
• elements-experimental/teaser-paid @TomMenga test(sbb-teaser-hero, sbb-teaser-paid): add visual spec #2914
• elements-experimental/timetable-duration @TomMenga test(sbb-timetable-duration, sbb-timetable-row): add visual spec #2916
• elements-experimental/timetable-row @TomMenga test(sbb-timetable-duration, sbb-timetable-row): add visual spec #2916
• elements/accordion - @TomMenga
• elements/action-group - @DavideMininni-Fincons test(sbb-action-group): add visual tests #2750
• elements/alert - @dauriamarco @jeripeierSBB
• elements/autocomplete - @DavideMininni-Fincons within feat: sbb autocomplete grid #2512
• elements/autocomplete-grid - @DavideMininni-Fincons within feat: sbb autocomplete grid #2512
• elements/breadcrumb - @DavideMininni-Fincons test(sbb-breadcrumb, sbb-breadcrumb-group): add visual tests #2752
• elements/button @jeripeierSBB
• elements/calendar @DavideMininni-Fincons test(sbb-calendar): add visual tests #2789
• elements/card @TomMenga
• elements/checkbox @DavideMininni-Fincons test(sbb-checkbox): add visual tests #2859
• elements/chip @TomMenga test(sbb-chip): add visual spec #2794
• elements/clock @TomMenga test(sbb-clock): add visual spec #2795
• elements/container @TomMenga test(sbb-container, sbb-sticky-bar): add visual spec #2798
• elements/datepicker @DavideMininni-Fincons test(sbb-datepicker): add visual tests #2797
• elements/dialog @TomMenga test(sbb-dialog): add visual spec #2813
• elements/divider @TomMenga test(sbb-divider): add visual spec #2800
• elements/expansion-panel @TomMenga
• elements/file-selector @DavideMininni-Fincons test(sbb-file-selector): add visual tests #2812
• elements/footer @TomMenga test(sbb-footer): add visual spec #2818
• elements/form-error @DavideMininni-Fincons test(sbb-form-field): add visual spec #2807
• elements/form-field @DavideMininni-Fincons test(sbb-form-field): add visual spec #2807
• elements/header @DavideMininni-Fincons test(sbb-header): add visual tests #2820
• elements/icon @DavideMininni-Fincons test(sbb-icon): add visual tests #2826
• elements/image @jeripeierSBB
• elements/journey-header @TomMenga test(sbb-journey-header): add visual spec #2837
• elements/lead-container @jeripeierSBB
• elements/link @DavideMininni-Fincons test(sbb-link): add visual tests #2844
• elements/link-list @TomMenga test(sbb-link-list): add visual spec #2839
• elements/loading-indicator @TomMenga test(sbb-loading-indicator): add visual spec #2841
• elements/logo @TomMenga test(sbb-logo): add visual spec #2846
• elements/map-container @TomMenga test(sbb-map-container): add visual spec #2847
• elements/menu @DavideMininni-Fincons test(sbb-menu): add visual tests #2852
• elements/message - @dauriamarco
• elements/navigation @TomMenga test(sbb-navigation): add visual spec #2863
• elements/notification @DavideMininni-Fincons fix(sbb-notification): avoid resizeObserver loop warning #2855
• elements/option - @DavideMininni-Fincons within feat: sbb autocomplete grid #2512
• elements/overlay @DavideMininni-Fincons test(sbb-overlay): add visual tests #2864
• elements/popover @TomMenga test(sbb-popover, sbb-popover-trigger): add visual spec #2882
• elements/radio-button @MarioCastigliano test(sbb-radio-button, sbb-radio-button-group, sbb-radio-button-panel): implement visual spec #2908
• elements/screen-reader-only @DavideMininni-Fincons test(sbb-screen-reader-only): add visual tests #2868
• elements/select @DavideMininni-Fincons test(sbb-select): add visual tests #2878
• elements/selection-expansion-panel @TomMenga test(sbb-selection-expansion-panel): add visual spec #2895
• elements/signet @jeripeierSBB
• elements/skiplink-list @TomMenga test(skiplink-list): add visual spec #2888
• elements/slider @DavideMininni-Fincons test(sbb-slider): add visual tests #2896
• elements/status @jeripeierSBB
• elements/stepper @TomMenga test(sbb-stepper): add visual spec #2901
• elements/table-wrapper @TomMenga feat(sbb-table-wrapper): initial implementation #2715
• elements/tabs @MarioCastigliano test(sbb-tab-group, sbb-tab-label): implement visual regression tests #2867
• elements/tag @DavideMininni-Fincons test(sbb-tag): add visual tests #2898
• elements/teaser @DavideMininni-Fincons test(sbb-teaser): add visual tests #2899
• elements/time-input @TomMenga test(sbb-time-input): add visual spec #2903
• elements/timetable-occupancy @TomMenga test(sbb-timetable-occupancy): add visual spec #2918
• elements/timetable-occupancy-icon @jeripeierSBB
• elements/title @MarioCastigliano test(sbb-title): implement visual regression tests #2869
• elements/toast @TomMenga test(sbb-toast): add visual spec #2883
• elements/toggle @MarioCastigliano test(sbb-toggle, sbb-toggle-check): add visual spec #2827
• elements/toggle-check @MarioCastigliano test(sbb-toggle, sbb-toggle-check): add visual spec #2827
• elements/train @jeripeierSBB
• elements/visual-checkbox @jeripeierSBB
• storybook/styles @jeripeierSBB

---

• Add compoent.visual.spec.ts boilerplate @DavideMininni-Fincons chore: add visual.spec.ts to boilerplate #2910

[TomMenga]

Components with missing visual spec (checked if intentional):

• timetable-occupancy (soon to be merged)
• tab
• step
• navigation-marker
• navigation-list
• expansion-panel-header
• expansion-panel-content
• dialog-title
• dialog-content
• dialog-actions
• card-badge
• transparent-button-static
• transparent-button-link
• tertiary-button-static
• tertiary-button-link
• secondary-button-static
• secondary-button-link