Using the Mokku chrome extension

Mokku is this Chrome extension that I’ve been using this sprint. It was pretty easy to pick up and I was able to almost immediately use it for my testing. For my particular use case, I needed to confirm that the page is able to display a list of items based on the response of an API. The catch is I don’t have the usual access to a database where the data is pulled from. I also can’t use the current implementation to create test records (that part’s not yet built). And the actual API isn’t available — only a mock one so I just have that and some information on the expected JSON.

So with Mokku, I mocked the mock API to simulate other responses. Like modifying the number of records returned, changing the data around to see if certain values would render as expected, emptying the list, delaying the response so I could view the loading animation, and triggering errors.

Installing Mokku is a cinch. Just search for it in the Chrome web store and install from there.

Using Mokku is easy.

1. Open Chrome dev tools (use it docked rather than in a separate window) and go to the Mokku tab.
2. Go to the page you need to test.
3. In Mokku, there’s a tab for Logs. You can look for the one that you need to mock, and click the corresponding “Mock” link.
4. Added mocks show up under the Mocks tab. And from there you can edit.
5. Then you just need to navigate to the page that will call the mock, and hopefully your changes would reflect.

And it’s pretty much repeat 4 and 5 for the test cases that you’d like to cover with Mokku.

---

P.S. I wanted to use “Gamitin Mokku” as the title. It sounds like something that would translate to “use me”. Future me might cringe or do a facepalm, and think that’s such a tita joke.