@memberjunction/react-test-harness 3.4.0 → 4.1.0

package/README.md

@@ -1,979 +1,195 @@
 # @memberjunction/react-test-harness
 
-A powerful test harness for React components using Playwright, designed specifically for MemberJunction's React runtime components with support for dynamic library configurations.
+Automated test harness for MemberJunction React components using Playwright. Provides static analysis (linting), constraint validation, browser-based rendering tests, and a CLI for running test suites against dynamically compiled components.
 
-## Overview
-
-This package provides a comprehensive testing solution for React components, allowing you to:
-- Load and execute React components in a real browser environment
-- Dynamically configure external libraries for testing different scenarios
-- Run assertions on rendered output
-- Execute tests via CLI or programmatically
-- Capture screenshots and console output
-- Run in headless or headed mode for debugging
-
-## Installation
-
-```bash
-npm install @memberjunction/react-test-harness
-```
-
-## CLI Usage
+## Architecture
 
-### Run a Single Component
+```mermaid
+graph TD
+    subgraph "@memberjunction/react-test-harness"
+        A[TestHarness] --> B[ComponentLinter]
+        A --> C[ComponentRunner]
+        A --> D[BrowserContext]
 
-```bash
-# Basic usage
-mj-react-test run MyComponent.jsx
-
-# With props
-mj-react-test run MyComponent.jsx --props '{"title":"Hello","count":42}'
-
-# With screenshot
-mj-react-test run MyComponent.jsx --screenshot ./output.png
+        B --> E[Type Inference Engine]
+        B --> F[Control Flow Analyzer]
+        B --> G[Prop Value Extractor]
+        B --> H[Styles Type Analyzer]
 
-# In headed mode (visible browser)
-mj-react-test run MyComponent.jsx --headed
+        subgraph "Constraint Validators"
+            I[BaseConstraintValidator]
+            I --> J[RequiredWhenValidator]
+            I --> K[SQLWhereClauseValidator]
+            I --> L[SubsetOfEntityFieldsValidator]
+        end
 
-# With debug output
-mj-react-test run MyComponent.jsx --debug
-
-# Wait for specific selector
-mj-react-test run MyComponent.jsx --selector "#loaded-content" --timeout 5000
-```
+        C --> D
+        D --> M["Playwright Browser"]
 
-### Run Test Files
-
-```bash
-# Run a test file with multiple test cases
-mj-react-test test my-tests.js
-
-# With options
-mj-react-test test my-tests.js --headed --debug
-```
+        N[CLI] --> A
+    end
 
-### Create Example Files
+    subgraph "Dependencies"
+        O["@memberjunction/react-runtime<br/>(Component Compilation)"]
+        P["Babel Parser<br/>(AST Analysis)"]
+    end
 
-```bash
-# Create example component and test files
-mj-react-test create-example
+    B --> P
+    C --> O
 
