lawvs / mocat

🐈 Mocat is a mocking toolbar that allows you to interactively develop and test network requests.

Home Page:https://lawvs.github.io/mocat/#/user/login

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Mocat

CI npm

Mocat is a development toolbar for mocking. It allows you to interactively develop and test network requests. This library is inspired by cypress.

demo

Installation

To install and save in your package.json dev dependencies, run:

# With npm
npm install --save-dev mocat

# Or with yarn
yarn add --dev mocat

# Or with pnpm
pnpm add --save-dev mocat

Usage

// mock.ts
import { create } from 'mocat'

const app = create()

app.mockRoute({
  name: 'login api',
  // Specify the URL to match
  url: '/api/login',
  // Create scenarios
  scenarios: [
    {
      name: 'login success',
      response: {
        username: 'Alice',
        msg: 'ok',
      },
    },
    {
      name: 'login fail',
      desc: 'username or password incorrect',
      // The HTTP status code to send.
      status: 400,
      // HTTP headers to accompany the response.
      headers: { 'Content-Type': 'application/json' },
      // Serve a static string/JSON object as the response body.
      response: {
        msg: 'username or password incorrect',
      },
    },
  ],
})

Then load it from the application entry:

// main.ts
import { App } from './App'

// Load React
ReactDOM.render(<App />, document.getElementById('app'))
// Or Vue
createApp(App).mount('#app')

if (process.env.NODE_ENV !== 'production') {
  await import('./mock')
}

API

MockRoute

export interface MockRoute {
  /**
   * The name of API.
   */
  name?: string
  desc?: string
  /**
   * Match against the full request URL.
   * If a string is passed, it will be used as a substring match,
   * not an equality match.
   */
  url: string | RegExp | ((url: string) => boolean)
  /**
   * Match against the request's HTTP method.
   * All methods are matched by default.
   */
  method?:
    | 'GET'
    | 'POST'
    | 'OPTIONS'
    | 'PUT'
    | 'DELETE'
    | 'HEAD'
    | 'TRACE'
    | 'CONNECT'
  scenarios?: NetworkScenario[]
}

NetworkScenario

export interface NetworkScenario {
  /**
   * The name of scenario.
   */
  name: string
  /**
   * The description of scenario.
   */
  desc?: string
  /**
   * The HTTP status code to send.
   * @default 200
   */
  status?: number
  /**
   * HTTP headers to accompany the response.
   * @default {}
   */
  headers?: Record<string, string>
  /**
   * Serve a static string/JSON object as the response body.
   */
  response?: ConstructorParameters<typeof Response>[0] | Record<string, any>
  error?: any
}

Other similar projects

License

MIT

About

🐈 Mocat is a mocking toolbar that allows you to interactively develop and test network requests.

https://lawvs.github.io/mocat/#/user/login

License:MIT License


Languages

Language:TypeScript 92.2%Language:JavaScript 7.8%