Project Cleanup and Organization #26
@@ -453,7 +453,7 @@ jobs:
|
|||||||
|
|
||||||
# Run LHCI with arm64 Node + arm64 Chrome
|
# Run LHCI with arm64 Node + arm64 Chrome
|
||||||
# Test homepage and blog pages using config file
|
# Test homepage and blog pages using config file
|
||||||
npx lhci autorun --chrome-path="$CHROME_PATH"
|
npx lhci autorun --config=config/lighthouse.json --chrome-path="$CHROME_PATH"
|
||||||
|
|
||||||
kill "$SVPID" 2>/dev/null || true
|
kill "$SVPID" 2>/dev/null || true
|
||||||
env:
|
env:
|
||||||
|
|||||||
@@ -17,6 +17,9 @@
|
|||||||
/test-results/
|
/test-results/
|
||||||
/playwright-report/
|
/playwright-report/
|
||||||
|
|
||||||
|
# Lighthouse CI results
|
||||||
|
/lhci-results/
|
||||||
|
|
||||||
# Ignore other image files (but not visual regression snapshots)
|
# Ignore other image files (but not visual regression snapshots)
|
||||||
*.png
|
*.png
|
||||||
*.jpg
|
*.jpg
|
||||||
@@ -57,6 +60,7 @@ yarn-error.log*
|
|||||||
|
|
||||||
# typescript
|
# typescript
|
||||||
*.tsbuildinfo
|
*.tsbuildinfo
|
||||||
|
tsconfig.tsbuildinfo
|
||||||
next-env.d.ts
|
next-env.d.ts
|
||||||
|
|
||||||
*storybook.log
|
*storybook.log
|
||||||
|
|||||||
@@ -1,23 +0,0 @@
|
|||||||
{
|
|
||||||
"ci": {
|
|
||||||
"collect": {
|
|
||||||
"url": ["http://127.0.0.1:3010/"],
|
|
||||||
"numberOfRuns": 3,
|
|
||||||
"settings": {
|
|
||||||
"chromeFlags": "--no-sandbox --disable-dev-shm-usage --disable-gpu --headless"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"assert": {
|
|
||||||
"assertions": {
|
|
||||||
"categories:performance": ["warn", { "minScore": 0.8 }],
|
|
||||||
"categories:accessibility": ["warn", { "minScore": 0.8 }],
|
|
||||||
"first-contentful-paint": ["warn", { "maxNumericValue": 3000 }],
|
|
||||||
"interactive": ["warn", { "maxNumericValue": 5000 }]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"upload": {
|
|
||||||
"target": "filesystem",
|
|
||||||
"outputDir": "lhci-results"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -56,7 +56,7 @@ npm run monitor:all # All monitoring tools
|
|||||||
- **Performance monitoring**
|
- **Performance monitoring**
|
||||||
- **Code coverage reporting**
|
- **Code coverage reporting**
|
||||||
|
|
||||||
📖 **For detailed testing documentation, see [docs/TESTING.md](docs/TESTING.md)**
|
📖 **For detailed testing documentation, see [docs/README.md](docs/README.md)**
|
||||||
|
|
||||||
## ⚡ Performance Optimizations
|
## ⚡ Performance Optimizations
|
||||||
|
|
||||||
@@ -167,18 +167,35 @@ The Storybook configuration automatically detects the environment:
|
|||||||
community-rule/
|
community-rule/
|
||||||
├── app/ # Next.js app directory
|
├── app/ # Next.js app directory
|
||||||
│ ├── components/ # React components
|
│ ├── components/ # React components
|
||||||
│ ├── layout.js # Root layout
|
│ ├── hooks/ # Custom React hooks
|
||||||
│ └── page.js # Homepage
|
│ ├── layout.tsx # Root layout
|
||||||
├── tests/ # Test files
|
│ └── page.tsx # Homepage
|
||||||
│ ├── unit/ # Unit tests (8 components)
|
├── config/ # Application configuration files
|
||||||
|
│ ├── lighthouse.json # Lighthouse CI configuration
|
||||||
|
│ ├── performance-budgets.json # Performance budgets
|
||||||
|
│ └── gitea-runner.yaml # Gitea runner configuration
|
||||||
|
├── docs/ # Documentation
|
||||||
|
│ ├── README.md # Documentation index
|
||||||
|
│ └── guides/ # Comprehensive guides
|
||||||
|
│ ├── testing.md # Testing strategy
|
||||||
|
│ ├── testing-framework.md # Testing framework details
|
||||||
|
│ ├── testing-quick-reference.md # Quick reference
|
||||||
|
│ ├── performance.md # Performance optimization
|
||||||
|
│ ├── visual-regression.md # Visual testing
|
||||||
|
│ └── content-creation.md # Content guidelines
|
||||||
|
├── scripts/ # Utility scripts
|
||||||
|
│ ├── start-runner.sh # Start Gitea runner
|
||||||
|
│ ├── status-runner.sh # Check runner status
|
||||||
|
│ └── stop-runner.sh # Stop Gitea runner
|
||||||
|
├── tests/ # Test files
|
||||||
|
│ ├── unit/ # Unit tests
|
||||||
│ ├── integration/ # Integration tests
|
│ ├── integration/ # Integration tests
|
||||||
│ └── e2e/ # E2E tests (4 test suites)
|
│ ├── e2e/ # E2E tests
|
||||||
├── docs/ # Documentation
|
│ └── accessibility/ # Accessibility tests
|
||||||
│ └── TESTING.md # Comprehensive testing guide
|
|
||||||
├── .storybook/ # Storybook configuration
|
├── .storybook/ # Storybook configuration
|
||||||
├── .gitea/ # Gitea Actions workflows
|
├── .gitea/ # Gitea Actions workflows
|
||||||
│ └── workflows/
|
│ └── workflows/
|
||||||
│ └── ci.yml # CI/CD pipeline
|
│ └── ci.yaml # CI/CD pipeline
|
||||||
└── public/ # Static assets
|
└── public/ # Static assets
|
||||||
```
|
```
|
||||||
|
|
||||||
@@ -193,15 +210,17 @@ community-rule/
|
|||||||
|
|
||||||
## 📖 Documentation
|
## 📖 Documentation
|
||||||
|
|
||||||
- **[Testing Framework](docs/TESTING.md)** - Comprehensive testing guide
|
- **[Documentation Index](docs/README.md)** - Complete documentation guide
|
||||||
|
- **[Testing Guides](docs/guides/)** - Testing strategy, framework, and quick reference
|
||||||
|
- **[Performance Guide](docs/guides/performance.md)** - Performance optimization guide
|
||||||
|
- **[Visual Regression Guide](docs/guides/visual-regression.md)** - Visual testing guide
|
||||||
- **[Storybook](http://localhost:6006)** - Component documentation (local)
|
- **[Storybook](http://localhost:6006)** - Component documentation (local)
|
||||||
- **[GitHub Pages Storybook](https://your-username.github.io/communityrulestorybook/)** - Public component docs
|
|
||||||
|
|
||||||
## 🤝 Contributing
|
## 🤝 Contributing
|
||||||
|
|
||||||
1. **Fork the repository**
|
1. **Fork the repository**
|
||||||
2. **Create a feature branch**: `git checkout -b feature/amazing-feature`
|
2. **Create a feature branch**: `git checkout -b feature/amazing-feature`
|
||||||
3. **Write tests first** (see [Testing Guide](docs/TESTING.md))
|
3. **Write tests first** (see [Testing Guide](docs/guides/testing.md))
|
||||||
4. **Make your changes**
|
4. **Make your changes**
|
||||||
5. **Run tests**: `npm test && npm run e2e`
|
5. **Run tests**: `npm test && npm run e2e`
|
||||||
6. **Commit changes**: `git commit -m "feat: add amazing feature"`
|
6. **Commit changes**: `git commit -m "feat: add amazing feature"`
|
||||||
@@ -219,16 +238,3 @@ community-rule/
|
|||||||
## 📄 License
|
## 📄 License
|
||||||
|
|
||||||
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
|
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
|
||||||
<<<<<<< HEAD
|
|
||||||
|
|
||||||
# Test from working commit
|
|
||||||
|
|
||||||
=======
|
|
||||||
|
|
||||||
# Test trigger
|
|
||||||
|
|
||||||
> > > > > > > bead0c737303fb7e83b3be0c5dbd121b00351b90
|
|
||||||
|
|
||||||
# Test new runner
|
|
||||||
|
|
||||||
# Test host mode
|
|
||||||
|
|||||||
+27
-77
@@ -1,86 +1,42 @@
|
|||||||
# Testing Documentation
|
# Documentation Index
|
||||||
|
|
||||||
This directory contains comprehensive testing documentation for the CommunityRule platform.
|
This directory contains all project documentation organized by topic.
|
||||||
|
|
||||||
## 📚 Documentation Structure
|
## 📚 Documentation Structure
|
||||||
|
|
||||||
### 1. [testing-framework.md](./testing-framework.md) - **Main Guide**
|
### Guides (`guides/`)
|
||||||
|
|
||||||
**Complete testing framework documentation** covering all aspects of testing:
|
Comprehensive guides for different aspects of the project:
|
||||||
|
|
||||||
- Testing architecture and philosophy
|
#### Testing
|
||||||
- Unit, integration, and E2E testing
|
- **[testing.md](./guides/testing.md)** - Complete testing strategy and philosophy
|
||||||
- Visual regression testing
|
- **[testing-framework.md](./guides/testing-framework.md)** - Detailed testing framework documentation
|
||||||
- Accessibility testing
|
- **[testing-quick-reference.md](./guides/testing-quick-reference.md)** - Quick reference for daily development
|
||||||
- Performance testing
|
- **[visual-regression.md](./guides/visual-regression.md)** - Visual regression testing guide
|
||||||
- CI/CD pipeline
|
|
||||||
- Development workflow
|
|
||||||
- Best practices and troubleshooting
|
|
||||||
|
|
||||||
**Use this for**: Learning the testing framework, understanding architecture, comprehensive reference
|
#### Performance
|
||||||
|
- **[performance.md](./guides/performance.md)** - Performance optimization and monitoring guide
|
||||||
|
|
||||||
### 2. [testing-quick-reference.md](./testing-quick-reference.md) - **Quick Reference**
|
#### Content
|
||||||
|
- **[content-creation.md](./guides/content-creation.md)** - Content creation guidelines
|
||||||
|
|
||||||
**Essential commands and quick troubleshooting** for daily development:
|
## 🎯 Quick Navigation
|
||||||
|
|
||||||
- Essential test commands
|
|
||||||
- Current test status and metrics
|
|
||||||
- Common test patterns
|
|
||||||
- Troubleshooting solutions
|
|
||||||
- Performance budgets
|
|
||||||
- CI/CD pipeline overview
|
|
||||||
|
|
||||||
**Use this for**: Daily development, quick commands, troubleshooting, reference
|
|
||||||
|
|
||||||
### 3. [visual-regression-guide.md](./visual-regression-guide.md) - **Visual Testing Guide**
|
|
||||||
|
|
||||||
**Focused guide for visual regression testing**:
|
|
||||||
|
|
||||||
- Visual regression workflow
|
|
||||||
- Snapshot management
|
|
||||||
- Configuration and best practices
|
|
||||||
- Troubleshooting visual test issues
|
|
||||||
- CI/CD integration for visual tests
|
|
||||||
|
|
||||||
**Use this for**: Visual regression testing, snapshot management, visual test troubleshooting
|
|
||||||
|
|
||||||
### 4. [performance-optimization-guide.md](./performance-optimization-guide.md) - **Performance Guide**
|
|
||||||
|
|
||||||
**Comprehensive performance optimization documentation**:
|
|
||||||
|
|
||||||
- Performance targets and metrics
|
|
||||||
- Frontend optimizations (React.memo, code splitting, image optimization)
|
|
||||||
- Performance monitoring and bundle analysis
|
|
||||||
- Web Vitals tracking and dashboard
|
|
||||||
- Performance testing and troubleshooting
|
|
||||||
- Best practices and optimization strategies
|
|
||||||
|
|
||||||
**Use this for**: Performance optimization, monitoring, bundle analysis, Web Vitals tracking
|
|
||||||
|
|
||||||
## 🎯 How to Use These Documents
|
|
||||||
|
|
||||||
### For New Team Members
|
### For New Team Members
|
||||||
|
1. Start with **[testing.md](./guides/testing.md)** to understand the testing strategy
|
||||||
1. Start with **testing-framework.md** to understand the complete testing strategy
|
2. Use **[testing-quick-reference.md](./guides/testing-quick-reference.md)** for daily development
|
||||||
2. Use **testing-quick-reference.md** for daily development
|
3. Reference **[performance.md](./guides/performance.md)** for performance optimization
|
||||||
3. Reference **visual-regression-guide.md** when working with visual tests
|
|
||||||
4. Review **performance-optimization-guide.md** for performance optimization
|
|
||||||
|
|
||||||
### For Daily Development
|
### For Daily Development
|
||||||
|
- **[testing-quick-reference.md](./guides/testing-quick-reference.md)** - Essential commands and troubleshooting
|
||||||
|
- **[testing-framework.md](./guides/testing-framework.md)** - Detailed testing explanations
|
||||||
|
|
||||||
1. Use **testing-quick-reference.md** for commands and troubleshooting
|
### For Specific Topics
|
||||||
2. Reference **testing-framework.md** for detailed explanations
|
- **Visual Testing**: [visual-regression.md](./guides/visual-regression.md)
|
||||||
3. Use **visual-regression-guide.md** for visual test workflows
|
- **Performance**: [performance.md](./guides/performance.md)
|
||||||
4. Use **performance-optimization-guide.md** for performance monitoring
|
- **Content**: [content-creation.md](./guides/content-creation.md)
|
||||||
|
|
||||||
### For Troubleshooting
|
## 📊 Current Project Status
|
||||||
|
|
||||||
1. Check **testing-quick-reference.md** for common solutions
|
|
||||||
2. Use **testing-framework.md** for detailed troubleshooting
|
|
||||||
3. Reference **visual-regression-guide.md** for visual test issues
|
|
||||||
4. Use **performance-optimization-guide.md** for performance issues
|
|
||||||
|
|
||||||
## 📊 Current Testing Status
|
|
||||||
|
|
||||||
- **Unit Tests**: 94.88% coverage (exceeds 85% target)
|
- **Unit Tests**: 94.88% coverage (exceeds 85% target)
|
||||||
- **Integration Tests**: 5 comprehensive test suites
|
- **Integration Tests**: 5 comprehensive test suites
|
||||||
@@ -90,17 +46,10 @@ This directory contains comprehensive testing documentation for the CommunityRul
|
|||||||
- **Performance**: Lighthouse CI with budgets
|
- **Performance**: Lighthouse CI with budgets
|
||||||
- **Bundle Analysis**: Real-time monitoring with budgets
|
- **Bundle Analysis**: Real-time monitoring with budgets
|
||||||
- **Web Vitals Tracking**: Core Web Vitals collection
|
- **Web Vitals Tracking**: Core Web Vitals collection
|
||||||
- **Performance Optimization**: React.memo + code splitting
|
|
||||||
|
|
||||||
## 🔄 Documentation Updates
|
## 🔄 Documentation Updates
|
||||||
|
|
||||||
This documentation is maintained by the CommunityRule development team and updated regularly to reflect:
|
This documentation is maintained by the CommunityRule development team and updated regularly.
|
||||||
|
|
||||||
- Current testing framework status
|
|
||||||
- Best practices and patterns
|
|
||||||
- Troubleshooting solutions
|
|
||||||
- CI/CD pipeline changes
|
|
||||||
- New testing features
|
|
||||||
|
|
||||||
## 📚 Additional Resources
|
## 📚 Additional Resources
|
||||||
|
|
||||||
@@ -108,8 +57,9 @@ This documentation is maintained by the CommunityRule development team and updat
|
|||||||
- **Playwright Documentation**: https://playwright.dev/
|
- **Playwright Documentation**: https://playwright.dev/
|
||||||
- **React Testing Library**: https://testing-library.com/
|
- **React Testing Library**: https://testing-library.com/
|
||||||
- **Lighthouse CI**: https://github.com/GoogleChrome/lighthouse-ci
|
- **Lighthouse CI**: https://github.com/GoogleChrome/lighthouse-ci
|
||||||
|
- **Next.js Documentation**: https://nextjs.org/docs
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
**Last Updated**: December 2024
|
**Last Updated**: January 2025
|
||||||
**Maintained by**: CommunityRule Development Team
|
**Maintained by**: CommunityRule Development Team
|
||||||
|
|||||||
@@ -1,275 +0,0 @@
|
|||||||
# Testing Quick Reference
|
|
||||||
|
|
||||||
## 🚀 Essential Commands
|
|
||||||
|
|
||||||
### Daily Development
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# Run all tests
|
|
||||||
npm test
|
|
||||||
|
|
||||||
# Watch mode (during development)
|
|
||||||
npm run test:watch
|
|
||||||
|
|
||||||
# E2E tests
|
|
||||||
npm run e2e
|
|
||||||
|
|
||||||
# Performance check
|
|
||||||
npm run lhci
|
|
||||||
```
|
|
||||||
|
|
||||||
### Manual Runner Management
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# Start runner (before creating PR)
|
|
||||||
./start-runner.sh
|
|
||||||
|
|
||||||
# Check runner status
|
|
||||||
./status-runner.sh
|
|
||||||
|
|
||||||
# Stop runner (after PR complete)
|
|
||||||
./stop-runner.sh
|
|
||||||
```
|
|
||||||
|
|
||||||
### Visual Regression
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# Update baselines after intentional changes
|
|
||||||
npx playwright test tests/e2e/visual-regression.spec.ts --update-snapshots
|
|
||||||
|
|
||||||
# Check for visual changes
|
|
||||||
npx playwright test tests/e2e/visual-regression.spec.ts
|
|
||||||
```
|
|
||||||
|
|
||||||
### Debugging
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# Debug unit tests
|
|
||||||
npm run test:ui
|
|
||||||
|
|
||||||
# Debug E2E tests
|
|
||||||
npm run e2e:ui
|
|
||||||
|
|
||||||
# Debug with browser
|
|
||||||
npx playwright test --debug
|
|
||||||
```
|
|
||||||
|
|
||||||
## 📝 Writing Tests
|
|
||||||
|
|
||||||
### Unit Test Template
|
|
||||||
|
|
||||||
```jsx
|
|
||||||
// tests/unit/Component.test.jsx
|
|
||||||
import { render, screen } from "@testing-library/react";
|
|
||||||
import { describe, test, expect, afterEach } from "vitest";
|
|
||||||
import { cleanup } from "@testing-library/react";
|
|
||||||
import Component from "../../app/components/Component";
|
|
||||||
|
|
||||||
describe("Component", () => {
|
|
||||||
afterEach(() => cleanup());
|
|
||||||
|
|
||||||
test("renders correctly", () => {
|
|
||||||
render(<Component />);
|
|
||||||
expect(screen.getByRole("button")).toBeInTheDocument();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
```
|
|
||||||
|
|
||||||
### E2E Test Template
|
|
||||||
|
|
||||||
```typescript
|
|
||||||
// tests/e2e/feature.spec.ts
|
|
||||||
import { test, expect } from "@playwright/test";
|
|
||||||
|
|
||||||
test.describe("Feature", () => {
|
|
||||||
test.beforeEach(async ({ page }) => {
|
|
||||||
await page.goto("/");
|
|
||||||
});
|
|
||||||
|
|
||||||
test("should work correctly", async ({ page }) => {
|
|
||||||
await expect(page).toHaveTitle(/CommunityRule/);
|
|
||||||
await expect(page.locator("h1")).toBeVisible();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
```
|
|
||||||
|
|
||||||
## 🔧 Common Testing Patterns
|
|
||||||
|
|
||||||
### Testing User Interactions
|
|
||||||
|
|
||||||
```jsx
|
|
||||||
// Unit test
|
|
||||||
import userEvent from "@testing-library/user-event";
|
|
||||||
|
|
||||||
test("handles user input", async () => {
|
|
||||||
const user = userEvent.setup();
|
|
||||||
render(<Form />);
|
|
||||||
|
|
||||||
await user.type(screen.getByLabelText("Email"), "test@example.com");
|
|
||||||
await user.click(screen.getByRole("button", { name: "Submit" }));
|
|
||||||
|
|
||||||
expect(screen.getByText("Success")).toBeInTheDocument();
|
|
||||||
});
|
|
||||||
```
|
|
||||||
|
|
||||||
### Testing Async Operations
|
|
||||||
|
|
||||||
```jsx
|
|
||||||
// Unit test
|
|
||||||
test("loads data", async () => {
|
|
||||||
render(<DataComponent />);
|
|
||||||
|
|
||||||
expect(screen.getByText("Loading...")).toBeInTheDocument();
|
|
||||||
|
|
||||||
await waitFor(() => {
|
|
||||||
expect(screen.getByText("Data loaded")).toBeInTheDocument();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
```
|
|
||||||
|
|
||||||
### Testing Accessibility
|
|
||||||
|
|
||||||
```typescript
|
|
||||||
// E2E test
|
|
||||||
import { runA11y } from "./axe";
|
|
||||||
|
|
||||||
test("meets accessibility standards", async ({ page }) => {
|
|
||||||
await page.goto("/");
|
|
||||||
const violations = await runA11y(page);
|
|
||||||
expect(violations).toEqual([]);
|
|
||||||
});
|
|
||||||
```
|
|
||||||
|
|
||||||
## 🎯 Test Coverage Targets
|
|
||||||
|
|
||||||
- **Lines**: 85%
|
|
||||||
- **Functions**: 85%
|
|
||||||
- **Statements**: 85%
|
|
||||||
- **Branches**: 80%
|
|
||||||
|
|
||||||
## 🚨 Common Issues & Solutions
|
|
||||||
|
|
||||||
### Unit Tests
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# Issue: JSX not parsing in .js files
|
|
||||||
# Solution: Ensure vitest.config.js has proper esbuild config
|
|
||||||
|
|
||||||
# Issue: Component not rendering
|
|
||||||
# Solution: Check imports and component exports
|
|
||||||
|
|
||||||
# Issue: Test cleanup errors
|
|
||||||
# Solution: Add afterEach(cleanup()) to test suites
|
|
||||||
```
|
|
||||||
|
|
||||||
### E2E Tests
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# Issue: Element not found
|
|
||||||
# Solution: Use semantic selectors (role, text, label)
|
|
||||||
|
|
||||||
# Issue: Test timeout
|
|
||||||
# Solution: Add proper waitFor or waitForLoadState
|
|
||||||
|
|
||||||
# Issue: Multiple elements with same selector
|
|
||||||
# Solution: Use .first(), .nth(), or more specific selectors
|
|
||||||
```
|
|
||||||
|
|
||||||
### Visual Regression
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# Issue: Screenshots don't match
|
|
||||||
# Solution: Check if changes are intentional, then update baselines
|
|
||||||
|
|
||||||
# Issue: Elements not visible
|
|
||||||
# Solution: Ensure elements are in viewport before screenshot
|
|
||||||
```
|
|
||||||
|
|
||||||
## 📊 Performance Budgets
|
|
||||||
|
|
||||||
### Lighthouse CI Targets
|
|
||||||
|
|
||||||
- **Performance Score**: >90
|
|
||||||
- **Accessibility Score**: >95
|
|
||||||
- **Best Practices**: >90
|
|
||||||
- **SEO Score**: >90
|
|
||||||
|
|
||||||
### Core Web Vitals
|
|
||||||
|
|
||||||
- **LCP**: <2.5s
|
|
||||||
- **FID**: <100ms
|
|
||||||
- **CLS**: <0.1
|
|
||||||
|
|
||||||
## 🔄 CI/CD Pipeline Jobs
|
|
||||||
|
|
||||||
1. **Unit Tests** (Node 18, 20)
|
|
||||||
2. **E2E Tests** (Chromium, Firefox, WebKit)
|
|
||||||
3. **Visual Regression Tests**
|
|
||||||
4. **Performance Tests**
|
|
||||||
5. **Storybook Tests**
|
|
||||||
6. **Lint & Format**
|
|
||||||
7. **Build Verification**
|
|
||||||
|
|
||||||
## 📁 Test File Structure
|
|
||||||
|
|
||||||
```
|
|
||||||
tests/
|
|
||||||
├── unit/ # Component tests
|
|
||||||
│ ├── Button.test.jsx
|
|
||||||
│ ├── HeroBanner.test.jsx
|
|
||||||
│ └── ...
|
|
||||||
├── integration/ # Integration tests
|
|
||||||
│ └── ContentLockup.integration.test.jsx
|
|
||||||
└── e2e/ # E2E tests
|
|
||||||
├── homepage.spec.ts
|
|
||||||
├── user-journeys.spec.ts
|
|
||||||
├── edge-cases.spec.ts
|
|
||||||
└── visual-regression.spec.ts
|
|
||||||
```
|
|
||||||
|
|
||||||
## 🎨 Visual Regression Screenshots
|
|
||||||
|
|
||||||
### Generated Screenshots
|
|
||||||
|
|
||||||
- Full page (mobile, tablet, desktop)
|
|
||||||
- Component sections (hero, logo wall, cards)
|
|
||||||
- Interactive states (hover, focus, loading)
|
|
||||||
- Special modes (dark, high contrast, reduced motion)
|
|
||||||
|
|
||||||
### Managing Changes
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# Intentional changes
|
|
||||||
npx playwright test tests/e2e/visual-regression.spec.ts --update-snapshots
|
|
||||||
|
|
||||||
# Review changes
|
|
||||||
npx playwright test tests/e2e/visual-regression.spec.ts
|
|
||||||
```
|
|
||||||
|
|
||||||
## 📈 Monitoring
|
|
||||||
|
|
||||||
### Test Metrics
|
|
||||||
|
|
||||||
- **Unit Tests**: 124 tests
|
|
||||||
- **E2E Tests**: 308 tests (4 browsers)
|
|
||||||
- **Visual Screenshots**: 92 baselines
|
|
||||||
- **Coverage**: >85% target
|
|
||||||
|
|
||||||
### CI Metrics
|
|
||||||
|
|
||||||
- **Pipeline Jobs**: 7 parallel jobs
|
|
||||||
- **Execution Time**: Monitor build performance
|
|
||||||
- **Success Rate**: Track pipeline stability
|
|
||||||
- **Artifacts**: Test results and screenshots
|
|
||||||
|
|
||||||
## 🔗 Useful Links
|
|
||||||
|
|
||||||
- [Full Testing Documentation](TESTING.md)
|
|
||||||
- [Vitest Docs](https://vitest.dev/)
|
|
||||||
- [Playwright Docs](https://playwright.dev/)
|
|
||||||
- [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/)
|
|
||||||
- [Lighthouse CI](https://github.com/GoogleChrome/lighthouse-ci)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
**Quick Reference Version**: December 2024
|
|
||||||
@@ -228,7 +228,7 @@ await page.getByRole("button", { name: "Submit" }).click();
|
|||||||
```bash
|
```bash
|
||||||
# Check Chrome path on macOS
|
# Check Chrome path on macOS
|
||||||
# Ensure arm64 Chrome for Apple Silicon
|
# Ensure arm64 Chrome for Apple Silicon
|
||||||
# Verify performance budgets in .lighthouserc.json
|
# Verify performance budgets in config/lighthouse.json
|
||||||
```
|
```
|
||||||
|
|
||||||
### Unit Test Failures
|
### Unit Test Failures
|
||||||
@@ -345,7 +345,7 @@ git commit -m "Update visual regression snapshots for [describe changes]"
|
|||||||
|
|
||||||
## 🔗 Useful Links
|
## 🔗 Useful Links
|
||||||
|
|
||||||
- **Full Testing Documentation**: [docs/testing-framework.md](./testing-framework.md)
|
- **Full Testing Documentation**: [docs/guides/testing-framework.md](./testing-framework.md)
|
||||||
- **Vitest Docs**: https://vitest.dev/
|
- **Vitest Docs**: https://vitest.dev/
|
||||||
- **Playwright Docs**: https://playwright.dev/
|
- **Playwright Docs**: https://playwright.dev/
|
||||||
- **React Testing Library**: https://testing-library.com/docs/react-testing-library/intro/
|
- **React Testing Library**: https://testing-library.com/docs/react-testing-library/intro/
|
||||||
@@ -379,10 +379,11 @@ Visual regression tests run automatically in the CI pipeline:
|
|||||||
|
|
||||||
## 📚 Additional Resources
|
## 📚 Additional Resources
|
||||||
|
|
||||||
- **Main Testing Documentation**: [testing-framework.md](./testing-framework.md)
|
- **Main Testing Documentation**: [testing-framework.md](./testing-framework.md) | [testing.md](./testing.md)
|
||||||
- **Playwright Visual Testing**: https://playwright.dev/docs/screenshots
|
- **Playwright Visual Testing**: https://playwright.dev/docs/screenshots
|
||||||
- **Visual Regression Best Practices**: https://storybook.js.org/docs/writing-tests/visual-testing
|
- **Visual Regression Best Practices**: https://storybook.js.org/docs/writing-tests/visual-testing
|
||||||
- **CI/CD Integration**: [testing-quick-reference.md](./testing-quick-reference.md)
|
- **CI/CD Integration**: [testing-quick-reference.md](./testing-quick-reference.md)
|
||||||
|
- **Performance Guide**: [performance.md](./performance.md)
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
+1
-1
@@ -9,7 +9,7 @@
|
|||||||
<string>/Users/Vinod/Documents/GitHub/community-rule/act_runner</string>
|
<string>/Users/Vinod/Documents/GitHub/community-rule/act_runner</string>
|
||||||
<string>daemon</string>
|
<string>daemon</string>
|
||||||
<string>--config</string>
|
<string>--config</string>
|
||||||
<string>/Users/Vinod/Documents/GitHub/community-rule/config.yaml</string>
|
<string>/Users/Vinod/Documents/GitHub/community-rule/config/gitea-runner.yaml</string>
|
||||||
</array>
|
</array>
|
||||||
<key>WorkingDirectory</key>
|
<key>WorkingDirectory</key>
|
||||||
<string>/Users/Vinod/Documents/GitHub/community-rule</string>
|
<string>/Users/Vinod/Documents/GitHub/community-rule</string>
|
||||||
|
|||||||
+3
-3
@@ -22,9 +22,9 @@
|
|||||||
"e2e:ui": "playwright test --ui",
|
"e2e:ui": "playwright test --ui",
|
||||||
"e2e:performance": "playwright test tests/e2e/performance.spec.ts",
|
"e2e:performance": "playwright test tests/e2e/performance.spec.ts",
|
||||||
"lhci": "lhci autorun",
|
"lhci": "lhci autorun",
|
||||||
"lhci:mobile": "lhci autorun --config=.lighthouserc.json --settings.preset=mobile",
|
"lhci:mobile": "lhci autorun --config=config/lighthouse.json --settings.preset=mobile",
|
||||||
"lhci:desktop": "lhci autorun --config=.lighthouserc.json --settings.preset=desktop",
|
"lhci:desktop": "lhci autorun --config=config/lighthouse.json --settings.preset=desktop",
|
||||||
"performance:budget": "lhci autorun --budgetPath=performance-budgets.json",
|
"performance:budget": "lhci autorun --budgetPath=config/performance-budgets.json",
|
||||||
"performance:monitor": "node scripts/performance-monitor.js",
|
"performance:monitor": "node scripts/performance-monitor.js",
|
||||||
"test:lhci": "node scripts/test-lhci.js",
|
"test:lhci": "node scripts/test-lhci.js",
|
||||||
"preview": "next build && next start -p 3000",
|
"preview": "next build && next start -p 3000",
|
||||||
|
|||||||
@@ -10,7 +10,7 @@ const fs = require("fs");
|
|||||||
const path = require("path");
|
const path = require("path");
|
||||||
|
|
||||||
const BUNDLE_ANALYSIS_DIR = path.join(__dirname, "..", ".next", "analyze");
|
const BUNDLE_ANALYSIS_DIR = path.join(__dirname, "..", ".next", "analyze");
|
||||||
const PERFORMANCE_BUDGETS = require("../performance-budgets.json");
|
const PERFORMANCE_BUDGETS = require("../config/performance-budgets.json");
|
||||||
|
|
||||||
class BundleAnalyzer {
|
class BundleAnalyzer {
|
||||||
constructor() {
|
constructor() {
|
||||||
|
|||||||
@@ -9,7 +9,7 @@ const { execSync } = require("child_process");
|
|||||||
const fs = require("fs");
|
const fs = require("fs");
|
||||||
const path = require("path");
|
const path = require("path");
|
||||||
|
|
||||||
const PERFORMANCE_BUDGETS = require("../performance-budgets.json");
|
const PERFORMANCE_BUDGETS = require("../config/performance-budgets.json");
|
||||||
const MONITORING_DIR = path.join(__dirname, "..", ".next", "monitoring");
|
const MONITORING_DIR = path.join(__dirname, "..", ".next", "monitoring");
|
||||||
|
|
||||||
class PerformanceMonitor {
|
class PerformanceMonitor {
|
||||||
|
|||||||
@@ -17,12 +17,12 @@ echo "✅ Node.js found: $(which node) - $(node -v)"
|
|||||||
# Check if runner is already running
|
# Check if runner is already running
|
||||||
if pgrep -f "act_runner daemon" > /dev/null; then
|
if pgrep -f "act_runner daemon" > /dev/null; then
|
||||||
echo "⚠️ Runner is already running!"
|
echo "⚠️ Runner is already running!"
|
||||||
echo "To stop it, run: ./stop-runner.sh"
|
echo "To stop it, run: ./scripts/stop-runner.sh"
|
||||||
exit 1
|
exit 1
|
||||||
fi
|
fi
|
||||||
|
|
||||||
# Start the runner in the background with proper PATH
|
# Start the runner in the background with proper PATH
|
||||||
PATH="/usr/local/bin:/opt/homebrew/bin:/usr/bin:/bin:$PATH" ./act_runner daemon --config config.yaml &
|
PATH="/usr/local/bin:/opt/homebrew/bin:/usr/bin:/bin:$PATH" ./act_runner daemon --config config/gitea-runner.yaml &
|
||||||
RUNNER_PID=$!
|
RUNNER_PID=$!
|
||||||
|
|
||||||
# Save PID to file for easy stopping
|
# Save PID to file for easy stopping
|
||||||
@@ -31,5 +31,5 @@ echo $RUNNER_PID > .runner.pid
|
|||||||
echo "✅ Runner started with PID: $RUNNER_PID"
|
echo "✅ Runner started with PID: $RUNNER_PID"
|
||||||
echo "📝 Logs will be written to: runner.log"
|
echo "📝 Logs will be written to: runner.log"
|
||||||
echo ""
|
echo ""
|
||||||
echo "To stop the runner, run: ./stop-runner.sh"
|
echo "To stop the runner, run: ./scripts/stop-runner.sh"
|
||||||
echo "To check status, run: ./status-runner.sh"
|
echo "To check status, run: ./scripts/status-runner.sh"
|
||||||
@@ -15,11 +15,11 @@ if pgrep -f "act_runner daemon" > /dev/null; then
|
|||||||
echo "No log file found"
|
echo "No log file found"
|
||||||
fi
|
fi
|
||||||
echo ""
|
echo ""
|
||||||
echo "To stop the runner: ./stop-runner.sh"
|
echo "To stop the runner: ./scripts/stop-runner.sh"
|
||||||
else
|
else
|
||||||
echo "❌ Runner is NOT RUNNING"
|
echo "❌ Runner is NOT RUNNING"
|
||||||
echo ""
|
echo ""
|
||||||
echo "To start the runner: ./start-runner.sh"
|
echo "To start the runner: ./scripts/start-runner.sh"
|
||||||
fi
|
fi
|
||||||
|
|
||||||
echo ""
|
echo ""
|
||||||
@@ -10,10 +10,10 @@ const path = require("path");
|
|||||||
|
|
||||||
console.log("🔍 Testing LHCI Configuration...\n");
|
console.log("🔍 Testing LHCI Configuration...\n");
|
||||||
|
|
||||||
// Check if .lighthouserc.json exists
|
// Check if config/lighthouse.json exists
|
||||||
const configPath = path.join(process.cwd(), ".lighthouserc.json");
|
const configPath = path.join(process.cwd(), "config/lighthouse.json");
|
||||||
if (fs.existsSync(configPath)) {
|
if (fs.existsSync(configPath)) {
|
||||||
console.log("✅ .lighthouserc.json found");
|
console.log("✅ config/lighthouse.json found");
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const config = JSON.parse(fs.readFileSync(configPath, "utf8"));
|
const config = JSON.parse(fs.readFileSync(configPath, "utf8"));
|
||||||
@@ -30,7 +30,7 @@ if (fs.existsSync(configPath)) {
|
|||||||
console.log("❌ Configuration is not valid JSON:", error.message);
|
console.log("❌ Configuration is not valid JSON:", error.message);
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
console.log("❌ .lighthouserc.json not found");
|
console.log("❌ config/lighthouse.json not found");
|
||||||
}
|
}
|
||||||
|
|
||||||
// Check if @lhci/cli is installed
|
// Check if @lhci/cli is installed
|
||||||
|
|||||||
Reference in New Issue
Block a user