Automating E2E tests on Gympass Mobile App
Since the beginning of our first features with React Native, testing was something that interested us. Before any release, we wanted to ensure that our main streams continue to function properly and we've found that testing all of them manually could be really hard.
What if we could do all those tests really fast without having to test any flow manually, tapping all the buttons? That would be amazing!
Wait a second. What are end-to-end tests?
When searching in Google for E2E tests we may found something like this:
End-to-end tests are a technique used to test if certain flows (from the beginning until the end) continue to behave as it should. The goal to run those tests is to identify if new features do not break existing flows.
Introducing Detox
Detox is a tool created by Wix, with a focus on E2E tests to work with React Native Apps. Detox uses JavaScript to create grey box tests on both platforms (Android and iOS).
Below there is a snippet of one of our tests, navigating between our very first screens: how Gympass works when asking for permissions.
Sometimes a flow could not be tested in a simulator exactly as it should be in a real device. One example is when we need to ask for location permission on iOS and we are prompt with a system alert. It shouldn’t be a problem if Detox could read what’s the testID for the buttons in this alert. But this is not the case when iOS prompts it’s own alerts. Given that problem, how can we simulate this scenario (the user is prompted to allow their location and accepting/denying) as close to reality as possible?
Prompting a fake alert asking the same thing as iOS.
Such behavior happening just when we’re running an E2E test is possible due to a Detox feature. We could change the actions triggered in an entire file just overriding this file for one with the same name with the postfix .e2e.js
In this example, imagine that we have a file named permissions.js with a function called askForLocation(). The ugly implementation would consist in coding an if(testing) inside that function. Now that we have this .e2e.js feature, we could do a more elegant solution. We just create a file permissions.e2e.js with the same function named as askForLocation(), but the implementation is a fake permission’s alert.
Read more here about Detox Mocking
A global application
Working for a global company requires a global application, and that means many challenges. Currency, dates, language and several other units of measurement must respect the decision of each country. To help with this, we use i18n-js and react-native-localize.
And talking about challenges, here is one that we faced many times in the last year: who is the developer that has never received a wireframe from designers that carefully drew those interactions in an iPhone X Max, and suddenly when testing with an iPhone SE faced bizarre layout errors and text line breaks? It could be worse: you could find those errors when the app was already live in the stores, most likely happening in the CEO’s device.
Imagine that for every change you make in your app, you should test not only different devices but all the 14 languages that you support (yes, we do support 14 languages nowadays) on different devices. How do we test all these scenarios without spending two days from a QA, engineer or designer? Well, Detox does that for you, in both platforms.
Detox helps us to guarantee that our flows continue to work fine, as the user should use. And it continues to have consistency, as the user should see.
Thank you very much for your reading ❤️
Some references:
