205 lines
6.9 KiB
Markdown
205 lines
6.9 KiB
Markdown
# 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*
|