Add some e2e tests (Cypress, not Selenium)

Add some e2e tests (Cypress, not Selenium)

Part of https://gitlab.com/gitlab-org/gitter/webapp/issues/1880

• Adds some e2e tests
• Adds new /api/private/fixtures/ endpoint to generate fixtures (process.env.ENABLE_FIXTURE_ENDPOINTS)
  • set ENABLE_FIXTURE_ENDPOINTS=1&&npm start
• Add way to disable our contact with GitHub so we don't run into 401 unauthorized errors in tests with fixture users (process.env.DISABLE_GITHUB_API)
  • set DISABLE_GITHUB_API=1&&npm start

Dev notes

Cypress

• Lots of buy-in into Cypress specific APIs and code
• Doesn’t use standard Selenium behind the scenes
• Test code runs in browser alongside your tests
  • Doesn’t run in Node context which would make it easy to make and reference fixtures
  • Can’t use our Gitter env context directly
• No async/await
  • If you make a test async, then assertions won't fail the test, https://github.com/cypress-io/cypress/issues/4742
  • Cypress API isn't true promises so not compatible, https://github.com/cypress-io/cypress/issues/1417
• Has cool visualization of test running and stepping through (easy to debug)

---

• https://docs.cypress.io/guides/references/configuration.html
• https://docs.cypress.io/guides/core-concepts/writing-and-organizing-tests.html#Folder-Structure
• https://docs.cypress.io/guides/guides/environment-variables.html

Works ✔

npm run cypress -- open --env baseUrl=http://localhost:5000,apiBaseUrl=http://localhost:5000/api

npm run cypress -- run --env baseUrl=http://localhost:5000,apiBaseUrl=http://localhost:5000/api

Doesn't seem to work ❌

set CYPRESS_baseUrl=http://localhost:5000&&npm run cypress -- open

---

• https://gitlab.com/cypress-io/cypress-example-docker-gitlab
• https://docs.cypress.io/guides/guides/continuous-integration.html#Examples
  • https://github.com/cypress-io/cypress-example-kitchensink/blob/a22bee31baec48be059964401cca484961fecc96/.gitlab-ci.yml
• "cypress/base:<Node version> has the operating system dependencies required to run Cypress", https://docs.cypress.io/examples/examples/docker.html#Images

---

• https://github.com/bahmutov/cypress-failed-log
  • https://github.com/bahmutov/cypress-failed-log/issues/159
• https://github.com/flotwig/cypress-log-to-output

---

Only videos on Electron (not Chrome)

Warning: Cypress can only record videos when using the built in 'electron' browser.

---

image: cypress/browsers:node10.11.0-chrome75

npm run cypress -- run --browser chrome --env baseUrl=http://localhost:5000,apiBaseUrl=http://localhost:5000/api

image: cypress/base:10

npm run cypress -- run --env baseUrl=http://localhost:5000,apiBaseUrl=http://localhost:5000/api

Todo

• Add some tests
• Add to CI