storybook_test_component
Run visual, accessibility, and interaction tests on UI components to ensure compliance and quality. Supports comprehensive testing workflows for improved UI/UX development.
Instructions
Run visual and accessibility tests on a component
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| componentName | Yes | ||
| storyName | No | ||
| testTypes | No |
Implementation Reference
- src/tools/storybook.ts:92-177 (handler)The main handler function testComponent in StorybookTools class that executes the tool: parses arguments with Zod schema, simulates visual, accessibility, and interaction tests, formats results as JSON.async testComponent(args: any) { const params = StorybookTestSchema.parse(args); const testTypes = params.testTypes || ['visual', 'accessibility']; const results: any = { component: params.componentName, story: params.storyName || 'default', tests: {} }; try { // Visual regression test simulation if (testTypes.includes('visual')) { results.tests.visual = { passed: true, message: 'Visual regression test passed', details: { pixelDifference: 0, percentageDifference: 0, threshold: 0.1 } }; } // Accessibility test simulation if (testTypes.includes('accessibility')) { results.tests.accessibility = { passed: true, violations: [], warnings: [ { id: 'color-contrast', impact: 'minor', description: 'Ensure sufficient color contrast', nodes: 2 } ], passes: [ 'aria-roles', 'button-name', 'document-title', 'html-has-lang', 'image-alt', 'label', 'link-name', 'list', 'listitem', 'meta-viewport', 'region' ] }; } // Interaction test simulation if (testTypes.includes('interaction')) { results.tests.interaction = { passed: true, testsRun: [ { name: 'renders correctly', passed: true }, { name: 'handles click events', passed: true }, { name: 'updates state on input', passed: true } ], duration: '1.2s' }; } return { content: [ { type: 'text', text: JSON.stringify(results, null, 2) } ] }; } catch (error: any) { return { content: [ { type: 'text', text: `Error testing component: ${error.message}` } ], isError: true }; } }
- src/tools/storybook.ts:9-13 (schema)Zod schema defining the input parameters for the storybook_test_component tool: componentName (required), storyName (optional), testTypes (optional array).const StorybookTestSchema = z.object({ componentName: z.string(), storyName: z.string().optional(), testTypes: z.array(z.enum(['visual', 'accessibility', 'interaction'])).optional() });
- src/index.ts:75-92 (registration)Tool registration in the ListTools response, defining name, description, and inputSchema matching the Zod schema.name: 'storybook_test_component', description: 'Run visual and accessibility tests on a component', inputSchema: { type: 'object', properties: { componentName: { type: 'string' }, storyName: { type: 'string' }, testTypes: { type: 'array', items: { type: 'string', enum: ['visual', 'accessibility', 'interaction'] } } }, required: ['componentName'] } },
- src/index.ts:304-305 (registration)Dispatch in the CallToolRequest handler switch statement routing storybook_test_component calls to the storybookTools.testComponent method.case 'storybook_test_component': return await this.storybookTools.testComponent(args);
- src/index.ts:49-49 (registration)Instantiation of the StorybookTools class instance used for handling storybook tools.this.storybookTools = new StorybookTools();