Skip to content

Commit ce2d372

Browse files
thanhdevappthanhdevapp
committed
ci: Configure Vitest unit testing, coverage reporting, and CI workflow.
1 parent 4bf2592 commit ce2d372

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

52 files changed

+10341
-6
lines changed

‎.github/workflows/ci.yml‎

Lines changed: 51 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,14 @@ name: CI
22

33
on:
44
push:
5-
branches: [main, dev-mvp]
5+
branches: [main, dev-mvp, feat/wails-v2-migration]
66
pull_request:
7-
branches: [main]
7+
branches: [main, dev-mvp]
88

99
jobs:
10-
build:
10+
# Backend tests (Go)
11+
backend:
12+
name: Backend Tests
1113
runs-on: ubuntu-latest
1214
steps:
1315
- uses: actions/checkout@v4
@@ -23,7 +25,53 @@ jobs:
2325
- name: Test
2426
run: go test -v ./...
2527

28+
# Frontend tests (React + TypeScript)
29+
frontend:
30+
name: Frontend Tests
31+
runs-on: ubuntu-latest
32+
defaults:
33+
run:
34+
working-directory: ./frontend
35+
steps:
36+
- uses: actions/checkout@v4
37+
38+
- name: Setup Node.js
39+
uses: actions/setup-node@v4
40+
with:
41+
node-version: '18'
42+
cache: 'npm'
43+
cache-dependency-path: './frontend/package-lock.json'
44+
45+
- name: Install dependencies
46+
run: npm ci
47+
48+
- name: Run TypeScript check
49+
run: npx tsc --noEmit
50+
51+
- name: Run tests
52+
run: npm run test:run
53+
54+
- name: Generate coverage report
55+
run: npm run test:coverage
56+
57+
- name: Upload coverage to Codecov
58+
uses: codecov/codecov-action@v4
59+
with:
60+
directory: ./frontend/coverage
61+
flags: frontend
62+
token: ${{ secrets.CODECOV_TOKEN }}
63+
fail_ci_if_error: false
64+
65+
- name: Upload coverage artifacts
66+
uses: actions/upload-artifact@v4
67+
with:
68+
name: coverage-report
69+
path: ./frontend/coverage
70+
retention-days: 7
71+
72+
# Linting
2673
lint:
74+
name: Go Lint
2775
runs-on: ubuntu-latest
2876
steps:
2977
- uses: actions/checkout@v4

