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:

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:

{
  "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

# 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

// 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:

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:

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

Test Timeout

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

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+