Files
leptos-shadcn-ui/tests/e2e/wasm-test-config.ts
Peter Hanssens c3759fb019 feat: Complete Phase 2 Infrastructure Implementation
🏗️ MAJOR MILESTONE: Phase 2 Infrastructure Complete

This commit delivers a comprehensive, production-ready infrastructure system
for leptos-shadcn-ui with full automation, testing, and monitoring capabilities.

## 🎯 Infrastructure Components Delivered

### 1. WASM Browser Testing 
- Cross-browser WASM compatibility testing (Chrome, Firefox, Safari, Mobile)
- Performance monitoring with initialization time, memory usage, interaction latency
- Memory leak detection and pressure testing
- Automated error handling and recovery
- Bundle analysis and optimization recommendations
- Comprehensive reporting (HTML, JSON, Markdown)

### 2. E2E Test Integration 
- Enhanced Playwright configuration with CI/CD integration
- Multi-browser testing with automated execution
- Performance regression testing and monitoring
- Comprehensive reporting with artifact management
- Environment detection (CI vs local)
- GitHub Actions workflow with notifications

### 3. Performance Benchmarking 
- Automated regression testing with baseline comparison
- Real-time performance monitoring with configurable intervals
- Multi-channel alerting (console, file, webhook, email)
- Performance trend analysis and prediction
- CLI benchmarking tools and automated monitoring
- Baseline management and optimization recommendations

### 4. Accessibility Automation 
- WCAG compliance testing (A, AA, AAA levels)
- Comprehensive accessibility audit automation
- Screen reader support and keyboard navigation testing
- Color contrast and focus management validation
- Custom accessibility rules and violation detection
- Component-specific accessibility testing

## 🚀 Key Features

- **Production Ready**: All systems ready for immediate production use
- **CI/CD Integration**: Complete GitHub Actions workflow
- **Automated Monitoring**: Real-time performance and accessibility monitoring
- **Cross-Browser Support**: Chrome, Firefox, Safari, Mobile Chrome, Mobile Safari
- **Comprehensive Reporting**: Multiple output formats with detailed analytics
- **Error Recovery**: Graceful failure handling and recovery mechanisms

## 📁 Files Added/Modified

### New Infrastructure Files
- tests/e2e/wasm-browser-testing.spec.ts
- tests/e2e/wasm-performance-monitor.ts
- tests/e2e/wasm-test-config.ts
- tests/e2e/e2e-test-runner.ts
- tests/e2e/accessibility-automation.ts
- tests/e2e/accessibility-enhanced.spec.ts
- performance-audit/src/regression_testing.rs
- performance-audit/src/automated_monitoring.rs
- performance-audit/src/bin/performance-benchmark.rs
- scripts/run-wasm-tests.sh
- scripts/run-performance-benchmarks.sh
- scripts/run-accessibility-audit.sh
- .github/workflows/e2e-tests.yml
- playwright.config.ts

### Enhanced Configuration
- Enhanced Makefile with comprehensive infrastructure commands
- Enhanced global setup and teardown for E2E tests
- Performance audit system integration

### Documentation
- docs/infrastructure/PHASE2_INFRASTRUCTURE_GUIDE.md
- docs/infrastructure/INFRASTRUCTURE_SETUP_GUIDE.md
- docs/infrastructure/PHASE2_COMPLETION_SUMMARY.md
- docs/testing/WASM_TESTING_GUIDE.md

## 🎯 Usage

### Quick Start
```bash
# Run all infrastructure tests
make test

# Run WASM browser tests
make test-wasm

# Run E2E tests
make test-e2e-enhanced

# Run performance benchmarks
make benchmark

# Run accessibility audit
make accessibility-audit
```

### Advanced Usage
```bash
# Run tests on specific browsers
make test-wasm-browsers BROWSERS=chromium,firefox

# Run with specific WCAG level
make accessibility-audit-wcag LEVEL=AAA

# Run performance regression tests
make regression-test

# Start automated monitoring
make performance-monitor
```

## 📊 Performance Metrics

- **WASM Initialization**: <5s (Chrome) to <10s (Mobile Safari)
- **First Paint**: <3s (Chrome) to <5s (Mobile Safari)
- **Interaction Latency**: <100ms average
- **Memory Usage**: <50% increase during operations
- **WCAG Compliance**: AA level with AAA support

## 🎉 Impact

This infrastructure provides:
- **Reliable Component Development**: Comprehensive testing and validation
- **Performance Excellence**: Automated performance monitoring and optimization
- **Accessibility Compliance**: WCAG compliance validation and reporting
- **Production Deployment**: CI/CD integration with automated testing

## 🚀 Next Steps

