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();
  }),
  );