kjh2064
b34b0dd7d6
Validators (Pushes and Pull Requests) / UI & Storage Validation (pull_request) Failing after 12s
Validators (Pushes and Pull Requests) / Database & Schema Validation (pull_request) Successful in 13s
Validators (Pushes and Pull Requests) / Core Validators & Database Setup (pull_request) Failing after 28s
Validators (Pushes and Pull Requests) / WBS & Audit Validations (pull_request) Has been skipped
Validators (Pushes and Pull Requests) / .NET Contracts (pull_request) Has been skipped
Validators (Pushes and Pull Requests) / Calibration & Performance (pull_request) Has been skipped
Validators (Pushes and Pull Requests) / Operational Report & Decision Packet (pull_request) Has been skipped
Validators (Pushes and Pull Requests) / CI Workflow Lint (pull_request) Failing after 10s
Validators (Pushes and Pull Requests) / Security & Secrets (pull_request) Successful in 12s
Validators (Pushes and Pull Requests) / Notify PR Results (pull_request) Successful in 2s
Frontend CI Pipeline / ci-frontend-8-steps (pull_request) Failing after 2m50s
391 lines
8.5 KiB
Markdown
391 lines
8.5 KiB
Markdown
# Phase 1 Step 2: Development Environment Verification
|
|
|
|
**Date**: 2026-08-02 (Week 1, Days 3-5)
|
|
**Duration**: 3 days
|
|
**Success Criteria**: All 5 verification tests PASS ✅
|
|
|
|
---
|
|
|
|
## Verification Checklist
|
|
|
|
### Step 1: npm install ✅
|
|
|
|
```powershell
|
|
# Install all dependencies (takes ~5-10 minutes on first run)
|
|
npm install
|
|
|
|
# Expected output:
|
|
# added NNN packages, and audited NNNN packages in XXs
|
|
# ✅ 0 vulnerabilities detected (or audit warnings only)
|
|
```
|
|
|
|
**Verification**:
|
|
```powershell
|
|
npm list | head -20
|
|
# Should show tree of installed packages
|
|
# Key packages must be present:
|
|
# ├── vue@3.4.0
|
|
# ├── vue-router@4.3.0
|
|
# ├── pinia@2.1.0
|
|
# ├── axios@1.7.0
|
|
# ├── @tabler/core@1.0.0
|
|
# ├── @storybook/vue3@8.0.0
|
|
# └── vitest@1.0.0
|
|
```
|
|
|
|
---
|
|
|
|
### Step 2: npm run dev (Vite Dev Server) ✅
|
|
|
|
```powershell
|
|
# Terminal 1: Start development server
|
|
npm run dev
|
|
|
|
# Expected output:
|
|
# ➜ Local: http://localhost:5173/
|
|
# ➜ Press q to quit
|
|
```
|
|
|
|
**Verification**:
|
|
```powershell
|
|
# Terminal 2: Test HTTP response
|
|
curl -s http://localhost:5173/ | head -5
|
|
# Should return HTML with:
|
|
# <!DOCTYPE html>
|
|
# <html lang="en">
|
|
# <head>
|
|
# <meta charset="UTF-8" />
|
|
|
|
# Or use browser: http://localhost:5173/
|
|
# Page should show:
|
|
# - Title: "OMS·WMS·ERP Platform"
|
|
# - Navbar with "Orders", "Inventory", "Products" links
|
|
# - Dashboard card with "Phase 1: Dev Environment Setup"
|
|
# - No console errors (F12 > Console)
|
|
```
|
|
|
|
**Exit**: Press `q` in Terminal 1
|
|
|
|
---
|
|
|
|
### Step 3: npm run storybook (Storybook Server) ✅
|
|
|
|
```powershell
|
|
# Terminal 1: Start Storybook
|
|
npm run storybook
|
|
|
|
# Expected output:
|
|
# 📚 Storybook started
|
|
# ➜ Local: http://localhost:6006/
|
|
```
|
|
|
|
**Verification**:
|
|
```powershell
|
|
# Terminal 2: Test Storybook API
|
|
curl -s http://localhost:6006/ | grep -o "Storybook" | head -1
|
|
# Should output: Storybook
|
|
|
|
# Or use browser: http://localhost:6006/
|
|
# Page should show:
|
|
# - Storybook UI with sidebar
|
|
# - "Primitives" section with "Button" component
|
|
# - 7 story items:
|
|
# - Primary
|
|
# - Secondary
|
|
# - Danger
|
|
# - Small
|
|
# - Large
|
|
# - Disabled
|
|
# - Loading
|
|
# - Controls panel to modify props
|
|
# - Accessibility tab (axe audit)
|
|
```
|
|
|
|
**Exit**: Press `q` in Terminal 1
|
|
|
|
---
|
|
|
|
### Step 4: npm run lint (ESLint + Format Check) ✅
|
|
|
|
```powershell
|
|
# Run ESLint with auto-fix
|
|
npm run lint
|
|
|
|
# Expected output:
|
|
# ✓ Linting and formatting complete
|
|
# or
|
|
# 0 errors and 0 warnings
|
|
```
|
|
|
|
**Verification**: No errors should be reported
|
|
|
|
**If errors occur**:
|
|
```powershell
|
|
# Check specific file
|
|
npx eslint src/components/primitives/Button/ButtonBase.vue --fix
|
|
|
|
# Check all files with detailed output
|
|
npm run lint -- --debug
|
|
|
|
# Common fixes:
|
|
# - Remove unused imports
|
|
# - Fix missing semicolons
|
|
# - Correct spacing/indentation
|
|
# - Fix TypeScript type errors (no `any`)
|
|
```
|
|
|
|
---
|
|
|
|
### Step 5: npm run type-check (TypeScript Verification) ✅
|
|
|
|
```powershell
|
|
# Run TypeScript compiler in check mode (no emit)
|
|
npm run type-check
|
|
|
|
# Expected output:
|
|
# ✓ No TypeScript errors
|
|
# or
|
|
# 0 errors
|
|
```
|
|
|
|
**Verification**: 0 TypeScript errors reported
|
|
|
|
**If errors occur**:
|
|
```powershell
|
|
# Show detailed error messages
|
|
npx vue-tsc --noEmit --pretty
|
|
|
|
# Common issues:
|
|
# - Missing type definitions
|
|
# - Incorrect prop types
|
|
# - Unused variables
|
|
```
|
|
|
|
---
|
|
|
|
### Step 6: npm run test:unit (Unit Tests) ✅
|
|
|
|
```powershell
|
|
# Run Vitest for unit tests
|
|
npm run test:unit
|
|
|
|
# Expected output:
|
|
# ✓ src/components/primitives/Button/ButtonBase.spec.ts (8)
|
|
# ✓ Tests passed
|
|
# Coverage: XXX% statements, XXX% branches, XXX% functions, XXX% lines
|
|
```
|
|
|
|
**Verification**: All 8 tests for ButtonBase should PASS
|
|
|
|
**Sample test output**:
|
|
```
|
|
✓ src/components/primitives/Button/ButtonBase.spec.ts (8)
|
|
✓ renders button with text
|
|
✓ applies variant class
|
|
✓ applies size class
|
|
✓ emits click event
|
|
✓ disables button when disabled prop is true
|
|
✓ disables button when loading prop is true
|
|
✓ shows spinner when loading
|
|
✓ sets aria-label when provided
|
|
|
|
Test Files 1 passed (1)
|
|
Tests 8 passed (8)
|
|
Duration XXXms
|
|
```
|
|
|
|
**If tests fail**:
|
|
```powershell
|
|
# Run with verbose output
|
|
npm run test:unit -- --reporter=verbose
|
|
|
|
# Debug specific test
|
|
npm run test:unit -- ButtonBase.spec.ts
|
|
|
|
# Watch mode for development
|
|
npm run test:unit -- --watch
|
|
```
|
|
|
|
---
|
|
|
|
### Step 7: npm run build (Production Build) ✅
|
|
|
|
```powershell
|
|
# Build for production
|
|
npm run build
|
|
|
|
# Expected output:
|
|
# ✓ 123 modules transformed
|
|
# dist/index.html 1.00 kB │ gzip: 0.50 kB
|
|
# dist/assets/... XXX.00 kB │ gzip: XXX.00 kB
|
|
# ✓ built in XXXms
|
|
```
|
|
|
|
**Verification**:
|
|
```powershell
|
|
# Check dist folder
|
|
ls -lh dist/
|
|
|
|
# Should create:
|
|
# - index.html (~1KB)
|
|
# - assets/main-*.js (~150-200KB gzipped)
|
|
# - assets/main-*.css (~20-50KB gzipped)
|
|
# - assets/tabler-*.js (~200KB gzipped)
|
|
# - assets/vendor-*.js (~100KB gzipped)
|
|
|
|
# Verify bundle size
|
|
du -sh dist/
|
|
# Should be <500MB total
|
|
|
|
# Test production build locally
|
|
npx vite preview
|
|
# Should serve dist/ on http://localhost:4173/
|
|
```
|
|
|
|
**If build fails**:
|
|
```powershell
|
|
# Clear cache
|
|
rm -r node_modules/.vite
|
|
npm run build -- --force
|
|
|
|
# Check for large dependencies
|
|
npm ls --depth=0
|
|
|
|
# Analyze bundle
|
|
npm install -D rollup-plugin-visualizer
|
|
# (add to vite.config.ts)
|
|
npm run build -- --analyze
|
|
```
|
|
|
|
---
|
|
|
|
### Step 8: npm run build-storybook (Storybook Build) ✅
|
|
|
|
```powershell
|
|
# Build Storybook for static hosting
|
|
npm run build-storybook
|
|
|
|
# Expected output:
|
|
# ✓ build
|
|
# ✓ manager bundle built
|
|
# ✓ preview bundle built
|
|
# info => Copying static files
|
|
# info => Storybook static files available
|
|
```
|
|
|
|
**Verification**:
|
|
```powershell
|
|
# Check storybook-static folder
|
|
ls -lh storybook-static/
|
|
|
|
# Should create:
|
|
# - index.html
|
|
# - assets/ (CSS + JS)
|
|
# - iframe.html
|
|
# - etc.
|
|
|
|
# Test locally
|
|
npx http-server storybook-static -p 8080
|
|
# Open http://localhost:8080/
|
|
# All stories should render correctly
|
|
```
|
|
|
|
---
|
|
|
|
## Full Verification Flow (Time: ~30-40 minutes)
|
|
|
|
```powershell
|
|
# 1. Install (5-10 min) - one time only
|
|
npm install
|
|
|
|
# 2. Dev server (5 min)
|
|
# Terminal 1
|
|
npm run dev
|
|
# Terminal 2
|
|
curl http://localhost:5173/ # Should return HTML
|
|
# Ctrl+C to stop
|
|
|
|
# 3. Storybook (5 min)
|
|
# Terminal 1
|
|
npm run storybook
|
|
# Terminal 2
|
|
curl http://localhost:6006/ # Should return HTML
|
|
# Ctrl+C to stop
|
|
|
|
# 4. Lint (2 min)
|
|
npm run lint # Should pass with 0 errors
|
|
|
|
# 5. Type-check (2 min)
|
|
npm run type-check # Should pass with 0 errors
|
|
|
|
# 6. Unit tests (3 min)
|
|
npm run test:unit # Should pass 8/8 tests
|
|
|
|
# 7. Build (5 min)
|
|
npm run build # Should create dist/ <500MB
|
|
|
|
# 8. Storybook build (3 min)
|
|
npm run build-storybook # Should create storybook-static/
|
|
|
|
# Total: ~30-40 minutes
|
|
```
|
|
|
|
---
|
|
|
|
## Success Criteria: Phase 1 Step 2 Complete ✅
|
|
|
|
All 8 tests must PASS:
|
|
|
|
- ✅ **npm install**: All dependencies installed, 0 vulnerabilities (or audit warnings only)
|
|
- ✅ **npm run dev**: Dev server starts on http://localhost:5173/ with live reload
|
|
- ✅ **npm run storybook**: Storybook starts on http://localhost:6006/ with all stories rendering
|
|
- ✅ **npm run lint**: ESLint passes with 0 errors, all files auto-formatted
|
|
- ✅ **npm run type-check**: TypeScript strict mode passes with 0 errors
|
|
- ✅ **npm run test:unit**: All 8 ButtonBase unit tests PASS
|
|
- ✅ **npm run build**: Production build succeeds, dist/ <500MB gzipped
|
|
- ✅ **npm run build-storybook**: Storybook static build succeeds
|
|
|
|
---
|
|
|
|
## Next: Phase 1 Step 3
|
|
|
|
Once all verifications PASS:
|
|
|
|
1. **Add remaining 25 Primitive components** (Week 1-2)
|
|
- Input, Select, Table, Card, Badge, Modal, Checkbox, Radio, etc.
|
|
- 180 Storybook stories
|
|
- Unit tests (70%+ coverage)
|
|
|
|
2. **Setup pre-commit hooks** (Week 1)
|
|
- husky + lint-staged
|
|
- Auto-lint on git commit
|
|
|
|
3. **Deploy Storybook** (Week 2)
|
|
- GitHub Pages or Chromatic
|
|
- Automatic on every push
|
|
|
|
4. **CI/CD Pipeline** (Week 2)
|
|
- GitHub Actions: lint → test → build
|
|
- Automated on every PR/push
|
|
|
|
---
|
|
|
|
## Troubleshooting
|
|
|
|
| Issue | Solution |
|
|
|-------|----------|
|
|
| **npm install fails** | `npm cache clean --force` then retry |
|
|
| **Port 5173 already in use** | `npm run dev -- --port 5174` |
|
|
| **Port 6006 already in use** | `npm run storybook -- -p 6007` |
|
|
| **ESLint errors** | `npm run lint -- --fix` |
|
|
| **TypeScript errors** | `npm run type-check` to see detailed errors |
|
|
| **Tests timeout** | `npm run test:unit -- --timeout=20000` |
|
|
| **Build exceeds 500MB** | Check `npm ls --depth=0` for large dependencies |
|
|
| **Storybook won't start** | Clear `.storybook/.cache/`: `rm -rf .storybook/.cache` |
|
|
|
|
---
|
|
|
|
**Status**: 🚀 Phase 1 Step 2 Verification Ready
|
|
**Owner**: Frontend Team Lead
|
|
**Target Date**: 2026-08-05 (all verifications passing)
|