playwright-component-testing

1// Example story file. Stories live next to the component they exercise:2// this file is src/components/Button.story.ts for src/components/Button.vue.3// Each named export is one story: a scenario-specific wrapper around the4// component. Wire providers, mock data, state and callbacks here, not in tests.5// Alternatively, write a story as a Button.<scenario>.story.vue single-file6// component — its default export is the story.7import { defineComponent, h, ref } from 'vue';8import Button from './Button.vue';9 10export const Primary = defineComponent(() => () => h(Button, { title: 'Submit' }));11 12export const Disabled = defineComponent(() => () => h(Button, { title: 'Submit', disabled: true }));13 14// The story owns the state and provides the callbacks. Record the state into15// a hidden form for the test to assert on.16export const CountsClicks = defineComponent(() => {17  const clicks = ref(0);18  return () => h('div', [19    h(Button, { title: 'Submit', onClick: () => clicks.value++ }),20    h('form', { hidden: true }, [21      h('input', { 'data-testid': 'click-count', readonly: true, value: String(clicks.value) }),22    ]),23  ]);24});25