-# Create in specific directory
-mj-react-test create-example --dir ./my-tests
+    style A fill:#2d6a9f,stroke:#1a4971,color:#fff
+    style B fill:#2d8659,stroke:#1a5c3a,color:#fff
+    style C fill:#2d8659,stroke:#1a5c3a,color:#fff
+    style D fill:#7c5295,stroke:#563a6b,color:#fff
+    style E fill:#b8762f,stroke:#8a5722,color:#fff
+    style I fill:#7c5295,stroke:#563a6b,color:#fff
+    style N fill:#2d6a9f,stroke:#1a4971,color:#fff
 ```
 
-## Dynamic Library Configuration (New)
-
-The test harness now supports dynamic library configuration, allowing you to test components with different sets of external libraries.
+## Overview
 
-### Basic Library Configuration
+This package provides comprehensive testing for MemberJunction's dynamically compiled React components. It combines static analysis (without executing) and runtime testing (via Playwright) to validate components before deployment.
 
-```typescript
-import { ReactTestHarness } from '@memberjunction/react-test-harness';
-import type { LibraryConfiguration } from '@memberjunction/react-runtime';
-
-const customLibraryConfig: LibraryConfiguration = {
-  libraries: [
-    // Runtime libraries (always needed)
-    {
-      id: 'react',
-      name: 'React',
-      category: 'runtime',
-      globalVariable: 'React',
-      version: '18',
-      cdnUrl: 'https://unpkg.com/react@18/umd/react.development.js',
-      isEnabled: true,
-      isCore: true,
-      isRuntimeOnly: true
-    },
-    // Component libraries (available to components)
-    {
-      id: 'lodash',
-      name: 'lodash',
-      displayName: 'Lodash',
-      category: 'utility',
-      globalVariable: '_',
-      version: '4.17.21',
-      cdnUrl: 'https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js',
-      isEnabled: true,
-      isCore: false
-    },
-    {
-      id: 'chart-js',
-      name: 'Chart',
-      displayName: 'Chart.js',
-      category: 'charting',
-      globalVariable: 'Chart',
-      version: '4.4.0',
-      cdnUrl: 'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.0/chart.umd.js',
-      isEnabled: true,
-      isCore: false
-    }
-  ],
-  metadata: {
-    version: '1.0.0',
-    lastUpdated: '2024-01-01'
-  }
-};
-
-// Test with custom libraries
-const harness = new ReactTestHarness({ headless: true });
-await harness.initialize();
-
-const result = await harness.testComponent(
-  `const Component = () => {
-    if (!_) return <div>Lodash not available</div>;
-    const sorted = _.sortBy([3, 1, 2]);
-    return <div>{sorted.join(', ')}</div>;
-  }`,
-  {},
-  { libraryConfiguration: customLibraryConfig }
-);
-```
+**Key capabilities:**
 
-### Testing Organization-Specific Libraries
+- **Component Linting**: Static analysis of component source using Babel AST parsing
+- **Type Inference**: Infers component prop types from source code and usage patterns
+- **Constraint Validation**: Validates data constraints like SQL WHERE clauses, required-when conditions, and entity field subsets
+- **Control Flow Analysis**: Detects unreachable code, missing returns, and complex control flow patterns
+- **Browser Rendering**: Launches components in a real browser via Playwright for visual/functional testing
+- **Prop Value Extraction**: Extracts and validates prop values from JSX source
+- **Library Lint Caching**: Caches lint results for external libraries to improve performance
+- **CLI Tool**: `mj-react-test` command for running test suites
 
-```typescript
-// Test with minimal libraries
-const minimalConfig: LibraryConfiguration = {
-  libraries: [
-    // Only runtime essentials
-    { id: 'react', category: 'runtime', isEnabled: true, isRuntimeOnly: true, ... },
-    { id: 'react-dom', category: 'runtime', isEnabled: true, isRuntimeOnly: true, ... },
-    { id: 'babel', category: 'runtime', isEnabled: true, isRuntimeOnly: true, ... },
-    // Just one utility library
-    { id: 'lodash', category: 'utility', isEnabled: true, ... }
-  ],
-  metadata: { version: '1.0.0', lastUpdated: '2024-01-01' }
-};
-
-// Test with full library suite
-const fullConfig: LibraryConfiguration = {
-  libraries: [
-    // All runtime libraries
-    // All UI libraries (antd, react-bootstrap)
-    // All charting libraries (chart.js, d3)
-    // All utilities (lodash, dayjs)
-  ],
-  metadata: { version: '1.0.0', lastUpdated: '2024-01-01' }
-};
-
-// Test component behavior with different configurations
-const componentCode = `
-  const Component = () => {
-    const hasChart = typeof Chart !== 'undefined';
-    const hasAntd = typeof antd !== 'undefined';
-    
-    return (
-      <div>
-        <p>Chart.js: {hasChart ? 'Available' : 'Not Available'}</p>
-        <p>Ant Design: {hasAntd ? 'Available' : 'Not Available'}</p>
-      </div>
-    );
-  };
-`;
-
-const minimalResult = await harness.testComponent(componentCode, {}, {
-  libraryConfiguration: minimalConfig
-});
+## Installation
 
-const fullResult = await harness.testComponent(componentCode, {}, {
-  libraryConfiguration: fullConfig
-});
+```bash
+npm install @memberjunction/react-test-harness
 ```
 
-## Programmatic Usage via TypeScript/JavaScript
-
-The test harness is designed to be used as a library in your TypeScript/JavaScript code, not just via CLI. All classes and types are fully exported for programmatic use.
+## Usage
 
-### Importing Classes and Types
+### CLI
 
