Run Tests

<when_to_activate> Activate when the user:

• Says "run tests", "/run-tests", "test", "verify"
• Asks to verify recent changes
• Wants to know what tests are needed for new code
• Asks about test coverage for recent updates

Trigger phrases: "run tests", "test", "verify", "check coverage", "what tests" </when_to_activate>

Execution Steps

Step 1: Run Existing Tests

npm run test

Report results:

• Number of tests passed/failed
• Any failing test details
• Test duration

Step 2: Identify Recent Changes

Check git status and recent commits:

git diff --name-only HEAD~5
git diff --cached --name-only
git status --porcelain

Focus on:

• Modified .tsx and .ts files in src/
• New components or features
• Changes to existing components

Step 3: Analyze Test Coverage Gaps

For each changed file, determine if tests exist:

Source File	Test File Location
src/components/sections/*.tsx	src/tests/design-system/components.test.tsx
src/components/case-study/*.tsx	src/tests/case-study/case-study.test.tsx
src/components/Blog.tsx	src/tests/blog/blog-ux-features.test.tsx
src/lib/*.ts	src/tests/validation/content-validation.test.ts
Navigation changes	src/tests/navigation/navigation.test.tsx
Mobile-specific	src/tests/mobile/mobile.test.tsx
Theme/CSS changes	src/tests/design-system/css-variables.test.ts

Step 4: Recommend New Tests

For each uncovered change, suggest specific tests following the project patterns:

Test Pattern Template:

import { render, screen } from '@testing-library/react';
import { ThemeProvider } from '../../context/ThemeContext';
import { VariantProvider } from '../../context/VariantContext';
import { profile } from '../../lib/content';

const TestWrapper = ({ children }: { children: React.ReactNode }) => (
    <VariantProvider profile={profile}>
        <ThemeProvider>{children}</ThemeProvider>
    </VariantProvider>
);

describe('[ComponentName]', () => {
    it('should [expected behavior]', () => {
        render(
            <TestWrapper>
                <ComponentName {...props} />
            </TestWrapper>
        );

        expect(/* assertion */).toBe(/* expected */);
    });
});

Output Format

## Test Results

**Status**: ✅ All passing | ❌ X failures
**Tests**: X passed, X failed, X total
**Duration**: Xs

### Failures (if any)
- `test name`: error message

---

## Recent Changes Analyzed

| File | Change Type | Has Tests |
|------|-------------|-----------|
| src/components/sections/ExperienceSection.tsx | Modified | ✅ Partial |

---

## Recommended New Tests

### 1. [Test Name]
**File**: `src/tests/[path]/[file].test.tsx`
**Covers**: [what it tests]

```tsx
[test code suggestion]

2. ...

## Test Categories

### Component Tests
- Render without crashing
- Uses CSS variables (not hardcoded colors)
- Correct props handling
- User interactions (clicks, hovers)
- Accessibility attributes

### Integration Tests
- Data flows correctly from content files
- Links render with correct URLs
- Conditional rendering works

### Responsive Tests
- Mobile layout differences
- Tablet breakpoints
- Desktop behavior

## Common Test Assertions

```tsx
// Element exists
expect(screen.getByText('text')).toBeInTheDocument();

// Has attribute
expect(element).toHaveAttribute('href', 'url');

// CSS variable usage
expect(element?.style.color).toContain('var(--color-');

// Link behavior
expect(link).toHaveAttribute('target', '_blank');
expect(link).toHaveAttribute('rel', 'noopener noreferrer');

File Locations

Purpose	Path
Run tests	npm run test
Watch mode	npm run test:watch
Design system only	npm run test:design-system
Test config	vitest.config.ts (if exists) or vite.config.ts
Test setup	src/tests/setup.ts (if exists)