Conversation
… visual regression snapshots
Contributor
There was a problem hiding this comment.
Pull request overview
This PR introduces Storybook coverage for the Todos feature components and updates the Playwright visual regression suite to automatically discover and screenshot those stories.
Changes:
- Added Storybook stories for multiple Todos UI components (item, list, hero, summary, filters panel).
- Updated Playwright VRT to discover story exports from source and added a helper to wait for Storybook render readiness.
- Updated build/test config to include Playwright TS config and ensure Storybook static output exists before running VRT server.
Reviewed changes
Copilot reviewed 8 out of 54 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| tsconfig.json | Adds a Playwright TS project reference for tooling/typecheck alignment. |
| playwright.config.ts | Ensures Storybook static build exists before starting the VRT web server. |
| e2e/vrt/stories.spec.ts | Discovers Todos component stories automatically and snapshots each story across viewports. |
| src/app/features/todos/components/todo-item/todo-item.component.stories.ts | Adds Storybook stories for todo item states. |
| src/app/features/todos/components/todo-task-list/todo-task-list.component.stories.ts | Adds Storybook stories for list states (populated/empty/completed). |
| src/app/features/todos/components/todo-summary/todo-summary.component.stories.ts | Adds Storybook stories for summary count states. |
| src/app/features/todos/components/todo-hero/todo-hero.component.stories.ts | Adds Storybook stories for hero metric variants. |
| src/app/features/todos/components/todo-filters-panel/todo-filters-panel.component.stories.ts | Adds Storybook stories for filters panel states using a reactive FormControl. |
| documentation.json | Updates generated component docs metadata (ids/selectors/reordered entries). |
Comments suppressed due to low confidence (6)
src/app/features/todos/components/todo-item/todo-item.component.stories.ts:1
- The story data includes real
Datevalues, and the component description explicitly mentions a “relative creation timestamp”. If the UI renders relative time (e.g., “18 days ago”), VRT screenshots will drift as wall-clock time moves forward, causing noisy snapshot updates. Consider freezing time in VRT (e.g., injecting a fixed Date/clock in the Playwright page before Storybook loads) or adjusting the component/story to render a deterministic timestamp for visual tests.
src/app/features/todos/components/todo-task-list/todo-task-list.component.stories.ts:1 - Same determinism concern as the Todo Item stories: if list rows display relative time, these fixed historical timestamps will change their rendered text over time, making VRT snapshots unstable. Freezing the browser clock for VRT (or otherwise making the timestamp rendering deterministic) will prevent future snapshot churn.
src/app/features/todos/components/todo-task-list/todo-task-list.component.stories.ts:1 - Same determinism concern as the Todo Item stories: if list rows display relative time, these fixed historical timestamps will change their rendered text over time, making VRT snapshots unstable. Freezing the browser clock for VRT (or otherwise making the timestamp rendering deterministic) will prevent future snapshot churn.
src/app/features/todos/components/todo-task-list/todo-task-list.component.stories.ts:1 - Same determinism concern as the Todo Item stories: if list rows display relative time, these fixed historical timestamps will change their rendered text over time, making VRT snapshots unstable. Freezing the browser clock for VRT (or otherwise making the timestamp rendering deterministic) will prevent future snapshot churn.
src/app/features/todos/components/todo-filters-panel/todo-filters-panel.component.stories.ts:1 - The story constructs and passes a
FormControl, which typically requires Angular’s Reactive Forms infrastructure to be available for the component template bindings. To keep the story self-contained (and not dependent on whether the component is standalone / imports forms internally), add Storybook decorators to includeReactiveFormsModule(viamoduleMetadataor the Storybook Angular application config pattern).
src/app/features/todos/components/todo-filters-panel/todo-filters-panel.component.stories.ts:1 - The story constructs and passes a
FormControl, which typically requires Angular’s Reactive Forms infrastructure to be available for the component template bindings. To keep the story self-contained (and not dependent on whether the component is standalone / imports forms internally), add Storybook decorators to includeReactiveFormsModule(viamoduleMetadataor the Storybook Angular application config pattern).
You can also share your feedback on Copilot code review. Take the survey.
Comment on lines
+9
to
+10
| const ensureStorybookStaticCommand = | ||
| '[ -f storybook-static/index.html ] && [ -f storybook-static/iframe.html ] || npx ng run angular-21:build-storybook'; |
| command: isCI | ||
| ? `npx http-server storybook-static -a ${vrtHost} -p ${vrtPort} -c-1 -s` | ||
| : `test -d storybook-static || npx ng run angular-21:build-storybook; npx http-server storybook-static -a ${vrtHost} -p ${vrtPort} -c-1 -s`, | ||
| command: `${ensureStorybookStaticCommand}; npx http-server storybook-static -a ${vrtHost} -p ${vrtPort} -c-1 -s`, |
Comment on lines
+74
to
+77
| function parseStoriesFromFile(filePath: string): StoryDefinition[] { | ||
| const source = readFileSync(filePath, 'utf8'); | ||
| const titleMatch = source.match(/title:\s*['"`]([^'"`]+)['"`]/); | ||
| const title = titleMatch?.[1]; |
Comment on lines
+83
to
+93
| const titleId = title | ||
| .split('/') | ||
| .map((segment) => toStorySegment(segment)) | ||
| .join('-'); | ||
|
|
||
| return Array.from(source.matchAll(/export const\s+(\w+)\s*:\s*Story\b/g), (match) => ({ | ||
| exportName: match[1], | ||
| id: `${titleId}--${toStorySegment(match[1])}`, | ||
| title, | ||
| })); | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.