Use Vitest browser mode with Storybook

[danielnaab]

Overview

To streamline running UI tests within the Vitest suite in a real browser, use the new Vitest browser mode with Storybook's new test addon.

Context

Storybook has a new Vitest add-on, that would remove the need for the describeStories helper used throughout the design package. See here for more details.

Acceptance Criteria

• describeStories usage removed
• Vitest configured to run all the Storybook interaction tests within the root Vitest workspace
• JSDOM usage removed from UI component tests

Definition of done

The "definition of done" ensures our quality standards are met with each bit of user-facing behavior we add. Everything that can be done incrementally should be done incrementally, while the context and details are fresh. If it’s inefficient or “hard” to do so, the team should figure out why and add OPEX/DEVEX backlog items to make it easier and more efficient.

• Behavior
  • Acceptance criteria met
  • Implementation matches design decisions
• Documentation
  • ADRs (/documents/adr folder)
  • Relevant README.md(s)
• Code quality
  • Code refactored for clarity and no design/technical debt
  • Adhere to separation of concerns; code is not tightly coupled, especially to 3rd party dependencies; dependency rule followed
  • Code is reviewed by team member
  • Code quality checks passed
• Security and privacy
  • Automated security and privacy gates passed
• Testing tasks completed
  • Automated tests pass
  • Unit test coverage of our code >= 90%
• Build and deploy
  • Build process updated
  • API(s) are versioned
  • Feature toggles created and/or deleted. Document the feature toggle
  • Source code is merged to the main branch

Decisions

• Optional: Any decisions we've made while working on this story