Add E2E tests in CircleCI job javascript_lint_and_tests (#1453)

* add e2e tests to circleci

* test_1 circleci config for e2e

* check e2e tests circleci job

* fix for circleci build e2e

* fix for python dependencies

* fix for frontend build

* add cypress system requirements

* add setup cypress requirements

* modify shell script execution command

* check for a failed status on circleci

* add exit code for fail case

* circleci e2e test integration without cache and parallelism

* add cache for node and python deps

* check for node dependency caching

* change python dep cached path

* bump pip dep version to invalidate circleci cache

* fallback pip dep version to invalidate circleci cache

* bump pip dep version to invalidate circleci cache

* remove cache strategy for pip

* ignore frontend build for e2e tests

* revert:ignore frontend build for e2e tests

* add check for static file deps and remove npm_build step from js tests

* add buffer for page load for huge data

* adjust python format

* remove deprecated dependencies which are for kedro16

* fix format and lint check

* add comments to html check

---------

Co-authored-by: Tynan DeBold <thdebold@gmail.com>

.circleci/continue_config.yml

@@ -35,7 +35,7 @@ commands:
           name: Install Python dependencies
           command: |
             pip install git+https://github.com/kedro-org/kedro@main
-            pip install -r package/test_requirements.txt -U
+            pip install -r package/test_requirements.txt -r demo-project/src/docker_requirements.txt -U
       - run:
           name: Echo package versions
           command: |
@@ -46,9 +46,8 @@ commands:
     steps:
       - node/install:
           node-version: '16.13.2'
-      - run:
-          name: Install Node dependencies
-          command: npm install
+      # using install-packages command from node orb
+      - node/install-packages
 
   nvm_use_npm_install:
     steps:
@@ -121,6 +120,16 @@ commands:
       - nvm_use_npm_install
       - npm_build
 
+  setup_cypress_requirements:
+    description: Install cypress requirements and dependencies
+    steps:
+      - run:
+          name: Install cypress system dependencies
+          command: |
+            sudo sed -i 's/archive.ubuntu.com/us-east-1.ec2.archive.ubuntu.com/g' /etc/apt/sources.list
+            sudo apt-get update
+            sudo apt-get install libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 libxtst6 xauth xvfb
+
 jobs:
   e2e_tests:
     parameters:
@@ -201,7 +210,9 @@ jobs:
       python_version: '3.8'
     steps:
       - checkout
+      - setup_python_env
       - install_node_dependencies
+      - setup_cypress_requirements
       - run:
           name: Test lib transpilation
           command: npm run lib
@@ -217,6 +228,9 @@ jobs:
       - run:
           name: Run JavaScript tests
           command: npm run build:css && npm run test:ci
+      - run:
+          name: Run Javascript end to end tests
+          command: npm run cy:ci
 
   release_to_npm:
     executor:

cypress/support/commands.js

@@ -81,7 +81,7 @@ Cypress.Commands.add('__waitForPageLoad__', (callback) => {
   cy.get('.pipeline-loading-icon--visible', { timeout: 5000 }).should('exist');
 
   // Wait for pipeline loading icon to be not visible
-  cy.get('.pipeline-loading-icon--visible', { timeout: 5000 })
+  cy.get('.pipeline-loading-icon--visible', { timeout: 8000 })
     .should('not.exist')
     .then(callback);
 });

cypress/support/cy-local.start.sh → cypress/support/cy.start.sh

@@ -3,6 +3,13 @@
 # This file is used to run e2e tests on Kedro-Viz locally. 
 # Pre-requisite: All the Kedro-Viz dependencies need to be installed. You can find more info at https://github.com/kedro-org/kedro-viz/blob/main/CONTRIBUTING.md
 
+# Check if the argument is "ci"
+if [ "$1" = "ci" ]; then
+    is_terminate_process=false
+else
+    is_terminate_process=true
+fi
+
 # logging
 e2e_process_start_time=$(date +%s)
 
@@ -17,10 +24,12 @@ KEDRO_VIZ_BACKEND_TIMEOUT=90
 
 # Function to terminate processes
 terminate_processes() {
-  echo "Terminating processes..."
-  for pgid in "${process_ids[@]}"; do
-    kill -- "-$pgid" >/dev/null 2>&1
-  done
+  if [ "$is_terminate_process" = true ]; then
+    echo "Terminating processes..."
+    for pgid in "${process_ids[@]}"; do
+      kill -- "-$pgid" >/dev/null 2>&1
+    done
+  fi
 }
 
 # Function to wait for a service to start with a timeout
@@ -88,13 +97,23 @@ wait_for_service "Kedro-Viz Frontend" "localhost" $KEDRO_VIZ_FRONTEND_PORT $KEDR
 echo
 echo "Running Cypress E2E tests in headless mode ..."
 cypress run
+EXIT_CODE=$?
 
 # logging
 e2e_process_end_time=$(date +%s)
 
 total_e2e_process_time=$((e2e_process_end_time - e2e_process_start_time))
 echo "Total E2E process execution time: $total_e2e_process_time seconds"
 
+# Check if any tests failed
+if [ $EXIT_CODE -ne 0 ]; then
+  echo "Cypress tests failed with exit code: $EXIT_CODE"
+  terminate_processes
+  exit $EXIT_CODE  # Return the exit code
+else
+  echo "Cypress tests passed"
+fi
+
 # Terminate the processes
 terminate_processes
 

package.json

@@ -39,7 +39,8 @@
     "test:ci": "npm test -- --watchAll=false --maxWorkers=2",
     "test:debug": "react-scripts --inspect-brk test --runInBand --no-cache",
     "cy:dev": "cypress open",
-    "cy:test": "./cypress/support/cy-local.start.sh",
+    "cy:test": "./cypress/support/cy.start.sh local",
+    "cy:ci": "./cypress/support/cy.start.sh ci",
     "eject": "react-scripts eject",
     "snyk-protect": "snyk protect",
     "snyk-test": "snyk test -prune-repeated-subdependencies"

package/features/environment.py

@@ -63,20 +63,7 @@ def _setup_context_with_venv(context, venv_dir):
     context.env["PIP_DISABLE_PIP_VERSION_CHECK"] = "1"
 
     call(
-        [
-            context.python,
-            "-m",
-            "pip",
-            "install",
-            "-U",
-            "pip>=21.2",
-            "setuptools>=38.0",
-            "cookiecutter>=1.7.2",
-            "wheel",
-            "botocore",
-            "PyYAML>=4.2, <6.0",
-            "click<9.0",
-        ],
+        [context.python, "-m", "pip", "install", "-U", "pip>=21.2", "setuptools>=38.0"],
         env=context.env,
     )
 

package/kedro_viz/api/apps.py

@@ -61,7 +61,12 @@ def create_api_app_from_project(
     app = _create_base_api_app()
     app.include_router(rest_router)
     app.include_router(graphql_router)
-    app.mount("/static", StaticFiles(directory=_HTML_DIR / "static"), name="static")
+
+    # Check for html directory existence.
+    if Path(_HTML_DIR).is_dir():
+        # The html is needed when kedro_viz is used in cli but not required when running
+        # frontend e2e tests via Cypress
+        app.mount("/static", StaticFiles(directory=_HTML_DIR / "static"), name="static")
 
     # everytime the server reloads, a new app with a new timestamp will be created.
     # this is used as an etag embedded in the frontend for client to use when making requests.