IntegrationTestingWithCypress.io

This repository contains the code to test react leaf carousel using cypress.io

Prerequisites

Node
Cypress
An IDE or Terminal
Chrome Browser
Cypress pipe for click functionality

Project Structure

All .js files such as careousel.js, App.js, index.js are in src folder
All public files and resources are in public folder with carousel images inside pubilc/images folder
All test related files are recommended to be in cypress folder as per the official documentation, unlike react test library where .test file should in a folder with its .js file

Prject Configuration

The baseURL is set to "http://localhost:3000" in cypress.json. Make sure port is open to listen.

Build Prject

1. Clone Repository

$ git clone https://github.com/Iiqra/IntegrationTestingWithCypress.io

2. Build Project

$ npm install
$ npm run build 

3. Open & run Cypress runner for Scripts execution

$ npm install cypress-pipe -D
$ node_modules/.bin/cypress open
$ npm run cypress

4. Run Tests
   After step3, the Cypress runner will launch and you can run .spec.js test files from the Cypress launched interface

5. Result Here is the test execution results of test cases

Run docker images for node and cypress

There are 3 files related to docker. 1- node.Dockerfile [this is for building node docker image], 2- Dockerfile [default file to build cypress docker image], and 3- docker-compose.yml file for running both images in one container as cypress process depends on node.

Build node Image

$ docker build -t nodeimage:test -f node.Dockerfile

Run node image

$ docker run nodeimage:test

Run docker-compose file

$ docker-compose up

After this, all the test specs will execute and you will see the logs/output generated by cypress.

Please note that I have built node image separately and given cypress image path in docker-compose file. It can either be done in any of the following ways;

1. Build node and cypress both images separately using node.Dockerfile and Dockerfile. And then given the images of node and cypress in the docker-compose file, and finally run it using docker-compose up command.
2. Build node and cypress both images in the docker-compose file by giving the image paths of both file node.Dockerfile and Dockerfile directly in the docker-compose steps.

Also, if you have to run it again, following commands will help you go through the steps;

$ docker ps [OPTIONS]	$ docker ps -a 	Show all containers (default shows just running)
$ docker images 	$ docker images 	Show all images 
$ docker inspect image_name	$ docker inspect testapp_node_1	Show image details 
$ docker rmi image_name	$ docker rmi testapp_cypress
$ docker rmi nodeimage:testnode	Delete docker image
$ docker rm containerID	$ docker rm a134aefc52b0	Delete docker container 
$ docker build -t imagename:tag -f fine_name . 	$ docker build -t nodeimage:test -f node.Dockerfile .	Build docker image, give it image name and friendly tag using the docker file
$ docker run imagename:tag	$ docker run nodeimage:testnode	Run built image using imagename and tag
$ docker logs containerID	$ docker logs 8493ac9ffa65	Show all the logs of given container
$ docker-compose ps [OPTIONS] 	$ docker-compose ps -a	Show containers for a docker-compose file 
$ docker-compose down		Down docker-compose process
$ docker-compose up		Up docker compose process