Super Mocks

React library for automatic test data generation using artificial intelligence. Analyzes form context and automatically fills fields with realistic AI-generated data.

Features

• AI-powered mock generation (OpenAI GPT or Google Gemini)
• Automatic form context analysis
• Automatic detection of types, validations, and constraints
• Support for native forms, React Hook Form, and other state managers
• Full TypeScript support
• Customizable and extensible

Installation

npm install super-mocks

Configuration

Configure the library once at the start of your application:

import { configure } from 'super-mocks';

configure({
  apiKey: process.env.REACT_APP_OPENAI_API_KEY || 'your-api-key',
  provider: 'openai', // 'openai' or 'gemini'
  model: 'gpt-4o-mini', // optional
  temperature: 0.7, // optional, default 0.7
  maxTokens: 1000, // optional, default 1000
});

Supported AI Providers

• OpenAI: GPT-4, GPT-3.5, GPT-4o-mini
• Google Gemini: gemini-1.5-flash (default), gemini-1.5-pro, gemini-pro

Basic Usage

import React from 'react';
import { SuperMocksButton } from 'super-mocks';

function MyForm() {
  return (
    <form>
      <input type="text" name="nome" required />
      <input type="email" name="email" required />
      <input type="number" name="idade" min="18" max="100" />
      
      <SuperMocksButton />
    </form>
  );
}

Playground

Try Super Mocks in a live interactive environment:

Super Mocks Playground

The playground includes interactive examples demonstrating:

• Basic form filling
• React Hook Form integration
• Custom configurations
• Multiple field types
• Real-time AI generation

Visit the playground to see Super Mocks in action without any setup required.

Examples

With React Hook Form

import { useForm } from 'react-hook-form';
import { SuperMocksButton } from 'super-mocks';

function MyForm() {
  const { register, handleSubmit } = useForm();

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('nome', { required: true })} />
      <input {...register('email', { required: true })} />
      
      <SuperMocksButton />
    </form>
  );
}

With Custom Container

import { useRef } from 'react';
import { SuperMocksButton } from 'super-mocks';

function MyForm() {
  const formRef = useRef<HTMLFormElement>(null);

  return (
    <div>
      <form ref={formRef}>
        <input name="campo1" />
        <input name="campo2" />
      </form>
      
      <SuperMocksButton containerRef={formRef} />
    </div>
  );
}

With Callbacks

<SuperMocksButton 
  onMockGenerated={(data) => {
    console.log('Generated data:', data);
  }}
  onError={(error) => {
    console.error('Error:', error);
  }}
/>

API

configure(config: SuperMocksConfig)

Configures the library with credentials and options.

Parameters:

• apiKey: string - API key (required)
• provider?: 'openai' | 'gemini' - AI provider (default: 'openai')
• model?: string - Model to use (default depends on provider)
• temperature?: number - Creativity 0-1 (default: 0.7)
• maxTokens?: number - Maximum tokens (default: 1000)

<SuperMocksButton />

React component that adds an auto-fill button.

Props:

• componentName?: string - Component name (optional)
• containerRef?: RefObject<HTMLElement> - Reference to form container
• label?: string - Button text (default: "Auto Fill with AI")
• size?: 'small' | 'medium' | 'large' - Button size
• variant?: 'primary' | 'secondary' | 'outline' - Visual variant
• onMockGenerated?: (data: any) => void - Callback when mock is generated
• onError?: (error: Error) => void - Error callback
• className?: string - Additional CSS classes
• style?: CSSProperties - Inline styles

How It Works

1. Analysis: Automatically detects form fields (inputs, textareas, selects)
2. Context: Extracts types, validations, constraints, and options
3. Generation: Sends context to AI which generates realistic data
4. Filling: Fills fields using React-compatible events

Compatibility

Works with:

• Create React App
• Vite
• Next.js (may need to import CSS explicitly: import 'super-mocks/styles')
• Webpack, Parcel, and other modern bundlers
• TypeScript and JavaScript
• React Hook Form, Formik, and native forms

Requirements:

• React >= 16.8.0
• React DOM >= 16.8.0
• Node.js >= 14.0.0

Supported Field Types

The library automatically detects:

• input[type="text"] → String
• input[type="email"] → Valid email
• input[type="number"] → Number (respects min/max)
• input[type="tel"] → Phone
• input[type="date"] → Date
• input[type="checkbox"] → Boolean
• input[type="radio"] → String
• textarea → Long text
• select → Select options

Customization

Variants

• primary - Purple gradient (default)
• secondary - Gray
• outline - Transparent background with border

Sizes

• small - Small
• medium - Medium (default)
• large - Large

Custom CSS

.super-mocks-button {
  /* your styles */
}

Security

Important: Never commit API keys in code. Use environment variables:

configure({
  apiKey: process.env.REACT_APP_OPENAI_API_KEY || '',
});

Troubleshooting

Error: "Configuration required"

Make sure to call configure() before using the component.

Error: "No form container found"

Place the button inside the form or use containerRef.

Fields are not filled

• Verify fields have name or id attributes
• Ensure the container is correct

CSS not appearing (Next.js)

Import explicitly:

import 'super-mocks/styles';

Contributing

Contributions are welcome. Open an issue or pull request on GitHub.

License

MIT

Support

For issues or questions, open an issue.