What are QuickMocker and Shortcodes?
QuickMocker is currently one of the best online dummy API tools with a simple intuitive user interface and a wide range of API mocking features. In this article, we’ll dive a bit more deeply into the response templating feature. It is implemented with the help of so-called “shortcodes”. This term (shortcodes) most likely derives from the very famous, loved by many and hated by even more, a blog like CMS which is… yes, WordPress! Because WordPress is so famous, many of you might be familiar with the dynamic content generation approach where you use some placeholder wrapped with square brackets inserted inside your blog’s page or post content and it gets replaced with the dynamic data which could be something like simple word, date or a very complex image carousel, a contact form or whatever else you may imagine.
QuickMocker is using a similar way for dynamic data generation inside the fake API response. Obviously, instead of post/page content, it has the HTTP response body. As for the shortcodes, they are wrapped with the usual brackets. A sample shortcode (DateTime) would generate a current date/time, e.g. “2021-01-28 10:25:11”.
Why would you need shortcodes within a dummy API response?
So what’s the crack? The answer is very simple: for development and testing. If you are developing back-end or front-end apps, you will need to validate and test input data. Shortcodes can help you with generating some random or fake input data. With the shortcodes, it is easy to generate sets of data (arrays) with some unique information inside each object of your array, which again can help with validation and testing. This can also be very useful for the layout/design review and testing while developing client apps.
What kind of shortcodes does QuickMocker support?
There are 3 types of shortcodes available for the API mocks: contextual, random, and faker.
- Contextual – those shortcodes are able to extract data from the request, for instance, you can get the body value by its property name and using the shortcode return it back with the response. Another good sample would be extracting the parameter from the request URL and returning it back inside the response body. Let’s say your request URL is the following: /user/123. By setting up a proper RegExp ^user/([0-9]+)$ for the request URL pattern and then using the (urlParam:0) shortcode with a zero parameter, you’ll be able to return back extracted user ID “123” inside the response body.
- Random – simply for generating some random data like numbers, letters, strings, words, texts, dates, etc.
- Faker – they are alike random shortcodes because the final information that they convert to is selected in a random way. But this information is very similar to the real data. Yes, using faker shortcodes you can generate for instance a whole user profile starting from its name and ending with the phone number, postal code, credit card, etc.
Many shortcodes can accept parameters. Most of the shortcodes support localization parameters which allows getting the faker or random data in a specific language (texts, names, etc) or for the specific region (dates, phone numbers, etc). All of the shortcodes are listed on this shortcodes list page and you’ll be able to see them while creating an API stub or fake API endpoint.
Shortcodes Sample
Let’s build a simple user profile for the single user response using few shortcodes below:
{
“id”: (urlParam:0),
“name”: “(fakeName)”,
“email”: “(fakeEmail)”,
“phone”: “(fakePhoneNumber)”,
“birth_date”: “(fakeDate)”,
“country”: “(fakeCountry)”,
“about”: “(fakeSentence:50)”
}
What is really cool is that you can create a fake API endpoint for a list of users easily by simply copying/pasting this profile a few times. The only thing you would need to do additionally is updating (urlParam:0) shortcode to something like (randomNumber:1:10000) because the user list endpoint should not have any parameter like user ID inside. See the response body of the dummy API endpoint at the following URL: https://wr8op02m7r.api.quickmocker.com/user. Additionally have a look at the similar response templating samples on the QuickMocker site. BTW, because QuickMocker is using Monaco editor (same as VSCode), the work with the response body editing is really easy.
Response Caching
The last interesting thing to mention is the Response Body caching feature. It allows the shortcodes to be generated only one time per each URL path. This feature is off by default, though it is recommended to turn it on if you work with shortcodes unless you really want to get different information for the same URL each time you request it.
Summary
To sum up, QuickMocker is a great online API tool and it is a perfect choice for the quick generation of API mocks with dynamic random or faker data. Don’t wait for real API services to be created, define fake API endpoints using QuickMocker, and continue coding your app.