Turn your Netflix into Catflix!
In this article, I’ll show you the ultimate way of mocking microservices and eventually you will turn your Netflix clone into a Catflix.
Rationale
Let’s say I’m the lead front-end developer of Catflix and I want to display the movie or a TV series episode duration on a section named Runtime in the details of an entry.
The unit for this Runtime field value is minutes and I require a change in the API that’s developed and maintained by one of our back-end teams. So I need to ask them to make the change.
We have staging servers and we deploy our feature branches into them to bind the front-end to back-end and eventually verify the feature through the tests written in Selenium.
This is a procedure that multiple teams (like front-end, back-end, DevOps, QA, etc.) need to participate to achieve even the smallest result. While in most of the cases the changes require revisions and the same procedure is repeated multiple times. You can imagine how the workflow to becomes cumbersome after a certain point.
Mockintosh as an open-source RESTful API mocking tool, is a solution for this kind of an exhausting workflow because:
Mockintosh enables software development teams to work independently while building and maintaining a complicated microservice architecture.
Solution
I first need to install Mockintosh into my machine:
$ pip3 install mockintoshYes, it’s written as a Python package but nothing really specific to Python language going on because it’s a language agnostic solution.
Then I look at the Network tab of Chrome Dev Tools to identify the list of endpoints that I need to mock.
So apparently the endpoints that I need to mock are:
/3/discover/movie
/3/trending/all/week
/3/movie/top_rated
/3/discover/tv
/3/tv/<id>Therefore I need a Mockintosh config like below:
To run the config:
$ mockintosh mock_config.yaml
This config uses Jinja2 as the templating engine that’s specified withtemplatingEngine: "Jinja2".
Management UI will be available on port 8000:
management:
port: 8000
ssl: trueand there are two mocked services that will be available on ports 8081 and 8082.
The “Movie Database API” service consists of five endpoints that we have identified previously. Each endpoint responds with 200 HTTP status code and Content-Type=application/json; charset=UTF-8 included in the response headers. The response templates are specified in the body field with the @resources/filename.json.j2 pattern to indicate the files to be loaded from a relative path inside a directory named resources.
The service named “Image Service” is a request forwarding service that the upstream is specified through the fallbackTo keyword and the value is set to https://loremflickr.com which means that every request will be forwarded to https://loremflickr.com/ address. LoremFlickr is a website that returns a random image according to your needs.
Now let’s dive in to templating…
Templating
Here is the template discover_movie.json.j2:
"results": [{% for n in range(range(100) | random) %}
{
}{% if not loop.last %},{% endif %}
{% endfor %}],Gives us a number of results between 0 and 100 randomly.
"adult": {{ fake.boolean(chance_of_getting_true=25) | lower }},Gives us a boolean value with the 25% chance of being True and lower Jinja2 filter makes it lowercase.
"backdrop_path": "/500/281/cat?random={{ fake.random_int(min=0, max=1000, step=1) }}",Gives us a random cat image from loremflickr.com It’s actually a relative path and such paths have a base URL in our React app like http://localhost:8082/therefore they belong to the “Image Service”.
"genre_ids": {{ ([request.queryString.with_genres | int] + fake.random_choices(elements=[12, 28, 53, 135, 956, 2786, 10752])) | unique | list | tojson }},Gives us a list of integers that including but not limited to the with_genres query string parameter which serves as the information of what genres that the movie belongs to.
"original_title": "{{ fake.text(max_nb_chars=20)[:-1] | title }}",Gives us a text with maximum number of characters 20 and with [:-1] operator we remove the . (dot) character at the end and lastly we capitalize every word in that text with the title helper.
I guess you get the idea for how templating can be done for any kind of data type. The templating in Mockintosh is not limited to JSON files; it can also be HTML, XML, SQL, GraphQL or a code in a general-purpose programming language or even a binary file, you name it. The possibilities are infinite.
Result
For the runtime field that I’ve added into our React component:
Runtime: {props.movie.runtime || props.movie.episode_run_time}mto be functional, I just need to add the runtime field:
"runtime": {{ fake.random_int(min=20, max=180, step=1) }}to my discover_movie.json.j2 template:
Voila! I refresh the page and since the template is rendered on-demand for each individual request, the field is now available and here is the result:
I can even make it generate huge numbers to test the UI against possible issues under such circumstances:
"runtime": {{ fake.random_int(min=1000000, max=999999999, step=1) }}
Conclusion
With Mockintosh, one can have a full control over the API that he or she is consuming without the need of knowing any knowledge about the back-end. Therefore one can decouple his or her workflow from the work that needs to be done by a different development team. This enables the developers that work on a non-monolithic architecture, for a much faster iterations of a software development.
Once you have the mock for the related service, it’s just so easy to pass that mock to the responsible team as an explanation of the desired response or behavior. Such that Mockintosh can be used as a mean of communication.
References
You can find the examples given in this article at: https://github.com/mertyildiran/catflix
Documentation website: https://mockintosh.io/
GitHub repository: https://github.com/up9inc/mockintosh
Related YouTube video: https://youtu.be/TguEgMENJbM
Bug tracker: https://github.com/up9inc/mockintosh/issues
Faker API reference: https://faker.readthedocs.io/en/master/providers.html
