Introduction

When mocking APIs, our aim is to have the most realistic and diverse data possible. For instance, imagine you want a list of users: Would you like these users to always be the same? Do you want them to have authentic names? Can we make these names change with every request?

With Mockfly, we can generate random data for our endpoints, providing an experience as close as possible to when we consume a real API.

Generating random data

To generate random data, we utilize one of the best libraries available: Faker.js (v9.0.1). This library allows us to emulate numerous data types for use in our mock API responses.

Imagine wanting to generate a random name each time a request is made to your mock API. This can be easily accomplished by defining the endpoint response as follows:

{"name": "{{person.firstName}}"}

Now, when a request is made to our mock API, it will respond with random names, for example, "Ocie".

The list of methods available is extensive, aligning with those provided by Faker.js. These can be consulted at this link. As an illustration, to generate a dog breed name, we can use:

{"dog": "{{animal.dog}}"

This can be employed wherever appropriate, as long as it's of the String type and follows the correct syntax. For example, it can be used within arrays and combined with non-random elements:

{
	"users": [{
		"name": {
			"firstName": "{{person.fullName}}"
		}
	}, {
		"name": {
			"firstName": "test"
		}
	}]
}

You can also use more than one Faker.js method in a string. For example, imagine you want to dynamically generate a name and gender in the same string. To do this, you can do the following

{"text": "{{person.firstName}} {{person.gender}}"}

And what the mock API will return will be something like this:

{"text":"Angelica Cisgender female"}

Using params to generate random data

Some Faker.js methods require parameters. In Mockfly, we can also make use of them. For instance, if we want a random 2-digit number, we can pass the parameters to the function as:

{"number": "{{string.numeric 2}}" }

This would return a random 2-digit number, such as: "42".

Using Some Very Useful Helpers

In addition to generating random data, we also have some useful helpers. For example, we may want the API to return one of the indicated elements for a field, and this would be done as:

{ "colors": "{{helpers.arrayElement red, green, yellow}}" }

This would return one of the specified colors, like:

{ "colors": "yellow" }

Another handy helper is the shuffle function, which randomizes the order of an array's elements. If we want our API to respond with a varied sequence, this can be achieved with the shuffle helper. Its use is similar to arrayElement. If we define our mock API response as:

{ "word": "{{helpers.shuffle cat,dog,mouse}}" }

Our mock API might respond with:

{ "word": ["dog", "mouse", "cat"] }

or

{ "word": ["mouse", "dog", "cat"] }

In essence, it takes the provided elements and rearranges the order of the array's elements.

If you're interested in exploring more methods to use in your mock API response, I recommend checking out the FakerJS API documentation.

Working with Dates

In addition to generating random data from your mock API, you can return a formatted date in the format you need. You can use Faker.js methods like soon, recent, future, etc., but you can also simply use the JavaScript Date class to generate dates.

However, keep in mind that you cannot return a Date object directly, as the date needs to be a string. You can still use other methods from the Date class, such as getFullYear(), toISOString(), toDateString(), etc.

To use it, you just need to use the same syntax as you would in JavaScript, but with curly brackets at the beginning and the end.

For example:

{
  "dateISOString": "{{new Date().toISOString()}}",
  "dateUTCString": "{{new Date().toUTCString()}}",
  "getFullYear": "{{new Date().getFullYear()}}"
}

If we use these methods in our endpoint, when we make a request to our mock API, we will receive something like this:

{
  "dateISOString":"2024-09-25T16:18:36.770Z",
  "dateUTCString":"Wed, 25 Sep 2024 16:18:36 GMT",
  "getFullYear":2024
}

There is a more modern way to format dates using the Intl.DateTimeFormat() class in JavaScript, which allows you to format dates more easily, with more options, and even adapt them to the timezone. For example:

{
  "date": "{{new Intl.DateTimeFormat('es-ES').format(new Date())}}",
  "dateOptions": "{{new Intl.DateTimeFormat('es-ES', { year: 'numeric', month: 'long', day: 'numeric' }).format(new Date())}}",
  "dateTimeFormat": "{{new Intl.DateTimeFormat('en-GB', { dateStyle: 'full', timeStyle: 'long', timeZone: 'Australia/Sydney' }).format()}}"
}

Using the methods from the Intl.DateTimeFormat() class in JavaScript, we will receive something like this:

{
    "date":"25/9/2024",
    "dateOptions":"25 de septiembre de 2024",
    "dateTimeFormat":"Thursday 26 September 2024 at 02:23:30 GMT+10"
}