Skip to content

Commit 382499e

Browse files
elenzio9elenzio9
authored
[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 (#65)
* mwa(front): Update material-icons package Update material-icons package to be consistent with the common library's one. Signed-off-by: Elena Zioga <[email protected]> * mwa(front): Fix unit tests Fix broken unit tests. Signed-off-by: Elena Zioga <[email protected]> * mwa(build): Introduce COMMIT file for building MWA Introduce COMMIT file that contains the commit where MWA needs to checkout inside Kubeflow's common code in order to be built. This file was integrated in the following places as well, thus a developer may only update one file each time we neeed to checkout to a newer commit. - Dockerfile - README.md Signed-off-by: Elena Zioga <[email protected]> * gh-actions: Add GH action to run MWA unit tests Introduce a Github action to run unit tests. This action is triggered upon PRs including changes inside the MWA frontend directory. Signed-off-by: Elena Zioga <[email protected]> * mwa(front): Format code Signed-off-by: Elena Zioga <[email protected]> --------- Signed-off-by: Elena Zioga <[email protected]>
1 parent 5c46bf9 commit 382499e

30 files changed

+530
-90
lines changed

‎.github/workflows/test-node.yaml

+36-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ on:
66
- frontend/**
77

88
jobs:
9-
test:
9+
frontend-format-linting-check:
1010
name: Code format and lint
1111
runs-on: ubuntu-latest
1212

@@ -28,3 +28,38 @@ jobs:
2828
run: |
2929
cd frontend
3030
npm run lint-check
31+
32+
frontend-unit-tests:
33+
name: Frontend Unit Tests
34+
runs-on: ubuntu-latest
35+
36+
steps:
37+
- name: Check out code
38+
uses: actions/checkout@v3
39+
40+
- name: Setup Node
41+
uses: actions/setup-node@v3
42+
with:
43+
node-version: 12
44+
45+
- name: Fetch Kubeflow and install common code dependencies
46+
run: |
47+
COMMIT=$(cat frontend/COMMIT)
48+
cd /tmp && git clone https://github.com/kubeflow/kubeflow.git
49+
cd kubeflow
50+
git checkout $COMMIT
51+
cd components/crud-web-apps/common/frontend/kubeflow-common-lib
52+
npm i
53+
npm run build
54+
npm link ./dist/kubeflow
55+
56+
- name: Install MWA dependencies
57+
run: |
58+
cd frontend
59+
npm i
60+
npm link kubeflow
61+
62+
- name: Run unit tests
63+
run: |
64+
cd frontend
65+
npm run test:prod

‎Dockerfile

+3-1
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,11 @@ FROM ubuntu AS fetch-kubeflow-kubeflow
44
RUN apt-get update && apt-get install git -y
55

66
WORKDIR /kf
7+
COPY ./frontend/COMMIT ./
78
RUN git clone https://github.com/kubeflow/kubeflow.git && \
9+
COMMIT=$(cat ./COMMIT) && \
810
cd kubeflow && \
9-
git checkout 8dcfe792c
11+
git checkout $COMMIT
1012

1113
# --- Build the backend kubeflow-wheel ---
1214
FROM python:3.7-slim AS backend-kubeflow-wheel

‎README.md

+2-1
Original file line numberDiff line numberDiff line change
@@ -74,8 +74,9 @@ Requirements:
7474
### Frontend
7575
```bash
7676
# build the common library
77+
COMMIT=$(cat ./frontend/COMMIT)
7778
cd $KUBEFLOW_REPO/components/crud-web-apps/common/frontend/kubeflow-common-lib
78-
git checkout 8dcfe792c
79+
git checkout $COMMIT
7980

8081
npm i
8182
npm run build

‎frontend/COMMIT

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
8dcfe792c

‎frontend/angular.json

+8-22
Original file line numberDiff line numberDiff line change
@@ -29,13 +29,8 @@
2929
"main": "src/main.ts",
3030
"polyfills": "src/polyfills.ts",
3131
"tsConfig": "tsconfig.app.json",
32-
"assets": [
33-
"src/favicon.ico",
34-
"src/assets"
35-
],
36-
"styles": [
37-
"src/styles.scss"
38-
],
32+
"assets": ["src/favicon.ico", "src/assets"],
33+
"styles": ["src/styles.scss"],
3934
"scripts": [
4035
"node_modules/ace-builds/src-min/ace.js",
4136
"node_modules/ace-builds/src-min/mode-yaml.js",
@@ -56,9 +51,7 @@
5651
},
5752
"configurations": {
5853
"fr": {
59-
"localize": [
60-
"fr"
61-
]
54+
"localize": ["fr"]
6255
},
6356
"production": {
6457
"fileReplacements": [
@@ -123,14 +116,10 @@
123116
"polyfills": "src/polyfills.ts",
124117
"tsConfig": "tsconfig.spec.json",
125118
"karmaConfig": "karma.conf.js",
126-
"assets": [
127-
"src/favicon.ico",
128-
"src/assets"
129-
],
130-
"styles": [
131-
"src/styles.scss"
132-
],
133-
"scripts": []
119+
"assets": ["src/favicon.ico", "src/assets"],
120+
"styles": ["src/styles.scss"],
121+
"scripts": [],
122+
"preserveSymlinks": true
134123
}
135124
},
136125
"e2e": {
@@ -148,10 +137,7 @@
148137
"lint": {
149138
"builder": "@angular-eslint/builder:lint",
150139
"options": {
151-
"lintFilePatterns": [
152-
"src/**/*.ts",
153-
"src/**/*.html"
154-
]
140+
"lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
155141
}
156142
}
157143
}

