[mwa-fix-unit-tests] Fix MWA's unit tests and create a GH action that runs the tests on each change of the frontend code

.github/workflows/test-node.yaml

@@ -6,7 +6,7 @@ on:
       - frontend/**
 
 jobs:
-  test:
+  frontend-format-linting-check:
     name: Code format and lint
     runs-on: ubuntu-latest
 
@@ -28,3 +28,38 @@ jobs:
         run: |
           cd frontend
           npm run lint-check
+
+  frontend-unit-tests:
+    name: Frontend Unit Tests
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Check out code
+        uses: actions/checkout@v3
+
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 12
+
+      - name: Fetch Kubeflow and install common code dependencies
+        run: |
+          COMMIT=$(cat frontend/COMMIT)
+          cd /tmp && git clone https://github.com/kubeflow/kubeflow.git
+          cd kubeflow
+          git checkout $COMMIT
+          cd components/crud-web-apps/common/frontend/kubeflow-common-lib
+          npm i
+          npm run build
+          npm link ./dist/kubeflow
+
+      - name: Install MWA dependencies
+        run: |
+          cd frontend
+          npm i
+          npm link kubeflow
+
+      - name: Run unit tests
+        run: |
+          cd frontend
+          npm run test:prod

Dockerfile

@@ -4,9 +4,11 @@ FROM ubuntu AS fetch-kubeflow-kubeflow
 RUN apt-get update && apt-get install git -y
 
 WORKDIR /kf
+COPY ./frontend/COMMIT ./
 RUN git clone https://github.com/kubeflow/kubeflow.git && \
+    COMMIT=$(cat ./COMMIT) && \
     cd kubeflow && \
-    git checkout 8dcfe792c
+    git checkout $COMMIT
 
 # --- Build the backend kubeflow-wheel ---
 FROM python:3.7-slim AS backend-kubeflow-wheel

README.md

@@ -74,8 +74,9 @@ Requirements:
 ### Frontend
 ```bash
 # build the common library
+COMMIT=$(cat ./frontend/COMMIT)
 cd $KUBEFLOW_REPO/components/crud-web-apps/common/frontend/kubeflow-common-lib
-git checkout 8dcfe792c
+git checkout $COMMIT
 
 npm i
 npm run build

frontend/COMMIT

@@ -0,0 +1 @@
+8dcfe792c

frontend/angular.json

@@ -29,13 +29,8 @@
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.app.json",
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
-            "styles": [
-              "src/styles.scss"
-            ],
+            "assets": ["src/favicon.ico", "src/assets"],
+            "styles": ["src/styles.scss"],
             "scripts": [
               "node_modules/ace-builds/src-min/ace.js",
               "node_modules/ace-builds/src-min/mode-yaml.js",
@@ -56,9 +51,7 @@
           },
           "configurations": {
             "fr": {
-              "localize": [
-                "fr"
-              ]
+              "localize": ["fr"]
             },
             "production": {
               "fileReplacements": [
@@ -123,14 +116,10 @@
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.spec.json",
             "karmaConfig": "karma.conf.js",
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
-            "styles": [
-              "src/styles.scss"
-            ],
-            "scripts": []
+            "assets": ["src/favicon.ico", "src/assets"],
+            "styles": ["src/styles.scss"],
+            "scripts": [],
+            "preserveSymlinks": true
           }
         },
         "e2e": {
@@ -148,10 +137,7 @@
         "lint": {
           "builder": "@angular-eslint/builder:lint",
           "options": {
-            "lintFilePatterns": [
-              "src/**/*.ts",
-              "src/**/*.html"
-            ]
+            "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
           }
         }
       }

frontend/package.json

@@ -14,6 +14,7 @@
     "format:write": "prettier --write 'src/**/*.{js,ts,html,scss,css}'",
     "i18n:extract": "ng extract-i18n --output-path i18n",
     "test": "ng test",
+    "test:prod": "ng test --browsers=ChromeHeadless --watch=false",
     "lint-check": "ng lint",
     "lint": "ng lint --fix",
     "e2e": "ng e2e"
@@ -43,7 +44,7 @@
     "js-yaml": "^4.0.0",
     "lodash": "^4.17.20",
     "lodash-es": "^4.17.11",
-    "material-icons": "^0.3.1",
+    "material-icons": "^0.7.7",
     "rxjs": "~6.6.7",
     "tslib": "^2.0.0",
     "zone.js": "~0.11.4"

frontend/scripts/check-format-error.js

@@ -0,0 +1,6 @@
+console.error();
+console.error('-----------------------------------------------');
+console.error('Please run `npm run format:write` to format your code.');
+console.error('-----------------------------------------------');
+console.error();
+process.exit(1);

frontend/src/app/app.component.spec.ts

@@ -21,13 +21,4 @@ describe('AppComponent', () => {
     const app = fixture.debugElement.componentInstance;
     expect(app.title).toEqual('frontend');
   });
-
-  it('should render title', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-    const compiled = fixture.debugElement.nativeElement;
-    expect(compiled.querySelector('.content span').textContent).toContain(
-      'frontend app is running!',
-    );
-  });
 });

frontend/src/app/pages/index/index.component.spec.ts

@@ -1,6 +1,31 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { RouterTestingModule } from '@angular/router/testing';
+import { MWABackendService } from 'src/app/services/backend.service';
+import { Clipboard } from '@angular/cdk/clipboard';
+import {
+  NamespaceService,
+  ConfirmDialogService,
+  SnackBarService,
+} from 'kubeflow';
+import { CommonModule } from '@angular/common';
+import { KubeflowModule } from 'kubeflow';
 import { IndexComponent } from './index.component';
+import { of } from 'rxjs';
+
+let MWABackendServiceStub: Partial<MWABackendService>;
+let NamespaceServiceStub: Partial<NamespaceService>;
+
+MWABackendServiceStub = {
+  getInferenceServices: () => of(),
+  deleteInferenceService: () => of(),
+};
+
+NamespaceServiceStub = {
+  getSelectedNamespace: () => of(),
+  getSelectedNamespace2: () => of(),
+};
 
 describe('IndexComponent', () => {
   let component: IndexComponent;
@@ -9,6 +34,20 @@ describe('IndexComponent', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [IndexComponent],
+      imports: [
+        HttpClientTestingModule,
+        MatSnackBarModule,
+        RouterTestingModule,
+        CommonModule,
+        KubeflowModule,
+      ],
+      providers: [
+        { provide: ConfirmDialogService, useValue: {} },
+        { provide: MWABackendService, useValue: MWABackendServiceStub },
+        { provide: NamespaceService, useValue: NamespaceServiceStub },
+        { provide: SnackBarService, useValue: {} },
+        { provide: Clipboard, useValue: {} },
+      ],
     }).compileComponents();
   }));