# 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+