Testing Suite Skill - Quality Assurance Specialist

2. Quality Assurance Standards

• Ensure 90%+ code coverage across all modules
• Test edge cases and error scenarios thoroughly
• Verify accessibility compliance (WCAG 2.1 AA)
• Check responsive behavior across devices
• Validate security measures in authentication flows

3. Framework Detection

Automatically identify and configure testing frameworks:

• Detect existing test frameworks (Jest, Vitest, Cypress, Playwright)
• Analyze package.json dependencies
• Configure testing environment based on project setup

Testing Technology Stack

Unit Testing with Vitest

import { describe, it, expect, vi, beforeEach } from 'vitest';
import { render, screen, fireEvent, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

describe('ComponentName', () => {
  beforeEach(() => {
    vi.clearAllMocks();
  });

  it('renders correctly with props', () => {
    render(<ComponentName prop="value" />);
    expect(screen.getByRole('button')).toBeInTheDocument();
  });

  it('handles user interactions', async () => {
    const mockHandler = vi.fn();
    render(<ComponentName onClick={mockHandler} />);
    
    await userEvent.click(screen.getByRole('button'));
    expect(mockHandler).toHaveBeenCalledTimes(1);
  });
});

E2E Testing with Playwright

import { test, expect, Page } from '@playwright/test';

test.describe('Feature Flow', () => {
  test('complete user journey', async ({ page }) => {
    await page.goto('/app');
    await page.fill('[data-testid="email"]', '[email protected]');
    await page.click('[data-testid="login-button"]');
    await expect(page).toHaveURL('/dashboard');
  });
});

Visual Testing with Storybook

import type { Meta, StoryObj } from '@storybook/react';
import { within, userEvent, expect } from '@storybook/test';

const meta: Meta<typeof Component> = {
  title: 'Components/ComponentName',
  component: Component,
  parameters: { layout: 'centered' },
  tags: ['autodocs'],
};

export default meta;

Coverage Requirements

// vitest.config.ts - Enforce 90%+ coverage
export default defineConfig({
  test: {
    coverage: {
      thresholds: {
        global: {
          branches: 90,
          functions: 90,
          lines: 90,
          statements: 90
        }
      }
    }
  }
});

Quality Gates Checklist

• 90%+ Coverage: All code paths tested
• Zero Flaky Tests: Consistent test execution
• Performance Benchmarks: Tests complete in <60s
• Accessibility Tests: WCAG 2.1 AA compliance
• Security Tests: Authentication and authorization
• Error Scenarios: Failure modes covered

Test Commands

# Unit tests
npm test                   # Uses detected primary framework
npm run test:watch         # Watch mode
npm run test:coverage      # Coverage report

# E2E tests
npm run test:e2e           # Headless
npm run test:e2e:headed    # With browser UI
npm run test:e2e:ui        # Playwright test UI

# Visual tests
npm run storybook          # Development
npm run test:storybook     # Run visual tests

Error Reporting Template

## Test Failure Report

**Test**: ComponentName > User Interactions > handles click events
**File**: src/components/ComponentName.test.tsx
**Status**: FAILING

**Error Details**:
Expected: onClick handler to be called
Received: onClick handler was not called

**Analysis**:
The onClick prop is not properly bound to the button element.

**Suggested Fix**:
Verify onClick={onClick} prop is passed to <button> in ComponentName.tsx:42

Best Practices

1. Descriptive Names: Clear test intent and expectations
2. Arrange-Act-Assert: Consistent test structure
3. Single Responsibility: One concept per test
4. Independent Tests: No shared state or dependencies
5. Fast Execution: Optimize for quick feedback