summaryrefslogtreecommitdiff
path: root/apps/web/src/__tests__/README.md
blob: 02173edf0ef98c8d96ad84f2413114a4ae3e1bd6 (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
# Test Suite: Excessive Project Creation Bug

This test suite provides comprehensive testing for the excessive project creation bug reported in [GitHub Issue #182](https://github.com/OpenCut-app/OpenCut/issues/182).

## Overview

The bug occurs when users navigate to invalid project IDs (e.g., via browser back button or direct URL access), causing the editor page to create multiple "Untitled Project" entries due to race conditions in React useEffect dependencies.

## Test Files

### 1. `excessive-projects.test.ts`
**Unit tests** that test the core logic extracted from the editor page component.

**Test Coverage:**
- ✅ Single invalid project ID handling
- ✅ Race condition scenarios
- ✅ React Strict Mode double execution
- ✅ Error handling for different failure types
- ✅ Stress testing (simulating 885 projects)
- ✅ Bug validation and reproduction steps

### 2. `editor-page-integration.test.tsx`
**Integration tests** that test the actual React component behavior.

**Test Coverage:**
- ✅ Component rendering with invalid project IDs
- ✅ Duplicate project prevention
- ✅ Rapid re-render handling
- ✅ Multiple invalid ID scenarios

### 3. `setup.ts`
Test environment setup with mocks for:
- Next.js router
- IndexedDB
- OPFS (Origin Private File System)
- Console output suppression

## Running Tests

### Command Line (like `cargo test`)

```bash
# Run all tests
bun run test

# Run only excessive projects tests
bun run test:excessive-projects

# Run with coverage
bun run test:coverage

# Run with UI
bun run test:ui

# Run specific test file
bun run test src/__tests__/excessive-projects.test.ts

# Run with verbose output
VITEST_VERBOSE=1 bun run test
```

### Using the CLI Test Runner

```bash
# Run comprehensive test suite
bun run scripts/test-excessive-projects.ts

# Or use the npm script
bun run test:excessive-projects
```

## Test Results Interpretation

### Expected Behavior (Bug Reproduction)
- ✅ **Single invalid ID** → Creates exactly 1 project
- ✅ **Multiple invalid IDs** → Creates 1 project per unique ID
- ✅ **Race conditions** → Prevented by handledProjectIds mechanism
- ✅ **React Strict Mode** → No duplicate creation despite double execution

### Bug Indicators
- ❌ **Multiple projects from single invalid ID** → Race condition bug
- ❌ **Exponential project growth** → handledProjectIds mechanism failing
- ❌ **Projects created on every navigation** → Error handling too broad

## Continuous Integration

Tests are automatically run in CI/CD pipeline:
- GitHub Actions workflow: `.github/workflows/bun-ci.yml`
- Runs on: Ubuntu, Windows, macOS
- Triggers: Push to main, Pull requests

## Test Environment

**Framework:** Vitest + Testing Library
**Mocking:** Vi (Vitest's built-in mocking)
**Coverage:** V8 provider
**Environment:** jsdom (simulates browser environment)

## Debugging Tests

### Enable Verbose Logging
```bash
VITEST_VERBOSE=1 bun run test
```

### Run Single Test
```bash
bun run test -t "should create exactly one project"
```

### Debug Mode
```bash
bun run test --inspect-brk
```

## Adding New Tests

1. **Unit Tests**: Add to `excessive-projects.test.ts`
   - Test core logic and edge cases
   - Mock external dependencies

2. **Integration Tests**: Add to `editor-page-integration.test.tsx`
   - Test component behavior
   - Test React lifecycle interactions

3. **Follow Naming Convention**:
   ```typescript
   describe('Feature Area', () => {
     it('should do something specific', async () => {
       // Test implementation
     })
   })
   ```

## Performance Testing

The test suite includes performance measurements:
- Project creation timing
- Memory usage tracking
- Stress test scenarios

Example output:
```
Created 100 projects in 1250ms
Average: 12.5ms per project
```

## Bug Fix Validation

After implementing the fix:

1. **Run full test suite**: `bun run test`
2. **Verify no regressions**: All existing tests should pass
3. **Validate fix effectiveness**: Bug reproduction tests should show controlled behavior
4. **Performance check**: Ensure no performance degradation

## Contributing

When adding tests:
- ✅ Include both positive and negative test cases
- ✅ Test edge cases and error conditions
- ✅ Add performance considerations for stress tests
- ✅ Update this README if adding new test categories
- ✅ Ensure tests are deterministic and not flaky