Test Suite

This directory contains the test suite for the Anthropic Streaming Chat MCP application.

test/
├── components/           # Component tests
│   └── Message.test.tsx  # Message component tests
├── utils/               # Test utilities and helpers
│   └── test-helpers.ts  # Common test utilities
├── setup.ts            # Global test setup and configuration
└── README.md           # This file

# Run all tests
npm test

# Run tests in watch mode (re-runs on file changes)
npm run test:watch

# Run tests with coverage
npm run test:coverage

# Generate HTML coverage report
npm run test:coverage-report

# Run all tests
deno test --allow-all test/

# Run tests in watch mode
deno test --allow-all --watch test/

# Run specific test file
deno test --allow-all test/components/Message.test.tsx

# Run tests with coverage
deno test --allow-all --coverage=coverage test/
deno coverage coverage --html

• Message.test.tsx: Tests for the Message component including:
  • Basic rendering with different message types
  • Block content rendering (text, code, MCP tools)
  • Action button functionality
  • Props validation

• test-helpers.ts: Common utilities for creating mock data and assertions
• setup.ts: Global test configuration and environment setup

import { assertEquals, assertExists } from "https://deno.land/std@0.208.0/assert/mod.ts";
import { render, cleanup } from "https://esm.sh/@testing-library/react@14.0.0?deps=react@18.2.0,react-dom@18.2.0";

Deno.test("Component Name - Test Category", async (t) => {
  await t.step("should do something specific", () => {
    // Test implementation
  });
  
  // Cleanup after test
  cleanup();
});

import { createMockMessage, createMockCallback } from "../utils/test-helpers.ts";

// Create mock data
const message = createMockMessage({
  role: "assistant",
  content: "Test content"
});

// Create mock callbacks
const mockOnDelete = createMockCallback();

The test environment includes:

• React Testing Library: For component testing
• Deno Standard Library: For assertions
• Mock DOM: Simulated browser environment
• Mock APIs: localStorage, fetch, crypto.randomUUID
• Test Helpers: Utilities for creating mock data

Test coverage reports are generated in the coverage/ directory when running coverage commands. The HTML report provides detailed information about:

• Line coverage
• Function coverage
• Branch coverage
• Uncovered code sections

1. Test Structure: Use descriptive test names and group related tests
2. Cleanup: Always cleanup after component tests
3. Mocking: Use provided test helpers for consistent mock data
4. Assertions: Use specific assertions that clearly indicate what's being tested
5. Isolation: Each test should be independent and not rely on other tests

1. Create test files in the appropriate subdirectory
2. Follow the naming convention: ComponentName.test.tsx
3. Import necessary testing utilities
4. Use the established test structure and helpers
5. Add cleanup calls for component tests
6. Update this README if adding new test categories

• Import Errors: Ensure all imports use the correct ESM URLs with React version pinning
• Component Not Rendering: Check that all required props are provided
• Mock Issues: Verify that mocks are properly set up in setup.ts
• Timeout Errors: Increase timeout in test configuration if needed

• Use console.log in tests to debug values
• Check the HTML output with container.innerHTML
• Verify mock function calls with mockFn.calls
• Use --inspect flag with Deno for debugging