Testing infrastructure, fix truncating of dataURLs (#26)
* feat: implement comprehensive testing infrastructure - Fix image dataURL truncation bug in security.ts with configurable size limits - Add backend integration tests (22 tests) with Vitest for API validation - Add frontend unit tests (11 tests) for JSON serialization - Implement browser-based E2E tests (8 tests) with Playwright - Create Docker setup for repeatable E2E testing environment - Add GitHub Actions CI workflow for automated testing - Update .gitignore for test artifacts and temporary files Testing Infrastructure: - Backend: Vitest + Supertest for API integration tests - Frontend: Vitest + Testing Library for component tests - E2E: Playwright with Chromium for full browser automation - CI/CD: GitHub Actions with parallel test execution Security Improvements: - Make dataURL size limit configurable (default: 10MB) - Enhanced validation for image dataURLs - Block malicious content (javascript:, script tags) All tests pass: 41 total (22 backend + 11 frontend + 8 E2E) * feat(tests): add comprehensive E2E tests for dashboard workflows and image persistence chore(env): update environment variables for consistent API URL usage fix(api): centralize API request helpers for drawing and collection management style(DrawingCard): enhance accessibility with ARIA attributes and data-testid for testing * cleanup/revise documentation * cleanup/revise documentation * Add end-to-end tests for drawing CRUD, export/import, search/sort, and theme toggle functionalities - Implemented E2E tests for drawing creation, editing, and deletion in `drawing-crud.spec.ts`. - Added tests for export and import features, including JSON and SQLite formats in `export-import.spec.ts`. - Created tests for searching and sorting drawings by name and date in `search-and-sort.spec.ts`. - Developed tests for theme toggle functionality to ensure persistence across sessions in `theme-toggle.spec.ts`. * fix: exclude test files from production build to fix Docker build * feat: implement comprehensive testing infrastructure (#19) * bump version 0.1.7 * feat: implement comprehensive testing infrastructure - Fix image dataURL truncation bug in security.ts with configurable size limits - Add backend integration tests (22 tests) with Vitest for API validation - Add frontend unit tests (11 tests) for JSON serialization - Implement browser-based E2E tests (8 tests) with Playwright - Create Docker setup for repeatable E2E testing environment - Add GitHub Actions CI workflow for automated testing - Update .gitignore for test artifacts and temporary files Testing Infrastructure: - Backend: Vitest + Supertest for API integration tests - Frontend: Vitest + Testing Library for component tests - E2E: Playwright with Chromium for full browser automation - CI/CD: GitHub Actions with parallel test execution Security Improvements: - Make dataURL size limit configurable (default: 10MB) - Enhanced validation for image dataURLs - Block malicious content (javascript:, script tags) All tests pass: 41 total (22 backend + 11 frontend + 8 E2E) * feat(tests): add comprehensive E2E tests for dashboard workflows and image persistence chore(env): update environment variables for consistent API URL usage fix(api): centralize API request helpers for drawing and collection management style(DrawingCard): enhance accessibility with ARIA attributes and data-testid for testing * Add end-to-end tests for drawing CRUD, export/import, search/sort, and theme toggle functionalities - Implemented E2E tests for drawing creation, editing, and deletion in `drawing-crud.spec.ts`. - Added tests for export and import features, including JSON and SQLite formats in `export-import.spec.ts`. - Created tests for searching and sorting drawings by name and date in `search-and-sort.spec.ts`. - Developed tests for theme toggle functionality to ensure persistence across sessions in `theme-toggle.spec.ts`. * Update backend/src/__tests__/testUtils.ts --------- Co-authored-by: Zimeng Xiong <zxzimeng@gmail.com> * version bump 0.1.8 * fix(ci): consolidate E2E server startup to prevent shell isolation issues Background processes started with & in separate GitHub Actions run steps can terminate when those steps complete because each step creates a new shell. This caused the backend and frontend servers to die before the E2E tests could run. Fixed by consolidating server startup and test execution into a single shell step with: - Proper PID tracking for cleanup - Health check loops instead of fixed sleep times - All processes run in the same shell session * fix(ci): use absolute database path for E2E tests * fix(backend): use resolved DATABASE_URL path for export/import endpoints --------- Co-authored-by: Adrian Acala <adrianacala017@gmail.com>
This commit is contained in:
Zimeng Xiong
+132
@@ -0,0 +1,132 @@
|
||||
# ExcaliDash E2E Tests
|
||||
|
||||
Browser-based end-to-end tests for ExcaliDash using Playwright.
|
||||
|
||||
## Prerequisites
|
||||
|
||||
- Node.js 18+
|
||||
- npm
|
||||
- Docker (optional, for containerized testing)
|
||||
|
||||
## Quick Start
|
||||
|
||||
### Local Testing
|
||||
|
||||
```bash
|
||||
# Install dependencies
|
||||
npm install
|
||||
npx playwright install chromium
|
||||
|
||||
# Run tests (will start servers automatically)
|
||||
npm test
|
||||
|
||||
# Run tests with visible browser
|
||||
npm run test:headed
|
||||
|
||||
# Run tests in debug mode
|
||||
npm run test:debug
|
||||
```
|
||||
|
||||
### With Existing Servers
|
||||
|
||||
If you already have the backend and frontend running:
|
||||
|
||||
```bash
|
||||
# Backend at http://localhost:8000
|
||||
# Frontend at http://localhost:5173
|
||||
NO_SERVER=true npm test
|
||||
```
|
||||
|
||||
### Docker Testing
|
||||
|
||||
Run tests in an isolated Docker environment:
|
||||
|
||||
```bash
|
||||
npm run docker:test
|
||||
|
||||
# Or using docker-compose directly
|
||||
docker-compose -f docker-compose.e2e.yml up --build --abort-on-container-exit
|
||||
```
|
||||
|
||||
## Test Suites
|
||||
|
||||
### Image Persistence (Issue #17 Regression)
|
||||
|
||||
Tests for the bug where images wouldn't load fully when reopening files.
|
||||
|
||||
- **should preserve large image data through save/reload cycle** - Core regression test
|
||||
- **should display drawing in editor view** - Browser UI test
|
||||
- **should import .excalidraw file with embedded image** - File import test
|
||||
- **should handle multiple images of varying sizes** - Multi-image test
|
||||
|
||||
### Security Tests
|
||||
|
||||
Tests for malicious content blocking:
|
||||
|
||||
- **should block javascript: URLs in image data** - XSS prevention
|
||||
- **should block script tags in image data** - Script injection prevention
|
||||
|
||||
## Configuration
|
||||
|
||||
Environment variables:
|
||||
|
||||
| Variable | Default | Description |
|
||||
|----------|---------|-------------|
|
||||
| `BASE_URL` | `http://localhost:5173` | Frontend URL |
|
||||
| `API_URL` | `http://localhost:8000` | Backend API URL |
|
||||
| `HEADED` | `false` | Run with visible browser |
|
||||
| `NO_SERVER` | `false` | Skip starting servers |
|
||||
| `CI` | `false` | CI mode (headless, retries) |
|
||||
|
||||
## File Structure
|
||||
|
||||
```
|
||||
e2e/
|
||||
├── tests/ # Test files
|
||||
│ └── image-persistence.spec.ts
|
||||
├── fixtures/ # Test data files
|
||||
│ └── small-image.excalidraw
|
||||
├── playwright.config.ts # Playwright configuration
|
||||
├── docker-compose.e2e.yml # Docker setup
|
||||
├── Dockerfile.playwright # Playwright container
|
||||
├── run-e2e.sh # Convenience script
|
||||
└── README.md # This file
|
||||
```
|
||||
|
||||
## Writing Tests
|
||||
|
||||
```typescript
|
||||
import { test, expect } from "@playwright/test";
|
||||
|
||||
test("my test", async ({ page, request }) => {
|
||||
// Use `page` for browser interactions
|
||||
await page.goto("/");
|
||||
await expect(page.locator("h1")).toBeVisible();
|
||||
|
||||
// Use `request` for API calls
|
||||
const response = await request.get("http://localhost:8000/drawings");
|
||||
expect(response.ok()).toBe(true);
|
||||
});
|
||||
```
|
||||
|
||||
## Debugging
|
||||
|
||||
```bash
|
||||
# Run with Playwright UI
|
||||
npm run test:ui
|
||||
|
||||
# Run specific test
|
||||
npx playwright test -g "should preserve large image"
|
||||
|
||||
# Show last test report
|
||||
npm run report
|
||||
```
|
||||
|
||||
## CI Integration
|
||||
|
||||
The tests are integrated into GitHub Actions. See `.github/workflows/test.yml`.
|
||||
|
||||
For CI environments, tests run in headless mode with:
|
||||
- Automatic retries on failure
|
||||
- Screenshot/video on failure
|
||||
- HTML report generation
|
||||
Reference in New Issue
Block a user