‎frontend/package-lock.json

+3-3
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frontend/package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
"format:write": "prettier --write 'src/**/*.{js,ts,html,scss,css}'",
1515
"i18n:extract": "ng extract-i18n --output-path i18n",
1616
"test": "ng test",
17+
"test:prod": "ng test --browsers=ChromeHeadless --watch=false",
1718
"lint-check": "ng lint",
1819
"lint": "ng lint --fix",
1920
"e2e": "ng e2e"
@@ -43,7 +44,7 @@
4344
"js-yaml": "^4.0.0",
4445
"lodash": "^4.17.20",
4546
"lodash-es": "^4.17.11",
46-
"material-icons": "^0.3.1",
47+
"material-icons": "^0.7.7",
4748
"rxjs": "~6.6.7",
4849
"tslib": "^2.0.0",
4950
"zone.js": "~0.11.4"

‎frontend/scripts/check-format-error.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
console.error();
2+
console.error('-----------------------------------------------');
3+
console.error('Please run `npm run format:write` to format your code.');
4+
console.error('-----------------------------------------------');
5+
console.error();
6+
process.exit(1);

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

-9
Original file line numberDiff line numberDiff line change
@@ -21,13 +21,4 @@ describe('AppComponent', () => {
2121
const app = fixture.debugElement.componentInstance;
2222
expect(app.title).toEqual('frontend');
2323
});
24-
25-
it('should render title', () => {
26-
const fixture = TestBed.createComponent(AppComponent);
27-
fixture.detectChanges();
28-
const compiled = fixture.debugElement.nativeElement;
29-
expect(compiled.querySelector('.content span').textContent).toContain(
30-
'frontend app is running!',
31-
);
32-
});
3324
});

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

+40-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,31 @@
11
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
2-
2+
import { HttpClientTestingModule } from '@angular/common/http/testing';
3+
import { MatSnackBarModule } from '@angular/material/snack-bar';
4+
import { RouterTestingModule } from '@angular/router/testing';
5+
import { MWABackendService } from 'src/app/services/backend.service';
6+
import { Clipboard } from '@angular/cdk/clipboard';
7+
import {
8+
NamespaceService,
9+
ConfirmDialogService,
10+
SnackBarService,
11+
} from 'kubeflow';
12+
import { CommonModule } from '@angular/common';
13+
import { KubeflowModule } from 'kubeflow';
314
import { IndexComponent } from './index.component';
15+
import { of } from 'rxjs';
16+
17+
let MWABackendServiceStub: Partial<MWABackendService>;
18+
let NamespaceServiceStub: Partial<NamespaceService>;
19+
20+
MWABackendServiceStub = {
21+
getInferenceServices: () => of(),
22+
deleteInferenceService: () => of(),
23+
};
24+
25+
NamespaceServiceStub = {
26+
getSelectedNamespace: () => of(),
27+
getSelectedNamespace2: () => of(),
28+
};
429

530
describe('IndexComponent', () => {
631
let component: IndexComponent;
@@ -9,6 +34,20 @@ describe('IndexComponent', () => {
934
beforeEach(waitForAsync(() => {
1035
TestBed.configureTestingModule({
1136
declarations: [IndexComponent],
37+
imports: [
38+
HttpClientTestingModule,
39+
MatSnackBarModule,
40+
RouterTestingModule,
41+
CommonModule,
42+
KubeflowModule,
43+
],
44+
providers: [
45+
{ provide: ConfirmDialogService, useValue: {} },
46+
{ provide: MWABackendService, useValue: MWABackendServiceStub },
47+
{ provide: NamespaceService, useValue: NamespaceServiceStub },
48+
{ provide: SnackBarService, useValue: {} },
49+
{ provide: Clipboard, useValue: {} },
50+
],
1251
}).compileComponents();
1352
}));
1453

0 commit comments

Comments
 (0)