From 6eb777a935ccbf9ca194e5318d48a7c87ef0a8c6 Mon Sep 17 00:00:00 2001
From: Dmitry Kruchinin <33020454+dvkruchinin@users.noreply.github.com>
Date: Wed, 29 Jul 2020 15:26:07 +0300
Subject: [PATCH] Add cypress support (#1951)

* Adding cypress support for running tests in the CI.

Modifications:
- .travis.yml: adding command for run testin via cypress
- Dockerfile.ci: addin install necessary package for correct cypress
works. Adding install cypress via npm.
- docker-compose.ci.yml: Starting necessary docker containers for
cypress testing.
- tests/cypress.json: Cypress configuration file
- tests/cypress/integration/auth_page.js: little bit fix.
- CONTRIBUTING.md: add documentation how to run cypress tests locally

* Add documentation how to run cypress tests locally. Remove wait() from
auth_page.js.

* Add run cypress in CI with the different config file cypress_ci.json

Update CONTRIBUTING.md.

Co-authored-by: Dmitry Kruchinin <dmitryx.kruchinin@intel.com>
---
 .travis.yml                            | 2 ++
 CONTRIBUTING.md                        | 9 +++++++++
 Dockerfile.ci                          | 2 ++
 docker-compose.ci.yml                  | 2 ++
 tests/cypress.json                     | 3 +++
 tests/cypress/integration/auth_page.js | 6 +++---
 tests/cypress_ci.json                  | 4 ++++
 7 files changed, 25 insertions(+), 3 deletions(-)
 create mode 100644 tests/cypress.json
 create mode 100644 tests/cypress_ci.json

diff --git a/.travis.yml b/.travis.yml
index a8715db3..855a9d72 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -20,6 +20,8 @@ script:
   # FIXME: Git package and application name conflict in PATH and try to leave only one python test execution
   - docker-compose -f docker-compose.yml -f docker-compose.ci.yml run cvat_ci /bin/bash -c 'coverage run -a manage.py test cvat/apps && coverage run -a manage.py test --pattern="_test*.py" cvat/apps/dataset_manager/tests cvat/apps/engine/tests utils/cli && coverage run -a manage.py test datumaro/ && mv .coverage ${CONTAINER_COVERAGE_DATA_DIR}'
   - docker-compose -f docker-compose.yml -f docker-compose.ci.yml run cvat_ci /bin/bash -c 'cd cvat-data && npm install && cd ../cvat-core && npm install && npm run test && coveralls-lcov -v -n ./reports/coverage/lcov.info > ${CONTAINER_COVERAGE_DATA_DIR}/coverage.json'
+  # Run cypress tests
+  - docker-compose -f docker-compose.yml -f docker-compose.ci.yml run cvat_ci /bin/bash -c 'cd ~/tests && ./node_modules/.bin/cypress run --headless --browser chrome --config-file=cypress_ci.json'
 
 after_success:
   # https://coveralls-python.readthedocs.io/en/latest/usage/multilang.html
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index f97dade6..1c7c7ce5 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -168,6 +168,15 @@ curl https://github.com/matterport/Mask_RCNN/releases/download/v2.0/mask_rcnn_co
     export AUTO_SEGMENTATION_PATH="/path/to/dir" # dir must contain mask_rcnn_coco.h5 file
 ```
 
+### Run Cypress tests
+- Install Сypress as described in the [documentation](https://docs.cypress.io/guides/getting-started/installing-cypress.html).
+- Run cypress tests:
+```sh
+    cd <cvat_local_repository>/tests
+    <cypress_installation_directory>/node_modules/.bin/cypress run --headless --browser chrome
+```
+For more information, see the [documentation](https://docs.cypress.io/).
+
 ## JavaScript/Typescript coding style
 
 We use the [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript) for JavaScript code with a
diff --git a/Dockerfile.ci b/Dockerfile.ci
index 809c1d78..b4c24738 100644
--- a/Dockerfile.ci
+++ b/Dockerfile.ci
@@ -14,6 +14,7 @@ RUN curl https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add - &
         nodejs \
         python3-dev \
         ruby \
+        xvfb \
         && \
     rm -rf /var/lib/apt/lists/*;
 
@@ -36,6 +37,7 @@ RUN mkdir -p tests && cd tests && npm install \
         karma-junit-reporter \
         karma-qunit \
         qunit; \
+        CI=true npm install cypress; \
     echo "export PATH=~/tests/node_modules/.bin:${PATH}" >> ~/.bashrc;
 
 ENTRYPOINT []
diff --git a/docker-compose.ci.yml b/docker-compose.ci.yml
index ac3a7c54..76f0804a 100644
--- a/docker-compose.ci.yml
+++ b/docker-compose.ci.yml
@@ -9,6 +9,8 @@ services:
       dockerfile: Dockerfile.ci
     depends_on:
       - cvat
+      - cvat_ui
+      - cvat_proxy
     environment:
       COVERALLS_REPO_TOKEN:
       TRAVIS:
diff --git a/tests/cypress.json b/tests/cypress.json
new file mode 100644
index 00000000..371abf5a
--- /dev/null
+++ b/tests/cypress.json
@@ -0,0 +1,3 @@
+{
+    "baseUrl": "http://localhost:8080"
+}
diff --git a/tests/cypress/integration/auth_page.js b/tests/cypress/integration/auth_page.js
index 28e55304..a2120bb5 100644
--- a/tests/cypress/integration/auth_page.js
+++ b/tests/cypress/integration/auth_page.js
@@ -8,14 +8,14 @@
 
 describe('Check server availability', () => {
   it('Server web interface is available', () => {
-    cy.visit('http://localhost:8080')
+    cy.visit('/')
   })
 
   it('"/auth/login" contains in the URL', () => {
     cy.url().should('include', '/auth/login')
   })
 
-  it('"Sign in" buttun is exists', () => {
+  it('"Sign in" button is exists', () => {
     cy.get('[type="submit"]')
   })
 
@@ -27,7 +27,7 @@ describe('Check server availability', () => {
     cy.get('[type="password"]')
   })
 
-  it('Click to "Sign in" buttun', () => {
+  it('Click to "Sign in" button', () => {
     cy.get('[type="submit"]').click()
   })
 })
diff --git a/tests/cypress_ci.json b/tests/cypress_ci.json
new file mode 100644
index 00000000..ed68fd7c
--- /dev/null
+++ b/tests/cypress_ci.json
@@ -0,0 +1,4 @@
+{
+    "video": false,
+    "baseUrl": "http://cvat_ui"
+}