Testing for frontends

[Kenny477]

Work on implementing automatic workflow testing on frontends. For now we should start with client.

E.g. test things like login, products pages, dashboard functionalities, change password.

We already have some infrastructure for Cypress testing. If you would like we can change testing frameworks (e.g. some alternatives are Vitest, Jest, and I think node has a native test runner now).

First do some preliminary research into good framework (e.g. if we should continue with Cypress or switch), then draft a list of what categories of tests we need and what we should test for in each category.

[cmchoi220]

I've looked into Cypress and I think it's a good choice. Could you elaborate what you mean by categories?

[Kenny477]

@cmchoi220 Generally just things like authentication (login/signup), ecommerce (adding to cart, removing from cart). Nothing too fancy, just a general outline of the workflows that need to be tested. You can also just group workflows by the starting page of the workflow instead of by category (that might be easier).

For example:

• /login
  • Test login (first fill in form, then press button)
  • Test forgot password button (should take you to forgot pass page)
• /products
  • Test click on product (should take you to individual product page)

Honestly do it however you see fit, as long as we eventually end up with a comprehensive testing framework that gets all the major things down.

For now, just take some time to look into the API and get a grasp of the concepts (e.g. unit vs E2E testing, what a headless browser is, HTML and CSS selectors, XPath, best practices to make sure you choose the same element each time). If you have any questions feel free to ask me.

[Kenny477]

I currently have one quite old/crude Cypress test for login at /client/cypress/e2e/login.cy.ts that you can check out (though not everything will work probably).

The infrastucture for testing should be there (e.g. you can just try npx cypress run after setting up the cypress CLI and it should open the Cypress console).

[Kenny477]

Also my use of selectors is not really good practice since if we change the CSS classes or whatever, it will cause the test to fail as the element no longer can be selected by the original CSS class selector.

Checkout the following, noting that we should probably add data-cy to elements we want to specifically select https://docs.cypress.io/guides/references/best-practices

Also, since there recently was a large PR, please create a new branch off stage (there won't be anymore big structural changes most likely as we will be focusing on bug fixing and testing going forward). Feel free to let me know if you encounter any bugs as well.