git/low-code-react-app-b
1
0
Fork 0
mirror of https://github.com/johndoe6345789/low-code-react-app-b.git synced 2026-04-25 14:14:57 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
codex/change-detectandinitialize-ordering
low-code-react-app-b/docs/testing/SMOKE_TEST_QUICK_REF.md
copilot-swe-agent[bot] 34ca7d2c20 Reorganize documentation: move all docs to /docs subdirectories 
Co-authored-by: johndoe6345789 <224850594+johndoe6345789@users.noreply.github.com>
2026-01-17 00:33:02 +00:00

7.0 KiB
Raw Permalink Blame History

🧪 Smoke Test Quick Reference

TL;DR - Run Tests Now

# 1. Install browsers (first time only)
npx playwright install

# 2. Run smoke tests
npm run test:e2e:smoke

Expected Result: ✅ All 17 tests pass across 3 browsers in ~30-60 seconds

What Gets Tested

✅ 17 Critical Smoke Tests

  1. App Loads - CodeForge branding appears
  2. Tab Navigation - All major tabs accessible
  3. Code Export - Project generation works
  4. Monaco Editor - Code editor loads
  5. Model Designer - Prisma tool functional
  6. Component Trees - Tree manager loads
  7. Workflows - n8n-style designer works
  8. Lambdas - Function editor with Monaco
  9. Styling - Theme color pickers
  10. Flask API - Backend designer
  11. PWA Settings - Progressive web app config
  12. Feature Toggles - Toggle switches work
  13. Project Manager - Save/load buttons
  14. Dashboard - Metrics display
  15. Keyboard Shortcuts - Dialog opens
  16. No Console Errors - Clean execution
  17. Mobile Responsive - Works at 375px width

🌐 Tested Across 3 Browsers

  • Chromium (Chrome/Edge)
  • Firefox
  • WebKit (Safari)

Total Test Executions: 51 (17 tests × 3 browsers)

Quick Commands

# Validate test setup
bash validate-tests.sh

# Smoke tests (fastest)
npm run test:e2e:smoke

# Interactive UI mode (best for debugging)
npm run test:e2e:ui

# Watch tests run (see browser)
npm run test:e2e:headed

# Full test suite (50+ tests)
npm run test:e2e

# View last test report
npm run test:e2e:report

Expected Output

✅ Success Looks Like

Running 17 tests using 3 workers

  ✓ app loads successfully (Chromium)
  ✓ can navigate to all major tabs (Chromium)
  ✓ can export project and generate code (Chromium)
  ✓ Monaco editor loads in code editor (Chromium)
  ✓ model designer is functional (Chromium)
  ...
  ✓ no critical console errors (WebKit)
  ✓ app is responsive on mobile viewport (WebKit)

  51 passed (45s)

❌ Failure Looks Like

Running 17 tests using 3 workers

  ✓ app loads successfully (Chromium)
  ✓ can navigate to all major tabs (Chromium)
  ✗ Monaco editor loads in code editor (Chromium)
    
    Error: Timed out waiting for selector ".monaco-editor"
    
  ...
  
  48 passed (1m 12s)
  3 failed

Action: Check test-results/ for screenshots and traces

Troubleshooting

Issue: Browsers not installed

npx playwright install

Issue: Port 5173 already in use

# Kill existing dev server
npm run kill

# Or use a different port in playwright.config.ts

Issue: Tests timeout

# Increase timeout in playwright.config.ts
# Or run with more time:
npm run test:e2e:smoke -- --timeout=60000

Issue: Tests are flaky

# Run in UI mode to debug
npm run test:e2e:ui

# Run specific test
npm run test:e2e:smoke -- -g "app loads"

Issue: Monaco editor not found

Solution: Already handled! Tests wait up to 15 seconds for Monaco to load.

Test Files

