Mocking API Response | Bondar Academy
Course: Mastering testRigor
Module: Working with APIs
Instructor: Artem Bondar
Lesson Summary
In this lesson, we discuss how to mock API responses for testing purposes. Mocking allows you to replace real API responses with your own, enabling the testing of various edge cases. Key Concepts API Mocking: Replacing real API responses with predefined responses. Testing Application: The example application includes endpoints for text and articles . Steps to Mock API Responses Open the application and inspect the network requests to identify the API endpoints. Create a new test to mock the desired API responses. Access the API documentation for syntax templates on mocking. Update the template with the appropriate parameters, including: Type of Call: e.g., GET API URL: Copy the endpoint URL to intercept. Response Body: Format the response as a JSON object. Ensure the mock declaration occurs before the application triggers the API call. Best Practices Use the template from documentation to avoid syntax errors. For complex responses, save them as global variables for easier management. Always include assertions to verify that the mocked responses are displayed correctly. In summary, mocking in Test Trigger involves declaring mocks before API calls, using templates for syntax, and managing complex responses through global variables. This approach enhances testing efficiency and accuracy.
Video Transcript
In this lesson, we're gonna talk about how to perform mocking of the API response. So I will remind you, mocking of the API is when you replace the real response from the API by your own response. So that way you can test different edge case scenarios or other difficult scenarios for your test application. So let's get into it. So here is our test application with articles and text. I make a right click inspect, networking tab and click refresh. So when I make a refresh, application makes API requests to text endpoint and articles endpoint. So this is the text, this is the articles. And if I go to the response tab, we have this object with the list of text. So let's create a first test and using this simple example, we will mock the list of those tags with desired tags that we want to be displayed. And the expected result that the mock tags should be displayed here in the popular tags list on the web page. So let's do this and I create a new test. So mock tags and later we're gonna make a mocking of the articles and articles. Okay, the first step would be login to application. And now let's open documentation to get the information how to do mocking. So I go to API testing, scrolling a little bit down and here is mocking API calls. So why I recommend you using this section of the documentation? Because the syntax is a kind of complex and in order not to figure out it from scratch, just take the template for mocking and then update this template according to the examples. So I'm taking this template from here and pasting it here. So now I need to update this template with my parameters. So first, I need to replace the type of the call that I am mocking. So this tags endpoint call is a get type of call. So I replace it with get. Mock API call, get, then API URL. I go to networking tab one more time and copy the API URL that we need to intercept. So this is the API tags endpoint. And when we intercept this tags endpoint, I want to return body. So the example of the test rigor shows that body here in this example, this is just a string. But in our example, it is a JSON object. So in order to return a JSON object in test rigor, you have two options. Option number one is to return JSON object as a string, something like this. So this is the example. But in order to do that, you will need to provide an escape character for the double quotes. So in this case, it will not have any conflicts. So not very convenient syntax and much better way to do this kind of JSON object, which is easy to read and easy to edit if you need to make any changes. So I would follow this kind of syntax. And in order to use this kind of syntax, I need to use this structure and body text starting from next line and ending with N. So let me copy this portion from here. And I'm going back to the test and returning body like this. Text starting from next line and ending with N. That's it. And now I need to replace this just a sample object with my current object from the current test application. So going back, response, and I'm taking the entire value of this response, just copying from the browser. Control C, going back, and Control V. All right, values are pasted. Now let's just modify these text. Which text do we want to display over here? For example, test rigor, then AI. And let's make something mocking is easy. And I will remove the rest of the text. I remove this one. I remove comma. And we can try to run this test. Add and run. All right, test was executed. But if we look into our screenshot, it actually didn't work. You see that the normal list of text is displayed with the article. So it didn't work. And the reason why it didn't work is this one. So when you create a mock for the API, you need to put this declaration before the browser perform the API call that you're going to mock. Otherwise, browser execute this action earlier than you declare the mock. So in our example, we put the mock after we log into application. But when we log into application, our browser immediately make a call to the tags endpoint. And setting the mock that way, it's kind of too late. So what we need to do is to put this step before we actually log into application in order to kind of give instruction to test trigger like, hey, if you intercept this API call, or if our application will make this API call, we want you to intercept it and provide this response instead of the real response from the browser. So let's run this one more time and see how it's gonna work right now. Here we go, test completed. And now let's look into the screenshots. So first, when we just opened the application, we loaded the real text, just because this is the very first step of the test before we were able to declare the mocks that we want to use. Then we perform a sign in step, sign in, and now we have a list of our mocks. You can see test trigger and I, mocking is easy is displayed because we declared mocking before the login to our application. Then we perform a login. And after the login application made the request to tags and point one more time. And during that process, test trigger intercepted this API request and provided our own response. So this is how it worked. And you know what? Let's make the assertion, by the way. So each test should end with assertion. And let's make assertion that check that page contains, for example, mocking is easy below popular tags. And update and retest. So we will have assertions for our test. All right, let's check it out. Popular tags and assertions, mocking is easy. We asserted that value is displayed. Everything is working fine. Now let's make a little bit more complex example. So now let's mock the articles and points. If I click on the articles and open this object, look, this object is really, really, really huge, right? So, and working with the objects like this is a kind of difficult. So think about it. If we put this object into the test body, probably it's gonna be too much and difficult to manage. So what you can do instead as a second option, instead of providing the response into the test body itself or usable rule, you can save the desired mock response as your global variable, and then just call the instance of the global variable. So let's do this now. So let's do this steps. So first of all, let's create. So I'll close this, go to test data. And inside of the global variables, I create a new global variable. And instead of text, I will use type of multi line. And I provide the name, article mock response. And here I will provide the value. So initially I will just copy the entire response object, and then we'll modify it later on. Okay, control C, control V, okay. All articles is here. So let's say that we want to be displayed just a single article on the webpage with a desired value. So when you're editing the JSON object, you have to be very, very careful about the syntax. If you miss at least a single comma, single quote or curly brace or something like this inside of your object, this object will be invalid. It will be not accepted by application and it simply will not work. So later in the class, I will show you how you can use Postman to edit your objects. But for now, we will made this edit just manually and I'll try to be just a super careful. So what I need to do is, so let's open the object right here. So I collapse the articles. Our object consists of articles and articles count. And articles is the array. And I can collapse each article individually. This is the object of arrays. So essentially I need to delete all the articles and leave just a single object inside of the articles and array. And this is what I need to do. So going back, this is array. This is the first of the object. And I technically removing everything, but scrolling a little bit down, a little bit down. Here we go. This is the end. And this is the object. Also, I need to remove comma. And I believe this looks right. So this is the single object which is left. Now let's modify it a little bit. For example, title mocking in test trigger is easy. Description, we can update our own description. This is article about mocking. And body, we will remove the existing body and replace with our own value. For example, this article is about how easy to mock with a test trigger. Something like this. And let's put our text. For example, test trigger. We put, let's say, AI. And let's just keep two tags. And I remove comma at the end. So formatting is super, super important in this example. All right, so the object for our response is ready. I click Add. We can see this object is created right here. Now let's go back to the test and use this object. Quick edit. And I will take this as my example. I want to create the second mock API call. But instead of mocking the tags endpoint, I'm gonna mock the second endpoint, which is articles limit 10 and offset zero. I copy the entire URL, paste it right here. And then here, returning body, then removing all this. And I call from stored value and provide the variable name, which is article mock response. So you see how much compact this syntax is right now comparing to this one, where we pasted the JSON object directly into the test. And yeah, let's sit. Let's update and rerun. All right, test pass, let's check it out. Here we go. Mocking in test trigger is easy. We have two tags displayed for our articles, popular tags displayed as well. So we provided two mocks, mocking efficiently our popular tags and response articles. So this is how you do mocking with a test trigger. All right, so let's go back to the test. Let's go back to the test. So this is how you do mocking with a test trigger. All right, so let's quickly summarize what we did in this lesson. You can mock any endpoints in the test trigger. The best way is to use the template from the documentation. You need to provide type, API URL, and response body. The most convenient way to providing the response body is either using this type of syntax, text starting from the next line, ending with end, when you provide the object in the nice format or the second option, you can save your object as a multi-line expression inside of the global variables and call it as a stored value to provide the desired response for your API. And also important thing, that mock have to be declared before your application perform the action triggering this API call. That way, this trigger will be able to intercept this API call correctly and provide the desired response. All right, that's it guys. And see you in the next lesson.