Test App

Commands

# Run all unit tests
npm test

# Run specific test file
npx jest __tests__/components/Modal1.test.tsx

# Run tests matching a pattern
npx jest --testPathPattern="Generator"

# Run with coverage
npm run test:coverage

# Run E2E tests
npm run test:e2e

Testing Workflow

When invoked with /test-app, follow this workflow:

1. If argument is all or no argument:

• Run npm test to execute all unit/component tests
• Analyze failures and report results
• Categorize issues: broken functionality, missing implementations, UI bugs

2. If argument is unit:

• Run only Jest unit tests: npm test
• Report pass/fail summary

3. If argument is e2e:

• Ensure dev server is running on localhost
• Run npm run test:e2e
• Report results with screenshots on failure

4. If argument is a component name (e.g., Modal1, Generator):

• Find and run tests matching that component: npx jest --testPathPattern="$ARGUMENTS"
• If no tests exist, inform the user and offer to create them

Test Writing Guidelines

When writing new tests, always:

1. Import render from test-utils/render.tsx (NOT from @testing-library/react directly)
2. Use userEvent over fireEvent for interactions
3. Query by accessibility: getByRole, getByText, getByLabelText > getByTestId
4. Test behavior, not implementation details
5. Follow AAA pattern: Arrange, Act, Assert

Example Test Structure

import { render, screen } from '../../test-utils/render';
import userEvent from '@testing-library/user-event';
import ComponentName from '../../components/ComponentName';

describe('ComponentName', () => {
  it('should render correctly', () => {
    render(<ComponentName />);
    expect(screen.getByText('Expected text')).toBeInTheDocument();
  });

  it('should handle user interaction', async () => {
    const user = userEvent.setup();
    render(<ComponentName />);
    await user.click(screen.getByRole('button', { name: /click me/i }));
    expect(screen.getByText('Result')).toBeInTheDocument();
  });
});

Known Application Issues to Test For

• Modal2-Modal13 are mostly hardcoded (no context binding)
• Modal2Context exists but is not wired into _app.tsx providers
• "Get your Code" button in Settings has empty handler
• Webhook integration is not implemented
• HTML code output generation is missing
• SVG attributes use HTML syntax (stroke-linecap) instead of React syntax (strokeLinecap)
• Some inputs have hardcoded value prop preventing user typing (Targeting section)

Reporting

After running tests, provide a structured report:

## Test Results Summary

**Passed**: X | **Failed**: Y | **Skipped**: Z

### Failures
- [ComponentName] Description of failure
- [ComponentName] Description of failure

### Identified Issues
1. **Critical**: Issues that break core functionality
2. **Major**: Features that don't work as expected
3. **Minor**: UI inconsistencies, warnings

### Recommendations
- Prioritized list of fixes needed