At Nutmeg we want to create a seamless customer experience. Yet often, the work our engineers put in can only really be seen by those of us behind the curtain. In the interest of shining some light on the Nutmeg machine, our Frontend Platform lead, Shaun Stone, walks us through our frontend testing process and how we catch code-breaking changes before they reach our customers.
Here at Nutmeg, we take our role in helping you towards your investment goals very seriously. And so, whenever we build a feature for our customers, we run through a series of steps over the development process to ensure what we’re building is consistent and fully tested.
For new and existing features, if someone applies a code-breaking change – however small that change may be – it gets flagged, fails the process and notifies us to fix it. In other words, we catch any issues before they become a problem for our customers.
Here’s an arbitrary example of the steps, or pipeline build process, go through:
- Step A – Success
- Step B – Success
- Step C – Success
- Step D – Failed (aborting code release)
- Alert developer of failure (via email or a chat app like Slack)
You’ll notice that just one misstep is reason enough to re-evaluate. Now, let’s walk through the steps we run our code through in more detail, and take a look at an example for each.
Unit Testing
Unit Testing is a low-level test of code. The process breaks down the code into tiny pieces that are then tested in isolation. If I, for example, were working on a component that allows customers to choose their investment style, for example, we would run tests to ensure we support: Fully managed, Fixed or SRI. We use Jest and Enzyme, also used by Facebook.
Integration Testing
Integration Testing is a level of software testing that combines codebases to see how they integrate. If the backend have a service that provides marketing preferences on customers, we want to test that our frontend web app integrates with their service correctly. When I request those preferences, do they show correctly on our web app? We use Cypress to check things in isolation.
System/End-to-end Testing
When onboarding a new customer, can they fill in all their personal details and create an investment pot successfully? We need to ensure this is possible with the latest version of our code before releasing it to customers. If it fails at any point, we can flag this to the domain team (Pot, Portfolio, Customer, Investment, Payments) that owns the relevant area. We also use Cypress for this stage.
Regression Testing
Regression Testing is done to make sure that features under the existing software still work when new software changes are introduced. If you could log in before but you’re unable to now that the latest code change has been released, this is considered a regression.
We also run visual regression testing with our UI design system, called Nutkit. It generates image snapshots of our existing web pages to check if they have changed for the good or bad. For this we use a tool called Loki.
Below we demonstrate what happens if I try and change the padding size of a button. It compares the original and the latest changes made.
The steps above are automated in our build process, but some steps are also carried out in person. Our product owners, who are responsible for deciding the products and features we want to release, review our work to make sure it meets the business’ needs. This includes the UX/UI team, to make sure we’ve built the pages they originally designed. They sign off on changes to let the business know they are happy with what has been done.
Acceptance Testing
Acceptance Testing is where a system/application is tested against the requirements outlined in the initial stages by a stakeholder. If a developer was asked to make a button green but comes out turquoise then this would fail the Acceptance Criteria (AC). You either have internal testing, performed by internal members of the business, or external testing, performed by third parties.
Looking to the future
At Nutmeg, we’re always looking for new and novel ways to improve our systems and processes. Anyone with great ideas is welcome to bring them to our platform. And if you’re interested in joining us, you’ll find Nutmeg job vacancies on our careers page.
Risk warning
As with all investing, your capital is at risk. The value of your portfolio with Nutmeg can go down as well as up and you may get back less than you invest.
Other blogs you might like:
Shaun Stone
Shaun is frontend platform lead at Nutmeg. He works on the technical side of things for our portfolios and drives the development of our user interfaces.Other posts by Shaun Stone
