Transforming Finance through Collaboration with Accounting and Audit Software Solutions Provider

Synergo optimised their development environment and ultimately their business application.

https://www.caseware.com

Synergo managed to write story files and tests for over 40 components in the front-end library, ranging from simple to complex. These stories and tests are going to serve as a base for developers who make changes to a component so that they can check if something breaks or how their changes modify the component’s states or behaviors

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.

01

Innovative Testing System Development

We developed a sophisticated system featuring multiple story files to capture various states of a component.

02

Leveraging Cutting-Edge Technologies

For this project, we employed the latest technologies and tools, including Cypress for end-to-end testing, Mocha for flexible test frameworks, Storybook for component development, Angular for the front-end framework, and Narwhal NX for enterprise Angular applications.

03

Collaborative Approach for Enhanced Quality Assurance

A QA Engineer from Synergo collaborated closely with a Front-end Developer specializing in Angular from the client’s team. This partnership was critical in validating the structure and consistency of the story files, ensuring the highest quality of the development process.

04

Seamless Integration into the Client’s Monorepo

Through our efforts, Synergo successfully integrated a story file and end-to-end test structure within the client’s monorepo. This integration allowed for the front-end component library to be tested in the same environment as the rest of the development activities.

The solutions

Synergo - full service web & mobile solutions team.

Structured Component Organization

Within the Narwhal NX monorepo, each front-end component is allocated its own directory. This organizational structure ensures that components are easily manageable and accessible, facilitating a streamlined development process.
Synergo - full service web & mobile solutions team.

Enhanced Storybook Visualization

The integration of story files into the Storybook interface is executed through a central interface that categorizes different states and behaviors beyond the default setting. This setup allows for a more intuitive and thorough exploration of all possible component interactions within the Storybook platform, significantly improving the development and testing workflow.
Synergo - full service web & mobile solutions team.

Comprehensive Story File System

Inside each component’s directory, a sub-directory dedicated to story files is established. For components exhibiting multiple states or behaviors, this system includes a primary story file representing the base state, along with secondary story files for additional states and behaviors.

Technologies

  1. Automated Testing with Cypress and Mocha: For comprehensive automated end-to-end testing, Cypress and Mocha were employed. These tools are instrumental in executing detailed tests that cover the full spectrum of user interactions and system processes, ensuring the reliability and robustness of the application.
  2. Component Development with Angular and Storybook: The creation and rendering of components in the user interface, along with the configuration of their states and behaviors, were facilitated through the use of Angular and Storybook. Angular provided a powerful framework for building dynamic front-end components, while Storybook served as a sandbox for visually testing these components in various states and interactions.
  3. Unified Development Environment with Narwhal NX: By leveraging Narwhal and NX, the client maintained all projects within a single monorepo structure. This approach not only streamlined the development and testing processes but also enhanced collaboration among team members by providing a unified environment for all project-related activities.
  4. Optimized Testing Structure: The testing framework, incorporating both Cypress and Mocha, was meticulously organized to mirror the structure of the story folders. Tests were centralized within an “integration” folder, which contained subfolders for each component. Crucially, all tests pertaining to a specific component were consolidated into a single spec file. This methodology significantly reduced testing time by eliminating the need for the Cypress runner to open and close multiple spec files for each component, thereby optimizing the overall testing workflow.

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.

Client’s Feedback

“Synergo Group 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

Discover our full portfolio

For personalised portfolio cases, please let us know which area is most relevant to you, and we will send you a PDF.

Synergo Group