🔧 Mock API System

A powerful HTTP interceptor system for Angular 20 that enables realistic API mocking for development and testing.

🎯 Features

1. Zero Backend Required: Full-stack development without running backend services.
2. Intelligent Storage: Persistent mock data using IndexedDB/LocalStorage.
3. Dynamic Responses: Route-based handlers with wildcard support.
4. Realistic Delays: Configurable network latency simulation.
5. Observable & Promise Support: Works with all async patterns.

🚀 Quick Start

Basic Setup

// app.config.ts
import { provideHttpClient, withInterceptors } from '@angular/common/http';
import { mockHttpInterceptor, Mock InterceptorUtilsService } from '@libs-core/mock-api';

export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient(withInterceptors([mockHttpInterceptor])),
    {
      provide: APP_INITIALIZER,
      multi: true,
      deps: [MockInterceptorUtilsService],
      useFactory: (utils: MockInterceptorUtilsService) => () => {
        utils.configureMockInterceptor(
          {
            enabled: true,
            delay: [100, 300],
            fallbackToNetwork: false
          },
          { ...UsersMock, ...ProductsMock }
        );
      }
    }
  ]
};

Defining Mocks

import { MockDefinition, MockRequest, MockResponse } from '@libs-core/mock-api';

export const UsersMock: MockDefinition = {
  'GET /api/users': (req): MockResponse => ({
    status: 200,
    data: { users: mockUsers, total: mockUsers.length }
  }),
  
  'GET /api/users/:id': (req): MockResponse => {
    const user = mockUsers.find(u => u.id === req.params.id);
    return user
      ? { status: 200, data: { user } }
      : { status: 404, data: { error: 'User not found' } };
  },
  
  'POST /api/users': (req): MockResponse => ({
    status: 201,
    data: { ...req.body, id: generateId() }
  })
};

📐 Core Types

MockRequest

Complete request information passed to handlers.

interface MockRequest {
  method: string;
  url: string;
  params: Record<string, string>;    // URL params (:id)
  query: Record<string, string>;     // Query params (?page=1)
  body: any;
  headers: Record<string, string>;
}

MockResponse

Structure that handlers must return.

interface MockResponse {
  status: number;
  data: any;
  headers?: Record<string, string>;
  delay?: number;  // Override global delay
}

🛠️ Advanced Features

Data Generator

Generates realistic mock data.

import { DataGenerator } from '@libs-core/mock-api';

const gen = DataGenerator.getInstance();
const user = gen.generateUser();
const users = gen.generateArray(() => gen.generateUser(), 50);

Persistent Storage

Mock data survives page refreshes.

utils.configureMockInterceptor({
  persistence: {
    enabled: true,
    storage: 'indexeddb',
    ttl: 3600000  // 1 hour
  }
}, mocks);

Middleware System

Process requests/responses globally.

const authMiddleware: MockMiddleware = {
  name: 'auth',
  priority: 800,
  onRequest: (req) => ({
    ...req,
    headers: { ...req.headers, 'Authorization': 'Bearer mock-token' }
  })
};

📚 Common Patterns

CRUD Template

function createCrudMocks<T>(
  entityName: string,
  basePath: string,
  initialData: T[] = []
): MockDefinition {
  let data = [...initialData];
  
  return {
    [`GET ${basePath}`]: () => ({ status: 200, data: { items: data } }),
    [`GET ${basePath}/:id`]: (req) => {
      const item = data.find(d => d.id === req.params.id);
      return item
        ? { status: 200, data: item }
        : { status: 404, data: { error: `${entityName} not found` } };
    },
    [`POST ${basePath}`]: (req) => {
      const newItem = { ...req.body, id: Date.now() };
      data.push(newItem);
      return { status: 201, data: newItem };
    },
    // PUT, DELETE...
  };
}

Last Updated: December 3, 2025 Session ID: 3 Status: ✅ Production Ready