ds-test-component

Generate visual, accessibility, and unit tests for Helvetia Design System components.

111|29|Updated Oct 4, 2019
One-click install
npx skills add https://github.com/baloise/design-system --skill ds-test-component
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ds-test-component
Source: https://github.com/baloise/design-system/tree/main/.claude/skills/ds-test-component
Command: npx skills add https://github.com/baloise/design-system --skill ds-test-component

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @baloise/ds-playwright, @baloise/ds-core, playwright, vitest, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill automates the creation of test files for Helvetia Design System components, streamlining the testing process and ensuring comprehensive coverage.

Core Features & Use Cases

  • Automated Test Generation: Generates visual tests, accessibility tests, component tests, page objects, and unit tests for DS components.
  • Component Coverage: Ensures that all aspects of a component are tested, including visual representation, accessibility, and behavior.
  • Use Case: When developing a new component for the Helvetia Design System, this Skill can be used to quickly set up a comprehensive testing suite.

Quick Start

Generate all tests for the 'button' component: ds-test-component button

Frequently Asked Questions about ds-test-component

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

FAQPage Schema
How do I automate test generation for design system components?

Automate test generation by parsing component props, events, slots, and parts to automatically generate visual regression, accessibility, and component behavior test files. This streamlines creating comprehensive test coverage for design system components.

Can I generate Playwright and Vitest tests for my UI components?

Yes, you can generate Playwright and Vitest tests for UI components. The automation uses Playwright for browser automation to create visual regression tests and Vitest to generate unit tests, ensuring thorough component behavior coverage.

How do I create visual regression and accessibility tests for a new component?

Create visual regression and accessibility tests by running an automated generation command that parses component metadata. It produces dedicated visual and accessibility test files alongside page objects to verify component representation and compliance.

Does automated component testing support events, slots, and props parsing?

Yes, automated component testing supports events, slots, and props parsing. The generation process extracts these structural details from the component to build accurate behavior tests, page objects, and unit tests that reflect actual interactions.

What is the best way to set up a comprehensive testing suite for design system components?

The best way to set up a comprehensive testing suite is to use automated generation that creates visual, accessibility, and component tests simultaneously. This approach ensures all aspects, from visual representation to behavior, are covered immediately.

Do I need Playwright to run generated visual regression tests for components?

Yes, you need Playwright to run generated visual regression tests. It serves as the underlying browser automation framework required to execute the visual tests and validate the visual representation of the components.