UI: Fix unit tests (#1977)

* Fix Katib unit tests.

Signed-off-by: Elena Zioga <elena@arrikto.com>

Signed-off-by: Elena Zioga <elena@arrikto.com>

pkg/new-ui/v1beta1/frontend/angular.json

@@ -94,7 +94,8 @@
             "karmaConfig": "karma.conf.js",
             "assets": ["src/favicon.ico", "src/assets"],
             "styles": ["src/styles.scss"],
-            "scripts": []
+            "scripts": [],
+            "preserveSymlinks": true
           }
         },
         "lint": {

pkg/new-ui/v1beta1/frontend/package.json

@@ -37,7 +37,7 @@
     "echarts-stat": "^1.2.0",
     "js-yaml": "^4.0.0",
     "lodash-es": "4.17.11",
-    "material-icons": "^0.3.1",
+    "material-icons": "^0.7.7",
     "ng2-ace-editor": "^0.3.9",
     "ngx-echarts": "^8.0.1",
     "ngx-json-viewer": "^2.4.0",

pkg/new-ui/v1beta1/frontend/src/app/app.component.spec.ts

@@ -1,10 +1,13 @@
 import { TestBed, waitForAsync } from '@angular/core/testing';
 import { AppComponent } from './app.component';
+import { BrowserModule } from '@angular/platform-browser';
+import { AppRoutingModule } from './app-routing.module';
 
 describe('AppComponent', () => {
   beforeEach(
     waitForAsync(() => {
       TestBed.configureTestingModule({
+        imports: [BrowserModule, AppRoutingModule],
         declarations: [AppComponent],
       }).compileComponents();
     }),
@@ -21,13 +24,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!',
-    );
-  });
 });

pkg/new-ui/v1beta1/frontend/src/app/app.module.ts

@@ -8,7 +8,6 @@ import { AppComponent } from './app.component';
 import { ExperimentsModule } from './pages/experiments/experiments.module';
 import { ExperimentDetailsModule } from './pages/experiment-details/experiment-details.module';
 import { ExperimentCreationModule } from './pages/experiment-creation/experiment-creation.module';
