Skip to content

feat: replace WTR with Storybook interaction tests via Vitest addon#10

Merged
cristinecula merged 2 commits intomainfrom
feat/storybook-interaction-tests
Feb 4, 2026
Merged

feat: replace WTR with Storybook interaction tests via Vitest addon#10
cristinecula merged 2 commits intomainfrom
feat/storybook-interaction-tests

Conversation

@cristinecula
Copy link
Contributor

Summary

  • Replace @web/test-runner with Vitest + @storybook/addon-vitest + Playwright browser mode for running interaction tests co-located with stories
  • Add shadow-dom-testing-library for idiomatic shadow DOM queries (findByShadowText, getByShadowRole, etc.)
  • Add step() function to group interactions in the Storybook Interactions panel

Changes

New files

  • vitest.config.ts — Vitest config with storybookTest plugin, Playwright chromium browser provider
  • .storybook/preview.jsshadow-dom-testing-library setup via beforeEach + autodocs source transform for clean code display
  • .storybook/vitest.setup.tssetProjectAnnotations for Vitest

Modified files

  • .storybook/main.js — Added @storybook/addon-vitest addon
  • stories/component.stories.ts — Added play functions with step() to all 3 stories (default greeting, custom greeting, empty greeting, click-to-increment)
  • package.json — Updated test scripts to use Vitest, added new devDependencies, removed WTR deps

Removed files

  • test/component.test.ts — Replaced by story play functions
  • web-test-runner.config.mjs — No longer needed

Test commands

npm test              # Run all interaction tests (headless)
npm run test:watch    # Watch mode

Pattern reference

This follows the same testing infrastructure established in cosmoz-command-menu PR #6.

Replace @web/test-runner with Vitest + @storybook/addon-vitest +
Playwright browser mode for running interaction tests co-located
with stories using play functions.

Changes:
- Add vitest.config.ts with storybookTest plugin and Playwright
- Add .storybook/preview.js with shadow-dom-testing-library setup
  and autodocs source transform for clean code display
- Add .storybook/vitest.setup.ts for project annotations
- Add @storybook/addon-vitest to .storybook/main.js
- Add play functions with step() to all 3 stories testing:
  default greeting, custom greeting, empty greeting, and
  click-to-increment counter behavior
- Remove test/component.test.ts and web-test-runner.config.mjs
- Remove @open-wc/testing, @types/mocha, @web/test-runner-playwright
  devDependencies
- Add vitest, @vitest/browser, @vitest/browser-playwright,
  @playwright/test, @storybook/addon-vitest,
  shadow-dom-testing-library devDependencies
@github-actions
Copy link

github-actions bot commented Feb 4, 2026

PR Preview Action v1.8.1

QR code for preview link

🚀 View preview at
https://Neovici.github.io/cosmoz-component/pr/pr-10/

Built to branch gh-pages at 2026-02-04 01:00 UTC.
Preview will be ready when the GitHub Pages deployment is complete.

@cristinecula cristinecula self-assigned this Feb 4, 2026
@cristinecula cristinecula requested review from Copilot and megheaiulian and removed request for Copilot February 4, 2026 08:42
@cristinecula cristinecula marked this pull request as ready for review February 4, 2026 08:44
@cristinecula cristinecula merged commit 3af42cc into main Feb 4, 2026
8 checks passed
github-actions bot pushed a commit that referenced this pull request Feb 4, 2026
## [1.3.0](v1.2.1...v1.3.0) (2026-02-04)

### Features

* replace WTR with Storybook interaction tests via Vitest addon ([#10](#10)) ([3af42cc](3af42cc))
@github-actions
Copy link

github-actions bot commented Feb 4, 2026

🎉 This PR is included in version 1.3.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants