chat.io

Cypress.io testing for a chat application that requires auth

Videos

• Use MongoDB From The Plugin File Or Call Task From DevTools Console
• Wait For jQuery slideDown Animation To Finish
• Use Docker Compose To Run Application Locally And On GitHub Actions
• Use cy.request Command To Create A User And Log in
• Connect And Send Socket Messages From Cypress Test
• Use cy.session Command To Prepare Test Data But Only When Needed
• Use cy.dataSession plugin to prepare the test data
• Use Data Alias Created Automatically By cypress-data-session
• Create User Using cypress-data-session Command
• Invalidate cy.session From cypress-data-session
• Share Data Across Specs Using cypress-data-session Plugin
• Use cy.dataSession To Create A User And Log In
• TODO: using cy.task to create a new room
• TODO: using spec events to clear the rooms and the users
• TODO: how to restart the application and Cypress tests on changes

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

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

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

About me

• @bahmutov
• glebbahmutov.com
• blog
• videos
• presentations
• cypress.tips