Testing Patterns Guide

# Testing Patterns Guide for Google Antigravity

Master comprehensive testing strategies that ensure code quality and reliability in your Google Antigravity IDE projects.

## Unit Testing Configuration

```typescript
// vitest.config.ts - Google Antigravity optimized
import { defineConfig } from "vitest/config";
import react from "@vitejs/plugin-react";
import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig({
  plugins: [react(), tsconfigPaths()],
  test: {
    environment: "jsdom",
    globals: true,
    setupFiles: ["./src/test/setup.ts"],
    include: ["**/*.{test,spec}.{ts,tsx}"],
    coverage: {
      provider: "v8",
      reporter: ["text", "json", "html"],
      exclude: ["node_modules/", "src/test/"],
      thresholds: {
        global: { branches: 80, functions: 80, lines: 80, statements: 80 }
      }
    },
    mockReset: true,
    restoreMocks: true
  }
});
```

## Component Testing Patterns

```typescript
// src/components/__tests__/UserProfile.test.tsx
import { render, screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { describe, it, expect, vi, beforeEach } from "vitest";
import { UserProfile } from "../UserProfile";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

const createWrapper = () => {
  const queryClient = new QueryClient({
    defaultOptions: { queries: { retry: false } }
  });
  return ({ children }: { children: React.ReactNode }) => (
    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
  );
};

describe("UserProfile", () => {
  const mockUser = { id: "1", name: "John Doe", email: "john@example.com" };

  beforeEach(() => {
    vi.clearAllMocks();
  });

  it("renders user information correctly", async () => {
    render(<UserProfile userId="1" />, { wrapper: createWrapper() });
    
    await waitFor(() => {
      expect(screen.getByText(mockUser.name)).toBeInTheDocument();
      expect(screen.getByText(mockUser.email)).toBeInTheDocument();
    });
  });

  it("handles edit mode toggle", async () => {
    const user = userEvent.setup();
    render(<UserProfile userId="1" />, { wrapper: createWrapper() });
    
    await user.click(screen.getByRole("button", { name: /edit/i }));
    expect(screen.getByRole("textbox", { name: /name/i })).toBeInTheDocument();
  });

  it("submits form with updated data", async () => {
    const user = userEvent.setup();
    const onUpdate = vi.fn();
    render(<UserProfile userId="1" onUpdate={onUpdate} />, { wrapper: createWrapper() });
    
    await user.click(screen.getByRole("button", { name: /edit/i }));
    await user.clear(screen.getByRole("textbox", { name: /name/i }));
    await user.type(screen.getByRole("textbox", { name: /name/i }), "Jane Doe");
    await user.click(screen.getByRole("button", { name: /save/i }));
    
    await waitFor(() => {
      expect(onUpdate).toHaveBeenCalledWith(expect.objectContaining({ name: "Jane Doe" }));
    });
  });
});
```

## Integration Testing

```typescript
// src/api/__tests__/userApi.integration.test.ts
import { describe, it, expect, beforeAll, afterAll } from "vitest";
import { createTestServer } from "../test/server";
import { userApi } from "../userApi";

describe("User API Integration", () => {
  let server: ReturnType<typeof createTestServer>;

  beforeAll(async () => {
    server = createTestServer();
    await server.start();
  });

  afterAll(async () => {
    await server.stop();
  });

  it("creates and retrieves a user", async () => {
    const newUser = { name: "Test User", email: "test@example.com" };
    const created = await userApi.create(newUser);
    
    expect(created.id).toBeDefined();
    expect(created.name).toBe(newUser.name);
    
    const retrieved = await userApi.getById(created.id);
    expect(retrieved).toEqual(created);
  });

  it("handles concurrent operations", async () => {
    const operations = Array.from({ length: 10 }, (_, i) =>
      userApi.create({ name: `User ${i}`, email: `user${i}@example.com` })
    );
    
    const results = await Promise.all(operations);
    expect(results).toHaveLength(10);
    expect(new Set(results.map(r => r.id)).size).toBe(10);
  });
});
```

## Mock Strategies

```typescript
// src/test/mocks/handlers.ts
import { http, HttpResponse } from "msw";

export const handlers = [
  http.get("/api/users/:id", ({ params }) => {
    return HttpResponse.json({
      id: params.id,
      name: "Mock User",
      email: "mock@example.com"
    });
  }),
  
  http.post("/api/users", async ({ request }) => {
    const body = await request.json();
    return HttpResponse.json({ id: crypto.randomUUID(), ...body }, { status: 201 });
  }),
  
  http.delete("/api/users/:id", () => {
    return new HttpResponse(null, { status: 204 });
  })
];
```

## Best Practices

1. **Arrange-Act-Assert pattern** for clear test structure
2. **Test behavior, not implementation** details
3. **Use factory functions** for test data creation
4. **Isolate tests** with proper setup and teardown
5. **Mock external dependencies** at the boundary
6. **Write descriptive test names** that explain intent
7. **Maintain test coverage thresholds** for quality gates

Google Antigravity leverages these patterns to provide intelligent test generation and refactoring suggestions throughout your development workflow.