mirror of
https://github.com/leonvanzyl/autocoder.git
synced 2026-01-30 06:12:06 +00:00
improve performance
This commit is contained in:
@@ -172,48 +172,12 @@ Use browser automation tools:
|
||||
- [ ] Loading states appeared during API calls
|
||||
- [ ] Error states handle failures gracefully
|
||||
|
||||
### STEP 5.6: MOCK DATA DETECTION SWEEP
|
||||
### STEP 5.6: MOCK DATA DETECTION (Before marking passing)
|
||||
|
||||
**Run this sweep AFTER EVERY FEATURE before marking it as passing:**
|
||||
|
||||
#### 1. Code Pattern Search
|
||||
|
||||
Search the codebase for forbidden patterns:
|
||||
|
||||
```bash
|
||||
# Search for mock data patterns
|
||||
grep -r "mockData\|fakeData\|sampleData\|dummyData\|testData" --include="*.js" --include="*.ts" --include="*.jsx" --include="*.tsx"
|
||||
grep -r "// TODO\|// FIXME\|// STUB\|// MOCK" --include="*.js" --include="*.ts" --include="*.jsx" --include="*.tsx"
|
||||
grep -r "hardcoded\|placeholder" --include="*.js" --include="*.ts" --include="*.jsx" --include="*.tsx"
|
||||
```
|
||||
|
||||
**If ANY matches found related to your feature - FIX THEM before proceeding.**
|
||||
|
||||
#### 2. Runtime Verification
|
||||
|
||||
For ANY data displayed in UI:
|
||||
|
||||
1. Create NEW data with UNIQUE content (e.g., "TEST_12345_DELETE_ME")
|
||||
2. Verify that EXACT content appears in the UI
|
||||
3. Delete the record
|
||||
4. Verify it's GONE from the UI
|
||||
5. **If you see data that wasn't created during testing - IT'S MOCK DATA. Fix it.**
|
||||
|
||||
#### 3. Database Verification
|
||||
|
||||
Check that:
|
||||
|
||||
- Database tables contain only data you created during tests
|
||||
- Counts/statistics match actual database record counts
|
||||
- No seed data is masquerading as user data
|
||||
|
||||
#### 4. API Response Verification
|
||||
|
||||
For API endpoints used by this feature:
|
||||
|
||||
- Call the endpoint directly
|
||||
- Verify response contains actual database data
|
||||
- Empty database = empty response (not pre-populated mock data)
|
||||
1. **Search code:** `grep -r "mockData\|fakeData\|TODO\|STUB" --include="*.ts" --include="*.tsx"`
|
||||
2. **Runtime test:** Create unique data (e.g., "TEST_12345") → verify in UI → delete → verify gone
|
||||
3. **Check database:** All displayed data must come from real DB queries
|
||||
4. If unexplained data appears, it's mock data - fix before marking passing.
|
||||
|
||||
### STEP 6: UPDATE FEATURE STATUS (CAREFULLY!)
|
||||
|
||||
@@ -273,51 +237,11 @@ Before context fills up:
|
||||
|
||||
---
|
||||
|
||||
## TESTING REQUIREMENTS
|
||||
## BROWSER AUTOMATION
|
||||
|
||||
**ALL testing must use browser automation tools.**
|
||||
Use Playwright MCP tools (`browser_*`) for UI verification. Key tools: `navigate`, `click`, `type`, `fill_form`, `take_screenshot`, `console_messages`, `network_requests`. All tools have auto-wait built in.
|
||||
|
||||
Available tools:
|
||||
|
||||
**Navigation & Screenshots:**
|
||||
|
||||
- browser_navigate - Navigate to a URL
|
||||
- browser_navigate_back - Go back to previous page
|
||||
- browser_take_screenshot - Capture screenshot (use for visual verification)
|
||||
- browser_snapshot - Get accessibility tree snapshot (structured page data)
|
||||
|
||||
**Element Interaction:**
|
||||
|
||||
- browser_click - Click elements (has built-in auto-wait)
|
||||
- browser_type - Type text into editable elements
|
||||
- browser_fill_form - Fill multiple form fields at once
|
||||
- browser_select_option - Select dropdown options
|
||||
- browser_hover - Hover over elements
|
||||
- browser_drag - Drag and drop between elements
|
||||
- browser_press_key - Press keyboard keys
|
||||
|
||||
**Debugging & Monitoring:**
|
||||
|
||||
- browser_console_messages - Get browser console output (check for errors)
|
||||
- browser_network_requests - Monitor API calls and responses
|
||||
- browser_evaluate - Execute JavaScript (USE SPARINGLY - debugging only, NOT for bypassing UI)
|
||||
|
||||
**Browser Management:**
|
||||
|
||||
- browser_close - Close the browser
|
||||
- browser_resize - Resize browser window (use to test mobile: 375x667, tablet: 768x1024, desktop: 1280x720)
|
||||
- browser_tabs - Manage browser tabs
|
||||
- browser_wait_for - Wait for text/element/time
|
||||
- browser_handle_dialog - Handle alert/confirm dialogs
|
||||
- browser_file_upload - Upload files
|
||||
|
||||
**Key Benefits:**
|
||||
|
||||
- All interaction tools have **built-in auto-wait** - no manual timeouts needed
|
||||
- Use `browser_console_messages` to detect JavaScript errors
|
||||
- Use `browser_network_requests` to verify API calls succeed
|
||||
|
||||
Test like a human user with mouse and keyboard. Don't take shortcuts by using JavaScript evaluation.
|
||||
Test like a human user with mouse and keyboard. Use `browser_console_messages` to detect errors. Don't bypass UI with JavaScript evaluation.
|
||||
|
||||
---
|
||||
|
||||
@@ -381,26 +305,7 @@ This allows you to fully test email-dependent flows without needing external ema
|
||||
|
||||
---
|
||||
|
||||
## IMPORTANT REMINDERS
|
||||
|
||||
**Your Goal:** Production-quality application with all tests passing
|
||||
|
||||
**This Session's Goal:** Complete at least one feature perfectly
|
||||
|
||||
**Priority:** Fix broken tests before implementing new features
|
||||
|
||||
**Quality Bar:**
|
||||
|
||||
- Zero console errors
|
||||
- Polished UI matching the design specified in app_spec.txt
|
||||
- All features work end-to-end through the UI
|
||||
- Fast, responsive, professional
|
||||
- **NO MOCK DATA - all data from real database**
|
||||
- **Security enforced - unauthorized access blocked**
|
||||
- **All navigation works - no 404s or broken links**
|
||||
|
||||
**You have unlimited time.** Take as long as needed to get it right. The most important thing is that you
|
||||
leave the code base in a clean state before terminating the session (Step 9).
|
||||
**Remember:** One feature per session. Zero console errors. All data from real database. Leave codebase clean before ending session.
|
||||
|
||||
---
|
||||
|
||||
|
||||
@@ -26,82 +26,11 @@ which is the single source of truth for what needs to be built.
|
||||
|
||||
**Creating Features:**
|
||||
|
||||
Use the feature_create_bulk tool to add all features at once. Note: You MUST include `depends_on_indices`
|
||||
to specify dependencies. Features with no dependencies can run first and enable parallel execution.
|
||||
|
||||
```
|
||||
Use the feature_create_bulk tool with features=[
|
||||
{
|
||||
"category": "functional",
|
||||
"name": "App loads without errors",
|
||||
"description": "Application starts and renders homepage",
|
||||
"steps": [
|
||||
"Step 1: Navigate to homepage",
|
||||
"Step 2: Verify no console errors",
|
||||
"Step 3: Verify main content renders"
|
||||
]
|
||||
// No depends_on_indices = FOUNDATION feature (runs first)
|
||||
},
|
||||
{
|
||||
"category": "functional",
|
||||
"name": "User can create an account",
|
||||
"description": "Basic user registration functionality",
|
||||
"steps": [
|
||||
"Step 1: Navigate to registration page",
|
||||
"Step 2: Fill in required fields",
|
||||
"Step 3: Submit form and verify account created"
|
||||
],
|
||||
"depends_on_indices": [0] // Depends on app loading
|
||||
},
|
||||
{
|
||||
"category": "functional",
|
||||
"name": "User can log in",
|
||||
"description": "Authentication with existing credentials",
|
||||
"steps": [
|
||||
"Step 1: Navigate to login page",
|
||||
"Step 2: Enter credentials",
|
||||
"Step 3: Verify successful login and redirect"
|
||||
],
|
||||
"depends_on_indices": [0, 1] // Depends on app loading AND registration
|
||||
},
|
||||
{
|
||||
"category": "functional",
|
||||
"name": "User can view dashboard",
|
||||
"description": "Protected dashboard requires authentication",
|
||||
"steps": [
|
||||
"Step 1: Log in as user",
|
||||
"Step 2: Navigate to dashboard",
|
||||
"Step 3: Verify personalized content displays"
|
||||
],
|
||||
"depends_on_indices": [2] // Depends on login only
|
||||
},
|
||||
{
|
||||
"category": "functional",
|
||||
"name": "User can update profile",
|
||||
"description": "User can modify their profile information",
|
||||
"steps": [
|
||||
"Step 1: Log in as user",
|
||||
"Step 2: Navigate to profile settings",
|
||||
"Step 3: Update and save profile"
|
||||
],
|
||||
"depends_on_indices": [2] // ALSO depends on login (WIDE GRAPH - can run parallel with dashboard!)
|
||||
}
|
||||
]
|
||||
```
|
||||
Use the feature_create_bulk tool to add all features at once. You can create features in batches if there are many (e.g., 50 at a time).
|
||||
|
||||
**Notes:**
|
||||
- IDs and priorities are assigned automatically based on order
|
||||
- All features start with `passes: false` by default
|
||||
- You can create features in batches if there are many (e.g., 50 at a time)
|
||||
- **CRITICAL:** Use `depends_on_indices` to specify dependencies (see FEATURE DEPENDENCIES section below)
|
||||
|
||||
**DEPENDENCY REQUIREMENT:**
|
||||
You MUST specify dependencies using `depends_on_indices` for features that logically depend on others.
|
||||
- Features 0-9 should have NO dependencies (foundation/setup features)
|
||||
- Features 10+ MUST have at least some dependencies where logical
|
||||
- Create WIDE dependency graphs, not linear chains:
|
||||
- BAD: A -> B -> C -> D -> E (linear chain, only 1 feature can run at a time)
|
||||
- GOOD: A -> B, A -> C, A -> D, B -> E, C -> E (wide graph, multiple features can run in parallel)
|
||||
|
||||
**Requirements for features:**
|
||||
|
||||
@@ -114,7 +43,6 @@ You MUST specify dependencies using `depends_on_indices` for features that logic
|
||||
- Mix of narrow tests (2-5 steps) and comprehensive tests (10+ steps)
|
||||
- At least 25 tests MUST have 10+ steps each (more for complex apps)
|
||||
- Order features by priority: fundamental features first (the API assigns priority based on order)
|
||||
- All features start with `passes: false` automatically
|
||||
- Cover every feature in the spec exhaustively
|
||||
- **MUST include tests from ALL 20 mandatory categories below**
|
||||
|
||||
@@ -122,125 +50,68 @@ You MUST specify dependencies using `depends_on_indices` for features that logic
|
||||
|
||||
## FEATURE DEPENDENCIES (MANDATORY)
|
||||
|
||||
**THIS SECTION IS MANDATORY. You MUST specify dependencies for features.**
|
||||
Dependencies enable **parallel execution** of independent features. When specified correctly, multiple agents can work on unrelated features simultaneously, dramatically speeding up development.
|
||||
|
||||
Dependencies enable **parallel execution** of independent features. When you specify dependencies correctly, multiple agents can work on unrelated features simultaneously, dramatically speeding up development.
|
||||
**Why this matters:** Without dependencies, features execute in random order, causing logical issues (e.g., "Edit user" before "Create user") and preventing efficient parallelization.
|
||||
|
||||
**WARNING:** If you do not specify dependencies, ALL features will be ready immediately, which:
|
||||
1. Overwhelms the parallel agents trying to work on unrelated features
|
||||
2. Results in features being implemented in random order
|
||||
3. Causes logical issues (e.g., "Edit user" attempted before "Create user")
|
||||
### Dependency Rules
|
||||
|
||||
You MUST analyze each feature and specify its dependencies using `depends_on_indices`.
|
||||
1. **Use `depends_on_indices`** (0-based array indices) to reference dependencies
|
||||
2. **Can only depend on EARLIER features** (index must be less than current position)
|
||||
3. **No circular dependencies** allowed
|
||||
4. **Maximum 20 dependencies** per feature
|
||||
5. **Foundation features (index 0-9)** should have NO dependencies
|
||||
6. **60% of features after index 10** should have at least one dependency
|
||||
|
||||
### Why Dependencies Matter
|
||||
### Dependency Types
|
||||
|
||||
1. **Parallel Execution**: Features without dependencies can run in parallel
|
||||
2. **Logical Ordering**: Ensures features are built in the right order
|
||||
3. **Blocking Prevention**: An agent won't start a feature until its dependencies pass
|
||||
| Type | Example |
|
||||
|------|---------|
|
||||
| Data | "Edit item" depends on "Create item" |
|
||||
| Auth | "View dashboard" depends on "User can log in" |
|
||||
| Navigation | "Modal close works" depends on "Modal opens" |
|
||||
| UI | "Filter results" depends on "Display results list" |
|
||||
|
||||
### How to Determine Dependencies
|
||||
### Wide Graph Pattern (REQUIRED)
|
||||
|
||||
Ask yourself: "What MUST be working before this feature can be tested?"
|
||||
Create WIDE dependency graphs, not linear chains:
|
||||
- **BAD:** A -> B -> C -> D -> E (linear chain, only 1 feature runs at a time)
|
||||
- **GOOD:** A -> B, A -> C, A -> D, B -> E, C -> E (wide graph, parallel execution)
|
||||
|
||||
| Dependency Type | Example |
|
||||
|-----------------|---------|
|
||||
| **Data dependencies** | "Edit item" depends on "Create item" |
|
||||
| **Auth dependencies** | "View dashboard" depends on "User can log in" |
|
||||
| **Navigation dependencies** | "Modal close works" depends on "Modal opens" |
|
||||
| **UI dependencies** | "Filter results" depends on "Display results list" |
|
||||
| **API dependencies** | "Fetch user data" depends on "API authentication" |
|
||||
|
||||
### Using `depends_on_indices`
|
||||
|
||||
Since feature IDs aren't assigned until after creation, use **array indices** (0-based) to reference dependencies:
|
||||
|
||||
```json
|
||||
{
|
||||
"features": [
|
||||
{ "name": "Create account", ... }, // Index 0
|
||||
{ "name": "Login", "depends_on_indices": [0] }, // Index 1, depends on 0
|
||||
{ "name": "View profile", "depends_on_indices": [1] }, // Index 2, depends on 1
|
||||
{ "name": "Edit profile", "depends_on_indices": [2] } // Index 3, depends on 2
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### Rules for Dependencies
|
||||
|
||||
1. **Can only depend on EARLIER features**: Index must be less than current feature's position
|
||||
2. **No circular dependencies**: A cannot depend on B if B depends on A
|
||||
3. **Maximum 20 dependencies** per feature
|
||||
4. **Foundation features have NO dependencies**: First features in each category typically have none
|
||||
5. **Don't over-depend**: Only add dependencies that are truly required for testing
|
||||
|
||||
### Best Practices
|
||||
|
||||
1. **Start with foundation features** (index 0-10): Core setup, basic navigation, authentication
|
||||
2. **Group related features together**: Keep CRUD operations adjacent
|
||||
3. **Chain complex flows**: Registration -> Login -> Dashboard -> Settings
|
||||
4. **Keep dependencies shallow**: Prefer 1-2 dependencies over deep chains
|
||||
5. **Skip dependencies for independent features**: Visual tests often have no dependencies
|
||||
|
||||
### Minimum Dependency Coverage
|
||||
|
||||
**REQUIREMENT:** At least 60% of your features (after index 10) should have at least one dependency.
|
||||
|
||||
Target structure for a 150-feature project:
|
||||
- Features 0-9: Foundation (0 dependencies) - App loads, basic setup
|
||||
- Features 10-149: At least 84 should have dependencies (60% of 140)
|
||||
|
||||
This ensures:
|
||||
- A good mix of parallelizable features (foundation)
|
||||
- Logical ordering for dependent features
|
||||
|
||||
### Example: Todo App Feature Chain (Wide Graph Pattern)
|
||||
|
||||
This example shows the CORRECT wide graph pattern where multiple features share the same dependency,
|
||||
enabling parallel execution:
|
||||
### Complete Example
|
||||
|
||||
```json
|
||||
[
|
||||
// FOUNDATION TIER (indices 0-2, no dependencies)
|
||||
// These run first and enable everything else
|
||||
// FOUNDATION TIER (indices 0-2, no dependencies) - run first
|
||||
{ "name": "App loads without errors", "category": "functional" },
|
||||
{ "name": "Navigation bar displays", "category": "style" },
|
||||
{ "name": "Homepage renders correctly", "category": "functional" },
|
||||
|
||||
// AUTH TIER (indices 3-5, depend on foundation)
|
||||
// These can all run in parallel once foundation passes
|
||||
// AUTH TIER (indices 3-5, depend on foundation) - run in parallel
|
||||
{ "name": "User can register", "depends_on_indices": [0] },
|
||||
{ "name": "User can login", "depends_on_indices": [0, 3] },
|
||||
{ "name": "User can logout", "depends_on_indices": [4] },
|
||||
|
||||
// CORE CRUD TIER (indices 6-9, depend on auth)
|
||||
// WIDE GRAPH: All 4 of these depend on login (index 4)
|
||||
// This means all 4 can start as soon as login passes!
|
||||
// CORE CRUD TIER (indices 6-9) - WIDE GRAPH: all 4 depend on login
|
||||
// All 4 start as soon as login passes!
|
||||
{ "name": "User can create todo", "depends_on_indices": [4] },
|
||||
{ "name": "User can view todos", "depends_on_indices": [4] },
|
||||
{ "name": "User can edit todo", "depends_on_indices": [4, 6] },
|
||||
{ "name": "User can delete todo", "depends_on_indices": [4, 6] },
|
||||
|
||||
// ADVANCED TIER (indices 10-11, depend on CRUD)
|
||||
// Note: filter and search both depend on view (7), not on each other
|
||||
// ADVANCED TIER (indices 10-11) - both depend on view, not each other
|
||||
{ "name": "User can filter todos", "depends_on_indices": [7] },
|
||||
{ "name": "User can search todos", "depends_on_indices": [7] }
|
||||
]
|
||||
```
|
||||
|
||||
**Parallelism analysis of this example:**
|
||||
- Foundation tier: 3 features can run in parallel
|
||||
- Auth tier: 3 features wait for foundation, then can run (mostly parallel)
|
||||
- CRUD tier: 4 features can start once login passes (all 4 in parallel!)
|
||||
- Advanced tier: 2 features can run once view passes (both in parallel)
|
||||
|
||||
**Result:** With 3 parallel agents, this 12-feature project completes in ~5-6 cycles instead of 12 sequential cycles.
|
||||
|
||||
---
|
||||
|
||||
## MANDATORY TEST CATEGORIES
|
||||
|
||||
The feature_list.json **MUST** include tests from ALL of these categories. The minimum counts scale by complexity tier.
|
||||
The feature_list.json **MUST** include tests from ALL 20 categories. Minimum counts scale by complexity tier.
|
||||
|
||||
### Category Distribution by Complexity Tier
|
||||
|
||||
@@ -270,331 +141,47 @@ The feature_list.json **MUST** include tests from ALL of these categories. The m
|
||||
|
||||
---
|
||||
|
||||
### A. Security & Access Control Tests
|
||||
### Category Descriptions
|
||||
|
||||
Test that unauthorized access is blocked and permissions are enforced.
|
||||
**A. Security & Access Control** - Test unauthorized access blocking, permission enforcement, session management, role-based access, and data isolation between users.
|
||||
|
||||
**Required tests (examples):**
|
||||
**B. Navigation Integrity** - Test all buttons, links, menus, breadcrumbs, deep links, back button behavior, 404 handling, and post-login/logout redirects.
|
||||
|
||||
- Unauthenticated user cannot access protected routes (redirect to login)
|
||||
- Regular user cannot access admin-only pages (403 or redirect)
|
||||
- API endpoints return 401 for unauthenticated requests
|
||||
- API endpoints return 403 for unauthorized role access
|
||||
- Session expires after configured inactivity period
|
||||
- Logout clears all session data and tokens
|
||||
- Invalid/expired tokens are rejected
|
||||
- Each role can ONLY see their permitted menu items
|
||||
- Direct URL access to unauthorized pages is blocked
|
||||
- Sensitive operations require confirmation or re-authentication
|
||||
- Cannot access another user's data by manipulating IDs in URL
|
||||
- Password reset flow works securely
|
||||
- Failed login attempts are handled (no information leakage)
|
||||
**C. Real Data Verification** - Test data persistence across refreshes and sessions, CRUD operations with unique test data, related record updates, and empty states.
|
||||
|
||||
### B. Navigation Integrity Tests
|
||||
**D. Workflow Completeness** - Test end-to-end CRUD for every entity, state transitions, multi-step wizards, bulk operations, and form submission feedback.
|
||||
|
||||
Test that every button, link, and menu item goes to the correct place.
|
||||
**E. Error Handling** - Test network failures, invalid input, API errors, 404/500 responses, loading states, timeouts, and user-friendly error messages.
|
||||
|
||||
**Required tests (examples):**
|
||||
**F. UI-Backend Integration** - Test request/response format matching, database-driven dropdowns, cascading updates, filters/sorts with real data, and API error display.
|
||||
|
||||
- Every button in sidebar navigates to correct page
|
||||
- Every menu item links to existing route
|
||||
- All CRUD action buttons (Edit, Delete, View) go to correct URLs with correct IDs
|
||||
- Back button works correctly after each navigation
|
||||
- Deep linking works (direct URL access to any page with auth)
|
||||
- Breadcrumbs reflect actual navigation path
|
||||
- 404 page shown for non-existent routes (not crash)
|
||||
- After login, user redirected to intended destination (or dashboard)
|
||||
- After logout, user redirected to login page
|
||||
- Pagination links work and preserve current filters
|
||||
- Tab navigation within pages works correctly
|
||||
- Modal close buttons return to previous state
|
||||
- Cancel buttons on forms return to previous page
|
||||
**G. State & Persistence** - Test refresh mid-form, session recovery, multi-tab behavior, back-button after submit, and unsaved changes warnings.
|
||||
|
||||
### C. Real Data Verification Tests
|
||||
**H. URL & Direct Access** - Test URL manipulation security, direct route access by role, malformed parameters, deep links to deleted entities, and shareable filter URLs.
|
||||
|
||||
Test that data is real (not mocked) and persists correctly.
|
||||
**I. Double-Action & Idempotency** - Test double-click submit, rapid delete clicks, back-and-resubmit, button disabled during processing, and concurrent submissions.
|
||||
|
||||
**Required tests (examples):**
|
||||
**J. Data Cleanup & Cascade** - Test parent deletion effects on children, removal from search/lists/dropdowns, statistics updates, and soft vs hard delete behavior.
|
||||
|
||||
- Create a record via UI with unique content → verify it appears in list
|
||||
- Create a record → refresh page → record still exists
|
||||
- Create a record → log out → log in → record still exists
|
||||
- Edit a record → verify changes persist after refresh
|
||||
- Delete a record → verify it's gone from list AND database
|
||||
- Delete a record → verify it's gone from related dropdowns
|
||||
- Filter/search → results match actual data created in test
|
||||
- Dashboard statistics reflect real record counts (create 3 items, count shows 3)
|
||||
- Reports show real aggregated data
|
||||
- Export functionality exports actual data you created
|
||||
- Related records update when parent changes
|
||||
- Timestamps are real and accurate (created_at, updated_at)
|
||||
- Data created by User A is not visible to User B (unless shared)
|
||||
- Empty state shows correctly when no data exists
|
||||
**K. Default & Reset** - Test form defaults, sensible date picker defaults, dropdown placeholders, reset button behavior, and filter/pagination reset on context change.
|
||||
|
||||
### D. Workflow Completeness Tests
|
||||
**L. Search & Filter Edge Cases** - Test empty search, whitespace-only, special characters, quotes, long strings, zero-result combinations, and filter persistence.
|
||||
|
||||
Test that every workflow can be completed end-to-end through the UI.
|
||||
**M. Form Validation** - Test required fields, email/password/numeric/date formats, min/max constraints, uniqueness, specific error messages, and server-side validation.
|
||||
|
||||
**Required tests (examples):**
|
||||
**N. Feedback & Notification** - Test success/error feedback for all actions, loading spinners, disabled buttons during submit, progress indicators, and toast behavior.
|
||||
|
||||
- Every entity has working Create operation via UI form
|
||||
- Every entity has working Read/View operation (detail page loads)
|
||||
- Every entity has working Update operation (edit form saves)
|
||||
- Every entity has working Delete operation (with confirmation dialog)
|
||||
- Every status/state has a UI mechanism to transition to next state
|
||||
- Multi-step processes (wizards) can be completed end-to-end
|
||||
- Bulk operations (select all, delete selected) work
|
||||
- Cancel/Undo operations work where applicable
|
||||
- Required fields prevent submission when empty
|
||||
- Form validation shows errors before submission
|
||||
- Successful submission shows success feedback
|
||||
- Backend workflow (e.g., user→customer conversion) has UI trigger
|
||||
**O. Responsive & Layout** - Test layouts at desktop (1920px), tablet (768px), and mobile (375px), no horizontal scroll, touch targets, modal fit, and text overflow.
|
||||
|
||||
### E. Error Handling Tests
|
||||
**P. Accessibility** - Test tab navigation, focus rings, screen reader compatibility, ARIA labels, color contrast, labels on form fields, and error announcements.
|
||||
|
||||
Test graceful handling of errors and edge cases.
|
||||
**Q. Temporal & Timezone** - Test timezone-aware display, accurate timestamps, date picker constraints, overdue detection, and date sorting across boundaries.
|
||||
|
||||
**Required tests (examples):**
|
||||
**R. Concurrency & Race Conditions** - Test concurrent edits, viewing deleted records, pagination during updates, rapid navigation, and late API response handling.
|
||||
|
||||
- Network failure shows user-friendly error message, not crash
|
||||
- Invalid form input shows field-level errors
|
||||
- API errors display meaningful messages to user
|
||||
- 404 responses handled gracefully (show not found page)
|
||||
- 500 responses don't expose stack traces or technical details
|
||||
- Empty search results show "no results found" message
|
||||
- Loading states shown during all async operations
|
||||
- Timeout doesn't hang the UI indefinitely
|
||||
- Submitting form with server error keeps user data in form
|
||||
- File upload errors (too large, wrong type) show clear message
|
||||
- Duplicate entry errors (e.g., email already exists) are clear
|
||||
**S. Export/Import** - Test full/filtered export, import with valid/duplicate/malformed files, and round-trip data integrity.
|
||||
|
||||
### F. UI-Backend Integration Tests
|
||||
|
||||
Test that frontend and backend communicate correctly.
|
||||
|
||||
**Required tests (examples):**
|
||||
|
||||
- Frontend request format matches what backend expects
|
||||
- Backend response format matches what frontend parses
|
||||
- All dropdown options come from real database data (not hardcoded)
|
||||
- Related entity selectors (e.g., "choose category") populated from DB
|
||||
- Changes in one area reflect in related areas after refresh
|
||||
- Deleting parent handles children correctly (cascade or block)
|
||||
- Filters work with actual data attributes from database
|
||||
- Sort functionality sorts real data correctly
|
||||
- Pagination returns correct page of real data
|
||||
- API error responses are parsed and displayed correctly
|
||||
- Loading spinners appear during API calls
|
||||
- Optimistic updates (if used) rollback on failure
|
||||
|
||||
### G. State & Persistence Tests
|
||||
|
||||
Test that state is maintained correctly across sessions and tabs.
|
||||
|
||||
**Required tests (examples):**
|
||||
|
||||
- Refresh page mid-form - appropriate behavior (data kept or cleared)
|
||||
- Close browser, reopen - session state handled correctly
|
||||
- Same user in two browser tabs - changes sync or handled gracefully
|
||||
- Browser back after form submit - no duplicate submission
|
||||
- Bookmark a page, return later - works (with auth check)
|
||||
- LocalStorage/cookies cleared - graceful re-authentication
|
||||
- Unsaved changes warning when navigating away from dirty form
|
||||
|
||||
### H. URL & Direct Access Tests
|
||||
|
||||
Test direct URL access and URL manipulation security.
|
||||
|
||||
**Required tests (examples):**
|
||||
|
||||
- Change entity ID in URL - cannot access others' data
|
||||
- Access /admin directly as regular user - blocked
|
||||
- Malformed URL parameters - handled gracefully (no crash)
|
||||
- Very long URL - handled correctly
|
||||
- URL with SQL injection attempt - rejected/sanitized
|
||||
- Deep link to deleted entity - shows "not found", not crash
|
||||
- Query parameters for filters are reflected in UI
|
||||
- Sharing a URL with filters preserves those filters
|
||||
|
||||
### I. Double-Action & Idempotency Tests
|
||||
|
||||
Test that rapid or duplicate actions don't cause issues.
|
||||
|
||||
**Required tests (examples):**
|
||||
|
||||
- Double-click submit button - only one record created
|
||||
- Rapid multiple clicks on delete - only one deletion occurs
|
||||
- Submit form, hit back, submit again - appropriate behavior
|
||||
- Multiple simultaneous API calls - server handles correctly
|
||||
- Refresh during save operation - data not corrupted
|
||||
- Click same navigation link twice quickly - no issues
|
||||
- Submit button disabled during processing
|
||||
|
||||
### J. Data Cleanup & Cascade Tests
|
||||
|
||||
Test that deleting data cleans up properly everywhere.
|
||||
|
||||
**Required tests (examples):**
|
||||
|
||||
- Delete parent entity - children removed from all views
|
||||
- Delete item - removed from search results immediately
|
||||
- Delete item - statistics/counts updated immediately
|
||||
- Delete item - related dropdowns updated
|
||||
- Delete item - cached views refreshed
|
||||
- Soft delete (if applicable) - item hidden but recoverable
|
||||
- Hard delete - item completely removed from database
|
||||
|
||||
### K. Default & Reset Tests
|
||||
|
||||
Test that defaults and reset functionality work correctly.
|
||||
|
||||
**Required tests (examples):**
|
||||
|
||||
- New form shows correct default values
|
||||
- Date pickers default to sensible dates (today, not 1970)
|
||||
- Dropdowns default to correct option (or placeholder)
|
||||
- Reset button clears to defaults, not just empty
|
||||
- Clear filters button resets all filters to default
|
||||
- Pagination resets to page 1 when filters change
|
||||
- Sorting resets when changing views
|
||||
|
||||
### L. Search & Filter Edge Cases
|
||||
|
||||
Test search and filter functionality thoroughly.
|
||||
|
||||
**Required tests (examples):**
|
||||
|
||||
- Empty search shows all results (or appropriate message)
|
||||
- Search with only spaces - handled correctly
|
||||
- Search with special characters (!@#$%^&\*) - no errors
|
||||
- Search with quotes - handled correctly
|
||||
- Search with very long string - handled correctly
|
||||
- Filter combinations that return zero results - shows message
|
||||
- Filter + search + sort together - all work correctly
|
||||
- Filter persists after viewing detail and returning to list
|
||||
- Clear individual filter - works correctly
|
||||
- Search is case-insensitive (or clearly case-sensitive)
|
||||
|
||||
### M. Form Validation Tests
|
||||
|
||||
Test all form validation rules exhaustively.
|
||||
|
||||
**Required tests (examples):**
|
||||
|
||||
- Required field empty - shows error, blocks submit
|
||||
- Email field with invalid email formats - shows error
|
||||
- Password field - enforces complexity requirements
|
||||
- Numeric field with letters - rejected
|
||||
- Date field with invalid date - rejected
|
||||
- Min/max length enforced on text fields
|
||||
- Min/max values enforced on numeric fields
|
||||
- Duplicate unique values rejected (e.g., duplicate email)
|
||||
- Error messages are specific (not just "invalid")
|
||||
- Errors clear when user fixes the issue
|
||||
- Server-side validation matches client-side
|
||||
- Whitespace-only input rejected for required fields
|
||||
|
||||
### N. Feedback & Notification Tests
|
||||
|
||||
Test that users get appropriate feedback for all actions.
|
||||
|
||||
**Required tests (examples):**
|
||||
|
||||
- Every successful save/create shows success feedback
|
||||
- Every failed action shows error feedback
|
||||
- Loading spinner during every async operation
|
||||
- Disabled state on buttons during form submission
|
||||
- Progress indicator for long operations (file upload)
|
||||
- Toast/notification disappears after appropriate time
|
||||
- Multiple notifications don't overlap incorrectly
|
||||
- Success messages are specific (not just "Success")
|
||||
|
||||
### O. Responsive & Layout Tests
|
||||
|
||||
Test that the UI works on different screen sizes.
|
||||
|
||||
**Required tests (examples):**
|
||||
|
||||
- Desktop layout correct at 1920px width
|
||||
- Tablet layout correct at 768px width
|
||||
- Mobile layout correct at 375px width
|
||||
- No horizontal scroll on any standard viewport
|
||||
- Touch targets large enough on mobile (44px min)
|
||||
- Modals fit within viewport on mobile
|
||||
- Long text truncates or wraps correctly (no overflow)
|
||||
- Tables scroll horizontally if needed on mobile
|
||||
- Navigation collapses appropriately on mobile
|
||||
|
||||
### P. Accessibility Tests
|
||||
|
||||
Test basic accessibility compliance.
|
||||
|
||||
**Required tests (examples):**
|
||||
|
||||
- Tab navigation works through all interactive elements
|
||||
- Focus ring visible on all focused elements
|
||||
- Screen reader can navigate main content areas
|
||||
- ARIA labels on icon-only buttons
|
||||
- Color contrast meets WCAG AA (4.5:1 for text)
|
||||
- No information conveyed by color alone
|
||||
- Form fields have associated labels
|
||||
- Error messages announced to screen readers
|
||||
- Skip link to main content (if applicable)
|
||||
- Images have alt text
|
||||
|
||||
### Q. Temporal & Timezone Tests
|
||||
|
||||
Test date/time handling.
|
||||
|
||||
**Required tests (examples):**
|
||||
|
||||
- Dates display in user's local timezone
|
||||
- Created/updated timestamps accurate and formatted correctly
|
||||
- Date picker allows only valid date ranges
|
||||
- Overdue items identified correctly (timezone-aware)
|
||||
- "Today", "This Week" filters work correctly for user's timezone
|
||||
- Recurring items generate at correct times (if applicable)
|
||||
- Date sorting works correctly across months/years
|
||||
|
||||
### R. Concurrency & Race Condition Tests
|
||||
|
||||
Test multi-user and race condition scenarios.
|
||||
|
||||
**Required tests (examples):**
|
||||
|
||||
- Two users edit same record - last save wins or conflict shown
|
||||
- Record deleted while another user viewing - graceful handling
|
||||
- List updates while user on page 2 - pagination still works
|
||||
- Rapid navigation between pages - no stale data displayed
|
||||
- API response arrives after user navigated away - no crash
|
||||
- Concurrent form submissions from same user handled
|
||||
|
||||
### S. Export/Import Tests (if applicable)
|
||||
|
||||
Test data export and import functionality.
|
||||
|
||||
**Required tests (examples):**
|
||||
|
||||
- Export all data - file contains all records
|
||||
- Export filtered data - only filtered records included
|
||||
- Import valid file - all records created correctly
|
||||
- Import duplicate data - handled correctly (skip/update/error)
|
||||
- Import malformed file - error message, no partial import
|
||||
- Export then import - data integrity preserved exactly
|
||||
|
||||
### T. Performance Tests
|
||||
|
||||
Test basic performance requirements.
|
||||
|
||||
**Required tests (examples):**
|
||||
|
||||
- Page loads in <3s with 100 records
|
||||
- Page loads in <5s with 1000 records
|
||||
- Search responds in <1s
|
||||
- Infinite scroll doesn't degrade with many items
|
||||
- Large file upload shows progress
|
||||
- Memory doesn't leak on long sessions
|
||||
- No console errors during normal operation
|
||||
**T. Performance** - Test page load with 100/1000 records, search response time, infinite scroll stability, upload progress, and memory/console errors.
|
||||
|
||||
---
|
||||
|
||||
|
||||
Reference in New Issue
Block a user