Files
leptos-shadcn-ui/Makefile
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

347 lines
13 KiB
Makefile

.PHONY: help dev build test test-rust test-e2e clean install-deps setup-playwright lint fmt check docs
# Default target
help: ## Show this help message
@echo "shadcn/ui Rust Development Commands"
@echo "=================================="
@echo ""
@grep -E '^[a-zA-Z_-]+:.*?## .*$$' $(MAKEFILE_LIST) | sort | awk 'BEGIN {FS = ":.*?## "}; {printf "\033[36m%-20s\033[0m %s\n", $$1, $$2}'
# Development
dev: ## Start development environment with file watching
@echo "🚀 Starting development environment..."
cargo watch -x "check --workspace" -x "test --workspace --lib"
dev-examples: ## Run example applications
@echo "🌟 Starting Leptos examples..."
cd book-examples/leptos && trunk serve --open
# Building
build: ## Build all packages and examples
@echo "🔨 Building all packages..."
cargo build --workspace
cargo build --workspace --target wasm32-unknown-unknown
build-release: ## Build optimized release versions
@echo "🏗️ Building release versions..."
cargo build --workspace --release
cargo build --workspace --release --target wasm32-unknown-unknown
build-examples: ## Build example applications
@echo "📦 Building examples..."
cd book-examples/leptos && trunk build --release
cd book-examples/yew && trunk build --release
# Testing
test: test-rust test-e2e ## Run all tests (Rust + E2E)
test-rust: ## Run Rust unit and integration tests
@echo "🧪 Running Rust tests..."
cargo test --workspace --lib
cargo test --workspace --target wasm32-unknown-unknown
test-rust-verbose: ## Run Rust tests with verbose output
@echo "🔍 Running Rust tests (verbose)..."
RUST_LOG=debug cargo test --workspace --lib -- --nocapture
test-single: ## Run tests for a specific component (usage: make test-single COMPONENT=button)
@if [ -z "$(COMPONENT)" ]; then \
echo "❌ Please specify COMPONENT. Usage: make test-single COMPONENT=button"; \
exit 1; \
fi
@echo "🎯 Testing $(COMPONENT) component..."
cargo test -p shadcn-ui-leptos-$(COMPONENT)
cargo test -p shadcn-ui-yew-$(COMPONENT)
test-e2e: install-playwright ## Run Playwright E2E tests
@echo "🎭 Running Playwright E2E tests..."
pnpm playwright test
test-e2e-headed: ## Run Playwright tests in headed mode
@echo "🎭 Running Playwright E2E tests (headed)..."
pnpm playwright test --headed
test-e2e-ui: ## Run Playwright E2E tests with UI
@echo "🎭 Running Playwright E2E tests with UI..."
pnpm playwright test --ui
test-e2e-debug: ## Run Playwright E2E tests in debug mode
@echo "🐛 Running Playwright E2E tests in debug mode..."
pnpm playwright test --debug
test-e2e-specific: ## Run specific E2E test file (usage: make test-e2e-specific FILE=filename)
@echo "🎯 Running specific E2E test: $(FILE)..."
pnpm playwright test $(FILE)
test-e2e-browser: ## Run E2E tests in specific browser (usage: make test-e2e-browser BROWSER=chromium)
@echo "🌐 Running E2E tests in $(BROWSER)..."
pnpm playwright test --project=$(BROWSER)
test-e2e-parallel: ## Run E2E tests in parallel
@echo "⚡ Running E2E tests in parallel..."
pnpm playwright test --workers=4
test-e2e-report: ## Generate E2E test report
@echo "📊 Generating E2E test report..."
pnpm playwright show-report
test-e2e-install: ## Install Playwright browsers
@echo "📦 Installing Playwright browsers..."
pnpm playwright install
test-e2e-codegen: ## Generate E2E test code
@echo "🔄 Generating E2E test code..."
pnpm playwright codegen http://127.0.0.1:8080
# WASM Testing
test-wasm: ## Run comprehensive WASM browser tests
@echo "🧪 Running WASM browser tests..."
./scripts/run-wasm-tests.sh
test-wasm-browsers: ## Run WASM tests on specific browsers (usage: make test-wasm-browsers BROWSERS=chromium,firefox)
@if [ -z "$(BROWSERS)" ]; then \
echo "❌ Please specify BROWSERS. Usage: make test-wasm-browsers BROWSERS=chromium,firefox"; \
exit 1; \
fi
@echo "🧪 Running WASM tests on $(BROWSERS)..."
./scripts/run-wasm-tests.sh -b "$(BROWSERS)"
test-wasm-headed: ## Run WASM tests in headed mode
@echo "🧪 Running WASM tests in headed mode..."
./scripts/run-wasm-tests.sh -H
test-wasm-parallel: ## Run WASM tests in parallel
@echo "🧪 Running WASM tests in parallel..."
./scripts/run-wasm-tests.sh -p
test-wasm-verbose: ## Run WASM tests with verbose output
@echo "🧪 Running WASM tests with verbose output..."
./scripts/run-wasm-tests.sh -v
# Enhanced E2E Testing
test-e2e-enhanced: ## Run enhanced E2E tests with comprehensive reporting
@echo "🎭 Running enhanced E2E tests..."
pnpm playwright test --config=playwright.config.ts
test-e2e-ci: ## Run E2E tests in CI mode
@echo "🚀 Running E2E tests in CI mode..."
CI=true pnpm playwright test --config=playwright.config.ts
test-e2e-debug: ## Run E2E tests in debug mode
@echo "🐛 Running E2E tests in debug mode..."
DEBUG=true HEADLESS=false pnpm playwright test --config=playwright.config.ts
test-e2e-performance: ## Run E2E performance tests only
@echo "📈 Running E2E performance tests..."
pnpm playwright test --project=performance-tests
test-e2e-accessibility: ## Run E2E accessibility tests only
@echo "♿ Running E2E accessibility tests..."
pnpm playwright test --project=accessibility-tests
test-e2e-wasm: ## Run E2E WASM tests only
@echo "🧪 Running E2E WASM tests..."
pnpm playwright test --project=wasm-tests
test-e2e-report: ## Generate comprehensive E2E test report
@echo "📊 Generating E2E test report..."
pnpm playwright show-report
# Performance Benchmarking
benchmark: ## Run performance benchmarks
@echo "🏃 Running performance benchmarks..."
./scripts/run-performance-benchmarks.sh benchmark
benchmark-components: ## Run benchmarks for specific components (usage: make benchmark-components COMPONENTS=button,input)
@if [ -z "$(COMPONENTS)" ]; then \
echo "❌ Please specify COMPONENTS. Usage: make benchmark-components COMPONENTS=button,input"; \
exit 1; \
fi
@echo "🏃 Running benchmarks for $(COMPONENTS)..."
./scripts/run-performance-benchmarks.sh benchmark -c "$(COMPONENTS)"
benchmark-html: ## Run benchmarks and generate HTML report
@echo "🏃 Running benchmarks with HTML report..."
./scripts/run-performance-benchmarks.sh benchmark -f html -o test-results/performance/benchmark-report.html
regression-test: ## Run performance regression tests
@echo "📊 Running performance regression tests..."
./scripts/run-performance-benchmarks.sh regression
regression-update: ## Run regression tests and update baseline
@echo "📊 Running regression tests with baseline update..."
./scripts/run-performance-benchmarks.sh regression -u
performance-monitor: ## Start automated performance monitoring
@echo "📈 Starting automated performance monitoring..."
./scripts/run-performance-benchmarks.sh monitor
performance-monitor-alerts: ## Start monitoring with alerts enabled
@echo "📈 Starting performance monitoring with alerts..."
./scripts/run-performance-benchmarks.sh monitor -a
setup-baseline: ## Setup performance baseline
@echo "🔧 Setting up performance baseline..."
./scripts/run-performance-benchmarks.sh setup
performance-report: ## Generate performance report
@echo "📄 Generating performance report..."
./scripts/run-performance-benchmarks.sh report
# Accessibility Automation
accessibility-audit: ## Run comprehensive accessibility audit
@echo "♿ Running accessibility audit..."
./scripts/run-accessibility-audit.sh
accessibility-audit-wcag: ## Run accessibility audit with specific WCAG level (usage: make accessibility-audit-wcag LEVEL=AAA)
@if [ -z "$(LEVEL)" ]; then \
echo "❌ Please specify LEVEL. Usage: make accessibility-audit-wcag LEVEL=AAA"; \
exit 1; \
fi
@echo "♿ Running accessibility audit with WCAG $(LEVEL)..."
./scripts/run-accessibility-audit.sh -l "$(LEVEL)"
accessibility-audit-components: ## Run accessibility audit for specific components (usage: make accessibility-audit-components COMPONENTS=button,input)
@if [ -z "$(COMPONENTS)" ]; then \
echo "❌ Please specify COMPONENTS. Usage: make accessibility-audit-components COMPONENTS=button,input"; \
exit 1; \
fi
@echo "♿ Running accessibility audit for $(COMPONENTS)..."
./scripts/run-accessibility-audit.sh -c "$(COMPONENTS)"
accessibility-audit-html: ## Run accessibility audit and generate HTML report
@echo "♿ Running accessibility audit with HTML report..."
./scripts/run-accessibility-audit.sh -f html -o test-results/accessibility/accessibility-report.html
accessibility-audit-verbose: ## Run accessibility audit with verbose output
@echo "♿ Running accessibility audit with verbose output..."
./scripts/run-accessibility-audit.sh -v
accessibility-audit-focus: ## Run accessibility audit focusing on focus management
@echo "♿ Running accessibility audit focusing on focus management..."
./scripts/run-accessibility-audit.sh --no-color-contrast --no-screen-reader
# Production Readiness
analyze-bundle: ## Analyze bundle sizes and optimization opportunities
@echo "📦 Analyzing bundle sizes for production readiness..."
./scripts/analyze_bundle.sh
build-production: ## Build production-optimized version
@echo "🏗️ Building production-optimized version..."
./scripts/build_production.sh
production-check: analyze-bundle build-production ## Complete production readiness check
@echo "✅ Production readiness check complete!"
# Quality & Linting
check: ## Run cargo check on all packages
@echo "✅ Checking all packages..."
cargo check --workspace
cargo check --workspace --target wasm32-unknown-unknown
lint: ## Run clippy linting
@echo "📎 Running clippy..."
cargo clippy --workspace -- -D warnings
cargo clippy --workspace --target wasm32-unknown-unknown -- -D warnings
fmt: ## Format code with rustfmt
@echo "🎨 Formatting code..."
cargo fmt --all
fmt-check: ## Check if code is formatted
@echo "🔍 Checking code formatting..."
cargo fmt --all -- --check
audit: ## Run security audit
@echo "🔒 Running security audit..."
cargo audit
# Dependencies
install-deps: ## Install all dependencies
@echo "📦 Installing dependencies..."
pnpm install
install-playwright: ## Install Playwright and browsers
@echo "🎭 Installing Playwright..."
pnpm create playwright@latest --yes
pnpm playwright install
setup-playwright: install-deps install-playwright ## Complete Playwright setup
@echo "✅ Playwright setup complete!"
# Documentation
docs: ## Generate and open documentation
@echo "📚 Generating documentation..."
cargo doc --workspace --open
docs-book: ## Build and serve the documentation book
@echo "📖 Building documentation book..."
cd book && mdbook serve --open
# Maintenance
clean: ## Clean build artifacts
@echo "🧹 Cleaning build artifacts..."
cargo clean
rm -rf book-examples/*/dist
rm -rf node_modules
rm -rf .playwright-browsers
clean-cache: ## Clean cargo cache and lock files
@echo "🗑️ Cleaning caches..."
cargo clean
rm -f Cargo.lock
rm -f package-lock.json
update-deps: ## Update all dependencies
@echo "⬆️ Updating dependencies..."
cargo update
pnpm update
# Component Generation
generate-component: ## Generate a new component (usage: make generate-component NAME=my-component FRAMEWORK=leptos)
@if [ -z "$(NAME)" ] || [ -z "$(FRAMEWORK)" ]; then \
echo "❌ Please specify NAME and FRAMEWORK. Usage: make generate-component NAME=my-component FRAMEWORK=leptos"; \
exit 1; \
fi
@echo "🏗️ Generating $(NAME) component for $(FRAMEWORK)..."
cargo run --bin component-generator -- --name $(NAME) --framework $(FRAMEWORK)
# Nix integration
nix-develop: ## Enter Nix development shell
@echo "❄️ Entering Nix development shell..."
nix develop
nix-build: ## Build using Nix
@echo "❄️ Building with Nix..."
nix build
# Quick fixes
fix-permissions: ## Fix file permissions
@echo "🔧 Fixing file permissions..."
find . -name "*.rs" -type f -exec chmod 644 {} \;
find . -name "*.toml" -type f -exec chmod 644 {} \;
find scripts -name "*.sh" -type f -exec chmod +x {} \;
# Git hooks
install-git-hooks: ## Install git pre-commit hooks
@echo "🪝 Installing git hooks..."
echo '#!/bin/sh\nmake fmt-check && make check && make test-rust' > .git/hooks/pre-commit
chmod +x .git/hooks/pre-commit
echo "✅ Git hooks installed!"
# Environment info
env-info: ## Show environment information
@echo "Environment Information:"
@echo "======================="
@echo "Rust version: $$(rustc --version 2>/dev/null || echo 'Not installed')"
@echo "Cargo version: $$(cargo --version 2>/dev/null || echo 'Not installed')"
@echo "Node.js version: $$(node --version 2>/dev/null || echo 'Not installed')"
@echo "pnpm version: $$(pnpm --version 2>/dev/null || echo 'Not installed')"
@echo "Make version: $$(make --version 2>/dev/null | head -n1 || echo 'Not installed')"
@echo "Git version: $$(git --version 2>/dev/null || echo 'Not installed')"
@if command -v nix >/dev/null 2>&1; then \
echo "Nix version: $$(nix --version 2>/dev/null)"; \
else \
echo "Nix version: Not installed"; \
fi