‎README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44
55
[![Go Version](https://img.shields.io/badge/Go-1.21+-00ADD8?style=flat-square&logo=go)](https://golang.org/)
66
[![Release](https://img.shields.io/github/v/release/thanhdevapp/mac-dev-cleaner-cli?style=flat-square)](https://github.com/thanhdevapp/mac-dev-cleaner-cli/releases)
7+
[![CI](https://img.shields.io/github/actions/workflow/status/thanhdevapp/mac-dev-cleaner-cli/ci.yml?branch=dev-mvp&style=flat-square&label=CI)](https://github.com/thanhdevapp/mac-dev-cleaner-cli/actions/workflows/ci.yml)
8+
[![codecov](https://img.shields.io/codecov/c/github/thanhdevapp/mac-dev-cleaner-cli?style=flat-square&token=YOUR_CODECOV_TOKEN)](https://codecov.io/gh/thanhdevapp/mac-dev-cleaner-cli)
79
[![License](https://img.shields.io/badge/License-MIT-green?style=flat-square)](LICENSE)
810

911
## Overview

‎frontend/CI_CD_SETUP.md‎

Lines changed: 244 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,244 @@
1+
# CI/CD Setup Documentation
2+
3+
This document explains the CI/CD pipeline configuration for the Mac Dev Cleaner project.
4+
5+
## Overview
6+
7+
The project uses **GitHub Actions** for continuous integration and deployment. The pipeline includes:
8+
9+
- ✅ Backend tests (Go)
10+
- ✅ Frontend tests (React + TypeScript)
11+
- ✅ Code coverage reporting
12+
- ✅ Linting
13+
- ✅ Automated releases
14+
15+
## CI Workflow (`.github/workflows/ci.yml`)
16+
17+
### Triggers
18+
19+
The CI workflow runs on:
20+
- **Push** to branches: `main`, `dev-mvp`, `feat/wails-v2-migration`
21+
- **Pull requests** to: `main`, `dev-mvp`
22+
23+
### Jobs
24+
25+
#### 1. Backend Tests
26+
- **Runner:** Ubuntu Latest
27+
- **Steps:**
28+
1. Checkout code
29+
2. Set up Go 1.21
30+
3. Build Go application
31+
4. Run Go tests
32+
33+
#### 2. Frontend Tests
34+
- **Runner:** Ubuntu Latest
35+
- **Working Directory:** `./frontend`
36+
- **Steps:**
37+
1. Checkout code
38+
2. Set up Node.js 18 with npm cache
39+
3. Install dependencies (`npm ci`)
40+
4. TypeScript type checking (`npx tsc --noEmit`)
41+
5. Run tests (`npm run test:run`)
42+
6. Generate coverage report (`npm run test:coverage`)
43+
7. Upload coverage to Codecov
44+
8. Upload coverage artifacts (7-day retention)
45+
46+
#### 3. Go Lint
47+
- **Runner:** Ubuntu Latest
48+
- **Steps:**
49+
1. Checkout code
50+
2. Set up Go 1.21
51+
3. Run golangci-lint
52+
53+
## Coverage Configuration
54+
55+
### Vitest Coverage (`frontend/vitest.config.ts`)
56+
57+
```typescript
58+
coverage: {
59+
provider: 'v8',
60+
reporter: ['text', 'json', 'html', 'lcov'],
61+
exclude: [
62+
'node_modules/',
63+
'src/test/',
64+
'**/*.test.{ts,tsx}',
65+
'**/*.spec.{ts,tsx}',
66+
'dist/',
67+
'vite.config.ts',
68+
'vitest.config.ts',
69+
'wailsjs/',
70+
],
71+
}
72+
```
73+
74+
### Coverage Reports
75+
76+
Coverage is reported in multiple formats:
77+
- **text** - Terminal output
78+
- **json** - Machine-readable
79+
- **html** - Visual HTML report (in `coverage/` directory)
80+
- **lcov** - For Codecov integration
81+
82+
### Current Coverage Status
83+
84+
As of last run:
85+
- **Overall:** 57.86% statements, 46.8% branches
86+
- **Tested Components:** 100% coverage
87+
- `utils.ts` - 100%
88+
- `ui-store.ts` - 100%
89+
- `button.tsx` - 100%
90+
91+
**Coverage Gaps:**
92+
- `clean-dialog.tsx` - 23% (needs tests)
93+
- `toolbar.tsx` - 69% (partial coverage)
94+
- Other components - 0% (not yet tested)
95+
96+
## Setup Requirements
97+
98+
### 1. Codecov Integration (Optional)
99+
100+
To enable coverage badges:
101+
102+
1. Sign up at [codecov.io](https://codecov.io)
103+
2. Add your repository
104+
3. Get your `CODECOV_TOKEN`
105+
4. Add as GitHub Secret:
106+
- Go to: `Settings` → `Secrets and variables` → `Actions`
107+
- Create: `CODECOV_TOKEN` = `your-token`
108+
109+
5. Update README badge with your token:
110+
```markdown
111+
[![codecov](https://img.shields.io/codecov/c/github/thanhdevapp/mac-dev-cleaner-cli?style=flat-square&token=YOUR_TOKEN)](https://codecov.io/gh/thanhdevapp/mac-dev-cleaner-cli)
112+
```
113+
114+
### 2. Local Testing
115+
116+
Before pushing, test locally:
117+
118+
```bash
119+
# Backend tests
120+
go test ./...
121+
122+
# Frontend tests
123+
cd frontend
124+
npm run test:run
125+
126+
# Coverage
127+
npm run test:coverage
128+
129+
# TypeScript check
130+
npx tsc --noEmit
131+
```
132+
133+
## CI/CD Best Practices
134+
135+
### ✅ Do's
136+
137+
1. **Run tests locally** before pushing
138+
2. **Write tests** for new features
139+
3. **Keep builds fast** (< 5 minutes)
140+
4. **Fix failing tests** immediately
141+
5. **Monitor coverage trends** (aim for 70%+)
142+
143+
### ❌ Don'ts
144+
145+
1. **Don't skip tests** with `[skip ci]`
146+
2. **Don't commit failing tests**
147+
3. **Don't decrease coverage** without justification
148+
4. **Don't ignore CI failures**
149+
5. **Don't push untested code**
150+
151+
## Troubleshooting
152+
153+
### CI Failure: "npm ci" fails
154+
155+
**Solution:** Update `package-lock.json`:
156+
```bash
157+
cd frontend
158+
rm package-lock.json
159+
npm install
160+
git add package-lock.json
161+
git commit -m "chore: update package-lock.json"
162+
```
163+
164+
### CI Failure: Tests fail on CI but pass locally
165+
166+
**Common causes:**
167+
1. **Environment differences** - Check Node.js version
168+
2. **Missing dependencies** - Run `npm ci` locally
169+
3. **Timezone issues** - Use UTC in tests
170+
4. **Race conditions** - Fix non-deterministic tests
171+
172+
**Debug:**
173+
```bash
174+
# Run tests in CI-like environment
175+
cd frontend
176+
rm -rf node_modules
177+
npm ci
178+
npm run test:run
179+
```
180+
181+
### Coverage Upload Fails
182+
183+
**Solution:**
184+
1. Check `CODECOV_TOKEN` is set correctly
185+
2. Verify coverage files exist: `ls frontend/coverage`
186+
3. Check Codecov status: https://status.codecov.io
187+
188+
## Future Enhancements
189+
190+
### Planned Improvements
191+
192+
1. **Coverage Thresholds**
193+
- Uncomment in `vitest.config.ts`
194+
- Fail CI if coverage drops below 70%
195+
196+
2. **E2E Tests**
197+
- Add Playwright tests
198+
- Run in separate job
199+
200+
3. **Visual Regression Testing**
201+
- Add Percy or Chromatic
202+
- Test UI changes automatically
203+
204+
4. **Performance Monitoring**
205+
- Add Lighthouse CI
206+
- Track performance metrics
207+
208+
5. **Automated Security Scanning**
209+
- Add Snyk or Dependabot
210+
- Scan for vulnerabilities
211+
212+
## Monitoring
213+
214+
### GitHub Actions Dashboard
215+
216+
Monitor CI runs at:
217+
```
218+
https://github.com/thanhdevapp/mac-dev-cleaner-cli/actions
219+
```
220+
221+
### Coverage Reports
222+
223+
View coverage at:
224+
```
225+
https://codecov.io/gh/thanhdevapp/mac-dev-cleaner-cli
226+
```
227+
228+
### Status Badges
229+
230+
Badges in README show:
231+
- ✅ CI passing/failing
232+
- 📊 Code coverage percentage
233+
- 🏷️ Latest release version
234+
235+
## Contact
236+
237+
For CI/CD issues, contact:
238+
- **Email:** [email protected]
239+
- **GitHub:** @thanhdevapp
240+
241+
---
242+
243+
**Last Updated:** 2025-12-16
244+
**Maintained by:** Dev Team

0 commit comments

Comments
 (0)