Mockabilly: A Template-Driven Mocker that Rocks


I recently found myself working extensively with mocking frameworks. As is the case with so many UI teams that are in an awkward toe-crushing dance of component design and resource readiness, our team needed to prove out designs that were not data-ready. In the past, my quick and dirty solve for this was to implement an http base class that all the component services inherit from. If mocking is "turned on" the base class simply returns a json file living in a mock folder somewhere. Simple and, for most situations, it did the job.

Where the above approach fell short (and I am sure there are many other examples that I am not providing) was in testing. We were unable to have the kind of fine-tuned control we required during our cypress and jest tests. As a result, a colleague turned me on to the MirageJS framework. I really love mirage. The framework is extremely dynamic - allowing us to wire up routes and extend models according to the needs of our application (and our tests). If you are considering a mocking framework, I highly recommend you check it out.

However, one thing that i didn't like about mirage was the amount of customization required to extend its models. I quickly found myself writing a lot of custom code just to generate mock responses. For example, in the light-weight example provided by mirage, we are extending the movie model. As you can probably imagine, as you application grows in complexity and the number of models you introduce increases, this task of building and maintaining your mock responses becomes a bit more time-consuming than I cared for.

server.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import { Server, Model, Factory } from "miragejs"

new Server({
  models: {
    movie: Model,
  },

  factories: {
    movie: Factory.extend({
      title(i) {
        return `Movie ${i}` // Movie 1, Movie 2, etc.
      },

      year() {
        let min = 1950
        let max = 2019

        return Math.floor(Math.random() * (max - min + 1)) + min
      },

      rating: "PG-13",
    }),
  },
})

As a time-saving stop-gap (slowly fade in "stray cat strut", Paul), I built mockabilly. The idea is pretty simple. Rather than designing specific functions inside of your mirage model factories, we store the JSON representation of those models in a mock folder somewhere and then generate the mock data mirage expects. This is done using a keyword library, freeing up developers to focus elsewhere. For example, assuming you have a Student model in your project and you want to mock it out, you might have the following in your mocks folder:

student.json 

1
2
3
4
5
6
7
8
9
{
    "id": "NumbersOne",
    "name": "WordsTwo",
    "email": "Email",
    "bio": "SentencesFive",
    "City": "WordsTwo",
    "State": "WordsOne",
    "Birthday": "Date"
}

The mockabilly generator recognizes the keywords and maps them to mock data accordingly. The below table lists the current mapping options:
Value Output
WordsOne, WordsTwo... WordsFive creates up to five words
SentencesOne, SentencesTwo... SentencesFive creates up to five sentences
NumbersOne, NumbersTwo... NumbersNine creates up to nine digit numbers
Guid creates a random guid
Email creates a random email
TimestampUtc creates a UTC timestamp
Date creates a date
Boolean returns true or false
options: (e.g. cat||dog||mouse) returns one of the options (e.g. "cat")

Once the mock generator was in place, all that was left was to tell it how to locate the template contract (student.json) defined above. This can easily be done by adding an object inside of config somewhere in your project. For example, in my case I am exporting a mockTemplates object inside of global config. This is where we can add student.json.

config.js

1
2
3
4
5
6
7
8
9
const teacher = require('./tests/mocks/teacher.json');
const student = require('./tests/mocks/student.json');

module.exports = {
    mockTemplates: {
        teacher,
        student,
    },
};

We now have a model producing mock data and a way of locating it, the last step is to implement it in your mirageJS server class.

server.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import { Server, Model, Factory, Response } from 'miragejs';
import { buildMock } from 'mockabilly';
import config from '../config';

export function makeServer({ environment = 'development' } = {}) {
    let server = new Server({
        environment,
        models: {
            teacher: Model,
            student: Model
        },
        routes() { ... },
        factories: {
            student: Factory.extend(
                buildMock(config.mockTemplates['student'])),
            teacher: Factory.extend(
                buildMock(config.mockTemplates['teacher'])
            ),
        },
        seeds(server) {
            server.createList('student', 10);
            server.createList('teacher', 10);
        }
    });
});

And there you have it, rockin' mockin'. Below are some of the usual links:

NPM Module Here: mockabilly npm.
Github Repository Here: mockabilty repo.

Feel free to reach out, feedback always welcome. Now queue the fade-out music, Paul...

I don't bother chasing mice around I slink down the alleyway looking for a fight Howling to the moonlight on a hot summer night Singin' the blues while the lady cats cry "Wild stray cat, you're a real gone guy"

Popular Posts