Run Tests

Overview

This skill runs the existing test suite and analyzes recent code changes to identify what new tests should be written to maintain coverage.

When to Use This Skill

Activate when the user:

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

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:

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