portfolio/.planning/codebase/TESTING.md

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:

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):

   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:

{
  "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