Mocking Backend Response

Background

Testing the backend server or logic without UI is relatively easy than testing the front end without any actual backend services. In order for frontend developers to develop a reactive UI application, one needs a functional backend. But let's admit it! backend logic won’t be available while developing a front end for most of the time. This is why we need a tool that could mock backend response. Wait! can’t we create a mocks in the component level and use it? Yes, of course! but let's take a step back and think with a larger perspective. How many mock can we create in client-side code? After certain period maintenance would be a problem.

Solution!

So what's the solution? I had the same question for a while, searched and tried out so many node and other packages. At last, I found Wiremock, a backend mocking tool coded in Java + Json + handlebars. It fits for most of my purpose. But there were so many gaps that could be filled in the framework. Most of the front end developers are from JS background. Implementing a new class and adding that to listeners wouldn’t be an efficient way. So I have come up with this package called mock-json-response.

Mock JSON Response package is built on the idea of less configuration and more control. Removing the dependency of handlebars and instead depending on the power of JS for data manipulation. It has all the basic features that modern mocking needs!

Enough of history lets dive right in!

In Action

To get started, mock-json-response takes 2 mandatory arguments, functions and data directory path (path given should be absolute). Before the server is started, function directory files are loaded which decides the route of the incoming request.

Data Directory simply has JSON files with the raw response data.

Function Directory will be expecting the JS object in the files, with 3 required fields logic, request, response.

logic is a function type which receives request and data as arguments will be used to manipulate the response data.

Possible values for request object: method, urlPath, headers. “urlPath” can be both string or any valid regex. “headers” is an object which will match the value of the incoming header to the value given in the headers object with the help of an appropriate helper function.

// functionDirectory/test.js
logic: ({ headers }, { data }) => {
     data.message = headers["x-error"];
},
request: {
    method: "GET",     //type of request
    urlPath: "/mock/(.*)/error", //path of the request
    headers: {      
        "x-mock": {   //header keys
            contains: "error",  //matchers to match hea value
        }
    },
}

Possible values for response object: status, headers, inlineData, bodyFileName. InlineData is an object that can be used for constructing response data. “bodyFileName” is used to map JSON from data directory.

// functionDirectory/test.js
response: {
    status: 200,  //status to returned
    headers: {    //headers in response
        "Content-Type": "application/json",
    },
    inlineData: {   //a way to pass raw data inline
        test: 'inline data'
    },
    bodyFileName: "data.json"   //name of the file with raw jsonData
}

// dataDirectory/data.json
{
    "value":"generic string"
}

When a request GET: http://localhost:3000/mock/WES-1234/error with headers “x-mock”: “authentication error” will return

//response 
{
    value: "generic string",
    message: "authentication error"
}
with status as 200 and headers as "Content-Type": "application/json"

Conclusion

Mocking backend service never been so simple with mock-json-response. Try this open-source, modern framework.

Thanks for taking the time to read my article. Will be back with interesting topics and updates, stay tuned.