Setup cypress

[malcolm-kee]

Rationale

cypress is an end-to-end testing framework that is JS-centered, thus it is easy to used for JS developer.

With cypress, we can:

• setup end-to-end testing to make sure our change will not impact website functionality
• setup automatic accessibility auditing using cypress-axe.
• provide opportunities for community members to write end-to-end tests.

Considerations

1. As cypress is heavy, including it as devDependencies would cause setup project too heavy. I would like to suggest everyone to install cypress globally when they want to run the cypress tests. For CI, add manual step to run npm install cypress
2. We can use start-server-and-test to start the site locally and then run the cypress against the dev server. For now, don't setup test against the production site yet. If you want to try, [this article] seems like a good reference.
3. I've setup cypress testing in my personal website, you can refer how I do it. However, I've included cypress as devDependencies in that project, which is not what we want to do here.

Let's Pair Program

If you interested just comment on this issue, it's totally okay if you never contribute to any project. I can setup a screen-sharing with you to pair-program together.

[tlcheah2]

Can I try this out?

[malcolm-kee]

@tlcheah2 Sure!

I created cypress branch for this.

1. Do you need any guidance or you want to give it a try first? If you need some guidance, let me know if you have any experience using cypress and CircleCI?
2. do you able to see the CircleCI log, e.g. https://circleci.com/gh/malcolm-kee/kl-react/537?

[tlcheah2]

1. I might want to give it a try 1st. Guidance comes after I have some basic understanding will be much more efficient. I am new to cypress and CircleCI.
   But, if u have any good learning resources, articles, courses and etc. Feel free to share too.

2. Yes, can see it.

[malcolm-kee]

For Cypress:

• Gatsby docs to setup cypress: https://www.gatsbyjs.org/docs/end-to-end-testing/
• For cypress example you can refer to my personal website repo: cypress.json and the cypress folder.

For CircleCI:

• this script may be handy: https://github.com/malcolm-kee/malcolm-kee/blob/master/scripts/e2e-test.sh