chat.io

Cypress.io testing for a chat application that requires auth

Videos

Blog posts

Presentations

End-to-End Testing for a Real-time Chat Web Application

Installation

$ npm install

You will need a MongoDB somewhere and a Redis instance. I assume the MongoDB is running in the cloud and the Redis is running locally in a Docker container.

Run the app

Using docker-compose

$ docker-compose up

Or you can run Redis and MongoDB separately

Using separate services

Start Redis

$ docker run -d -p 6379:6379 redis:alpine

$ MONGODB=... SESSION_SECRET=... npm start

Tip: use as-a to inject the above environment variables into a local / user profile file .as-a.init, something like this:

[chat.io]
SESSION_SECRET=MySecretVariable1234
MONGODB=mongodb://root:rootPass1234@localhost:27017/

$ as-a chat.io npm start

Open the http://localhost:3000 in your browser.

Run the tests

Because Cypress connects to the same MongoDB to clear the data in some tests, need to start it with the same environment variable

$ MONGODB=... npx cypress open

Read Testing Mongo with Cypress

Tip: you can use as-a to start Cypress with environment variables to connect to the MongoDB locally

$ as-a chat.io npx cypress open

Start the app and run the tests

Using start-server-and-test utility you can start the application and open Cypress (assuming the services have been started)

# assuming injecting ENV variables using "as-a"
$ as-a chat.io npm run dev

Watching mode

This mode speeds the local development

Watching the server

You can start the application server in watch mode. Any file change will automatically restart the server. Uses nodemon

$ npm run watch

Watching the specs

The Cypress tests automatically re-run when the spec files change. They also re-run when any files in the public folder change thanks to the cypress-watch-and-reload plugin.

History

All props for this Chat app goes to the original repo OmarElGabry/chat.io. I have only cloned to show it being tested, added more features, added Cypress tests

Custom domain

By setting the "hosts" object in the cypress.json we can map custom domains back to the local machine and use them from Cypress tests. For example, the spec file my-chat-domain.js visits the http://my-chat.io:3000 which is mapped back to the 127.0.0.1:3000 inside the cypress.json file.

HTTPS

To create a local self-signed certificate on Mac I used the following commands (see Cypress Hosts Option and bahmutov/cypress-local-https)

$ brew install mkcert
$ mkcert -install
$ mkdir .cert
$ mkcert -key-file ./.cert/key.pem -cert-file ./.cert/cert.pem "my-chat.io"

To start the server with HTTPS, use

$ HTTPS=true ... start command ...

In this case, the base URL should point at https://my-chat.io with additional "hosts" mapping this custom domain back to 127.0.0.1

{
  "baseUrl": "https://my-chat.io:3000/",
  "hosts": {
    "my-chat.io": "127.0.0.1"
  }
}

Currently, the plugin file changes the base URL and sets the "hosts" object automatically when you launch Cypress with HTTPS=true environment variable.

For example, I use the following commands to test HTTPS and the custom domain

$ HTTPS=true as-a . npm start
# from another terminal open Cypress
$ HTTPS=true as-a . npx cypress open
# or using a single command via start-server-and-test
$ HTTPS=true as-a . npm run dev

Continuous Integration

The tests run automatically on pull requests, and the changed specs run first, read the blog post Get Faster Feedback From Your Cypress Tests Running On GitHub Actions. The tests run on GitHub Actions, see the workflows in .github/workflows folder. Similarly, the E2E changed tests run first on CircleCI, and if they pass, then all tests run with parallelization, see .circleci/config.yml file and read Get Faster Feedback From Your Cypress Tests Running On CircleCI

yanCode/chat.io