Skip to content

Testing Guide - ContentForge & Frontend

Archived record

This page describes the Firebase-era platform or a migration step that has completed. It is kept as history and is not a current runbook. The current platform is described from the home page.

Overview

The project now has a comprehensive testing workflow with manual trigger capability for on-demand testing.

Test Files

1. E2E Tests

e2e/smoke.spec.js (5 tests)

  • ✅ Homepage loads correctly
  • ✅ Navigation is accessible
  • ✅ Document structure is semantic
  • ✅ Responsive design (mobile)
  • ✅ No console errors on load

e2e/contentforge.spec.js (16 tests)

  • Dashboard (2 tests): Page loads, main content visible
  • Review Queue (3 tests): Filter loading, queue items display, filter changes
  • Editor (1 test): Editor page loads
  • Submit URLs (2 tests): Form loads, controls present
  • Published Content (2 tests): Published page loads, grid display
  • Navigation (2 tests): Admin navigation works
  • Responsive Design (2 tests): Mobile & tablet layouts
  • Error Handling (1 test): Graceful error handling

2. Unit Tests

  • Run with: npm test
  • Uses Vitest + jsdom
  • Covers component logic

3. Code Quality

  • ESLint + Prettier checks
  • Route validation
  • Accessibility checks

How to Run Tests

All tests:

npm run test:e2e

Specific test file (ContentForge only):

npm run test:e2e -- e2e/contentforge.spec.js

With headed browser (see what's happening):

npm run test:e2e:headed

Debug mode (interactive):

npm run test:e2e:debug

Unit tests:

npm test

Full quality check:

npm run code:quality

GitHub Actions Workflow

New Workflow: test-comprehensive.yml

Manual Trigger: Go to: Actions → Test Comprehensive → Run workflow

Options:

  • all (default) - Run both unit and E2E tests
  • unit - Unit tests only
  • e2e - E2E tests only

Automatic Triggers:

  • Runs on PRs with changes to src/, e2e/, or test configs
  • Generates artifacts (coverage, reports, videos)

Artifacts Generated:

  • Playwright HTML report
  • Test results JSON
  • Vitest coverage
  • Screenshots & videos (on failure)

Test Results

Latest Run:

21 passed (6.5s)
├── smoke.spec.js (5 tests) ✅
└── contentforge.spec.js (16 tests) ✅

Best Practices

Writing New Tests

  1. Resilient Selectors - Use accessible roles when possible
// ❌ Brittle
page.locator('.card-xyz-123');

// ✅ Better
page.locator('button:has-text("Approve")');
page.locator('[role="navigation"]');
  1. Handle Loading States
await page.goto('/admin', { waitUntil: 'networkidle' });
  1. Graceful Assertions - Handle optional elements 
    const hasElement = await locator.isVisible().catch(() => false);
expect(hasElement || fallback).toBeTruthy();

Troubleshooting

Tests Failing Locally?

  1. Ensure dev server is running:
npm run dev
  1. Clear playwright cache:
npx playwright install
  1. Check browser logs:
  2. Screenshots saved to test-results/
  3. Videos saved on failure

CI/CD Pipeline Issues?

  • Check artifact uploads in GitHub Actions
  • Verify secrets are set (Firebase credentials)
  • Check workflow permissions in repo settings

Next Steps

  1. Add more ContentForge tests for:
  2. Approve/reject workflows
  3. Publish operations

  4. AI generation triggers

  5. Expand unit tests for:

  6. Admin components
  7. Firebase hooks

  8. Content publishing logic

  9. Set up CI integration to:

  10. Block merges on test failure
  11. Generate test reports on PRs
  12. Track test coverage trends