Integration E2e Testing @shinpr
claudesonnetSkillDesigns integration and E2E tests with mock boundaries and behavior verification rules. Use when writing E2E or integration tests.
Install
curl -o ~/.claude/skills/integration-e2e-testing/SKILL.md https://raw.githubusercontent.com/shinpr/ai-coding-project-boilerplate/main/.claude/skills-en/integration-e2e-testing/SKILL.mdDescription
Integration Test & E2E Test Design/Implementation Rules
References
- references/e2e-design.md - E2E test design principles with Playwright (candidate sources, selection criteria, UI Spec mapping)
- references/e2e-environment-prerequisites.md - E2E environment prerequisites (seed data, auth fixtures, environment checklist)
Test Types and Limits
| Type | Purpose | File Format | Limit |
|------|---------|-------------|-------|
| Integration Test | Component interaction verification | *.int.test.ts | 3 per feature |
| E2E Test | Critical user journey verification | *.e2e.test.ts | 1-2 per feature |
Critical User Journey: Features with revenue impact, legal requirements, or daily use by majority of users
Behavior-First Principle
Observability Check (All YES = Include)
| Check | Question | If NO | |-------|----------|-------| | Observable | Can user observe the result? | Exclude | | System Context | Does it require integration of multiple components? | Exclude | | Automatable | Can it run stably in CI environment? | Exclude |
Include/Exclude Criteria
Include: Business logic accuracy, data integrity, user-visible features, error handling Exclude: External live connections, performance metrics, implementation details, UI layout
Skeleton Specification
Required Comment Format
Each test MUST include the following annotations.
Property Annotations
ROI Calculation
| Type | Total Cost | E2E Generation Condition | |------|------------|-------------------------| | Integration | 11 | - | | E2E | 38 | ROI > 50 |
Implementation Rules
Property-Based Test Implementation
When Property annotation exists, fast-check library is required:
Requirements:
- Write in
fc.assert(fc.property(...))format - Reflect skeleton's
// fast-check:comment directly in implementation - When failure case discovered, add as concrete unit test (regression prevention)
Behavior Verification Implementation
Behavior Description Verification Levels:
| Step Type | Verification Target | Example | |-----------|--------------------| --------| | Trigger | Reproduce in Arrange | API failure -> mockResolvedValue({ ok: false }) | | Process | Intermediate state or call | Function call, state change | | Observable Result | Final output value | Return value, error message, log output |
Pass Criteria: Pass if "observable result" is verified as return value or mock call argument of test target
Verification Item Determination Rules
| Skeleton State | Verification Item Determination Method |
|----------------|---------------------------------------|
| // Verification items: listed | Implement all listed items with expect |
| No // Verification items: | Derive from "observable result" in "Behavior" description |
| Both present | Prioritize verification items, use behavior as supplement |
Integration Test Mock Boundaries
| Judgment Criteria | Mock | Actual | |-------------------|------|--------| | Part of test target? | No -> Can mock | Yes -> Actual required | | Is call verification target of test? | No -> Can mock | Yes -> Actual or verifiable mock | | External network communication? | Yes -> Mock required | No -> Actual recommended |
Judgment Flow:
- External API (HTTP communication) -> Mock required
- Component interaction under test -> Actual required
- Log output verification needed -> Use verifiable mock (vi.fn())
- Log output verification not needed -> Actual or ignore
E2E Test Execution Conditions
- Execute only after all components are implemented
- Do not use mocks (
@dependency: full-system)
Review Criteria
Skeleton and Implementation Consistency
| Check | Failure Condition | |-------|-------------------| | Property Verification | Property annotation exists but fast-check not used | | Behavior Verification | No expect for "observable result" | | Verification Item Coverage | Listed verification items not included in expect | | Mock Boundary | Internal components mocked in integration test |
Implementation Quality
| Check | Failure Condition | |-------|-------------------| | AAA Structure | Arrange/Act/Assert separation unclear | | Independence | State sharing between tests, execution order dependency | | Reproducibility | Depends on date/random, results vary | | Readability | Test name and verification content don't match |
Capabilities
- Write in fc.assert(fc.property(...)) format
- Reflect skeleton's // fast-check: comment directly in implementation
- When failure case discovered, add as concrete unit test (regression prevention)
- External API (HTTP communication) -> Mock required
- Component interaction under test -> Actual required
- Log output verification needed -> Use verifiable mock (vi.fn())
- Log output verification not needed -> Actual or ignore
- Execute only after all components are implemented
- Do not use mocks (@dependency: full-system)
Related Items
From the same repository — designed to work together
curl -o ~/.claude/skills/integration-e2e-testing/SKILL.md https://raw.githubusercontent.com/shinpr/ai-coding-project-boilerplate/main/.claude/skills-en/integration-e2e-testing/SKILL.md && curl -o ~/.claude/agents/investigator.md https://raw.githubusercontent.com/shinpr/ai-coding-project-boilerplate/main/.claude/agents-en/investigator.md && curl -o ~/.claude/agents/ui-spec-designer.md https://raw.githubusercontent.com/shinpr/ai-coding-project-boilerplate/main/.claude/agents-en/ui-spec-designer.md && curl -o ~/.claude/agents/rule-advisor.md https://raw.githubusercontent.com/shinpr/ai-coding-project-boilerplate/main/.claude/agents-en/rule-advisor.md && curl -o ~/.claude/agents/document-reviewer.md https://raw.githubusercontent.com/shinpr/ai-coding-project-boilerplate/main/.claude/agents-en/document-reviewer.md && curl -o ~/.claude/agents/task-decomposer.md https://raw.githubusercontent.com/shinpr/ai-coding-project-boilerplate/main/.claude/agents-en/task-decomposer.md && curl -o ~/.claude/agents/skill-reviewer.md https://raw.githubusercontent.com/shinpr/ai-coding-project-boilerplate/main/.claude/agents-en/skill-reviewer.mdInvestigator
Comprehensively collects problem-related information and creates evidence matrix. Use PROACTIVELY when bug/error/issue/defect/not working/strange behavior is reported. Reports only observations without proposing solutions.
curl -o ~/.claude/agents/investigator.md https://raw.githubusercontent.com/shinpr/ai-coding-project-boilerplate/main/.claude/agents-en/investigator.mdUi Spec Designer
Creates UI Specifications from PRD and optional prototype code. Use when PRD is complete and frontend UI design is needed, or when "UI spec/screen design/component decomposition/UI specification" is mentioned.
curl -o ~/.claude/agents/ui-spec-designer.md https://raw.githubusercontent.com/shinpr/ai-coding-project-boilerplate/main/.claude/agents-en/ui-spec-designer.mdRule Advisor
Selects optimal rulesets for tasks and performs metacognitive analysis. MUST BE USED before any implementation task starts (CLAUDE.md required process). Analyzes task essence with task-analyzer skill and returns structured JSON.
curl -o ~/.claude/agents/rule-advisor.md https://raw.githubusercontent.com/shinpr/ai-coding-project-boilerplate/main/.claude/agents-en/rule-advisor.mdDocument Reviewer
Reviews document consistency and completeness, providing approval decisions. Use PROACTIVELY after PRD/UI Spec/Design Doc/work plan creation, or when "document review/approval/check" is mentioned. Detects contradictions and rule violations with improvement suggestions.
curl -o ~/.claude/agents/document-reviewer.md https://raw.githubusercontent.com/shinpr/ai-coding-project-boilerplate/main/.claude/agents-en/document-reviewer.mdTask Decomposer
Decomposes work plans into independent single-commit granularity tasks in docs/plans/tasks. Use PROACTIVELY when work plan (docs/plans/) is created, or when "task decomposition/split/decompose" is mentioned.
curl -o ~/.claude/agents/task-decomposer.md https://raw.githubusercontent.com/shinpr/ai-coding-project-boilerplate/main/.claude/agents-en/task-decomposer.mdSkill Reviewer
Evaluates skill file quality against optimization patterns and editing principles. Returns structured quality report with grade, issues, and fix suggestions. Use when reviewing created or modified skill content.
curl -o ~/.claude/agents/skill-reviewer.md https://raw.githubusercontent.com/shinpr/ai-coding-project-boilerplate/main/.claude/agents-en/skill-reviewer.md