From bee-dev-team
Gate 5 of the React Native frontend development cycle - ensures all user flows from product-designer have passing Detox E2E tests on both iOS (simulator) and Android (emulator/device).
npx claudepluginhub luanrodrigues/ia-frmwrk --plugin bee-dev-teamThis skill uses the workspace's default tool permissions.
Ensure all user flows from `bee:product-designer` have passing **Detox E2E tests** on iOS (simulator) and Android (emulator) with coverage for native gestures, deep linking, navigation flows, and error paths.
Generates design tokens/docs from CSS/Tailwind/styled-components codebases, audits visual consistency across 10 dimensions, detects AI slop in UI.
Records polished WebM UI demo videos of web apps using Playwright with cursor overlay, natural pacing, and three-phase scripting. Activates for demo, walkthrough, screen recording, or tutorial requests.
Delivers idiomatic Kotlin patterns for null safety, immutability, sealed classes, coroutines, Flows, extensions, DSL builders, and Gradle DSL. Use when writing, reviewing, refactoring, or designing Kotlin code.
Ensure all user flows from bee:product-designer have passing Detox E2E tests on iOS (simulator) and Android (emulator) with coverage for native gestures, deep linking, navigation flows, and error paths.
Core principle: If the product-designer defined a user flow, it must have a Detox E2E test. If the user can encounter an error, it must be tested. If the app handles deep links, they must be tested.
<block_condition>
This skill ORCHESTRATES. React Native Frontend QA Analyst Agent (E2E mode) EXECUTES.
| Who | Responsibility |
|---|---|
| This Skill | Gather requirements, dispatch agent, track iterations |
| QA Analyst Frontend React Native Agent | Write Detox tests, run on iOS/Android, verify flows |
MANDATORY: Load testing-e2e-rn.md standards via WebFetch.
<fetch_required> https://raw.githubusercontent.com/luanrodrigues/ia-frmwrk/master/dev-team/docs/standards/frontend-react-native/testing-e2e.md </fetch_required>
REQUIRED INPUT:
- unit_id: [task/subtask being tested]
- implementation_files: [files from Gate 0]
OPTIONAL INPUT:
- user_flows_path: [path to user-flows.md]
- backend_handoff: [endpoints, contracts from backend cycle]
- gate4_handoff: [full Gate 4 output]
- deep_link_schemes: [list of deep link URIs to test]
if any REQUIRED input is missing:
→ STOP and report: "Missing required input: [field]"
if user_flows_path provided:
→ Load user flows as E2E test scenarios
→ All flows MUST be covered
if backend_handoff provided:
→ Verify E2E tests exercise backend endpoints
→ Verify request payloads match contracts
if deep_link_schemes provided:
→ All listed schemes MUST have E2E tests
Task tool:
subagent_type: "bee:qa-analyst-frontend-react-native"
model: "opus"
prompt: |
**MODE:** E2E TESTING (Gate 5)
**Standards:** Load testing-e2e.md (frontend-react-native)
**Input:**
- Unit ID: {unit_id}
- Implementation Files: {implementation_files}
- User Flows: {user_flows_path or "N/A"}
- Backend Handoff: {backend_handoff or "N/A"}
- Deep Link Schemes: {deep_link_schemes or "N/A"}
- Framework: React Native (Expo or bare)
- E2E Framework: Detox
**Requirements:**
1. Create Detox tests for all user flows
2. Test happy path + error paths (API 500, timeout, network loss, validation errors)
3. Run on iOS simulator and Android emulator
4. Test native gestures where used (swipe, long press, pinch, drag)
5. Use testID or accessibilityLabel selectors only (no brittle XPath)
6. Run 3x consecutively to verify no flaky tests
7. Test deep links if deep_link_schemes provided
**React Native-Specific Checks:**
- Navigation stack state resets correctly between test scenarios (use device.reloadReactNative() in beforeEach)
- Async storage and secure storage clear between test suites
- React Navigation navigation guards are tested (auth redirects, role-based access)
- Animated transitions complete before element interaction (use waitFor + toBeVisible)
- Keyboard dismissal behavior tested on both platforms
- Back button behavior tested (Android hardware back, iOS swipe-back gesture)
- Permission dialogs handled (camera, location, notifications) via device.disableSynchronization() if needed
- Offline mode: network request errors when device.setURLBlacklist() or network intercept applied
- Deep link routing: device.launchApp({ url: 'myapp://path' }) navigates to correct screen
- Biometric authentication flows: device.setBiometricEnrollment(true) pattern used
**Output Sections Required:**
- ## E2E Testing Summary
- ## Flow Coverage
- ## Handoff to Next Gate
Parse agent output:
if "Status: PASS" in output:
→ Gate 5 PASSED
→ Return success with metrics
if "Status: FAIL" in output:
→ If flow not covered: re-dispatch agent to add missing tests
→ If platform failure: re-dispatch implementation agent to fix platform-specific issue
→ If flaky: re-dispatch agent to stabilize tests (use waitFor + toBeVisible patterns)
→ Re-run E2E tests (max 3 iterations)
→ If still failing: ESCALATE to user
## E2E Testing Summary
**Status:** {PASS|FAIL}
**Flows Tested:** {X/Y}
**Happy Path Tests:** {count}
**Error Path Tests:** {count}
**Platforms Passed:** {X/2} (iOS + Android)
**Consecutive Passes:** {X/3}
## Flow Coverage
| User Flow | Happy Path | Error Paths | iOS | Android | Gestures | Status |
|-----------|------------|-------------|-----|---------|----------|--------|
| {flow} | {PASS|FAIL} | {descriptions} | {PASS|FAIL} | {PASS|FAIL} | {N/A or PASS|FAIL} | {PASS|FAIL} |
## Deep Link Coverage
| Deep Link Scheme | Screen Navigated | Parameters | Status |
|-----------------|-----------------|------------|--------|
| {scheme} | {screen} | {params} | {PASS|FAIL} |
## Backend Handoff Verification
| Endpoint | Method | Contract Verified | Status |
|----------|--------|-------------------|--------|
| {endpoint} | {method} | {fields} | {PASS|FAIL} |
## Handoff to Next Gate
- Ready for Gate 6 (Performance Testing): {YES|NO}
- Iterations: {count}
See shared-patterns/shared-anti-rationalization.md for universal anti-rationalizations. Gate-specific:
| Rationalization | Why It's WRONG | Required Action |
|---|---|---|
| "Unit tests cover the flow" | Unit tests don't test real device interaction or native gestures. | Write Detox E2E tests |
| "Only iOS matters" | Android users exist. Behavior differs significantly. | Test on iOS AND Android |
| "Happy path is enough" | Users encounter errors. Test network loss, API 500, timeouts. | Add error path tests |
| "testID is optional" | CSS selectors don't exist in RN. testID / accessibilityLabel are the only stable selectors. | Use testID or accessibilityLabel |
| "Product-designer flows are suggestions" | Flows define acceptance criteria. Cover all. | Test all flows |
| "Test is flaky, skip it" | Flaky tests indicate real instability. Use waitFor + toBeVisible. | Fix the test |
| "State doesn't need reset between tests" | Shared state causes test pollution and order dependency. | Reset in beforeEach |
| "Deep links are rarely used" | Deep links are entry points. They must work reliably. | Test all deep link schemes |
| "Android back button is an edge case" | Android back navigation is a core platform pattern. | Test back button behavior |