Ready for Phase 3: Component Completion
- Complete remaining 41 components using established patterns
- Leverage infrastructure for comprehensive testing
- Ensure production-ready quality across all components

**Status**:  PHASE 2 COMPLETE - READY FOR PRODUCTION

Closes: Phase 2 Infrastructure Implementation
Related: #infrastructure #testing #automation #ci-cd
2025-09-20 12:31:11 +10:00

297 lines
8.6 KiB
TypeScript

/**
* WASM Testing Configuration
*
* Centralized configuration for WASM browser testing across different environments
*/
export interface WASMTestConfig {
// Performance thresholds
performance: {
maxInitializationTime: number; // milliseconds
maxFirstPaint: number; // milliseconds
maxFirstContentfulPaint: number; // milliseconds
maxInteractionLatency: number; // milliseconds
maxMemoryIncrease: number; // percentage
};
// Browser-specific settings
browsers: {
[browserName: string]: {
enabled: boolean;
timeout: number;
retries: number;
specificThresholds?: Partial<WASMTestConfig['performance']>;
};
};
// Test scenarios
scenarios: {
[scenarioName: string]: {
enabled: boolean;
description: string;
testFunction: string;
};
};
// Reporting
reporting: {
generateHtmlReport: boolean;
generateJsonReport: boolean;
generateMarkdownReport: boolean;
outputDirectory: string;
};
}
export const defaultWASMTestConfig: WASMTestConfig = {
performance: {
maxInitializationTime: 5000, // 5 seconds
maxFirstPaint: 3000, // 3 seconds
maxFirstContentfulPaint: 4000, // 4 seconds
maxInteractionLatency: 100, // 100ms
maxMemoryIncrease: 50, // 50% increase allowed
},
browsers: {
chromium: {
enabled: true,
timeout: 30000,
retries: 2,
},
firefox: {
enabled: true,
timeout: 35000, // Firefox can be slower
retries: 2,
specificThresholds: {
maxInitializationTime: 6000, // Allow slightly more time for Firefox
},
},
webkit: {
enabled: true,
timeout: 40000, // Safari can be slower
retries: 3,
specificThresholds: {
maxInitializationTime: 7000, // Safari needs more time
maxFirstPaint: 3500,
},
},
'Mobile Chrome': {
enabled: true,
timeout: 45000, // Mobile can be slower
retries: 2,
specificThresholds: {
maxInitializationTime: 8000, // Mobile needs more time
maxFirstPaint: 4000,
maxFirstContentfulPaint: 5000,
},
},
'Mobile Safari': {
enabled: true,
timeout: 50000, // Mobile Safari can be slowest
retries: 3,
specificThresholds: {
maxInitializationTime: 10000, // Mobile Safari needs most time
maxFirstPaint: 5000,
maxFirstContentfulPaint: 6000,
maxInteractionLatency: 150, // Mobile interactions can be slower
},
},
},
scenarios: {
'basic-initialization': {
enabled: true,
description: 'Basic WASM initialization and loading',
testFunction: 'testBasicInitialization',
},
'memory-management': {
enabled: true,
description: 'Memory usage and leak detection',
testFunction: 'testMemoryManagement',
},
'cross-browser-compatibility': {
enabled: true,
description: 'Cross-browser WASM compatibility',
testFunction: 'testCrossBrowserCompatibility',
},
'performance-monitoring': {
enabled: true,
description: 'Performance benchmarks and monitoring',
testFunction: 'testPerformanceMonitoring',
},
'error-handling': {
enabled: true,
description: 'Error handling and recovery',
testFunction: 'testErrorHandling',
},
'bundle-analysis': {
enabled: true,
description: 'WASM bundle size and loading analysis',
testFunction: 'testBundleAnalysis',
},
},
reporting: {
generateHtmlReport: true,
generateJsonReport: true,
generateMarkdownReport: true,
outputDirectory: 'test-results/wasm-tests',
},
};
/**
* Get browser-specific configuration
*/
export function getBrowserConfig(browserName: string): WASMTestConfig['browsers'][string] {
const config = defaultWASMTestConfig.browsers[browserName];
if (!config) {
throw new Error(`No configuration found for browser: ${browserName}`);
}
return config;
}
/**
* Get performance thresholds for a specific browser
*/
export function getPerformanceThresholds(browserName: string): WASMTestConfig['performance'] {
const baseThresholds = defaultWASMTestConfig.performance;
const browserConfig = getBrowserConfig(browserName);
if (browserConfig.specificThresholds) {
return {
...baseThresholds,
...browserConfig.specificThresholds,
};
}
return baseThresholds;
}
/**
* Check if a scenario is enabled
*/
export function isScenarioEnabled(scenarioName: string): boolean {
const scenario = defaultWASMTestConfig.scenarios[scenarioName];
return scenario ? scenario.enabled : false;
}
/**
* Get all enabled scenarios
*/
export function getEnabledScenarios(): string[] {
return Object.keys(defaultWASMTestConfig.scenarios).filter(isScenarioEnabled);
}
/**
* Get all enabled browsers
*/
export function getEnabledBrowsers(): string[] {
return Object.keys(defaultWASMTestConfig.browsers).filter(
browserName => defaultWASMTestConfig.browsers[browserName].enabled
);
}
/**
* Validate configuration
*/
export function validateConfig(config: WASMTestConfig): { valid: boolean; errors: string[] } {
const errors: string[] = [];
// Validate performance thresholds
if (config.performance.maxInitializationTime <= 0) {
errors.push('maxInitializationTime must be positive');
}
if (config.performance.maxFirstPaint <= 0) {
errors.push('maxFirstPaint must be positive');
}
if (config.performance.maxFirstContentfulPaint <= 0) {
errors.push('maxFirstContentfulPaint must be positive');
}
if (config.performance.maxInteractionLatency <= 0) {
errors.push('maxInteractionLatency must be positive');
}
if (config.performance.maxMemoryIncrease < 0) {
errors.push('maxMemoryIncrease must be non-negative');
}
// Validate browser configurations
Object.entries(config.browsers).forEach(([browserName, browserConfig]) => {
if (browserConfig.timeout <= 0) {
errors.push(`Browser ${browserName}: timeout must be positive`);
}
if (browserConfig.retries < 0) {
errors.push(`Browser ${browserName}: retries must be non-negative`);
}
});
// Validate scenarios
Object.entries(config.scenarios).forEach(([scenarioName, scenario]) => {
if (!scenario.description || scenario.description.trim().length === 0) {
errors.push(`Scenario ${scenarioName}: description is required`);
}
if (!scenario.testFunction || scenario.testFunction.trim().length === 0) {
errors.push(`Scenario ${scenarioName}: testFunction is required`);
}
});
return {
valid: errors.length === 0,
errors,
};
}
/**
* Load configuration from environment variables
*/
export function loadConfigFromEnv(): WASMTestConfig {
const config = { ...defaultWASMTestConfig };
// Override performance thresholds from environment
if (process.env.WASM_MAX_INIT_TIME) {
config.performance.maxInitializationTime = parseInt(process.env.WASM_MAX_INIT_TIME);
}
if (process.env.WASM_MAX_FIRST_PAINT) {
config.performance.maxFirstPaint = parseInt(process.env.WASM_MAX_FIRST_PAINT);
}
if (process.env.WASM_MAX_FCP) {
config.performance.maxFirstContentfulPaint = parseInt(process.env.WASM_MAX_FCP);
}
if (process.env.WASM_MAX_INTERACTION_LATENCY) {
config.performance.maxInteractionLatency = parseInt(process.env.WASM_MAX_INTERACTION_LATENCY);
}
if (process.env.WASM_MAX_MEMORY_INCREASE) {
config.performance.maxMemoryIncrease = parseInt(process.env.WASM_MAX_MEMORY_INCREASE);
}
// Override browser settings from environment
if (process.env.WASM_ENABLED_BROWSERS) {
const enabledBrowsers = process.env.WASM_ENABLED_BROWSERS.split(',');
Object.keys(config.browsers).forEach(browserName => {
config.browsers[browserName].enabled = enabledBrowsers.includes(browserName);
});
}
// Override scenario settings from environment
if (process.env.WASM_ENABLED_SCENARIOS) {
const enabledScenarios = process.env.WASM_ENABLED_SCENARIOS.split(',');
Object.keys(config.scenarios).forEach(scenarioName => {
config.scenarios[scenarioName].enabled = enabledScenarios.includes(scenarioName);
});
}
// Override reporting settings from environment
if (process.env.WASM_OUTPUT_DIR) {
config.reporting.outputDirectory = process.env.WASM_OUTPUT_DIR;
}
if (process.env.WASM_GENERATE_HTML_REPORT) {
config.reporting.generateHtmlReport = process.env.WASM_GENERATE_HTML_REPORT === 'true';
}
if (process.env.WASM_GENERATE_JSON_REPORT) {
config.reporting.generateJsonReport = process.env.WASM_GENERATE_JSON_REPORT === 'true';
}
if (process.env.WASM_GENERATE_MARKDOWN_REPORT) {
config.reporting.generateMarkdownReport = process.env.WASM_GENERATE_MARKDOWN_REPORT === 'true';
}
return config;
}