System Testing

For our system, we primarily focused on four forms of testing:

1. Automated unit tests with Jest
2. Manual smoke testing
3. Component testing with Cypress
4. End-to-End testing with Cypress

Unit Testing

Jest is a JavaScript testing framework that allows you to quickly write unit tests. It provides many ways to make assertions to compare expected output with actual output and we mostly use it for testing our helper functions. Furthermore, Jest can be set to run automatically everytime: (1) The local development server is hot reloaded; (2) Code is committed and the test is run in a pre-commit hook; (3) Code is pushed to GitHub and the build-deploy.yml file triggers GitHub actions to test any Jest tests.

The test cases that we wrote were not meant to cover every single edge case but rather to give us confidence that our helper functions are working as intended. We've also used CS2103T testing heuristics to guide how we wrote our test cases. Notable heuristics are:

1. Each Valid Input at Least Once in a Positive Test Case
2. No More Than One Invalid Input In A Test Case
3. Conducting Both Positive and Negative Testing

We decided to unit test the helper functions as they are where there is the most code complexity. We use our helper functions to process values to make HTTP requests, parse CSV data, assess authorization, convert dates, and more. As such, we decided it was important for us to focus on these helper functions so that when moving onto manual UI testing and smoke testing, it makes it significantly easier to debug.

Manual smoke and testing

After implementing features, we test them out to ensure they are functional before pushing and deploying the code. As the features often have UI components interacting with local state as well as a remote source of data where it has to be asynchronously synced, conducting smoke tests to test integration between components is definitely essential to ensure that the features are working as intended.

Some of the tools that we used to conduct smoke tests are:

• Chrome DevTools by observing requests and responses in the network tab. We also used the copy as cURL network tab feature so that we could easily convey with one another the exact request that resulted in the error we were facing.
• Mokku to mock data. This is useful when either the API is not ready or the current data in the database is not appropriate to test the UI and local state in a certain way.

We did not create a separate list just for smoke testing but rather we referenced our feature/user story list and used that to test various use cases for implemented features.

Component Testing

Component testing focuses on ensuring that individual components behave correctly in isolation. In React, this usually involves rendering a component, passing appropriate props, and verifying that it renders and behaves as expected.

Cypress is used for component testing along with its support for React testing. The goal of component testing is to test the logic of individual components, making sure that each one works correctly within the app.

The file for component tests are found inside each of their respective folders. For example in the component A folder, the componentA.tsx file contains the React code for component A, and the componentA.cy.tsx file contains the component tests for it.

The guiding principle used for creating test cases for both component and End-to-End testing is the same as the guiding principle of the React Testing Library: "The more your tests resemble the way your software is used, the more confidence they can give you."

Run the tests with the following command:

npx cypress run --component

End-to-End Testing

End-to-End testing verifies that the entire application works as expected from the perspective of a user. Cypress is an excellent tool for E2E testing because it allows you to write tests that simulate real user interactions and ensure that the system behaves correctly in a real-world scenario.

End-to-End test cases are found in the e2e folder in the cypress folder. Unlike component tests, where the environment is simulated, E2E tests directly visits the website to perform the tests.

Run the tests with the following command*:

npx cypress run

*Specify a folder path as the fourth word to only run tests in that folder