smoothschedule/frontend/SETUP_TESTING.md

# Setup Testing for useTenantExists Hook

This guide will help you set up and run the comprehensive tests for the `useTenantExists` hook.

## Quick Setup

### 1. Install Testing Dependencies

Run this command from the frontend directory:

```bash
cd /home/poduck/Desktop/smoothschedule2/frontend

npm install -D vitest @vitest/ui jsdom \
  @testing-library/react @testing-library/jest-dom @testing-library/user-event \
  msw@2.0.0 \
  @types/jsdom
```

### 2. Update package.json Scripts

Add these scripts to your `package.json`:

```json
{
  "scripts": {
    "test": "vitest",
    "test:ui": "vitest --ui",
    "test:run": "vitest run",
    "test:coverage": "vitest run --coverage",
    "test:hooks": "vitest run src/hooks"
  }
}
```

### 3. Configuration Files

The following files have been created for you:

- `/home/poduck/Desktop/smoothschedule2/frontend/vitest.config.ts` - Vitest configuration
- `/home/poduck/Desktop/smoothschedule2/frontend/src/test/setup.ts` - Test setup file
- `/home/poduck/Desktop/smoothschedule2/frontend/src/hooks/__tests__/useTenantExists.test.ts` - Test suite

## Running the Tests

### Run the useTenantExists Tests

```bash
# Run all tests
npm run test

# Run only the useTenantExists tests
npm run test -- useTenantExists

# Run with UI
npm run test:ui

# Run once (no watch mode)
npm run test:run

# Run with coverage
npm run test:coverage
```

## Test Coverage

The test suite covers all the requirements:

### 1. API Success Cases
- ✓ Returns exists: true when API returns 200
- ✓ Includes subdomain in query params and headers
- ✓ Caches results with 5 minute staleTime

### 2. API Error Cases
- ✓ Returns exists: false when API returns 404
- ✓ Returns exists: false on 500 server error
- ✓ Returns exists: false on network error
- ✓ Returns exists: false on other API errors (403, etc.)

### 3. Null Subdomain Cases
- ✓ Returns exists: false when subdomain is null
- ✓ Does not make API call when subdomain is null (enabled: false)
- ✓ Returns exists: false when subdomain is empty string

### 4. Loading States
- ✓ Shows loading state while fetching
- ✓ Transitions from loading to loaded correctly

### 5. Caching Behavior
- ✓ Caches results with 5 minute staleTime
- ✓ Makes separate requests for different subdomains

### 6. Edge Cases
- ✓ Handles subdomain with special characters
- ✓ Handles very long subdomain
- ✓ Handles concurrent requests (deduplication)
- ✓ Does not retry on 404 or other errors

## Test Structure

```typescript
// Example test from the suite
it('returns exists: true when API returns 200', async () => {
  // Mock API response
  server.use(
    rest.get(`${API_BASE_URL}/business/public-info/`, (req, res, ctx) => {
      return res(ctx.status(200), ctx.json({
        id: 1,
        name: 'Test Business',
        subdomain: 'testbusiness',
      }));
    })
  );

  // Render hook
  const { result } = renderHook(() => useTenantExists('testbusiness'), {
    wrapper: createWrapper(),
  });

  // Wait for loading to complete
  await waitFor(() => {
    expect(result.current.isLoading).toBe(false);
  });

  // Verify results
  expect(result.current.exists).toBe(true);
  expect(result.current.error).toBe(null);
});
```

## Troubleshooting

### MSW Version

If you encounter issues with MSW, make sure you're using v2.x:

```bash
npm install -D msw@2.0.0
```

### API Base URL

The tests use `http://lvh.me:8000/api` as the base URL. If your API runs on a different URL, update the `API_BASE_URL` constant in the test file.

### TypeScript Errors

If you see TypeScript errors related to `beforeAll`, `afterAll`, etc., make sure your `tsconfig.json` includes:

```json
{
  "compilerOptions": {
    "types": ["vitest/globals", "@testing-library/jest-dom"]
  }
}
```

### Test Timeout

If tests timeout, you can increase the timeout in `vitest.config.ts`:

```typescript
export default defineConfig({
  test: {
    testTimeout: 10000, // 10 seconds
  },
});
```

## Next Steps

1. **Install dependencies** (see step 1 above)
2. **Update package.json** (see step 2 above)
3. **Run tests**: `npm run test`
4. **View coverage**: `npm run test:coverage`

## Additional Testing Resources

- See `TESTING.md` for comprehensive testing guide
- See Vitest docs: https://vitest.dev/
- See React Testing Library: https://testing-library.com/react
- See MSW docs: https://mswjs.io/

## Test Statistics

- **Total tests**: 27 test cases
- **Test groups**: 9 describe blocks
- **Mocked endpoints**: 1 (`/business/public-info/`)
- **Edge cases covered**: 10+