Partnering with an Accounting and Audit Software Solutions Provider
Synergo optimised their development environment and
ultimately their business application.
Synergo quickly became an extension to our existing development team, seamlessly integrating across multiple agile squads to collaborate on driving major improvements to the way we test our software. Their deep knowledge and expertise in modern testing frameworks proved invaluable in increasing the efficiency of our development lifecycle and training our internal teams on how to build on top of the new foundation.
Ricardo Navarrete
Software Development Manager, Caseware
Overview
Our QA solution serve as a base for developers to identify and predict more accurately certain expected results.
Our client is a leader in accounting and audit software solutions, helping accounting firms, governments and corporations manage audit and financial reporting processes more efficiently and with less risk.
The client wished for an integrated way to develop and test front-end components behaviors and states.
Since their front-end consisted of Angular, the client opted for Storybook to render the components developed within a controlled test environment.
Using Cypress was a natural step towards testing these components since it is easily able to set and modify their properties and states as part of the setup phase of each test. Once a component was rendered according to the expected inputs, the Mocha test scenarios were run in order to validate that those inputs were producing the correct behaviors.
The challenge
Our challenge was to provide integrated end to end testing solution using Cypress for the front-end component library built using Storybook and Angular, which would be integrated with the client’s monorepo structure.
We delivered a system that consisted of multiple story files that would produce various states for a component, and then render the component on a test bed where Cypress could check the properties, states and behaviours of each. We worked with the latest technologies and tools, and specifically on this project we used: Cypress, Mocha, Storybook, Angular, Narwhal, NX.
A QA Engineer from Synergo teamed up with one Front-end developer with Angular (support from the client side to validate the structure and consistency of the story files).
In this way, Synergo managed to create a story file and end to end test structure in the client’s monorepo, so that the front-end component library could be tested in the same place where the rest of the development takes place (front-end and back-end).
The solution
Each front end component has its own directory within the project, which rests inside the Narwhal NX monorepo. Within each component directory, there is a sub directory for story files. If there were multiple states or behaviors for a component, then the directory contains one main story file for the base state and secondary story files for additional behaviors and states which are imported by the main file.
This helps render all of the component’s behaviors in the Storybook interface via a main interface with several sub-categories for each different state or behaviour, other than the default.
Technologies
Cypress and Mocha were used for the automated end-to-end tests. Angular and Storybook were used to write the files which would render a component in the UI and set its states and behaviors.
Narwhal and NX are used by the client to have all projects within the same monorepo structure, so that development and testing can all be done in the same integrated environment.
In terms of testing, the Cyprus and Mocha test structures were compartmentalized to reflect the structure of the story folders. The “integration” folder contained sub folders for each component, however, all tests related to a component were written in a single spec file which would render all component states instead of having separate spec files. This helped reduce testing time as the Cypress runner did not waste time opening and closing separate spec files for each component.
Angular
Cypress
Mocha
Narwhal NX
Angular
Cypress
Mocha
Narwhal NX
The Team
One QA Engineer who wrote the Cypress end to end tests as well as the Storybook files for the components.
One Senior Angular Developer on the client side to support and review the Storybook files development. So, the QA specialist would write the component behaviors and then test them.
