adding frontend tests workflow (#212)

* init for frontend test workflow

* added wait-on package

---------

Co-authored-by: Mathis Marcotte <[email protected]>

Author: mathis-marcotte

.github/workflows/frontend_tests.yml

@@ -0,0 +1,36 @@
+name: JWA Frontend Tests
+on:
+  pull_request:
+    types:
+      - 'opened'
+      - 'synchronize'
+      - 'reopened'
+
+jobs:
+  run-ui-tests:
+    name: UI tests with Cypress
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Setup node version to 12
+        uses: actions/setup-node@v3
+        with:
+          node-version: 12
+
+      - name: Install Kubeflow common library dependecies
+        run: |
+          cd frontend/common/kubeflow-common-lib
+          npm i
+          npm run build
+          npm link ./dist/kubeflow
+      - name: Install JWA dependencies
+        run: |
+          cd frontend/jupyter
+          npm i
+          npm link kubeflow
+      - name: Serve UI & run Cypress tests in Chrome and Firefox
+        run: |
+          cd frontend/jupyter
+          npm start & npx wait-on http://localhost:4200
+          npm run ui-test-ci-all

README.md

@@ -66,10 +66,9 @@ The following can be pasted in a script and executed. This uses the latest node
 cd frontend/common/kubeflow-common-lib
 npm i
 npm run build
-cd dist/kubeflow
-npm link
+npm link ./dist/kubeflow
 
-cd ../../../../jupyter
+cd ../../jupyter
 npm i
 npm link kubeflow --legacy-peer-deps
 KF_USER_ID=user npm start
@@ -80,7 +79,7 @@ For the kubecost data to be retrievable, the following will need to be executed
 ### Running intergration tests
 
 We use [Cypress](https://www.cypress.io/) to make our end-to-end tests.
-To run integration tests locally, first make sure that the jupyter-apis app is up and running. Then, from the `jupyter-apis/frontend/jupyter` directory, run either `npm run e2e` to open the Cypress UI, or `npm run e2e-ci` to run the cypress tests just in the terminal.
+To run integration tests locally, first make sure that the jupyter-apis app is up and running. Then, from the `jupyter-apis/frontend/jupyter` directory, run either `npm run ui-test` to open the Cypress UI, or `npm run ui-test-ci` to run the cypress tests just in the terminal.
 
 ### Connecting a Kubeflow Cluster
 

frontend/jupyter/package-lock.json

@@ -8,6 +8,7 @@
     "build:fr": "npm run copyLibAssets && ng build --prod --base-href /jupyter/ --deploy-url static/ --configuration=fr",
     "build:watch": "npm run copyLibAssets && ng build --watch --deploy-url static/ --outputPath ../backend/apps/default/static/ --outputHashing all",
     "build:watch:rok": "npm run copyLibAssets && ng build --watch --deploy-url static/ --outputPath ../backend/apps/rok/static/ --outputHashing all --configuration=rok",
+    "serve": "npm run copyLibAssets && ng serve --proxy-config=src/proxy.conf.json",
     "serve:rok": "npm run copyLibAssets && ng serve --configuration=rok --proxy-config=src/proxy.conf.rok.json",
     "copyLibAssets": "cp -r ./node_modules/kubeflow/assets/* ./src/assets/",
     "format:check": "prettier --check 'src/**/*.{js,ts,html,scss,css}' || node scripts/check-format-error.js",
@@ -16,9 +17,12 @@
     "start:fr": "ng serve --configuration=fr --base-href / --deploy-url / --proxy-config proxy.config.js",
     "i18n:extract": "ng extract-i18n --output-path i18n",
     "test": "ng test",
-    "e2e": "cypress open",
-    "e2e-ci": "cypress run",
-    "lint": "ng lint"
+    "test:prod": "ng test --browsers=ChromeHeadless --watch=false",
+    "ui-test": "cypress open",
+    "ui-test-ci": "cypress run",
+    "ui-test-ci-all": "cypress run --browser=chrome && cypress run --browser=firefox",
+    "lint-check": "ng lint",
+    "lint": "ng lint --fix"
   },
   "private": true,
   "dependencies": {
@@ -71,6 +75,7 @@
     "protractor": "~7.0.0",
     "ts-node": "^10.4.0",
     "tslint": "~6.1.0",
-    "typescript": "~4.2.4"
+    "typescript": "~4.2.4",
+    "wait-on": "^7.0.1"
   }
 }