-```typescript
-// Import main classes
-import { 
-  ReactTestHarness,
-  BrowserManager,
-  ComponentRunner,
-  AssertionHelpers,
-  FluentMatcher
-} from '@memberjunction/react-test-harness';
+```bash
+# Run the test harness
+npx mj-react-test
 
-// Import types for TypeScript
-import type {
-  TestHarnessOptions,
-  ComponentExecutionResult,
-  ComponentExecutionOptions,
-  BrowserContextOptions,
-  TestCase,
-  TestSummary
-} from '@memberjunction/react-test-harness';
+# Or if installed globally
+mj-react-test
 ```
 
-### Basic Component Testing
+### Programmatic API
 
 ```typescript
-import { ReactTestHarness } from '@memberjunction/react-test-harness';
-
-async function testMyComponent() {
-  const harness = new ReactTestHarness({
-    headless: true,
-    debug: false
-  });
-
-  try {
-    await harness.initialize();
-
-    // Test component code directly
-    const result = await harness.testComponent(`
-      const Component = ({ message }) => {
-        return <div className="greeting">{message}</div>;
-      };
-    `, { message: 'Hello World' });
-
-    console.log('Success:', result.success);
-    console.log('HTML:', result.html);
-    console.log('Console logs:', result.console);
-    
-    return result;
-  } finally {
-    await harness.close();
-  }
-}
-```
+import { TestHarness } from '@memberjunction/react-test-harness';
 
-### Integration into Jest/Mocha/Vitest
+const harness = new TestHarness();
 
-```typescript
-import { ReactTestHarness, AssertionHelpers } from '@memberjunction/react-test-harness';
-import { describe, it, beforeAll, afterAll } from 'vitest';
-
-describe('My React Components', () => {
-  let harness: ReactTestHarness;
-
-  beforeAll(async () => {
-    harness = new ReactTestHarness({ headless: true });
-    await harness.initialize();
-  });
-
-  afterAll(async () => {
-    await harness.close();
-  });
-
-  it('should render greeting component', async () => {
-    const result = await harness.testComponent(`
-      const Component = ({ name }) => <h1>Hello, {name}!</h1>;
-    `, { name: 'World' });
-
-    AssertionHelpers.assertSuccess(result);
-    AssertionHelpers.assertContainsText(result.html, 'Hello, World!');
-  });
-
-  it('should handle click events', async () => {
-    const result = await harness.testComponent(`
-      const Component = () => {
-        const [count, setCount] = React.useState(0);
-        return (
-          <button onClick={() => setCount(count + 1)}>
-            Count: {count}
-          </button>
-        );
-      };
-    `);
-
-    AssertionHelpers.assertContainsText(result.html, 'Count: 0');
-  });
+// Run all tests for a component
+const results = await harness.RunTests(componentSource, {
+    libraries: libraryConfigs,
+    entityMetadata: entityInfo
 });
 ```
 
-### Advanced Class Usage
-
-```typescript
-import { 
-  ReactTestHarness, 
-  BrowserManager, 
-  ComponentRunner,
-  AssertionHelpers 
-} from '@memberjunction/react-test-harness';
-
-class ComponentTestSuite {
-  private harness: ReactTestHarness;
-  private browserManager: BrowserManager;
-  private componentRunner: ComponentRunner;
-
-  constructor() {
-    // You can also use the underlying classes directly
-    this.browserManager = new BrowserManager({
-      viewport: { width: 1920, height: 1080 },
-      headless: true
-    });
-    
-    this.componentRunner = new ComponentRunner(this.browserManager);
-    
-    // Or use the high-level harness
-    this.harness = new ReactTestHarness({
-      headless: true,
-      debug: true
-    });
-  }
-
-  async initialize() {
-    await this.harness.initialize();
-  }
-
-  async testComponent(code: string, props?: any) {
-    const result = await this.harness.testComponent(code, props);
-    
-    // Use static assertion methods
-    AssertionHelpers.assertSuccess(result);
-    
-    // Or create a fluent matcher
-    const matcher = AssertionHelpers.createMatcher(result.html);
-    matcher.toContainText('Expected text');
-    
-    return result;
-  }
-
-  async cleanup() {
-    await this.harness.close();
-  }
-}
-
-// Usage
-const suite = new ComponentTestSuite();
-await suite.initialize();
-await suite.testComponent(`const Component = () => <div>Test</div>;`);
-await suite.cleanup();
-```
-
-### Test Component Files
+### Component Linting
 
 ```typescript
-const result = await harness.testComponentFromFile(
-  './MyComponent.jsx',
-  { title: 'Test', value: 123 },
-  {
-    waitForSelector: '.loaded',
-    timeout: 10000
-  }
-);
-```
-
-### Running Multiple Tests
+import { ComponentLinter } from '@memberjunction/react-test-harness';
 
-```typescript
-const harness = new ReactTestHarness({ debug: true });
-
-await harness.runTest('Component renders correctly', async () => {
-  const result = await harness.testComponent(`
-    const Component = () => <h1>Test</h1>;
-  `);
-  
-  const { AssertionHelpers } = harness;
-  AssertionHelpers.assertSuccess(result);
-  AssertionHelpers.assertContainsText(result.html, 'Test');
+const linter = new ComponentLinter();
+const lintResults = linter.Lint(componentSource, {
+    checkPropTypes: true,
+    checkControlFlow: true,
+    validateConstraints: true
 });
 
-// Run multiple tests
-const summary = await harness.runTests([
-  {
-    name: 'Has correct elements',
-    fn: async () => {
-      const result = await harness.testComponent(`
-        const Component = () => (
-          <div>
-            <h1 id="title">Title</h1>
-            <button className="action">Click</button>
-          </div>
-        );
-      `);
-      
-      const matcher = harness.createMatcher(result.html);
-      matcher.toHaveElement('#title');
-      matcher.toHaveElement('.action');
-    }
-  },
-  {
-    name: 'Handles props correctly',
-    fn: async () => {
-      const result = await harness.testComponent(`
-        const Component = ({ items }) => (
-          <ul>
-            {items.map((item, i) => <li key={i}>{item}</li>)}
-          </ul>
-        );
-      `, { items: ['A', 'B', 'C'] });
-      
-      const { AssertionHelpers } = harness;
-      AssertionHelpers.assertElementCount(result.html, 'li', 3);
-    }
-  }
-]);
-
-console.log(`Tests passed: ${summary.passed}/${summary.total}`);
-```
-
-## Complete API Reference
-
-### ReactTestHarness Class
-
-The main class for testing React components.
-
-```typescript
-class ReactTestHarness {
-  constructor(options?: TestHarnessOptions);
-  
-  // Lifecycle methods
-  async initialize(): Promise<void>;
-  async close(): Promise<void>;
-  
-  // Component testing methods
-  async testComponent(
-    componentCode: string,
-    props?: Record<string, any>,
-    options?: Partial<ComponentExecutionOptions>
-  ): Promise<ComponentExecutionResult>;
-  
-  async testComponentFromFile(
-    filePath: string,
-    props?: Record<string, any>,
-    options?: Partial<ComponentExecutionOptions>
-  ): Promise<ComponentExecutionResult>;
-  
-  // Test running methods
-  async runTest(name: string, fn: () => Promise<void>): Promise<void>;
-  async runTests(tests: TestCase[]): Promise<TestSummary>;
-  
-  // Utility methods
-  getAssertionHelpers(): typeof AssertionHelpers;
-  createMatcher(html: string): FluentMatcher;
-  async screenshot(path?: string): Promise<Buffer>;
-  async evaluateInPage<T>(fn: () => T): Promise<T>;
-}
-```
-
-### BrowserManager Class
-
-Manages the Playwright browser instance.
-
-```typescript
-class BrowserManager {
-  constructor(options?: BrowserContextOptions);
-  
-  async initialize(): Promise<void>;
-  async close(): Promise<void>;
-  async getPage(): Promise<Page>;
-  async navigate(url: string): Promise<void>;
-  async evaluateInPage<T>(fn: () => T): Promise<T>;
-  async screenshot(path?: string): Promise<Buffer>;
-}
-```
-
-### ComponentRunner Class
-
-Executes React components in the browser.
-
-```typescript
-class ComponentRunner {
-  constructor(browserManager: BrowserManager);
-  
-  async executeComponent(options: ComponentExecutionOptions): Promise<ComponentExecutionResult>;
-  async executeComponentFromFile(
-    filePath: string,
-    props?: Record<string, any>,
-    options?: Partial<ComponentExecutionOptions>
-  ): Promise<ComponentExecutionResult>;
+for (const issue of lintResults.issues) {
+    console.log(`${issue.severity}: ${issue.message} (line ${issue.line})`);
 }
 ```
 
-### AssertionHelpers Static Class
-
-Provides assertion methods for testing.
+### Browser-Based Testing
 
 ```typescript
-class AssertionHelpers {
-  // Result assertions
-  static assertSuccess(result: ComponentExecutionResult): void;
-  static assertNoErrors(result: ComponentExecutionResult): void;
-  static assertNoConsoleErrors(console: Array<{ type: string; text: string }>): void;
-  
-  // Content assertions
-  static assertContainsText(html: string, text: string): void;
-  static assertNotContainsText(html: string, text: string): void;
-  static assertHasElement(html: string, selector: string): void;
-  static assertElementCount(html: string, tagName: string, expectedCount: number): void;
-  
-  // Utility methods
-  static containsText(html: string, text: string): boolean;
-  static hasElement(html: string, selector: string): boolean;
-  static countElements(html: string, tagName: string): number;
-  static hasAttribute(html: string, selector: string, attribute: string, value?: string): boolean;
-  
-  // Fluent matcher creation
-  static createMatcher(html: string): FluentMatcher;
-}
-```
-
-### FluentMatcher Interface
+import { ComponentRunner, BrowserContext } from '@memberjunction/react-test-harness';
 
-Provides fluent assertions for better readability.
+const browser = await BrowserContext.Create();
+const runner = new ComponentRunner(browser);
 
-```typescript
-interface FluentMatcher {
-  toContainText(text: string): void;
-  toHaveElement(selector: string): void;
-  toHaveElementCount(tagName: string, count: number): void;
-  toHaveAttribute(selector: string, attribute: string, value?: string): void;
-}
-```
-
-## Parallel Testing
-
-### Important: Test Harness Instance Limitations
-
-The ReactTestHarness uses a single browser page instance and is **NOT safe for parallel test execution** on the same instance. This is due to Playwright's internal limitations with `exposeFunction` and potential race conditions when multiple tests try to modify the same page context simultaneously.
-
-### Sequential Testing (Single Instance)
-
-For sequential test execution, you can safely reuse a single harness instance:
-
-```typescript
-const harness = new ReactTestHarness({ headless: true });
-await harness.initialize();
-
-// ✅ CORRECT - Sequential testing on same instance
-for (const test of tests) {
-  const result = await harness.testComponent(test.code, test.props);
-  // Each test runs one after another, no conflicts
-}
-
-await harness.close();
-```
-
-### Parallel Testing (Multiple Instances)
-
-For parallel test execution, you **MUST** create separate ReactTestHarness instances:
-
-```typescript
-// ✅ CORRECT - Parallel testing with separate instances
-const results = await Promise.all(tests.map(async (test) => {
-  const harness = new ReactTestHarness({ headless: true });
-  await harness.initialize();
-  
-  try {
-    return await harness.testComponent(test.code, test.props);
-  } finally {
-    await harness.close(); // Clean up each instance
-  }
-}));
-```
-
-### Common Mistake to Avoid
-
-```typescript
-// ❌ WRONG - DO NOT DO THIS
-const harness = new ReactTestHarness({ headless: true });
-await harness.initialize();
-
-// This will cause conflicts and errors!
-const results = await Promise.all(
-  tests.map(test => harness.testComponent(test.code, test.props))
-);
-```
-
-This approach will fail with errors like:
-- "Function '__mjGetEntityObject' has been already registered"
-- "Cannot read properties of undefined (reading 'addBinding')"
-
-### Performance Considerations
-
-While creating multiple harness instances has some overhead (each launches its own browser context), the benefits of parallel execution typically outweigh this cost:
-
-- **Sequential (1 instance)**: Lower memory usage, but tests run one by one
-- **Parallel (N instances)**: Higher memory usage, but tests complete much faster
-
-### Example: Test Runner with Configurable Parallelism
-
-```typescript
-class TestRunner {
-  async runTests(tests: TestCase[], parallel = false) {
-    if (parallel) {
-      // Create new instance for each test
-      return Promise.all(tests.map(async (test) => {
-        const harness = new ReactTestHarness({ headless: true });
-        await harness.initialize();
-        try {
-          return await harness.testComponent(test.code, test.props);
-        } finally {
-          await harness.close();
-        }
-      }));
-    } else {
-      // Reuse single instance for all tests
-      const harness = new ReactTestHarness({ headless: true });
-      await harness.initialize();
-      
-      const results = [];
-      for (const test of tests) {
-        results.push(await harness.testComponent(test.code, test.props));
-      }
-      
-      await harness.close();
-      return results;
-    }
-  }
-}
-```
-
-## Usage Examples for TypeScript Projects
-
-### Creating a Reusable Test Utility
-
-```typescript
-// test-utils.ts
-import { ReactTestHarness, AssertionHelpers } from '@memberjunction/react-test-harness';
-import type { ComponentExecutionResult } from '@memberjunction/react-test-harness';
-
-export class ReactComponentTester {
-  private harness: ReactTestHarness;
-  
-  constructor() {
-    this.harness = new ReactTestHarness({
-      headless: process.env.HEADED !== 'true',
-      debug: process.env.DEBUG === 'true'
-    });
-  }
-  
-  async setup() {
-    await this.harness.initialize();
-  }
-  
-  async teardown() {
-    await this.harness.close();
-  }
-  
-  async testMJComponent(
-    componentCode: string,
-    data: any,
-    userState?: any,
-    callbacks?: any,
-    utilities?: any,
-    styles?: any
-  ): Promise<ComponentExecutionResult> {
-    // Test with MJ-style props structure
-    const props = { data, userState, callbacks, utilities, styles };
-    return this.harness.testComponent(componentCode, props);
-  }
-  
-  expectSuccess(result: ComponentExecutionResult) {
-    AssertionHelpers.assertSuccess(result);
-    return this;
-  }
-  
-  expectText(result: ComponentExecutionResult, text: string) {
-    AssertionHelpers.assertContainsText(result.html, text);
-    return this;
-  }
-  
-  expectNoText(result: ComponentExecutionResult, text: string) {
-    AssertionHelpers.assertNotContainsText(result.html, text);
-    return this;
-  }
-}
-
-// Usage in tests
-const tester = new ReactComponentTester();
-await tester.setup();
-
-const result = await tester.testMJComponent(
-  componentCode,
-  { title: 'Test', items: [] },
-  { viewMode: 'grid' }
-);
-
-tester
-  .expectSuccess(result)
-  .expectText(result, 'Test')
-  .expectNoText(result, 'Error');
-
-await tester.teardown();
-```
-
-### Testing with Different Library Configurations
-
-```typescript
-import { ReactTestHarness } from '@memberjunction/react-test-harness';
-import type { LibraryConfiguration } from '@memberjunction/react-runtime';
-
-class LibraryCompatibilityTester {
-  private harness: ReactTestHarness;
-  
-  constructor() {
-    this.harness = new ReactTestHarness({ headless: true });
-  }
-  
-  async testWithLibraries(
-    componentCode: string,
-    enabledLibraries: string[]
-  ) {
-    const config: LibraryConfiguration = {
-      libraries: [
-        // Always include runtime
-        { id: 'react', category: 'runtime', isEnabled: true, isRuntimeOnly: true, ... },
-        { id: 'react-dom', category: 'runtime', isEnabled: true, isRuntimeOnly: true, ... },
-        { id: 'babel', category: 'runtime', isEnabled: true, isRuntimeOnly: true, ... },
-        // Conditionally enable other libraries
-        { id: 'lodash', category: 'utility', isEnabled: enabledLibraries.includes('lodash'), ... },
-        { id: 'chart-js', category: 'charting', isEnabled: enabledLibraries.includes('chart-js'), ... },
-        { id: 'antd', category: 'ui', isEnabled: enabledLibraries.includes('antd'), ... },
-      ],
-      metadata: { version: '1.0.0', lastUpdated: '2024-01-01' }
-    };
-    
-    return this.harness.testComponent(componentCode, {}, {
-      libraryConfiguration: config
-    });
-  }
-}
-```
-
-### CI/CD Integration
-
-```typescript
-// ci-test-runner.ts
-import { ReactTestHarness } from '@memberjunction/react-test-harness';
-import * as fs from 'fs';
-import * as path from 'path';
-
-export async function runComponentTests(testDir: string) {
-  const harness = new ReactTestHarness({ 
-    headless: true,
-    screenshotOnError: true,
-    screenshotPath: './test-failures/'
-  });
-  
-  const results = {
-    total: 0,
-    passed: 0,
-    failed: 0,
-    failures: [] as Array<{ component: string; error: string }>
-  };
-  
-  await harness.initialize();
-  
-  try {
-    const files = fs.readdirSync(testDir)
-      .filter(f => f.endsWith('.jsx') || f.endsWith('.tsx'));
-    
-    for (const file of files) {
-      results.total++;
-      
-      try {
-        const result = await harness.testComponentFromFile(
-          path.join(testDir, file)
-        );
-        
-        if (result.success) {
-          results.passed++;
-        } else {
-          results.failed++;
-          results.failures.push({
-            component: file,
-            error: result.error || 'Unknown error'
-          });
-        }
-      } catch (error) {
-        results.failed++;
-        results.failures.push({
-          component: file,
-          error: String(error)
-        });
-      }
-    }
-  } finally {
-    await harness.close();
-  }
-  
-  return results;
-}
+const result = await runner.Render(compiledComponent, {
+    props: { data: testData },
+    timeout: 5000
+});
 
-// Run in CI
-const results = await runComponentTests('./components');
-console.log(`Tests: ${results.passed}/${results.total} passed`);
+console.log('Rendered successfully:', result.success);
+console.log('Console errors:', result.consoleErrors);
 
-if (results.failed > 0) {
-  console.error('Failures:', results.failures);
-  process.exit(1);
-}
+await browser.Close();
 ```
 
-## Component Execution Options
+### Constraint Validation
 
 ```typescript
-interface ComponentExecutionOptions {
-  componentSpec: ComponentSpec;
-  props?: Record<string, any>;
-  setupCode?: string;           // Additional setup code
-  timeout?: number;              // Default: 30000ms
-  waitForSelector?: string;      // Wait for element before capture
-  waitForLoadState?: 'load' | 'domcontentloaded' | 'networkidle';
-  contextUser: UserInfo;
-  libraryConfiguration?: LibraryConfiguration; // New: Custom library configuration
-}
-```
-
-## Test Harness Options
-
-```typescript
-interface TestHarnessOptions {
-  headless?: boolean;            // Default: true
-  viewport?: {                   // Default: 1280x720
-    width: number;
-    height: number;
-  };
-  debug?: boolean;               // Default: false
-  screenshotOnError?: boolean;   // Default: true
-  screenshotPath?: string;       // Default: './error-screenshot.png'
-  userAgent?: string;
-  deviceScaleFactor?: number;
-  locale?: string;
-  timezoneId?: string;
-}
-```
-
-## Writing Test Files
-
-Test files should export a default async function:
+import {
+    SQLWhereClauseValidator,
+    RequiredWhenValidator,
+    SubsetOfEntityFieldsValidator
+} from '@memberjunction/react-test-harness';
 
-```javascript
-// my-component.test.js
-export default async function runTests(harness) {
-  const { AssertionHelpers } = harness;
+// Validate a SQL WHERE clause
+const sqlValidator = new SQLWhereClauseValidator();
+const sqlResult = sqlValidator.Validate("Status = 'Active' AND Age > 18", context);
 
-  await harness.runTest('Component renders', async () => {
-    const result = await harness.testComponentFromFile('./MyComponent.jsx');
-    AssertionHelpers.assertSuccess(result);
-  });
+// Validate required-when conditions
+const reqValidator = new RequiredWhenValidator();
+const reqResult = reqValidator.Validate("IsAdmin = true", context);
 
-  await harness.runTest('Component handles props', async () => {
-    const result = await harness.testComponentFromFile(
-      './MyComponent.jsx',
-      { value: 100 }
-    );
-    AssertionHelpers.assertContainsText(result.html, '100');
-  });
-}
+// Validate field subset
+const subsetValidator = new SubsetOfEntityFieldsValidator();
+const subsetResult = subsetValidator.Validate(["Name", "Email", "Status"], context);
 ```
 
-## Advanced Usage
+## Components
 
-### Custom Browser Context
+| Component | Description |
+|-----------|-------------|
+| `TestHarness` | Main orchestrator for running all test types |
+| `ComponentLinter` | Static analysis of component source code |
+| `ComponentRunner` | Browser-based component rendering tests |
+| `BrowserContext` | Manages Playwright browser lifecycle |
+| `TypeInferenceEngine` | Infers prop types from source code |
+| `ControlFlowAnalyzer` | Detects control flow issues |
+| `PropValueExtractor` | Extracts and validates prop values |
+| `StylesTypeAnalyzer` | Analyzes component style patterns |
+| `LibraryLintCache` | Caches lint results for external libraries |
+| `LinterTestTool` | Testing utilities for linter development |
 
-```typescript
-import { BrowserManager } from '@memberjunction/react-test-harness';
+## Testing
 
-const browser = new BrowserManager({
-  viewport: { width: 1920, height: 1080 },
-  locale: 'en-US',
-  timezoneId: 'America/New_York'
-});
-
-await browser.initialize();
-const page = await browser.getPage();
+```bash
+npm test
+npm run test:watch
 ```
 
-### Direct Page Evaluation
-
-```typescript
-const harness = new ReactTestHarness();
-await harness.initialize();
-
-// Evaluate JavaScript in the page context
-const result = await harness.evaluateInPage(() => {
-  return document.querySelector('h1')?.textContent;
-});
+Uses Vitest for unit testing.
 
-// Take screenshots
-const screenshot = await harness.screenshot('./output.png');
-```
+## Dependencies
 
-## Limitations
-
-Due to the architecture of the test harness (Node.js controlling a browser via Playwright), there are some important limitations to be aware of. See [docs/limitations.md](./docs/limitations.md) for details on:
-
-- Serialization requirements between Node.js and browser
-- BaseEntity method access limitations
-- Differences between test and production environments
-
-## Best Practices
-
-1. **Always close the harness** after tests to free resources:
-   ```typescript
-   try {
-     // Run tests
-   } finally {
-     await harness.close();
-   }
-   ```
-
-2. **Use waitForSelector** for dynamic content:
-   ```typescript
-   const result = await harness.testComponent(componentCode, props, {
-     waitForSelector: '.async-content',
-     timeout: 5000
-   });
-   ```
-
-3. **Enable debug mode** during development:
-   ```typescript
-   const harness = new ReactTestHarness({ debug: true });
-   ```
-
-4. **Group related tests** for better organization:
-   ```typescript
-   await harness.runTests([
-     { name: 'Feature A - Test 1', fn: async () => { /* ... */ } },
-     { name: 'Feature A - Test 2', fn: async () => { /* ... */ } },
-     { name: 'Feature B - Test 1', fn: async () => { /* ... */ } },
-   ]);
-   ```
-
-5. **Test with different library configurations** to ensure compatibility:
-   ```typescript
-   // Test with minimal libraries
-   const minimalResult = await harness.testComponent(code, props, {
-     libraryConfiguration: minimalLibraryConfig
-   });
-   
-   // Test with full libraries
-   const fullResult = await harness.testComponent(code, props, {
-     libraryConfiguration: fullLibraryConfig
-   });
-   ```
-
-## Troubleshooting
-
-### Component Not Rendering
-- Ensure your component is named `Component` or modify the execution template
-- Check for syntax errors in your component code
-- Enable debug mode to see console output
-- Verify required libraries are included in libraryConfiguration
-
-### Timeout Errors
-- Increase timeout value: `--timeout 60000`
-- Use `waitForLoadState: 'networkidle'` for components that load external resources
-- Check if the selector in `waitForSelector` actually exists
-
-### Screenshot Issues
-- Ensure the screenshot path directory exists
-- Use absolute paths for consistent results
-- Check file permissions
-
-### Library Loading Issues
-- Verify CDN URLs are accessible
-- Check that globalVariable names match what components expect
-- Ensure runtime libraries (React, ReactDOM, Babel) are always included
-- Use isRuntimeOnly flag for libraries not exposed to components
+| Package | Purpose |
+|---------|---------|
+| `@memberjunction/react-runtime` | Component compilation and registry |
+| `@memberjunction/interactive-component-types` | Component type definitions |
+| `@memberjunction/core` | Core MJ functionality |
+| `@memberjunction/core-entities` | Entity types |
+| `@babel/parser` | AST parsing for static analysis |
+| `@babel/traverse` | AST traversal |
+| `@playwright/test` | Browser automation |
+| `commander` | CLI framework |
+| `chalk` | Terminal styling |
+| `node-sql-parser` | SQL WHERE clause validation |
 
 ## License
 
-ISC
+ISC