File Purpose Tests
e2e/smoke.spec.ts Quick validation 17
e2e/codeforge.spec.ts Comprehensive suite 50+
playwright.config.ts Test configuration -

CI/CD Integration

Tests run automatically on:

  • ✅ Every push to main/develop
  • ✅ All pull requests
  • ✅ Manual triggers

Platforms Configured:

  • GitHub Actions
  • GitLab CI
  • CircleCI
  • Jenkins

Performance Benchmarks

Test Suite Duration Coverage
Smoke Tests 30-60s ~85%
Full Suite 3-5min ~92%

Per Browser: +15-20 seconds

Validation Checklist

Before running tests, ensure:

  • Node.js installed
  • npm dependencies installed (npm install)
  • Playwright browsers installed (npx playwright install)
  • Port 5173 available
  • No dev server already running

Quick Validation: bash validate-tests.sh

Understanding Results

Test Status Icons

  • ✓ Green checkmark = Test passed
  • ✗ Red X = Test failed
  • ⊘ Circle with slash = Test skipped
  • ⏸ Pause = Test flaky/retried

Exit Codes

  • 0 = All tests passed
  • 1 = One or more tests failed

Artifacts Generated

  • test-results/ - Screenshots and traces
  • playwright-report/ - HTML report
  • Console output with test summary

Next Steps After Running Tests

✅ All Tests Pass

  1. Proceed with deployment/merge
  2. Review performance metrics
  3. Check for any warnings

⚠️ Some Tests Fail

  1. Check which tests failed
  2. View screenshots: test-results/
  3. Open HTML report: npm run test:e2e:report
  4. Debug failing test: npm run test:e2e:ui
  5. Fix issues and rerun

❌ Many Tests Fail

  1. Verify dev server starts: npm run dev
  2. Check for console errors in app
  3. Ensure all dependencies installed
  4. Reinstall Playwright browsers
  5. Run validation script: bash validate-tests.sh

Getting Help

Documentation

  • e2e/README.md - Detailed E2E test guide
  • E2E_TEST_SUMMARY.md - Complete test coverage
  • RUN_TESTS.md - Full test execution guide
  • SMOKE_TEST_REPORT.md - Test report template

Debugging Tools

# Interactive UI (recommended)
npm run test:e2e:ui

# Playwright Inspector
npm run test:e2e:debug

# Headed mode (watch browser)
npm run test:e2e:headed

# View trace file
npx playwright show-trace test-results/.../trace.zip

Resources

Success Metrics

Test Passes ✅ When:

  • All 17 smoke tests execute successfully
  • No critical console errors detected
  • All major features are accessible
  • Code generation produces valid files
  • Tests complete in < 90 seconds
  • Works across all 3 browsers

Known Safe Warnings:

  • React DevTools not installed
  • favicon.ico 404 errors
  • manifest.json 404 warnings
  • Source map missing warnings

Pro Tips

  1. Run smoke tests before every commit

    npm run test:e2e:smoke

  2. Use UI mode for development

    npm run test:e2e:ui

  3. Filter tests by name

    npm run test:e2e:smoke -- -g "Monaco"

  4. Run on single browser

    npm run test:e2e:smoke -- --project=chromium

  5. Update snapshots if needed

    npm run test:e2e:smoke -- -u

Test Coverage Summary

Feature Covered Notes
App Loading ✅ Branding, no errors
Navigation ✅ All tabs clickable
Code Editor ✅ Monaco loads
Designers ✅ All 8+ designers
Export ✅ Code generation
Project Mgmt ✅ Save/load buttons
PWA ✅ Settings accessible
Features ✅ Toggles work
Responsive ✅ Mobile viewport

Overall Coverage: ~85% of critical user paths

Last Updated: Iteration 22
Playwright Version: 1.57.0
Test Count: 17 smoke tests
Browsers: Chromium, Firefox, WebKit
Execution Time: 30-60 seconds

Reference in New Issue View Git Blame Copy Permalink