chore: migrate tests to Vitest with Storybook interaction tests (#224)

* feat: migrate tests to Vitest with Storybook interaction tests

- Replace web-test-runner with Vitest 4.x + @storybook/addon-vitest
- Convert stories from JS to TypeScript with play functions
- Add autocomplete-keybindings.ts for keyboard handling
- Add shadow-dom-testing-library for shadow DOM queries
- Add global keybindings decorator in .storybook/preview.js
- Remove @open-wc/testing and @types/mocha dependencies
- Keep existing Playwright E2E visual tests

BREAKING CHANGE: Test infrastructure changed from web-test-runner to Vitest

* chore: include e2e tests in npm test script

* feat: add interaction tests to story play functions

- Add userEvent interactions to test keyboard navigation and selection
- Create InteractionTest stories for comprehensive E2E-style tests
- Keep Basic stories with read-only assertions for visual regression tests
- Add eslint override to disable max-lines for stories folder
- Test coverage: chip removal, item selection, no-results message, exclude toggle

* chore: enable autodocs for all stories

* chore: reorder stories - Autocomplete before Excluding

* fix: enable autodocs via tags for Storybook 10

* refactor: remove keybindings infrastructure (to be added later)

* test: migrate removed tests to Vitest unit tests and Storybook interaction tests

- Add unit tests for pure functions (search, mark) in test/utils.test.ts (11 tests)
- Extract pure functions to src/autocomplete/pure.ts for jsdom testability
- Add Storybook test stories for listbox (7 tests) and autocomplete (11 tests)
- Configure vitest with 'unit' project for jsdom-based tests
- Add jsdom dependency for unit testing pure functions
- Update eslint config for test files

* test: add missing coverage for external search, valueProperty, onSelect, keyboard edge cases

Add 10 new test stories to close coverage gaps from the @web/test-runner migration:

Autocomplete (4 stories):
- ExternalSearchMode: verifies client-side filtering is bypassed
- ValueProperty: verifies deduplication by valueProperty (id)
- OnSelectCallback: verifies onSelect receives (item, meta)
- Limit1DisablesBackspace: verifies use-keys disables when limit=1

Listbox (6 stories):
- KeyboardDownCycling: ArrowDown wraps from last to first item
- KeyboardUpNavigation: ArrowDown then ArrowUp returns to original
- HighlightAndEnter: mouseenter sets highlight, Enter selects it
- EnterDefaultIndex0: Enter with implicit defaultIndex=0
- CtrlAltIgnoresKeys: Ctrl+Alt modifier combo is ignored
- LegacyKeyNames: legacy 'Down'/'Up' key names are handled

* ci: remove separate playwright workflow, run e2e via npm test

* refactor: merge pure.ts back into util.ts, move useNotify into use-autocomplete

Author: cristinecula

.github/workflows/playwright.yml

@@ -1,12 +1,13 @@
 /** @type { import('@storybook/web-components-vite').StorybookConfig } */
 const config = {
 	stories: ['../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+	addons: ['@storybook/addon-docs', '@storybook/addon-vitest'],
 	framework: {
 		name: '@storybook/web-components-vite',
 		options: {},
 	},
 	docs: {
-		autodocs: 'tag',
+		autodocs: true,
 	},
 };
 

.storybook/main.js

@@ -0,0 +1,62 @@
+import { html } from '@pionjs/pion';
+import i18next from 'i18next';
+import { within as withinShadow } from 'shadow-dom-testing-library';
+
+// Initialize i18next for the autocomplete component
+i18next.init({
+	lng: 'en',
+	resources: {
+		en: {
+			translation: {
+				'No results found': 'No results found',
+			},
+		},
+	},
+});
+
+export default {
+	tags: ['autodocs'],
+	parameters: {
+		options: {
+			storySort: {
+				order: ['Autocomplete', 'Autocomplete Excluding', 'Tests'],
+			},
+		},
+		docs: {
+			source: {
+				excludeDecorators: true,
+				type: 'code',
+				transform: (source) => {
+					const match = source.match(/html`([\s\S]*?)`/u);
+					return match?.[1]?.trim() ?? source;
+				},
+			},
+		},
+	},
+	// Augment the canvas with shadow-dom-testing-library queries
+	beforeEach({ canvasElement, canvas }) {
+		Object.assign(canvas, { ...withinShadow(canvasElement) });
+	},
+	decorators: [
+		(story) => {
+			return html`
+				<style>
+					@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;300;400;500&display=swap');
+
+					.story-root {
+						font-family: 'Inter', sans-serif;
+						padding: 16px;
+						min-height: 100%;
+					}
+
+					cosmoz-autocomplete,
+					cosmoz-listbox,
+					cosmoz-autocomplete-excluding {
+						font-family: 'Inter', sans-serif;
+					}
+				</style>
+				<div class="story-root">${story()}</div>
+			`;
+		},
+	],
+};

.storybook/preview.js

@@ -0,0 +1,4 @@
+import { setProjectAnnotations } from '@storybook/web-components-vite';
+import * as previewAnnotations from './preview';
+
+setProjectAnnotations([previewAnnotations]);

.storybook/vitest.setup.ts

@@ -11,4 +11,17 @@ export default [
 			'import/group-exports': 0,
 		},
 	},
+	{
+		files: ['stories/**/*.ts'],
+		rules: {
+			'max-lines': 'off',
+		},
+	},
+	{
+		files: ['test/**/*.test.ts'],
+		rules: {
+			'max-lines': 'off',
+			'max-lines-per-function': 'off',
+		},
+	},
 ];