vstat

Vibe Stats Extension Testing Suite ⚡

Comprehensive testing framework for the Vibe Stats browser extension, including API endpoint testing, visual component validation, and interactive test viewer.

🚀 Quick Start

# Run all tests
npm test

# Run specific test types
npm run test:api      # Test API endpoints only
npm run test:visual   # Test icons and badges only
npm run test:viewer   # Open interactive test viewer

📋 Test Categories

📡 API Endpoint Testing

🎨 Visual Component Testing

🌐 Interactive Test Viewer

🗂️ Directory Structure

tests/
├── api-tester.js          # API endpoint testing module
├── visual-tester.js       # Visual component testing module  
├── test-runner.js         # Main test runner and CLI
├── test-viewer.html       # Interactive web-based test interface
├── simple-server.js       # HTTP server for web testing
├── package.json          # Test dependencies and scripts
└── README.md             # This documentation

🔧 Test Modules

API Tester (api-tester.js)

const APITester = require('./api-tester');
const tester = new APITester();
const results = await tester.runAllTests();

Features:

Visual Tester (visual-tester.js)

const VisualTester = require('./visual-tester');  
const tester = new VisualTester();
const results = await tester.runAllTests();

Features:

Test Runner (test-runner.js)

# Run all tests with export and viewer
node test-runner.js --export --viewer

# Run specific test types
node test-runner.js --api
node test-runner.js --visual

Features:

🌐 Interactive Test Viewer

The test-viewer.html provides a rich web interface for testing:

Features

Usage

# Option 1: Direct file access
open tests/test-viewer.html

# Option 2: Via npm script
npm run test:viewer

# Option 3: HTTP server (for advanced testing)
cd tests && npm run serve
# Then open http://localhost:3000

📊 Test Results

Console Output

Tests provide colored console output with:

JSON Export

Results can be exported to test-results.json:

{
  "timestamp": "2024-01-01T12:00:00.000Z",
  "duration": 5.23,
  "results": {
    "api": { /* API test results */ },
    "visual": { /* Visual test results */ }
  },
  "summary": {
    "overallSuccess": true,
    "testsRun": { "api": true, "visual": true }
  }
}

🔍 What Gets Tested

API Endpoints

Status Combinations

Icon Files

🐛 Troubleshooting

Common Issues

Tests Fail with Network Errors

# Check internet connection and API availability
curl -s https://status.anthropic.com/api/v2/status.json
curl -s https://www.githubstatus.com/api/v2/status.json

Missing Icon Files

# Verify icon files exist
ls -la icons/ai-vibe-*.png

Test Viewer Not Opening

# Try manual opening
open tests/test-viewer.html

# Or use HTTP server
cd tests && node simple-server.js
# Then open http://localhost:3000

Permission Errors

# Make test runner executable (Unix-like systems)
chmod +x tests/test-runner.js

Debug Mode

Run tests with detailed logging:

NODE_ENV=development npm test

🚀 Integration with Extension

Tests are designed to mirror the extension’s actual logic:

📈 Continuous Testing

For development workflows:

# Quick validation before building
npm run validate && npm test

# Full pre-release testing  
npm run prepare-release && npm test

# Visual testing during development
npm run test:viewer  # Keep open for quick visual checks

🎯 Best Practices

  1. Run tests before each build: npm test && npm run build
  2. Use the visual viewer for UI changes: npm run test:viewer
  3. Check API status if tests fail: APIs might be temporarily unavailable
  4. Export results for debugging: node test-runner.js --export
  5. Test in both success and failure scenarios: Temporarily block network access

Made with ❤️ for robust extension development