API Mock GUI (Renewed)

A modern floating GUI tool for easily managing API mocking in React applications. This renewed version offers enhanced features and improved user experience.

Installation

npm install api-mock-gui

Usage

1. Basic Setup

import { MockProvider } from 'api-mock-gui';

function App() {
  return (
    <MockProvider>
      <YourApp />
    </MockProvider>
  );
}

2. API Mocking Configuration

import { useMockApiStore } from 'api-mock-gui';

function YourComponent() {
  const store = useMockApiStore();
  
  // Configure API mocking
  const addMockApi = () => {
    store.addApi({
      id: 'unique-id',
      path: '/api/test',
      method: 'GET',
      isEnabled: true,
      cases: [
        {
          id: 'case-1',
          name: 'Success Case',
          status: 200,
          body: { message: 'Success!' }
        }
      ]
    });
  };

  return (
    <button onClick={addMockApi}>
      Add Mock API
    </button>
  );
}

3. Apply Mocking to Axios Instance

import axios from 'axios';
import { applyMockToAxiosInstance } from 'api-mock-gui';

const api = axios.create({
  baseURL: 'https://api.example.com'
});

// Apply mocking to Axios instance
applyMockToAxiosInstance(api);

Key Features

• 🎯 Manage API mocking through a floating GUI
• 🔄 Real-time mocking state changes
• 📝 Manage multiple response cases
• 🔍 Network request monitoring
• 💾 Save and restore mocking configurations

API Reference

Components

• MockProvider: Context provider for mocking functionality
• FloatingApiMockManager: Floating GUI component

Hooks

• useMockApiStore: Hook for managing mocking state
• useMockStore: Hook for accessing mocking context

Utilities

• applyMockToAxiosInstance: Apply mocking to an Axios instance
• getMockGuiStatus: Check current mocking status
• debugMockGui: Output debugging information

Type Definitions

interface MockApi {
  id: string;
  path: string;
  method: HttpMethod;
  isEnabled: boolean;
  cases: MockCase[];
}

interface MockCase {
  id: string;
  name: string;
  status: number;
  body?: any;
  headers?: Record<string, string>;
}

Advanced Usage

Multiple Response Cases

store.addApi({
  id: 'user-api',
  path: '/api/users',
  method: 'GET',
  isEnabled: true,
  cases: [
    {
      id: 'success',
      name: 'Success Response',
      status: 200,
      body: { users: [...] }
    },
    {
      id: 'error',
      name: 'Error Response',
      status: 500,
      body: { error: 'Server Error' }
    }
  ]
});

Network Error Simulation

store.addApi({
  id: 'error-api',
  path: '/api/error',
  method: 'GET',
  isEnabled: true,
  cases: [
    {
      id: 'network-error',
      name: 'Network Error',
      status: 0,
      body: null,
      networkError: true
    }
  ]
});

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT