Project cleanup and reorganization

This commit is contained in:
adilallo
2026-01-26 15:41:25 -07:00
parent f513aecacc
commit 94a7922b30
24 changed files with 83 additions and 420 deletions
+1 -1
View File
@@ -453,7 +453,7 @@ jobs:
# Run LHCI with arm64 Node + arm64 Chrome
# 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
env:
+4
View File
@@ -17,6 +17,9 @@
/test-results/
/playwright-report/
# Lighthouse CI results
/lhci-results/
# Ignore other image files (but not visual regression snapshots)
*.png
*.jpg
@@ -57,6 +60,7 @@ yarn-error.log*
# typescript
*.tsbuildinfo
tsconfig.tsbuildinfo
next-env.d.ts
*storybook.log
-23
View File
@@ -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"
}
}
}
+31 -25
View File
@@ -56,7 +56,7 @@ npm run monitor:all # All monitoring tools
- **Performance monitoring**
- **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
@@ -167,18 +167,35 @@ The Storybook configuration automatically detects the environment:
community-rule/
├── app/ # Next.js app directory
│ ├── components/ # React components
│ ├── layout.js # Root layout
── page.js # Homepage
├── tests/ # Test files
│ ├── unit/ # Unit tests (8 components)
│ ├── hooks/ # Custom React hooks
── layout.tsx # Root layout
│ └── page.tsx # Homepage
├── 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
── e2e/ # E2E tests (4 test suites)
├── docs/ # Documentation
│ └── TESTING.md # Comprehensive testing guide
── e2e/ # E2E tests
│ └── accessibility/ # Accessibility tests
├── .storybook/ # Storybook configuration
├── .gitea/ # Gitea Actions workflows
│ └── workflows/
│ └── ci.yml # CI/CD pipeline
│ └── ci.yaml # CI/CD pipeline
└── public/ # Static assets
```
@@ -193,15 +210,17 @@ community-rule/
## 📖 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)
- **[GitHub Pages Storybook](https://your-username.github.io/communityrulestorybook/)** - Public component docs
## 🤝 Contributing
1. **Fork the repository**
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**
5. **Run tests**: `npm test && npm run e2e`
6. **Commit changes**: `git commit -m "feat: add amazing feature"`
@@ -219,16 +238,3 @@ community-rule/
## 📄 License
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
View File
@@ -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
### 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
- Unit, integration, and E2E testing
- Visual regression testing
- Accessibility testing
- Performance testing
- CI/CD pipeline
- Development workflow
- Best practices and troubleshooting
#### Testing
- **[testing.md](./guides/testing.md)** - Complete testing strategy and philosophy
- **[testing-framework.md](./guides/testing-framework.md)** - Detailed testing framework documentation
- **[testing-quick-reference.md](./guides/testing-quick-reference.md)** - Quick reference for daily development
- **[visual-regression.md](./guides/visual-regression.md)** - Visual regression testing guide
**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:
- 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
## 🎯 Quick Navigation
### For New Team Members
1. Start with **testing-framework.md** to understand the complete testing strategy
2. Use **testing-quick-reference.md** for daily development
3. Reference **visual-regression-guide.md** when working with visual tests
4. Review **performance-optimization-guide.md** for performance optimization
1. Start with **[testing.md](./guides/testing.md)** to understand the testing strategy
2. Use **[testing-quick-reference.md](./guides/testing-quick-reference.md)** for daily development
3. Reference **[performance.md](./guides/performance.md)** for performance optimization
### 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
2. Reference **testing-framework.md** for detailed explanations
3. Use **visual-regression-guide.md** for visual test workflows
4. Use **performance-optimization-guide.md** for performance monitoring
### For Specific Topics
- **Visual Testing**: [visual-regression.md](./guides/visual-regression.md)
- **Performance**: [performance.md](./guides/performance.md)
- **Content**: [content-creation.md](./guides/content-creation.md)
### For Troubleshooting
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
## 📊 Current Project Status
- **Unit Tests**: 94.88% coverage (exceeds 85% target)
- **Integration Tests**: 5 comprehensive test suites
@@ -90,17 +46,10 @@ This directory contains comprehensive testing documentation for the CommunityRul
- **Performance**: Lighthouse CI with budgets
- **Bundle Analysis**: Real-time monitoring with budgets
- **Web Vitals Tracking**: Core Web Vitals collection
- **Performance Optimization**: React.memo + code splitting
## 🔄 Documentation Updates
This documentation is maintained by the CommunityRule development team and updated regularly to reflect:
- Current testing framework status
- Best practices and patterns
- Troubleshooting solutions
- CI/CD pipeline changes
- New testing features
This documentation is maintained by the CommunityRule development team and updated regularly.
## 📚 Additional Resources
@@ -108,8 +57,9 @@ This documentation is maintained by the CommunityRule development team and updat
- **Playwright Documentation**: https://playwright.dev/
- **React Testing Library**: https://testing-library.com/
- **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
-275
View File
@@ -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
# Check Chrome path on macOS
# Ensure arm64 Chrome for Apple Silicon
# Verify performance budgets in .lighthouserc.json
# Verify performance budgets in config/lighthouse.json
```
### Unit Test Failures
@@ -345,7 +345,7 @@ git commit -m "Update visual regression snapshots for [describe changes]"
## 🔗 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/
- **Playwright Docs**: https://playwright.dev/
- **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
- **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
- **Visual Regression Best Practices**: https://storybook.js.org/docs/writing-tests/visual-testing
- **CI/CD Integration**: [testing-quick-reference.md](./testing-quick-reference.md)
- **Performance Guide**: [performance.md](./performance.md)
---
+1 -1
View File
@@ -9,7 +9,7 @@
<string>/Users/Vinod/Documents/GitHub/community-rule/act_runner</string>
<string>daemon</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>
<key>WorkingDirectory</key>
<string>/Users/Vinod/Documents/GitHub/community-rule</string>
+3 -3
View File
@@ -22,9 +22,9 @@
"e2e:ui": "playwright test --ui",
"e2e:performance": "playwright test tests/e2e/performance.spec.ts",
"lhci": "lhci autorun",
"lhci:mobile": "lhci autorun --config=.lighthouserc.json --settings.preset=mobile",
"lhci:desktop": "lhci autorun --config=.lighthouserc.json --settings.preset=desktop",
"performance:budget": "lhci autorun --budgetPath=performance-budgets.json",
"lhci:mobile": "lhci autorun --config=config/lighthouse.json --settings.preset=mobile",
"lhci:desktop": "lhci autorun --config=config/lighthouse.json --settings.preset=desktop",
"performance:budget": "lhci autorun --budgetPath=config/performance-budgets.json",
"performance:monitor": "node scripts/performance-monitor.js",
"test:lhci": "node scripts/test-lhci.js",
"preview": "next build && next start -p 3000",
+1 -1
View File
@@ -10,7 +10,7 @@ const fs = require("fs");
const path = require("path");
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 {
constructor() {
+1 -1
View File
@@ -9,7 +9,7 @@ const { execSync } = require("child_process");
const fs = require("fs");
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");
class PerformanceMonitor {
+4 -4
View File
@@ -17,12 +17,12 @@ echo "✅ Node.js found: $(which node) - $(node -v)"
# Check if runner is already running
if pgrep -f "act_runner daemon" > /dev/null; then
echo "⚠️ Runner is already running!"
echo "To stop it, run: ./stop-runner.sh"
echo "To stop it, run: ./scripts/stop-runner.sh"
exit 1
fi
# 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=$!
# Save PID to file for easy stopping
@@ -31,5 +31,5 @@ echo $RUNNER_PID > .runner.pid
echo "✅ Runner started with PID: $RUNNER_PID"
echo "📝 Logs will be written to: runner.log"
echo ""
echo "To stop the runner, run: ./stop-runner.sh"
echo "To check status, run: ./status-runner.sh"
echo "To stop the runner, run: ./scripts/stop-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"
fi
echo ""
echo "To stop the runner: ./stop-runner.sh"
echo "To stop the runner: ./scripts/stop-runner.sh"
else
echo "❌ Runner is NOT RUNNING"
echo ""
echo "To start the runner: ./start-runner.sh"
echo "To start the runner: ./scripts/start-runner.sh"
fi
echo ""
+4 -4
View File
@@ -10,10 +10,10 @@ const path = require("path");
console.log("🔍 Testing LHCI Configuration...\n");
// Check if .lighthouserc.json exists
const configPath = path.join(process.cwd(), ".lighthouserc.json");
// Check if config/lighthouse.json exists
const configPath = path.join(process.cwd(), "config/lighthouse.json");
if (fs.existsSync(configPath)) {
console.log("✅ .lighthouserc.json found");
console.log("✅ config/lighthouse.json found");
try {
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);
}
} else {
console.log("❌ .lighthouserc.json not found");
console.log("❌ config/lighthouse.json not found");
}
// Check if @lhci/cli is installed