Nicola Zangrandi
c1873066eb
- Add tests for note creation, editing, and linking - Configure Playwright for cross-browser testing - Ensure reliable test execution with proper waits - Use single worker due to shared database state
80 lines
No EOL
2.1 KiB
Text
80 lines
No EOL
2.1 KiB
Text
---
|
|
description: Frontend testing standards using Playwright for end-to-end testing
|
|
globs: **/*.{ts,js,svelte}
|
|
---
|
|
<rule>
|
|
When working on frontend features:
|
|
|
|
1. Test Coverage Requirements:
|
|
- All new features must have e2e tests
|
|
- Critical user flows must be tested
|
|
- Test both success and error paths
|
|
- Test responsive behavior for mobile/desktop
|
|
- Test accessibility where applicable
|
|
|
|
2. Test Structure:
|
|
- Use descriptive test names
|
|
- Group related tests in describe blocks
|
|
- Use beforeEach for common setup
|
|
- Clean up test data after each test
|
|
- Keep tests focused and atomic
|
|
|
|
3. Testing Best Practices:
|
|
- Test user interactions, not implementation
|
|
- Use data-testid for test-specific selectors
|
|
- Test across different viewport sizes
|
|
- Test across multiple browsers
|
|
- Verify visual and functional aspects
|
|
|
|
4. Required Test Cases:
|
|
- Navigation flows
|
|
- Form submissions
|
|
- Error handling
|
|
- Loading states
|
|
- Responsive behavior
|
|
- Cross-browser compatibility
|
|
|
|
5. Running Tests:
|
|
- Run tests before committing: `bun test`
|
|
- Debug tests with UI: `bun test:ui`
|
|
- Debug specific test: `bun test:debug`
|
|
- Install browsers: `bun test:install`
|
|
|
|
6. CI Integration:
|
|
- Tests must pass in CI
|
|
- Screenshots on failure
|
|
- HTML test reports
|
|
- Retry failed tests
|
|
- Parallel execution where possible
|
|
|
|
metadata:
|
|
priority: high
|
|
version: 1.0
|
|
</rule>
|
|
|
|
examples:
|
|
- input: |
|
|
# Bad: No tests for new feature
|
|
git commit -m "feat: add note search"
|
|
output: |
|
|
# Good: Feature with tests
|
|
bun test
|
|
git commit -m "feat: add note search with e2e tests
|
|
|
|
Tests added:
|
|
- Search functionality
|
|
- Empty results handling
|
|
- Error states
|
|
- Mobile layout"
|
|
|
|
- input: |
|
|
# Bad: Testing implementation details
|
|
test('internal state is correct', () => {
|
|
expect(component.state.value).toBe(true)
|
|
})
|
|
output: |
|
|
# Good: Testing user interaction
|
|
test('user can toggle feature', async ({ page }) => {
|
|
await page.click('[data-testid=toggle]')
|
|
await expect(page.locator('.status')).toHaveText('Enabled')
|
|
}) |