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

@@ -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

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

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 []

docker-compose.ci.yml

@@ -9,6 +9,8 @@ services:
       dockerfile: Dockerfile.ci
     depends_on:
       - cvat
+      - cvat_ui
+      - cvat_proxy
     environment:
       COVERALLS_REPO_TOKEN:
       TRAVIS:

tests/cypress.json

@@ -0,0 +1,3 @@
+{
+    "baseUrl": "http://localhost:8080"
+}

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()
   })
 })

tests/cypress_ci.json

@@ -0,0 +1,4 @@
+{
+    "video": false,
+    "baseUrl": "http://cvat_ui"
+}