-import { TrialModalModule } from './pages/experiment-details/trials-table/trial-modal/trial-modal.module';
 
 @NgModule({
   declarations: [AppComponent],
@@ -20,7 +19,6 @@ import { TrialModalModule } from './pages/experiment-details/trials-table/trial-
     ExperimentDetailsModule,
     ReactiveFormsModule,
     ExperimentCreationModule,
-    TrialModalModule,
   ],
   providers: [],
   bootstrap: [AppComponent],

pkg/new-ui/v1beta1/frontend/src/app/models/trial.k8s.model.ts

@@ -76,7 +76,7 @@ interface TrialStatus {
 
 interface TrialStatusCondition {
   type: string;
-  status: boolean;
+  status: string;
   reason: string;
   message: string;
   lastUpdateTime: string;

pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/algorithm/algorithm.component.spec.ts

@@ -1,22 +1,46 @@
+import { CommonModule } from '@angular/common';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { FormArray, FormControl, FormGroup } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { MatSelectModule } from '@angular/material/select';
+import { MatRadioModule } from '@angular/material/radio';
+import { FormModule } from 'kubeflow';
 
-import { AlgorithmComponent } from './algorithm.component';
+import { FormAlgorithmComponent } from './algorithm.component';
+import { FormAlgorithmModule } from './algorithm.module';
 
-describe('AlgorithmComponent', () => {
-  let component: AlgorithmComponent;
-  let fixture: ComponentFixture<AlgorithmComponent>;
+describe('FormAlgorithmComponent', () => {
+  let component: FormAlgorithmComponent;
+  let fixture: ComponentFixture<FormAlgorithmComponent>;
 
   beforeEach(
     waitForAsync(() => {
       TestBed.configureTestingModule({
-        declarations: [AlgorithmComponent],
+        imports: [
+          CommonModule,
+          BrowserAnimationsModule,
+          MatFormFieldModule,
+          MatInputModule,
+          MatSelectModule,
+          MatRadioModule,
+          FormModule,
+          FormAlgorithmModule,
+        ],
+        declarations: [FormAlgorithmComponent],
       }).compileComponents();
     }),
   );
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(AlgorithmComponent);
+    fixture = TestBed.createComponent(FormAlgorithmComponent);
     component = fixture.componentInstance;
+    component.algorithmForm = new FormGroup({
+      algorithmSettings: new FormArray([]),
+      algorithm: new FormControl('tpe'),
+      type: new FormControl(),
+    });
     fixture.detectChanges();
   });
 

pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/algorithm/setting/setting.component.spec.ts

@@ -1,22 +1,42 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 
-import { SettingComponent } from './setting.component';
+import { FormAlgorithmSettingComponent } from './setting.component';
+import { CommonModule } from '@angular/common';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
 
-describe('SettingComponent', () => {
-  let component: SettingComponent;
-  let fixture: ComponentFixture<SettingComponent>;
+describe('FormAlgorithmSettingComponent', () => {
+  let component: FormAlgorithmSettingComponent;
+  let fixture: ComponentFixture<FormAlgorithmSettingComponent>;
 
   beforeEach(
     waitForAsync(() => {
       TestBed.configureTestingModule({
-        declarations: [SettingComponent],
+        imports: [
+          CommonModule,
+          BrowserAnimationsModule,
+          MatFormFieldModule,
+          MatInputModule,
+          MatSelectModule,
+          ReactiveFormsModule,
+        ],
+        declarations: [FormAlgorithmSettingComponent],
       }).compileComponents();
     }),
   );
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(SettingComponent);
+    fixture = TestBed.createComponent(FormAlgorithmSettingComponent);
     component = fixture.componentInstance;
+    component.setting = new FormGroup({
+      value: new FormControl(),
+      name: new FormControl(),
+      type: new FormControl(),
+      values: new FormControl([]),
+    });
     fixture.detectChanges();
   });
 

pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/early-stopping/early-stopping.component.spec.ts

@@ -1,4 +1,10 @@
+import { CommonModule } from '@angular/common';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { FormControl, FormGroup } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { FormModule } from 'kubeflow';
 
 import { EarlyStoppingComponent } from './early-stopping.component';
 
@@ -9,6 +15,13 @@ describe('EarlyStoppingComponent', () => {
   beforeEach(
     waitForAsync(() => {
       TestBed.configureTestingModule({
+        imports: [
+          CommonModule,
+          BrowserAnimationsModule,
+          MatFormFieldModule,
+          MatInputModule,
+          FormModule,
+        ],
         declarations: [EarlyStoppingComponent],
       }).compileComponents();
     }),
@@ -17,6 +30,9 @@ describe('EarlyStoppingComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(EarlyStoppingComponent);
     component = fixture.componentInstance;
+    component.formGroup = new FormGroup({
+      algorithmName: new FormControl(),
+    });
     fixture.detectChanges();
   });
 

pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/experiment-creation.component.spec.ts

@@ -1,6 +1,109 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { MatDialog } from '@angular/material/dialog';
+import { Router } from '@angular/router';
+import { KWABackendService } from 'src/app/services/backend.service';
+import { ExperimentFormService } from 'src/app/services/experiment-form.service';
+import {
+  NamespaceService,
+  SnackBarService,
+  TitleActionsToolbarModule,
+  FormModule,
+} from 'kubeflow';
 
 import { ExperimentCreationComponent } from './experiment-creation.component';
+import { FormArray, FormControl, FormGroup } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+import { MatIconModule } from '@angular/material/icon';
+import { MatStepperModule } from '@angular/material/stepper';
+import { FormMetadataModule } from './metadata/metadata.module';
+import { FormTrialThresholdsModule } from './trial-thresholds/trial-thresholds.module';
+import { FormObjectiveModule } from './objective/objective.module';
+import { FormAlgorithmModule } from './algorithm/algorithm.module';
+import { FormHyperParametersModule } from './hyper-parameters/hyper-parameters.module';
+import { FormNasGraphModule } from './nas-graph/nas-graph.module';
+import { FormNasOperationsModule } from './nas-operations/nas-operations.module';
+import { FormMetricsCollectorModule } from './metrics-collector/metrics-collector.module';
+import { FormTrialTemplateModule } from './trial-template/trial-template.module';
+import { YamlModalModule } from './yaml-modal/yaml-modal.module';
+import { FormEarlyStoppingModule } from './early-stopping/early-stopping.module';
+import { of } from 'rxjs';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+let ExperimentFormServiceStub: Partial<ExperimentFormService>;
+let KWABackendServiceStub: Partial<KWABackendService>;
+let NamespaceServiceStub: Partial<NamespaceService>;
+
+ExperimentFormServiceStub = {
+  createMetadataForm: () =>
+    new FormGroup({
+      name: new FormControl(),
+      namespace: new FormControl(),
+    }),
+  createTrialThresholdForm: () =>
+    new FormGroup({
+      parallelTrialCount: new FormControl(),
+      maxTrialCount: new FormControl(),
+      maxFailedTrialCount: new FormControl(),
+      resumePolicy: new FormControl(),
+    }),
+  createObjectiveForm: () =>
+    new FormGroup({
+      strategiesArray: new FormArray([]),
+      type: new FormControl(),
+      metricName: new FormControl(),
+      goal: new FormControl(),
+      setStrategies: new FormControl(),
+      additionalMetricNames: new FormControl([]),
+      metricStrategy: new FormControl('test'),
+      metricStrategies: new FormArray([]),
+    }),
+  createAlgorithmObjectiveForm: () =>
+    new FormGroup({
+      type: new FormControl(),
+      algorithmSettings: new FormArray([]),
+      algorithm: new FormControl('tpe'),
+    }),
+  createEarlyStoppingForm: () => new FormGroup({}),
+  createHyperParametersForm: () => new FormArray([]),
+  createNasGraphForm: () =>
+    new FormGroup({
+      layers: new FormControl(),
+      inputSizes: new FormControl([]),
+      outputSizes: new FormControl([]),
+    }),
+  createNasOperationsForm: () => new FormArray([]),
+  createMetricsForm: () =>
+    new FormGroup({
+      kind: new FormControl(),
+      metricsFile: new FormControl(),
+      tfDir: new FormControl(),
+      port: new FormControl(),
+      path: new FormControl(),
+      scheme: new FormControl(),
+      host: new FormControl(),
+    }),
+  createTrialTemplateForm: () =>
+    new FormGroup({
+      trialParameters: new FormArray([]),
+      podLabels: new FormControl(),
+      containerName: new FormControl(),
+      successCond: new FormControl(),
+      failureCond: new FormControl(),
+      retain: new FormControl(),
+      type: new FormControl(),
+      cmNamespace: new FormControl(),
+      cmName: new FormControl(),
+      cmTrialPath: new FormControl(),
+    }),
+};
+
+KWABackendServiceStub = {
+  getTrialTemplates: () => of({ Data: [] }),
+};
+
+NamespaceServiceStub = {
+  getSelectedNamespace: () => of(),
+};
 
 describe('ExperimentCreationComponent', () => {
   let component: ExperimentCreationComponent;
@@ -9,7 +112,37 @@ describe('ExperimentCreationComponent', () => {
   beforeEach(
     waitForAsync(() => {
       TestBed.configureTestingModule({
+        imports: [
+          CommonModule,
+          BrowserAnimationsModule,
+          MatIconModule,
+          MatStepperModule,
+          FormModule,
+          TitleActionsToolbarModule,
+          FormMetadataModule,
+          FormTrialThresholdsModule,
+          FormObjectiveModule,
+          FormAlgorithmModule,
+          FormEarlyStoppingModule,
+          FormHyperParametersModule,
+          FormNasGraphModule,
+          FormNasOperationsModule,
+          FormMetricsCollectorModule,
+          FormTrialTemplateModule,
+          YamlModalModule,
+        ],
         declarations: [ExperimentCreationComponent],
+        providers: [
+          {
+            provide: ExperimentFormService,
+            useValue: ExperimentFormServiceStub,
+          },
+          { provide: Router, useValue: {} },
+          { provide: MatDialog, useValue: {} },
+          { provide: KWABackendService, useValue: KWABackendServiceStub },
+          { provide: NamespaceService, useValue: NamespaceServiceStub },
+          { provide: SnackBarService, useValue: {} },
+        ],
       }).compileComponents();
     }),
   );