@ticketmaster/allure-mock

Allure common mocking solution library.

Usage no npm install needed!

<script type="module">
  import ticketmasterAllureMock from 'https://cdn.skypack.dev/@ticketmaster/allure-mock';
</script>

README

@ticketmaster/allure-mock

Allure common mocking solution library.


This library is a collection of shared mocking middlewares to mock shared services inside an Allure project.

To use them, you need to have Mirage JS installed on your project. If it's not the case, we gonna install it with allure-mock.

Usage

1. Install dependencies

First, you need to install the dependencies.

# Optional. Only if you don't have miragejs on your project
yarn add miragejs -D

yarn add @ticketmaster/allure-mock -D

2. Create the mock server creator

If you don't already have one, you have to create a function to instantiate a mock server. This function will be called later if we need to mock calls.

We recommend to put this file at the root of your src folder and call it mock.ts.

// src/mock.ts

import { createServer } from "miragejs";
import type { Server } from "miragejs";
// Import a mocking middleware
// In this case this is the identityMock middleware that mock the identity service
import { identityMock } from "@ticketmaster/allure-mock";
import { featureFlagMock } from "@ticketmaster/allure-mock";

export const createMockServer = ({ environment = "test" } = {}): Server => {
  const server = createServer({
    environment,
  });

  // This is how we apply a mocking middleware
  // All your calls will go from top to bottom. So the order application of the middlewares is important
  // A mock middleware only take one parameter, the server instance
  identityMock(server);
  featureFlagMock(server);

  // Allow unhandled requests to pass through
  // see: https://miragejs.com/api/classes/server/#passthrough
  server.passthrough();

  return server;
};

3. Instanciate the mock server

Then, inside your application root file (which is probably here: src/pages/_app.tsx), you gonna have to instantiate your mock server in certain circumstance. For example, when the environment variable MOCK exist and is true.

// src/pages/_app.tsx

import React from "react";
import type { AppProps } from "next/app";
import { AppProvider, AppProviderProps } from "@ticketmaster/allure-core";
import { createMockServer } from "@src/mock";

if (process.env.MOCK === "true") {
  createMockServer({ environment: process.env.NODE_ENV });
}

...

If you need more granularity, for example you want certain mock middlewares to be activated only in certain circumstance, you should put this logic inside your createMockServer function.