Add Cypress to the CI/CD Pipeline

[nickytonline]

Is your feature request related to a problem? Please describe.

Protege deploys to Netlify. The continuous integration / continuous deployment (CI/CD) flow goes like this currently

• Changes are pushed to the main branch
• Netlify detects changes and deploys those changes

It would be nice to have Cypress run E2E tests before Netlify pushes the site live. If E2E tests pass, the latest changes will go live. If the E2E tests fail, the build will fail and production will not be affected.

Happy to pair on this as I have done this before.

Describe the solution you'd like

Changes required to incorporate Cypress into the build:

• Add an npm script called postbuild. This will script will run after the npm build script.
  • This script will start a web server that will be used to run the E2E tests against. I'd suggest using the serve npm package from Vercel. You can run it like so, serve -l 3000 build, where the build folder is the website. (generated when the npm build script runs.
  • It will also start Cypress via cypress run
  • When the tests have finished running, stop the test web server. You can do this using the kill and lsof Linux commands, e.g. [ $(lsof -t -i:3000) ] && kill $(lsof -t -i:3000) && echo 'E2E test server has been stopped' || echo 'E2E test server has either been stopped or is not running'

To simplify things for now, use port 3000 so that another cypress.json file / environment is not required. As the project matures, we can revisit this.

Additional stuff to do for this PR would be to remove the example Cypress spec files folder cypress/integration/examples as these tests are all made to pass and will only slow down the build as they are unnecessary tests. This can be a separate PR.

As well, some of the current tests are failing. They may need to be fixed up. This could be another PR as well.

Describe alternatives you've considered

There is a GitHub action for Cypress. This may be a simpler approach as long as it can prevent Netlify from deploying if there are failures.

Additional context

[BekahHW]

I'd like to work on this if it's something you want.

[nickytonline]

Assigning this to you @BekahHW .

[nickytonline]

If you have any questions or get stuck on anything, happy to pair.

[drewclem]

Thanks for assigning this @nickytonline. I must've missed the email notification when it came through.

@BekahHW thanks for taking this on! Let me know if you have any questions

[BekahHW]

@drewclem are you ok with me adding the serve package?

[drewclem]

@BekahHW I'm fine with it. Is this to enable cypress tests to run at build time?

[BekahHW]

Finally getting back to this, and digging into it a little bit, I found this netlify-plugin-cypress. Thoughts on whether this would work?

@nickytonline (Also, Nick, if I can't get this up and running tonight I'm hoping we could pair)

[nickytonline]

Definitely happy to pair if you get stuck @BekahHW.

[Nerajno]

Would be interested in looking into this for Hacktoberfest... @BekahHW and @nickytonline ... if y'all don't mind.

[BekahHW]

@Nerajno i started this issue but never finished, I think. I imagine things have progressed much further since then so my stuff might be outdated. But you're welcome to it!

[Nerajno]

I think that above plugin ( suggested by @BekahHW ) would resolve this issue. Looking into docs it seems to work well or would. Any thoughts, @drewclem ?