Enhancing Front-End Development

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.

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.

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.

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.