docs: map existing codebase
This commit is contained in:
@@ -0,0 +1,204 @@
|
||||
# Testing Patterns
|
||||
|
||||
**Analysis Date:** 2026-04-07
|
||||
|
||||
## Test Framework
|
||||
|
||||
**Status:** NOT IMPLEMENTED
|
||||
|
||||
No testing framework is currently configured in this project. There are:
|
||||
- No test files (no `.test.ts`, `.spec.ts`, `.test.vue`, or `.spec.vue` files found)
|
||||
- No test runner configured (Jest, Vitest, Cypress, Playwright, etc.)
|
||||
- No test configuration files in project root
|
||||
|
||||
**Recommendations for Implementation:**
|
||||
|
||||
Given this is a Vue 3 + TypeScript portfolio, recommended testing setup would be:
|
||||
|
||||
1. **Unit Testing:** Vitest (modern, Vue 3 native, fast)
|
||||
- Lightweight alternative to Jest
|
||||
- Built-in TypeScript support
|
||||
- Fast HMR for test-driven development
|
||||
|
||||
2. **Component Testing:** Vitest + `@vue/test-utils`
|
||||
- Test Vue components in isolation
|
||||
- Mock composables and routing
|
||||
|
||||
3. **E2E Testing:** Playwright or Cypress
|
||||
- Full user journey testing
|
||||
- SEO/routing validation
|
||||
- Analytics tracking verification
|
||||
|
||||
## Current Development Practices
|
||||
|
||||
**Build Pipeline:**
|
||||
```bash
|
||||
npm run type-check # Vue TypeScript compilation check
|
||||
npm run build # Production build with type checking
|
||||
npm run lint # ESLint with --fix flag
|
||||
npm run format # Prettier formatting on src/
|
||||
npm run dev # Vite dev server
|
||||
```
|
||||
|
||||
**Type Safety as Testing:**
|
||||
- Type-checking replaces some unit test coverage
|
||||
- `npm run type-check` validates all TypeScript during build
|
||||
- ESLint prevents common errors with Vue and TypeScript plugins
|
||||
|
||||
## What Should Be Tested (If Framework Were Added)
|
||||
|
||||
### Composables (`src/composables/`)
|
||||
|
||||
**`useTheme.ts` - Unit Tests Needed:**
|
||||
- `toggleTheme()` flips isDark state
|
||||
- `setTheme('dark')` / `setTheme('light')` correctly sets theme
|
||||
- `getTheme()` returns current theme string
|
||||
- `applyTheme()` sets correct class on `document.documentElement`
|
||||
- `saveTheme()` persists to localStorage
|
||||
- `loadTheme()` reads from localStorage and defaults to 'dark'
|
||||
- Watch effect triggers applyTheme and saveTheme on isDark change
|
||||
- onMounted initialization sequence
|
||||
|
||||
**`useGallery.ts` - Unit Tests Needed:**
|
||||
- `openGallery(images, index)` sets state correctly
|
||||
- `closeGallery()` resets all state
|
||||
- `nextImage()` increments index when available
|
||||
- `previousImage()` decrements index when available
|
||||
- `goToImage(index)` validates index bounds
|
||||
- Computed properties (`currentImage`, `hasNext`, `hasPrevious`) reflect correct values
|
||||
- Body scroll overflow is managed correctly
|
||||
|
||||
**`useSeo.ts` - Unit Tests Needed:**
|
||||
- Meta tags are created and updated correctly
|
||||
- `setTitle()` updates document.title and og:title
|
||||
- `setMetaTag()` creates new tags if missing
|
||||
- `setLinkTag()` manages canonical links
|
||||
- `setStructuredData()` adds JSON-LD scripts
|
||||
- onUnmounted cleanup removes all added elements (no memory leaks)
|
||||
- Structured breadcrumb data is generated for non-home routes
|
||||
- Title suffix appended only when needed
|
||||
|
||||
**`useI18n.ts` - Unit Tests Needed:**
|
||||
- `switchLocale()` changes locale and saves to localStorage
|
||||
- `toggleLocale()` switches between en/fr
|
||||
- Computed properties reflect current locale
|
||||
- Invalid locales rejected
|
||||
|
||||
**`useAssets.ts` - Unit Tests Needed:**
|
||||
- `getImageUrl()` resolves asset paths correctly
|
||||
- Fallback placeholder returned for missing images
|
||||
- Handles both `@/assets/images/` and plain filename formats
|
||||
- Warns on console for missing/empty paths
|
||||
- Graceful error handling with placeholder fallback
|
||||
|
||||
**`useProjects.ts` - Unit Tests Needed:**
|
||||
- Projects computed array returns correct structure
|
||||
- Translations applied to titles, descriptions, buttons
|
||||
- Project count matches expected baseline (7 projects)
|
||||
- Featured flag correctly identifies featured projects
|
||||
|
||||
**`useDateFormat.ts` - Unit Tests Needed:**
|
||||
- `formatRelativeTime()` returns correct French/English strings
|
||||
- Year boundaries handled correctly (1 year = "1 year ago", 2+ = "X years ago")
|
||||
- Month, day granularity works in both locales
|
||||
- Date parsing from DD/MM/YYYY format works correctly
|
||||
|
||||
### Router (`src/router/index.ts`)
|
||||
|
||||
**Navigation Tests:**
|
||||
- All routes load their components (lazy-loaded pages)
|
||||
- ScrollBehavior resets to top on normal navigation
|
||||
- ScrollBehavior restores position on back/forward
|
||||
- ScrollBehavior smooth-scrolls to hash anchors
|
||||
- Meta tags (title, description) updated on route change
|
||||
|
||||
**TODO:** 404 page implementation and testing needed (see comment on line 51)
|
||||
|
||||
### Components (if component testing added)
|
||||
|
||||
**High-value components to test:**
|
||||
- `AppHeader.vue` - Navigation links active state, mobile menu toggle
|
||||
- `ProjectCard.vue` - Image loading, translated content, button visibility
|
||||
- `ContactMethod.vue` - Props validation, conditional link component rendering
|
||||
- `ServiceFAQ.vue` - Q&A toggle state, feature list rendering
|
||||
|
||||
## No Mocking Currently Used
|
||||
|
||||
Since there are no tests, no mocking framework is configured. When tests are added:
|
||||
|
||||
**What to Mock:**
|
||||
- Vue Router (`useRouter`, `useRoute`) - use `@vue/test-utils` mocking
|
||||
- localStorage - mock in test setup
|
||||
- Window/Document APIs - mock in unit tests
|
||||
- Dynamic image imports - mock in `useAssets` tests
|
||||
- Translation (`useI18n`) - provide test translations
|
||||
|
||||
**What NOT to Mock:**
|
||||
- Composable logic itself - test composables directly
|
||||
- Type validation - let TypeScript handle it
|
||||
- Vue reactivity - test against real ref/computed behavior
|
||||
- Business logic in utility functions
|
||||
|
||||
## Missing Infrastructure
|
||||
|
||||
### Configuration Files Needed:
|
||||
|
||||
1. **Vitest config** (`vitest.config.ts`):
|
||||
```typescript
|
||||
import { defineConfig } from 'vitest/config'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
// ... rest of config
|
||||
```
|
||||
|
||||
2. **Test utilities setup** (`src/__tests__/setup.ts`):
|
||||
- Global test configuration
|
||||
- Mock setup for localStorage, window
|
||||
- Test utilities/helpers
|
||||
|
||||
3. **Component test examples** structure:
|
||||
- `src/__tests__/unit/` for unit tests
|
||||
- `src/__tests__/components/` for component tests
|
||||
- Matching file structure to src/
|
||||
|
||||
### Package Dependencies Needed:
|
||||
|
||||
```json
|
||||
{
|
||||
"devDependencies": {
|
||||
"vitest": "^1.x",
|
||||
"@vue/test-utils": "^2.x",
|
||||
"@testing-library/vue": "^8.x",
|
||||
"happy-dom": "^12.x",
|
||||
"playwright": "^1.x"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Coverage Targets (If Implemented)
|
||||
|
||||
**Recommended targets:**
|
||||
- Composables: 85%+ coverage (critical for reliability)
|
||||
- Router: 90%+ coverage (navigation is critical)
|
||||
- Components: 70%+ coverage (UI changes less frequently)
|
||||
- Overall: 75%+ coverage
|
||||
|
||||
**High-risk areas needing coverage:**
|
||||
- SEO meta tag manipulation (`useSeo`)
|
||||
- Theme persistence and DOM manipulation (`useTheme`)
|
||||
- Image asset loading with fallbacks (`useAssets`)
|
||||
- Locale switching and persistence (`useI18n`)
|
||||
|
||||
## Development Testing Approach (Current)
|
||||
|
||||
Without automated tests, verification is manual:
|
||||
|
||||
1. **Type checking:** `npm run type-check` validates types
|
||||
2. **Linting:** `npm run lint` catches code style issues
|
||||
3. **Manual testing:** `npm run dev` starts dev server for browser testing
|
||||
4. **Build validation:** `npm run build` ensures code compiles
|
||||
|
||||
This is appropriate for a portfolio site but would need proper testing for production applications or team projects.
|
||||
|
||||
---
|
||||
|
||||
*Testing analysis: 2026-04-07*
|
||||
Reference in New Issue
Block a user