---
name: storybook-testing
description: Use this skill when an AI agent needs to keep Atomic Bomb components testable, mocked, and viewable in Storybook isolation mode.
---

# Storybook and Testing Skill

Atomic Bomb projects expect reusable components to be viewable and testable in isolation.

## Use When

Use this skill when creating or updating atoms, molecules, organisms, templates, pages with stories, mock files, interface files, or tests.

## Storybook Rules

- Stories must not depend on route-only data unless wrapped by the required router provider.
- Stories must not require live network calls.
- Use mock files for default story data.
- Include realistic content that exercises layout.
- Include mobile-sensitive content when responsiveness matters.
- Add providers, decorators, or wrappers only where needed.

## Mock Rules

Mocks should match the component interface, include required fields, expose layout issues with realistic text, include representative actions and nested items, and avoid importing page data directly unless the project intentionally shares page mocks.

## Interface Rules

Interfaces should describe the component boundary, use shared data types when the same shape flows across layers, keep optional fields optional only when the component handles absence, and avoid `any`.

## Test Rules

Tests should cover rendering, required text, important actions, conditional UI, and accessibility labels for icon-only controls.

For route-aware components, wrap tests in a router:

```tsx
import { MemoryRouter } from 'react-router-dom'
```

Use the project’s current test utilities and existing patterns.

## Isolation Checklist

- Storybook story imports the component and mock only.
- Required providers are explicit in the story.
- Tests compile with TypeScript.
- Component does not fetch page data internally unless that is its purpose.
- Images, icons, and code snippets render without layout overflow.
- The component can be used outside the current page.

## Verification Commands

Use available scripts:

```shell
npx tsc -b
npm test
npm run test:storybook
npm run build
```