playwright-component-testing

1// Example story file. Stories live next to the component they exercise:2// this file is src/components/Button.story.tsx for src/components/Button.tsx.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.5import { useState } from 'react';6import { Button } from './Button';7 8export const Primary = () => <Button title="Submit" />;9 10export const Disabled = () => <Button title="Submit" disabled />;11 12// The story owns the state and provides the callbacks. Record the state into13// a hidden form for the test to assert on.14export const CountsClicks = () => {15  const [clicks, setClicks] = useState(0);16  return <>17    <Button title="Submit" onClick={() => setClicks(count => count + 1)} />18    <form hidden><input data-testid="click-count" readOnly value={String(clicks)} /></form>19  </>;20};21