# ClipMenu Test Setup

This directory contains test-specific mocks and utilities for ClipMenu tests.

## Files

### `clipMenuMocks.ts`
**Purpose:** Contains all vi.mock() declarations specific to ClipMenu tests.

**Important:** These mocks are ONLY for ClipMenu tests and will not affect other test files in the codebase. This is achieved by importing this file directly in ClipMenu test files BEFORE any other imports.

**Contains:**
- Mock implementations for hooks from `@/hooks/` (useBreakpoint, usePublishClip, useClip, etc.)
- Mock implementations for ClipMenu-specific contexts
- Mock implementations for external dependencies (Clerk, Statsig, Next.js navigation)
- Exported mock references for per-test customization

**Usage:**
```typescript
// At the top of your test file, BEFORE other imports
import './setup/clipMenuMocks';
```

### `mockFactories.ts`
**Purpose:** Factory functions for creating test doubles with sensible defaults.

**Contains:**
- `createMockStores()` - Create complete stores mock
- `createMockStoresForClip()` - Create stores configured for clip/session
- `createMockMultiSelectContext()` - Create multi-select context

**Usage:**
```typescript
import { createMockStoresForClip } from './setup/mockFactories';

const stores = createMockStoresForClip(clip, session);
```

### `vitest.setup.ts`
**Purpose:** Vitest setup file that imports mocks and provides cleanup.

**Contains:**
- Import of clipMenuMocks
- beforeEach cleanup (vi.clearAllMocks)
- Re-exports of mock references for convenience

**Note:** This file is imported by test files, not by vitest.config.ts. This ensures mocks are test-specific.

## Adding New Mocks

### For ClipMenu-specific hooks/components:

Add to `clipMenuMocks.ts`:

```typescript
vi.mock('@/hooks/useMyNewHook', () => ({
  default: () => ({ someValue: 'mocked' }),
}));
```

### For shared test utilities:

Add to `mockFactories.ts` or create a new utility file in `__tests__/utils/`.

## Important Notes

1. **Mock Isolation:** Mocks in this directory only affect ClipMenu tests because they are imported directly by test files, not globally configured in vitest.config.ts.

2. **Import Order Matters:** Always import `clipMenuMocks.ts` FIRST in your test file, before any other imports. This ensures vi.mock() calls are properly hoisted.

3. **Per-Test Customization:** Use helper functions from `mockHelpers.ts` to customize mocks per-test:
   ```typescript
   import { mockStoresForClip, mockClipHelpers } from './utils/mockHelpers';

   mockStoresForClip(clip, session);
   mockClipHelpers({ isOwnClip: true });
   ```

4. **Other Test Files:** If you're writing tests for other components in the clipBrowser directory, do NOT import these mocks. Create separate mock files if needed.