skills.rest
LuccaSA
LuccaSAOFFICIAL
Explore all skills by this author →
WebsiteGitHub

generate-e2e-test

Generates Storybook play-function E2E tests for Lucca Front component stories.

52|7|Updated Apr 12, 2017
Search Tags:#accessibility#angular#e2e testing#storybook#interaction testing#play function#lucca-front
One-click install
npx skills add https://github.com/LuccaSA/lucca-front --skill generate-e2e-test-luccasa
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: generate-e2e-test
Source: https://github.com/LuccaSA/lucca-front/tree/main/.claude/skills/generate-e2e-test
Command: npx skills add https://github.com/LuccaSA/lucca-front --skill generate-e2e-test-luccasa

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Writing consistent end-to-end interaction tests for Storybook stories in the Lucca Front repository is repetitive and error-prone, especially when handling Angular change detection, CDK overlays, and keyboard accessibility. This Skill generates or completes play tests that follow the repository's exact conventions. ## Core Features & Use Cases - Convention-compliant test generation: Produces tests using createTestStory, waitForAngular, named step blocks, and the mandatory TEST naming suffix. - Overlay and keyboard coverage: Handles elements rendered in global overlays (popover, dialog, dropdown) via screen, and enforces keyboard interaction steps (Enter, Escape, arrows, Tab) with ARIA assertions for every interactive component. - Use Case: Given an existing Basic story for a select component, generate a BasicTEST story that verifies initial rendering, mouse click to open the listbox, keyboard navigation with arrow keys, and focus return after Escape. ## Quick Start Ask the assistant to generate a Storybook play test for a specific story file and target story, optionally providing a Figma link or usage guidelines to cover official rules and edge cases.

Frequently Asked Questions about generate-e2e-test

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I write Storybook play function tests for Angular components?▼

Wrap the existing story with createTestStory and an async play function, start with await waitForAngular(), then organize interactions and assertions into named step blocks. Use within(canvasElement) for queries and userEvent for interactions.

How to test popover or dialog overlays in Storybook play tests?▼

Elements rendered in global CDK overlays are outside the canvas, so query them with screen instead of within(canvasElement). After the triggering click, call await waitForAngular() before asserting the overlay is visible.

How do I simulate keyboard navigation in Storybook interaction tests?▼

Focus the element directly with .focus(), then use userEvent.keyboard with keys like {ArrowDown}, {Enter}, or {Escape}. For repeated presses, use the repeatKeyboardUserEvent helper, and verify ARIA attributes like aria-expanded afterwards.

Why is my Storybook play test failing after a click interaction?▼

Angular updates asynchronously after interactions, so assertions may run before the DOM stabilizes. Add await waitForAngular() after every click, keyboard input, or selection that triggers asynchronous changes.

What naming convention should Storybook test stories follow?▼

In this repository, the test for a story named Basic must be exported as BasicTEST. The TEST suffix is mandatory, and tests are built by wrapping the source story with createTestStory.

Related Skills

Explore More Software Engineering Skills→
factorialcofactorialco
27

f0-storybook-stories

Generate .stories.tsx files for F0 React components with meta, args, and argTypes.

Official
Intermediate
juburrjuburr
1

react-storybook

Build and validate React-TypeScript components with Storybook CSF3 stories.

Community
Advanced
nekorush14nekorush14
4

storybook-development

Generate Storybook CSF3 stories with interaction and visual regression testing.

Community
Advanced
ivegamsftivegamsft

e2e-testing

Execute end-to-end tests for web applications using Playwright and Cypress.

Community
Advanced