diff --git a/pkg/new-ui/v1beta1/frontend/angular.json b/pkg/new-ui/v1beta1/frontend/angular.json
index 0188d225cb7..92c738ab300 100644
--- a/pkg/new-ui/v1beta1/frontend/angular.json
+++ b/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": {
diff --git a/pkg/new-ui/v1beta1/frontend/package-lock.json b/pkg/new-ui/v1beta1/frontend/package-lock.json
index 2e89a2b4cbb..35d385052d4 100644
--- a/pkg/new-ui/v1beta1/frontend/package-lock.json
+++ b/pkg/new-ui/v1beta1/frontend/package-lock.json
@@ -7512,9 +7512,9 @@
       }
     },
     "material-icons": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/material-icons/-/material-icons-0.3.1.tgz",
-      "integrity": "sha512-5Hbj76A6xDPcDZEbM4oxTknhWuMwGWnAHVLLPCEq9eVlcHb0fn4koU9ZeyMy1wjARtDEPAHfd5ZdL2Re5hf0zQ=="
+      "version": "0.7.7",
+      "resolved": "https://registry.npmjs.org/material-icons/-/material-icons-0.7.7.tgz",
+      "integrity": "sha512-WzHzL+/QlcCRbF2aCElgv6r0ViRateatEQP/UOA502PitZNFF2BJIcGpzvJmMPShktkhhrLAFx+elDN7DcjXVQ=="
     },
     "mdn-data": {
       "version": "2.0.14",
diff --git a/pkg/new-ui/v1beta1/frontend/package.json b/pkg/new-ui/v1beta1/frontend/package.json
index 955f0270f43..67e3ac4b6ce 100644
--- a/pkg/new-ui/v1beta1/frontend/package.json
+++ b/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",
diff --git a/pkg/new-ui/v1beta1/frontend/src/app/app.component.spec.ts b/pkg/new-ui/v1beta1/frontend/src/app/app.component.spec.ts
index 07de74fa209..d1e29f14a69 100644
--- a/pkg/new-ui/v1beta1/frontend/src/app/app.component.spec.ts
+++ b/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!',
-    );
-  });
 });
diff --git a/pkg/new-ui/v1beta1/frontend/src/app/app.module.ts b/pkg/new-ui/v1beta1/frontend/src/app/app.module.ts
index 844f5ca524d..98af0db9cbd 100644
--- a/pkg/new-ui/v1beta1/frontend/src/app/app.module.ts
+++ b/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],
diff --git a/pkg/new-ui/v1beta1/frontend/src/app/models/trial.k8s.model.ts b/pkg/new-ui/v1beta1/frontend/src/app/models/trial.k8s.model.ts
index 9bdf59ae753..0c3f82bb351 100644
--- a/pkg/new-ui/v1beta1/frontend/src/app/models/trial.k8s.model.ts
+++ b/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;
diff --git a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/algorithm/algorithm.component.spec.ts b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/algorithm/algorithm.component.spec.ts
index 77d0da02cb3..1f1f96cf992 100644
--- a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/algorithm/algorithm.component.spec.ts
+++ b/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();
   });
 
diff --git a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/algorithm/setting/setting.component.spec.ts b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/algorithm/setting/setting.component.spec.ts
index da275d709d3..8fc34e41627 100644
--- a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/algorithm/setting/setting.component.spec.ts
+++ b/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();
   });
 
diff --git a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/early-stopping/early-stopping.component.spec.ts b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/early-stopping/early-stopping.component.spec.ts
index a10cbb687a7..e841b542ca2 100644
--- a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/early-stopping/early-stopping.component.spec.ts
+++ b/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();
   });
 
diff --git a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/experiment-creation.component.spec.ts b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/experiment-creation.component.spec.ts
index f72797c9c23..85c2b100598 100644
--- a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/experiment-creation.component.spec.ts
+++ b/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();
     }),
   );
diff --git a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/hyper-parameters/hyper-parameters.component.spec.ts b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/hyper-parameters/hyper-parameters.component.spec.ts
index 193aa7552ca..ef2b52d4961 100644
--- a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/hyper-parameters/hyper-parameters.component.spec.ts
+++ b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/hyper-parameters/hyper-parameters.component.spec.ts
@@ -1,22 +1,34 @@
+import { CommonModule } from '@angular/common';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { FormArray, FormControl } from '@angular/forms';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { FormModule } from 'kubeflow';
+import { ParamsListModule } from 'src/app/shared/params-list/params-list.module';
 
-import { HyperParametersComponent } from './hyper-parameters.component';
+import { FormHyperParametersComponent } from './hyper-parameters.component';
 
-describe('HyperParametersComponent', () => {
-  let component: HyperParametersComponent;
-  let fixture: ComponentFixture<HyperParametersComponent>;
+describe('FormHyperParametersComponent', () => {
+  let component: FormHyperParametersComponent;
+  let fixture: ComponentFixture<FormHyperParametersComponent>;
 
   beforeEach(
     waitForAsync(() => {
       TestBed.configureTestingModule({
-        declarations: [HyperParametersComponent],
+        imports: [
+          CommonModule,
+          ParamsListModule,
+          FormModule,
+          BrowserAnimationsModule,
+        ],
+        declarations: [FormHyperParametersComponent],
       }).compileComponents();
     }),
   );
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(HyperParametersComponent);
+    fixture = TestBed.createComponent(FormHyperParametersComponent);
     component = fixture.componentInstance;
+    component.hyperParamsArray = new FormArray([]);
     fixture.detectChanges();
   });
 
diff --git a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/metadata/metadata.component.spec.ts b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/metadata/metadata.component.spec.ts
index be8e7f7f3fa..1fb995d006b 100644
--- a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/metadata/metadata.component.spec.ts
+++ b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/metadata/metadata.component.spec.ts
@@ -1,22 +1,46 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { of } from 'rxjs';
+import { NamespaceService, FormModule } from 'kubeflow';
 
-import { MetadataComponent } from './metadata.component';
+import { FormMetadataComponent } from './metadata.component';
+import { FormControl, FormGroup } from '@angular/forms';
+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';
 
-describe('MetadataComponent', () => {
-  let component: MetadataComponent;
-  let fixture: ComponentFixture<MetadataComponent>;
+describe('FormMetadataComponent', () => {
+  let component: FormMetadataComponent;
+  let fixture: ComponentFixture<FormMetadataComponent>;
 
   beforeEach(
     waitForAsync(() => {
       TestBed.configureTestingModule({
-        declarations: [MetadataComponent],
+        imports: [
+          CommonModule,
+          FormModule,
+          BrowserAnimationsModule,
+          MatFormFieldModule,
+          MatInputModule,
+        ],
+        declarations: [FormMetadataComponent],
+        providers: [
+          {
+            provide: NamespaceService,
+            useValue: { getSelectedNamespace: () => of('') },
+          },
+        ],
       }).compileComponents();
     }),
   );
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(MetadataComponent);
+    fixture = TestBed.createComponent(FormMetadataComponent);
     component = fixture.componentInstance;
+    component.metadataForm = new FormGroup({
+      name: new FormControl(),
+      namespace: new FormControl(),
+    });
     fixture.detectChanges();
   });
 
diff --git a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/metrics-collector/metrics-collector.component.spec.ts b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/metrics-collector/metrics-collector.component.spec.ts
index 083607950bb..d9a6117bf1f 100644
--- a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/metrics-collector/metrics-collector.component.spec.ts
+++ b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/metrics-collector/metrics-collector.component.spec.ts
@@ -1,22 +1,45 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { FormControl, FormGroup } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+import { FormModule } from 'kubeflow';
+import { ListKeyValueModule } from 'src/app/shared/list-key-value/list-key-value.module';
+import { AceEditorModule } from 'ng2-ace-editor';
 
-import { MetricsCollectorComponent } from './metrics-collector.component';
+import { FormMetricsCollectorComponent } from './metrics-collector.component';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
-describe('MetricsCollectorComponent', () => {
-  let component: MetricsCollectorComponent;
-  let fixture: ComponentFixture<MetricsCollectorComponent>;
+describe('FormMetricsCollectorComponent', () => {
+  let component: FormMetricsCollectorComponent;
+  let fixture: ComponentFixture<FormMetricsCollectorComponent>;
 
   beforeEach(
     waitForAsync(() => {
       TestBed.configureTestingModule({
-        declarations: [MetricsCollectorComponent],
+        imports: [
+          CommonModule,
+          BrowserAnimationsModule,
+          FormModule,
+          ListKeyValueModule,
+          AceEditorModule,
+        ],
+        declarations: [FormMetricsCollectorComponent],
       }).compileComponents();
     }),
   );
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(MetricsCollectorComponent);
+    fixture = TestBed.createComponent(FormMetricsCollectorComponent);
     component = fixture.componentInstance;
+    component.formGroup = new FormGroup({
+      kind: new FormControl(),
+      metricsFile: new FormControl(),
+      tfDir: new FormControl(),
+      port: new FormControl(),
+      path: new FormControl(),
+      scheme: new FormControl(),
+      host: new FormControl(),
+      prometheus: new FormControl(),
+    });
     fixture.detectChanges();
   });
 
diff --git a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/nas-graph/nas-graph.component.spec.ts b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/nas-graph/nas-graph.component.spec.ts
index 9b9a6f1cedc..1f3aeaa4ed2 100644
--- a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/nas-graph/nas-graph.component.spec.ts
+++ b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/nas-graph/nas-graph.component.spec.ts
@@ -1,22 +1,46 @@
+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 { MatDividerModule } from '@angular/material/divider';
+import { MatIconModule } from '@angular/material/icon';
+import { ListInputModule } from 'src/app/shared/list-input/list-input.module';
+import { FormModule } from 'kubeflow';
 
-import { NasGraphComponent } from './nas-graph.component';
+import { FormNasGraphComponent } from './nas-graph.component';
 
-describe('NasGraphComponent', () => {
-  let component: NasGraphComponent;
-  let fixture: ComponentFixture<NasGraphComponent>;
+describe('FormNasGraphComponent', () => {
+  let component: FormNasGraphComponent;
+  let fixture: ComponentFixture<FormNasGraphComponent>;
 
   beforeEach(
     waitForAsync(() => {
       TestBed.configureTestingModule({
-        declarations: [NasGraphComponent],
+        imports: [
+          CommonModule,
+          BrowserAnimationsModule,
+          MatFormFieldModule,
+          MatInputModule,
+          MatDividerModule,
+          MatIconModule,
+          ListInputModule,
+          FormModule,
+        ],
+        declarations: [FormNasGraphComponent],
       }).compileComponents();
     }),
   );
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(NasGraphComponent);
+    fixture = TestBed.createComponent(FormNasGraphComponent);
     component = fixture.componentInstance;
+    component.formGroup = new FormGroup({
+      layers: new FormControl(),
+      inputSizes: new FormControl([]),
+      outputSizes: new FormControl([]),
+    });
     fixture.detectChanges();
   });
 
diff --git a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/nas-operations/nas-operations.component.spec.ts b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/nas-operations/nas-operations.component.spec.ts
index 2dd2b5bb426..ee27b665208 100644
--- a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/nas-operations/nas-operations.component.spec.ts
+++ b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/nas-operations/nas-operations.component.spec.ts
@@ -1,22 +1,36 @@
+import { CommonModule } from '@angular/common';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { FormArray } from '@angular/forms';
+import { MatIconModule } from '@angular/material/icon';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { FormModule } from 'kubeflow';
 
-import { NasOperationsComponent } from './nas-operations.component';
+import { FormNasOperationsComponent } from './nas-operations.component';
+import { FormNasOperationsModule } from './nas-operations.module';
 
-describe('NasOperationsComponent', () => {
-  let component: NasOperationsComponent;
-  let fixture: ComponentFixture<NasOperationsComponent>;
+describe('FormNasOperationsComponent', () => {
+  let component: FormNasOperationsComponent;
+  let fixture: ComponentFixture<FormNasOperationsComponent>;
 
   beforeEach(
     waitForAsync(() => {
       TestBed.configureTestingModule({
-        declarations: [NasOperationsComponent],
+        imports: [
+          CommonModule,
+          BrowserAnimationsModule,
+          MatIconModule,
+          FormModule,
+          FormNasOperationsModule,
+        ],
+        declarations: [FormNasOperationsComponent],
       }).compileComponents();
     }),
   );
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(NasOperationsComponent);
+    fixture = TestBed.createComponent(FormNasOperationsComponent);
     component = fixture.componentInstance;
+    component.formArray = new FormArray([]);
     fixture.detectChanges();
   });
 
diff --git a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/nas-operations/operation/operation.component.spec.ts b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/nas-operations/operation/operation.component.spec.ts
index f1fe308486d..50ce644a38c 100644
--- a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/nas-operations/operation/operation.component.spec.ts
+++ b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/nas-operations/operation/operation.component.spec.ts
@@ -1,6 +1,13 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+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 { OperationComponent } from './operation.component';
+import { ParamsListModule } from 'src/app/shared/params-list/params-list.module';
+import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { MatIconModule } from '@angular/material/icon';
 
 describe('OperationComponent', () => {
   let component: OperationComponent;
@@ -9,6 +16,15 @@ describe('OperationComponent', () => {
   beforeEach(
     waitForAsync(() => {
       TestBed.configureTestingModule({
+        imports: [
+          CommonModule,
+          BrowserAnimationsModule,
+          MatFormFieldModule,
+          MatInputModule,
+          ParamsListModule,
+          MatIconModule,
+          ReactiveFormsModule,
+        ],
         declarations: [OperationComponent],
       }).compileComponents();
     }),
@@ -17,6 +33,10 @@ describe('OperationComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(OperationComponent);
     component = fixture.componentInstance;
+    component.formGroup = new FormGroup({
+      operationType: new FormControl(),
+      parameters: new FormControl(),
+    });
     fixture.detectChanges();
   });
 
diff --git a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/objective/objective.component.spec.ts b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/objective/objective.component.spec.ts
index 47ecae32bad..be530cb6049 100644
--- a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/objective/objective.component.spec.ts
+++ b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/objective/objective.component.spec.ts
@@ -1,22 +1,54 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { FormArray, FormControl, FormGroup } from '@angular/forms';
+import { MatDialog } from '@angular/material/dialog';
+import { CommonModule } from '@angular/common';
+import { FormModule } from 'kubeflow';
+import { MatIconModule } from '@angular/material/icon';
+import { ListInputModule } from 'src/app/shared/list-input/list-input.module';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatCheckboxModule } from '@angular/material/checkbox';
 
-import { ObjectiveComponent } from './objective.component';
+import { FormObjectiveComponent } from './objective.component';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
-describe('ObjectiveComponent', () => {
-  let component: ObjectiveComponent;
-  let fixture: ComponentFixture<ObjectiveComponent>;
+describe('FormObjectiveComponent', () => {
+  let component: FormObjectiveComponent;
+  let fixture: ComponentFixture<FormObjectiveComponent>;
 
   beforeEach(
     waitForAsync(() => {
       TestBed.configureTestingModule({
-        declarations: [ObjectiveComponent],
+        imports: [
+          CommonModule,
+          BrowserAnimationsModule,
+          FormModule,
+          MatIconModule,
+          ListInputModule,
+          MatDividerModule,
+          MatCheckboxModule,
+        ],
+        declarations: [FormObjectiveComponent],
+        providers: [{ provide: MatDialog, useValue: {} }],
       }).compileComponents();
     }),
   );
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(ObjectiveComponent);
+    fixture = TestBed.createComponent(FormObjectiveComponent);
     component = fixture.componentInstance;
+    let array: FormGroup[] = [];
+    array.push(new FormGroup({}));
+    let formArray = new FormArray(array);
+    component.objectiveForm = new FormGroup({
+      strategiesArray: formArray,
+      type: new FormControl(),
+      metricName: new FormControl(),
+      goal: new FormControl(),
+      setStrategies: new FormControl(),
+      additionalMetricNames: new FormControl([]),
+      metricStrategy: new FormControl(),
+      metricStrategies: new FormArray([]),
+    });
     fixture.detectChanges();
   });
 
diff --git a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/trial-template/trial-parameter/trial-parameter.component.spec.ts b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/trial-template/trial-parameter/trial-parameter.component.spec.ts
index 337688f66d5..bb35a571580 100644
--- a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/trial-template/trial-parameter/trial-parameter.component.spec.ts
+++ b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/trial-template/trial-parameter/trial-parameter.component.spec.ts
@@ -1,4 +1,11 @@
+import { CommonModule } from '@angular/common';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { PopoverModule } from 'kubeflow';
 
 import { TrialParameterComponent } from './trial-parameter.component';
 
@@ -9,6 +16,15 @@ describe('TrialParameterComponent', () => {
   beforeEach(
     waitForAsync(() => {
       TestBed.configureTestingModule({
+        imports: [
+          CommonModule,
+          BrowserAnimationsModule,
+          MatFormFieldModule,
+          MatInputModule,
+          MatIconModule,
+          PopoverModule,
+          ReactiveFormsModule,
+        ],
         declarations: [TrialParameterComponent],
       }).compileComponents();
     }),
@@ -17,6 +33,11 @@ describe('TrialParameterComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(TrialParameterComponent);
     component = fixture.componentInstance;
+    component.formGroup = new FormGroup({
+      name: new FormControl(),
+      reference: new FormControl(),
+      description: new FormControl(),
+    });
     fixture.detectChanges();
   });
 
diff --git a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/trial-template/trial-template.component.spec.ts b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/trial-template/trial-template.component.spec.ts
index 782dab572c5..9b0d5f263d7 100644
--- a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/trial-template/trial-template.component.spec.ts
+++ b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/trial-template/trial-template.component.spec.ts
@@ -1,22 +1,59 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { FormArray, FormControl, FormGroup } from '@angular/forms';
+import { of } from 'rxjs';
+import { KWABackendService } from 'src/app/services/backend.service';
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatDividerModule } from '@angular/material/divider';
+import { FormModule, PopoverModule } from 'kubeflow';
+import { ListKeyValueModule } from 'src/app/shared/list-key-value/list-key-value.module';
+import { AceEditorModule } from 'ng2-ace-editor';
 
-import { TrialTemplateComponent } from './trial-template.component';
+import { FormTrialTemplateComponent } from './trial-template.component';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
-describe('TrialTemplateComponent', () => {
-  let component: TrialTemplateComponent;
-  let fixture: ComponentFixture<TrialTemplateComponent>;
+describe('FormTrialTemplateComponent', () => {
+  let component: FormTrialTemplateComponent;
+  let fixture: ComponentFixture<FormTrialTemplateComponent>;
 
   beforeEach(
     waitForAsync(() => {
       TestBed.configureTestingModule({
-        declarations: [TrialTemplateComponent],
+        imports: [
+          CommonModule,
+          BrowserAnimationsModule,
+          FormModule,
+          ListKeyValueModule,
+          MatDividerModule,
+          AceEditorModule,
+          PopoverModule,
+        ],
+        declarations: [FormTrialTemplateComponent],
+        providers: [
+          {
+            provide: KWABackendService,
+            useValue: { getTrialTemplates: () => of() },
+          },
+        ],
       }).compileComponents();
     }),
   );
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(TrialTemplateComponent);
+    fixture = TestBed.createComponent(FormTrialTemplateComponent);
     component = fixture.componentInstance;
+    component.formGroup = 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(),
+    });
     fixture.detectChanges();
   });
 
diff --git a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/trial-thresholds/trial-thresholds.component.spec.ts b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/trial-thresholds/trial-thresholds.component.spec.ts
index c01602cacab..fd8d9948313 100644
--- a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/trial-thresholds/trial-thresholds.component.spec.ts
+++ b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/trial-thresholds/trial-thresholds.component.spec.ts
@@ -1,22 +1,43 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { CommonModule } from '@angular/common';
+import { FormModule } from 'kubeflow';
+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';
 
-import { TrialThresholdsComponent } from './trial-thresholds.component';
+import { FormTrialThresholdsComponent } from './trial-thresholds.component';
+import { FormControl, FormGroup } from '@angular/forms';
 
 describe('TrialThresholdsComponent', () => {
-  let component: TrialThresholdsComponent;
-  let fixture: ComponentFixture<TrialThresholdsComponent>;
+  let component: FormTrialThresholdsComponent;
+  let fixture: ComponentFixture<FormTrialThresholdsComponent>;
 
   beforeEach(
     waitForAsync(() => {
       TestBed.configureTestingModule({
-        declarations: [TrialThresholdsComponent],
+        imports: [
+          CommonModule,
+          BrowserAnimationsModule,
+          MatFormFieldModule,
+          MatInputModule,
+          MatSelectModule,
+          FormModule,
+        ],
+        declarations: [FormTrialThresholdsComponent],
       }).compileComponents();
     }),
   );
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(TrialThresholdsComponent);
+    fixture = TestBed.createComponent(FormTrialThresholdsComponent);
     component = fixture.componentInstance;
+    component.formGroup = new FormGroup({
+      parallelTrialCount: new FormControl(),
+      maxTrialCount: new FormControl(),
+      maxFailedTrialCount: new FormControl(),
+      resumePolicy: new FormControl(),
+    });
     fixture.detectChanges();
   });
 
diff --git a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/yaml-modal/yaml-modal.component.spec.ts b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/yaml-modal/yaml-modal.component.spec.ts
index c9450688373..92298fcb495 100644
--- a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/yaml-modal/yaml-modal.component.spec.ts
+++ b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/yaml-modal/yaml-modal.component.spec.ts
@@ -1,4 +1,9 @@
+import { CommonModule } from '@angular/common';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MatDialogModule } from '@angular/material/dialog';
+import { FormModule } from 'kubeflow';
+import { AceEditorModule } from 'ng2-ace-editor';
 
 import { YamlModalComponent } from './yaml-modal.component';
 
@@ -9,7 +14,12 @@ describe('YamlModalComponent', () => {
   beforeEach(
     waitForAsync(() => {
       TestBed.configureTestingModule({
+        imports: [CommonModule, MatDialogModule, FormModule, AceEditorModule],
         declarations: [YamlModalComponent],
+        providers: [
+          { provide: MatDialogRef, useValue: {} },
+          { provide: MAT_DIALOG_DATA, useValue: {} },
+        ],
       }).compileComponents();
     }),
   );
diff --git a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/details/experiment-details-tab.component.spec.ts b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/details/experiment-details-tab.component.spec.ts
index 5882797bb53..e1d85464be6 100644
--- a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/details/experiment-details-tab.component.spec.ts
+++ b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/details/experiment-details-tab.component.spec.ts
@@ -1,6 +1,10 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { CommonModule } from '@angular/common';
+import { DetailsListModule, HeadingSubheadingRowModule } from 'kubeflow';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
 
 import { ExperimentDetailsTabComponent } from './experiment-details-tab.component';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 describe('ExperimentDetailsTabComponent', () => {
   let component: ExperimentDetailsTabComponent;
@@ -9,6 +13,13 @@ describe('ExperimentDetailsTabComponent', () => {
   beforeEach(
     waitForAsync(() => {
       TestBed.configureTestingModule({
+        imports: [
+          CommonModule,
+          DetailsListModule,
+          HeadingSubheadingRowModule,
+          MatSnackBarModule,
+          BrowserAnimationsModule,
+        ],
         declarations: [ExperimentDetailsTabComponent],
       }).compileComponents();
     }),
diff --git a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/experiment-details.component.spec.ts b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/experiment-details.component.spec.ts
index 999356ffa3e..c3d3ffaeaf1 100644
--- a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/experiment-details.component.spec.ts
+++ b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/experiment-details.component.spec.ts
@@ -1,15 +1,86 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { ActivatedRoute, Router } from '@angular/router';
+import { KWABackendService } from 'src/app/services/backend.service';
 
 import { ExperimentDetailsComponent } from './experiment-details.component';
+import { of } from 'rxjs';
+import { CommonModule } from '@angular/common';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import {
+  ConfirmDialogService,
+  NamespaceService,
+  TitleActionsToolbarModule,
+  LoadingSpinnerModule,
+  PanelModule,
+} from 'kubeflow';
+import { TrialsTableModule } from './trials-table/trials-table.module';
+import { ExperimentOverviewModule } from './overview/experiment-overview.module';
+import { ExperimentDetailsTabModule } from './details/experiment-details-tab.module';
+import { ExperimentYamlModule } from './yaml/experiment-yaml.module';
+import { TrialsGraphEchartsModule } from './trials-graph-echarts/trials-graph-echarts.module';
+import { ReactiveFormsModule } from '@angular/forms';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+
+let KWABackendServiceStub: Partial<KWABackendService>;
+let NamespaceServiceStub: Partial<NamespaceService>;
+
+KWABackendServiceStub = {
+  getExperimentTrialsInfo: () => of([]),
+  getExperiment: () => of(),
+  deleteExperiment: () => of(),
+};
+
+NamespaceServiceStub = {
+  getSelectedNamespace: () => of(),
+};
 
 describe('ExperimentDetailsComponent', () => {
   let component: ExperimentDetailsComponent;
   let fixture: ComponentFixture<ExperimentDetailsComponent>;
+  let activatedRouteSpy;
 
   beforeEach(
     waitForAsync(() => {
+      activatedRouteSpy = {
+        snapshot: {
+          params: {
+            experimentName: '',
+          },
+          queryParams: {
+            tab: '',
+          },
+        },
+      };
       TestBed.configureTestingModule({
+        imports: [
+          CommonModule,
+          TrialsTableModule,
+          MatButtonModule,
+          MatTabsModule,
+          MatIconModule,
+          LoadingSpinnerModule,
+          PanelModule,
+          ExperimentOverviewModule,
+          ExperimentDetailsTabModule,
+          MatProgressSpinnerModule,
+          ExperimentYamlModule,
+          TitleActionsToolbarModule,
+          TrialsGraphEchartsModule,
+          ReactiveFormsModule,
+          MatSnackBarModule,
+          TitleActionsToolbarModule,
+        ],
         declarations: [ExperimentDetailsComponent],
+        providers: [
+          { provide: ActivatedRoute, useValue: activatedRouteSpy },
+          { provide: Router, useValue: {} },
+          { provide: KWABackendService, useValue: KWABackendServiceStub },
+          { provide: ConfirmDialogService, useValue: {} },
+          { provide: NamespaceService, useValue: NamespaceServiceStub },
+        ],
       }).compileComponents();
     }),
   );
diff --git a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/overview/experiment-overview.component.spec.ts b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/overview/experiment-overview.component.spec.ts
index a2fbbf69b7e..3876cae9024 100644
--- a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/overview/experiment-overview.component.spec.ts
+++ b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/overview/experiment-overview.component.spec.ts
@@ -1,6 +1,10 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { CommonModule } from '@angular/common';
+import { ConditionsTableModule, DetailsListModule } from 'kubeflow';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
 
 import { ExperimentOverviewComponent } from './experiment-overview.component';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 describe('ExperimentOverviewComponent', () => {
   let component: ExperimentOverviewComponent;
@@ -9,6 +13,13 @@ describe('ExperimentOverviewComponent', () => {
   beforeEach(
     waitForAsync(() => {
       TestBed.configureTestingModule({
+        imports: [
+          CommonModule,
+          ConditionsTableModule,
+          DetailsListModule,
+          MatSnackBarModule,
+          BrowserAnimationsModule,
+        ],
         declarations: [ExperimentOverviewComponent],
       }).compileComponents();
     }),
diff --git a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/trials-table/trial-modal/overview/metrics/metrics.component.spec.ts b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/trials-table/trial-modal/overview/metrics/metrics.component.spec.ts
index 1b5184c1ffd..bb499c93dd3 100644
--- a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/trials-table/trial-modal/overview/metrics/metrics.component.spec.ts
+++ b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/trials-table/trial-modal/overview/metrics/metrics.component.spec.ts
@@ -1,4 +1,6 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { ConditionsTableModule, DetailsListModule } from 'kubeflow';
 
 import { TrialModalMetricsComponent } from './metrics.component';
 
@@ -9,6 +11,7 @@ describe('TrialModalMetricsComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [TrialModalMetricsComponent],
+      imports: [ConditionsTableModule, DetailsListModule, MatSnackBarModule],
     }).compileComponents();
   }));
 
diff --git a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/trials-table/trial-modal/overview/trial-modal-overview.component.spec.ts b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/trials-table/trial-modal/overview/trial-modal-overview.component.spec.ts
index 48ff1b349fb..a0fc77e1397 100644
--- a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/trials-table/trial-modal/overview/trial-modal-overview.component.spec.ts
+++ b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/trials-table/trial-modal/overview/trial-modal-overview.component.spec.ts
@@ -1,4 +1,12 @@
+import { CommonModule } from '@angular/common';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import {
+  ConditionsTableModule,
+  DetailsListModule,
+  HeadingSubheadingRowModule,
+} from 'kubeflow';
+import { TrialModalMetricsModule } from './metrics/metrics.component.module';
 
 import { TrialModalOverviewComponent } from './trial-modal-overview.component';
 
@@ -9,12 +17,47 @@ describe('TrialModalOverviewComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [TrialModalOverviewComponent],
+      imports: [
+        CommonModule,
+        ConditionsTableModule,
+        DetailsListModule,
+        HeadingSubheadingRowModule,
+        TrialModalMetricsModule,
+        MatSnackBarModule,
+      ],
     }).compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(TrialModalOverviewComponent);
     component = fixture.componentInstance;
+    component.trial = {
+      status: {
+        startTime: '2022-06-01T09:58:23Z',
+        completionTime: '2022-06-01T10:07:45Z',
+        conditions: [
+          {
+            type: 'Created',
+            status: 'True',
+            reason: 'TrialCreated',
+            message: 'Trial is created',
+            lastUpdateTime: '2022-06-01T09:58:23Z',
+            lastTransitionTime: '2022-06-01T09:58:23Z',
+          },
+        ],
+        observation: {
+          metrics: [
+            {
+              name: 'Validation-accuracy',
+              latest: '0.113854',
+              min: '0.113854',
+              max: '0.113854',
+            },
+          ],
+        },
+      },
+    };
+
     fixture.detectChanges();
   });
 
diff --git a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/trials-table/trial-modal/trial-modal.component.spec.ts b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/trials-table/trial-modal/trial-modal.component.spec.ts
index 28db9af37a8..59f4dd1ce1b 100644
--- a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/trials-table/trial-modal/trial-modal.component.spec.ts
+++ b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/trials-table/trial-modal/trial-modal.component.spec.ts
@@ -1,15 +1,59 @@
+import { HttpClientModule } from '@angular/common/http';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { ReactiveFormsModule } from '@angular/forms';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 
 import { TrialModalComponent } from './trial-modal.component';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { KWABackendService } from 'src/app/services/backend.service';
+import { of } from 'rxjs';
+import { ActivatedRoute, Router } from '@angular/router';
+import { NamespaceService, TitleActionsToolbarModule } from 'kubeflow';
+
+let KWABackendServiceStub: Partial<KWABackendService>;
+let NamespaceServiceStub: Partial<NamespaceService>;
+
+KWABackendServiceStub = {
+  getTrial: () => of([]),
+  getTrialInfo: () => of(),
+};
+
+NamespaceServiceStub = {
+  getSelectedNamespace: () => of(),
+};
 
 describe('TrialModalComponent', () => {
   let component: TrialModalComponent;
   let fixture: ComponentFixture<TrialModalComponent>;
+  let activatedRouteSpy;
 
   beforeEach(
     waitForAsync(() => {
+      activatedRouteSpy = {
+        snapshot: {
+          params: {
+            trialName: '',
+            experimentName: '',
+          },
+        },
+      };
       TestBed.configureTestingModule({
+        imports: [
+          HttpClientModule,
+          ReactiveFormsModule,
+          MatSnackBarModule,
+          MatProgressSpinnerModule,
+          BrowserAnimationsModule,
+          TitleActionsToolbarModule,
+        ],
         declarations: [TrialModalComponent],
+        providers: [
+          { provide: ActivatedRoute, useValue: activatedRouteSpy },
+          { provide: Router, useValue: {} },
+          { provide: KWABackendService, useValue: KWABackendServiceStub },
+          { provide: NamespaceService, useValue: NamespaceServiceStub },
+        ],
       }).compileComponents();
     }),
   );
diff --git a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/trials-table/trial-modal/trial-modal.module.ts b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/trials-table/trial-modal/trial-modal.module.ts
index 0b9eae68c81..5c50cf9cce7 100644
--- a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/trials-table/trial-modal/trial-modal.module.ts
+++ b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/trials-table/trial-modal/trial-modal.module.ts
@@ -31,6 +31,7 @@ import {
     TitleActionsToolbarModule,
     LoadingSpinnerModule,
     PanelModule,
+    TitleActionsToolbarModule,
   ],
   exports: [TrialModalComponent],
 })
diff --git a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/trials-table/trials-table.component.spec.ts b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/trials-table/trials-table.component.spec.ts
index 19ffdd7f863..d9a460d0e44 100644
--- a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/trials-table/trials-table.component.spec.ts
+++ b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/trials-table/trials-table.component.spec.ts
@@ -1,6 +1,15 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-
+import { CommonModule } from '@angular/common';
+import { MatTableModule } from '@angular/material/table';
+import { MatIconModule } from '@angular/material/icon';
+import { MatDialogModule } from '@angular/material/dialog';
+import { NgxChartsModule } from '@swimlane/ngx-charts';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { RouterTestingModule } from '@angular/router/testing';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatButtonModule } from '@angular/material/button';
 import { TrialsTableComponent } from './trials-table.component';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 describe('TrialsTableComponent', () => {
   let component: TrialsTableComponent;
@@ -9,6 +18,18 @@ describe('TrialsTableComponent', () => {
   beforeEach(
     waitForAsync(() => {
       TestBed.configureTestingModule({
+        imports: [
+          CommonModule,
+          MatTableModule,
+          MatProgressSpinnerModule,
+          MatDialogModule,
+          MatIconModule,
+          NgxChartsModule,
+          MatTooltipModule,
+          MatButtonModule,
+          RouterTestingModule,
+          BrowserAnimationsModule,
+        ],
         declarations: [TrialsTableComponent],
       }).compileComponents();
     }),
diff --git a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/trials-table/trials-table.module.ts b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/trials-table/trials-table.module.ts
index e83e0f07045..19d3d7fc379 100644
--- a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/trials-table/trials-table.module.ts
+++ b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/trials-table/trials-table.module.ts
@@ -9,6 +9,7 @@ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { TrialsTableComponent } from './trials-table.component';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { TrialModalComponent } from './trial-modal/trial-modal.component';
+import { TrialModalModule } from './trial-modal/trial-modal.module';
 
 @NgModule({
   declarations: [TrialsTableComponent],
@@ -20,6 +21,7 @@ import { TrialModalComponent } from './trial-modal/trial-modal.component';
     MatIconModule,
     NgxChartsModule,
     MatTooltipModule,
+    TrialModalModule,
   ],
   entryComponents: [TrialModalComponent],
   exports: [TrialsTableComponent],
diff --git a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/yaml/experiment-yaml.component.spec.ts b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/yaml/experiment-yaml.component.spec.ts
index e7c88884d02..aa6e3784b49 100644
--- a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/yaml/experiment-yaml.component.spec.ts
+++ b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/yaml/experiment-yaml.component.spec.ts
@@ -1,4 +1,7 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { CommonModule } from '@angular/common';
+import { AceEditorModule } from 'ng2-ace-editor';
 
 import { ExperimentYamlComponent } from './experiment-yaml.component';
 
@@ -9,6 +12,7 @@ describe('ExperimentYamlComponent', () => {
   beforeEach(
     waitForAsync(() => {
       TestBed.configureTestingModule({
+        imports: [CommonModule, BrowserAnimationsModule, AceEditorModule],
         declarations: [ExperimentYamlComponent],
       }).compileComponents();
     }),
diff --git a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiments/experiments.component.spec.ts b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiments/experiments.component.spec.ts
index 7a087d8d7f0..c16cc531f59 100644
--- a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiments/experiments.component.spec.ts
+++ b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiments/experiments.component.spec.ts
@@ -1,5 +1,28 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { ExperimentsComponent } from './experiments.component';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { ReactiveFormsModule } from '@angular/forms';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { Router } from '@angular/router';
+import { of } from 'rxjs';
+import {
+  ConfirmDialogService,
+  NamespaceService,
+  KubeflowModule,
+} from 'kubeflow';
+import { KWABackendService } from 'src/app/services/backend.service';
+
+let KWABackendServiceStub: Partial<KWABackendService>;
+let NamespaceServiceStub: Partial<NamespaceService>;
+
+KWABackendServiceStub = {
+  getExperiments: () => of(),
+  deleteExperiment: () => of(),
+};
+
+NamespaceServiceStub = {
+  getSelectedNamespace: () => of(),
+};
 
 describe('ExperimentsComponent', () => {
   let component: ExperimentsComponent;
@@ -8,7 +31,19 @@ describe('ExperimentsComponent', () => {
   beforeEach(
     waitForAsync(() => {
       TestBed.configureTestingModule({
+        imports: [
+          HttpClientTestingModule,
+          ReactiveFormsModule,
+          MatSnackBarModule,
+          KubeflowModule,
+        ],
         declarations: [ExperimentsComponent],
+        providers: [
+          { provide: Router, useValue: {} },
+          { provide: KWABackendService, useValue: KWABackendServiceStub },
+          { provide: ConfirmDialogService, useValue: {} },
+          { provide: NamespaceService, useValue: NamespaceServiceStub },
+        ],
       }).compileComponents();
     }),
   );
diff --git a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiments/optimal-trial/experiment-optimal-trial.component.spec.ts b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiments/optimal-trial/experiment-optimal-trial.component.spec.ts
index b9b063abee2..e4a4dd07f54 100644
--- a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiments/optimal-trial/experiment-optimal-trial.component.spec.ts
+++ b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiments/optimal-trial/experiment-optimal-trial.component.spec.ts
@@ -1,4 +1,7 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { MatDividerModule } from '@angular/material/divider';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { DetailsListModule, PopoverModule } from 'kubeflow';
 
 import { ExperimentOptimalTrialComponent } from './experiment-optimal-trial.component';
 
@@ -9,6 +12,12 @@ describe('ExperimentOptimalTrialComponent', () => {
   beforeEach(
     waitForAsync(() => {
       TestBed.configureTestingModule({
+        imports: [
+          BrowserAnimationsModule,
+          PopoverModule,
+          DetailsListModule,
+          MatDividerModule,
+        ],
         declarations: [ExperimentOptimalTrialComponent],
       }).compileComponents();
     }),
diff --git a/pkg/new-ui/v1beta1/frontend/src/app/services/backend.service.spec.ts b/pkg/new-ui/v1beta1/frontend/src/app/services/backend.service.spec.ts
index 88e92b0a44e..d0c38867cde 100644
--- a/pkg/new-ui/v1beta1/frontend/src/app/services/backend.service.spec.ts
+++ b/pkg/new-ui/v1beta1/frontend/src/app/services/backend.service.spec.ts
@@ -1,12 +1,22 @@
 import { TestBed } from '@angular/core/testing';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { KWABackendService } from './backend.service';
+import { ReactiveFormsModule } from '@angular/forms';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
 
-import { BackendService } from './backend.service';
-
-describe('BackendService', () => {
-  beforeEach(() => TestBed.configureTestingModule({}));
+describe('KWABackendService', () => {
+  beforeEach(() =>
+    TestBed.configureTestingModule({
+      imports: [
+        HttpClientTestingModule,
+        ReactiveFormsModule,
+        MatSnackBarModule,
+      ],
+    }),
+  );
 
   it('should be created', () => {
-    const service: BackendService = TestBed.inject(BackendService);
+    const service: KWABackendService = TestBed.inject(KWABackendService);
     expect(service).toBeTruthy();
   });
 });
diff --git a/pkg/new-ui/v1beta1/frontend/src/app/shared/list-input/list-input.component.spec.ts b/pkg/new-ui/v1beta1/frontend/src/app/shared/list-input/list-input.component.spec.ts
index b4d8dc506ae..73a3046e234 100644
--- a/pkg/new-ui/v1beta1/frontend/src/app/shared/list-input/list-input.component.spec.ts
+++ b/pkg/new-ui/v1beta1/frontend/src/app/shared/list-input/list-input.component.spec.ts
@@ -1,4 +1,7 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { FormArray } from '@angular/forms';
+import { MatIconModule } from '@angular/material/icon';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 import { ListInputComponent } from './list-input.component';
 
@@ -9,6 +12,7 @@ describe('ListInputComponent', () => {
   beforeEach(
     waitForAsync(() => {
       TestBed.configureTestingModule({
+        imports: [BrowserAnimationsModule, MatIconModule],
         declarations: [ListInputComponent],
       }).compileComponents();
     }),
@@ -17,6 +21,7 @@ describe('ListInputComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(ListInputComponent);
     component = fixture.componentInstance;
+    component.formArray = new FormArray([]);
     fixture.detectChanges();
   });
 
diff --git a/pkg/new-ui/v1beta1/frontend/src/app/shared/list-key-value/list-key-value.component.spec.ts b/pkg/new-ui/v1beta1/frontend/src/app/shared/list-key-value/list-key-value.component.spec.ts
index ecf9a1ac4d6..941baa1d80d 100644
--- a/pkg/new-ui/v1beta1/frontend/src/app/shared/list-key-value/list-key-value.component.spec.ts
+++ b/pkg/new-ui/v1beta1/frontend/src/app/shared/list-key-value/list-key-value.component.spec.ts
@@ -1,4 +1,9 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { FormArray } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+import { MatIconModule } from '@angular/material/icon';
+
+import { FormModule } from 'kubeflow';
 
 import { ListKeyValueComponent } from './list-key-value.component';
 
@@ -9,6 +14,7 @@ describe('ListKeyValueComponent', () => {
   beforeEach(
     waitForAsync(() => {
       TestBed.configureTestingModule({
+        imports: [CommonModule, FormModule, MatIconModule],
         declarations: [ListKeyValueComponent],
       }).compileComponents();
     }),
@@ -17,6 +23,7 @@ describe('ListKeyValueComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(ListKeyValueComponent);
     component = fixture.componentInstance;
+    component.formArray = new FormArray([]);
     fixture.detectChanges();
   });
 
diff --git a/pkg/new-ui/v1beta1/frontend/src/app/shared/params-list/add-modal/add-modal.component.spec.ts b/pkg/new-ui/v1beta1/frontend/src/app/shared/params-list/add-modal/add-modal.component.spec.ts
index d77e9a988b9..7d7ed0e86d0 100644
--- a/pkg/new-ui/v1beta1/frontend/src/app/shared/params-list/add-modal/add-modal.component.spec.ts
+++ b/pkg/new-ui/v1beta1/frontend/src/app/shared/params-list/add-modal/add-modal.component.spec.ts
@@ -1,21 +1,57 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { CommonModule } from '@angular/common';
+import { MatIconModule } from '@angular/material/icon';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatRadioModule } from '@angular/material/radio';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 
-import { AddModalComponent } from './add-modal.component';
+import { FormModule, PopoverModule, DetailsListModule } from 'kubeflow';
+import { AddParamModalComponent } from './add-modal.component';
+import {
+  MatDialogModule,
+  MatDialogRef,
+  MAT_DIALOG_DATA,
+} from '@angular/material/dialog';
+import { FormControl, FormGroup } from '@angular/forms';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
-describe('AddModalComponent', () => {
-  let component: AddModalComponent;
-  let fixture: ComponentFixture<AddModalComponent>;
+describe('AddParamModalComponent', () => {
+  let component: AddParamModalComponent;
+  let fixture: ComponentFixture<AddParamModalComponent>;
 
   beforeEach(
     waitForAsync(() => {
       TestBed.configureTestingModule({
-        declarations: [AddModalComponent],
+        imports: [
+          CommonModule,
+          FormModule,
+          MatIconModule,
+          MatDividerModule,
+          MatRadioModule,
+          PopoverModule,
+          DetailsListModule,
+          MatSlideToggleModule,
+          MatDialogModule,
+          BrowserAnimationsModule,
+        ],
+        declarations: [AddParamModalComponent],
+        providers: [
+          {
+            provide: MAT_DIALOG_DATA,
+            useValue: new FormGroup({
+              name: new FormControl(),
+              parameterType: new FormControl('int'),
+              feasibleSpace: new FormControl({ min: '1', max: '64', step: '' }),
+            }),
+          },
+          { provide: MatDialogRef, useValue: {} },
+        ],
       }).compileComponents();
     }),
   );
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(AddModalComponent);
+    fixture = TestBed.createComponent(AddParamModalComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
diff --git a/pkg/new-ui/v1beta1/frontend/src/app/shared/params-list/parameter/parameter.component.spec.ts b/pkg/new-ui/v1beta1/frontend/src/app/shared/params-list/parameter/parameter.component.spec.ts
index 4b56172bed1..44398e79230 100644
--- a/pkg/new-ui/v1beta1/frontend/src/app/shared/params-list/parameter/parameter.component.spec.ts
+++ b/pkg/new-ui/v1beta1/frontend/src/app/shared/params-list/parameter/parameter.component.spec.ts
@@ -1,4 +1,13 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { FormControl, FormGroup } from '@angular/forms';
+import {
+  MatDialogModule,
+  MatDialogRef,
+  MAT_DIALOG_DATA,
+} from '@angular/material/dialog';
+import { MatIconModule } from '@angular/material/icon';
+import { DetailsListModule, PopoverModule } from 'kubeflow';
+import { MatTooltipModule } from '@angular/material/tooltip';
 
 import { ParameterComponent } from './parameter.component';
 
@@ -9,7 +18,18 @@ describe('ParameterComponent', () => {
   beforeEach(
     waitForAsync(() => {
       TestBed.configureTestingModule({
+        imports: [
+          MatDialogModule,
+          MatIconModule,
+          PopoverModule,
+          MatTooltipModule,
+          DetailsListModule,
+        ],
         declarations: [ParameterComponent],
+        providers: [
+          { provide: MAT_DIALOG_DATA, useValue: {} },
+          { provide: MatDialogRef, useValue: {} },
+        ],
       }).compileComponents();
     }),
   );
@@ -17,6 +37,11 @@ describe('ParameterComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(ParameterComponent);
     component = fixture.componentInstance;
+    component.paramFormGroup = new FormGroup({
+      name: new FormControl(),
+      parameterType: new FormControl(),
+      feasibleSpace: new FormControl({ min: 0, max: 10, step: '' }),
+    });
     fixture.detectChanges();
   });
 
diff --git a/pkg/new-ui/v1beta1/frontend/src/app/shared/params-list/params-list.component.spec.ts b/pkg/new-ui/v1beta1/frontend/src/app/shared/params-list/params-list.component.spec.ts
index 00984ccb5ba..2286a3069c7 100644
--- a/pkg/new-ui/v1beta1/frontend/src/app/shared/params-list/params-list.component.spec.ts
+++ b/pkg/new-ui/v1beta1/frontend/src/app/shared/params-list/params-list.component.spec.ts
@@ -1,6 +1,16 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { CommonModule } from '@angular/common';
+
+import { MatIconModule } from '@angular/material/icon';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatRadioModule } from '@angular/material/radio';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+
+import { FormModule, PopoverModule, DetailsListModule } from 'kubeflow';
+import { ListInputModule } from '../list-input/list-input.module';
 
 import { ParamsListComponent } from './params-list.component';
+import { FormArray, FormControl, ReactiveFormsModule } from '@angular/forms';
 
 describe('ParamsListComponent', () => {
   let component: ParamsListComponent;
@@ -9,6 +19,18 @@ describe('ParamsListComponent', () => {
   beforeEach(
     waitForAsync(() => {
       TestBed.configureTestingModule({
+        imports: [
+          CommonModule,
+          FormModule,
+          MatIconModule,
+          MatDividerModule,
+          MatRadioModule,
+          PopoverModule,
+          DetailsListModule,
+          MatSlideToggleModule,
+          ListInputModule,
+          ReactiveFormsModule,
+        ],
         declarations: [ParamsListComponent],
       }).compileComponents();
     }),
@@ -17,6 +39,7 @@ describe('ParamsListComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(ParamsListComponent);
     component = fixture.componentInstance;
+    component.paramsArray = new FormArray([]);
     fixture.detectChanges();
   });
 
diff --git a/pkg/new-ui/v1beta1/frontend/tsconfig.json b/pkg/new-ui/v1beta1/frontend/tsconfig.json
index 39197f280d2..933752bffbf 100644
--- a/pkg/new-ui/v1beta1/frontend/tsconfig.json
+++ b/pkg/new-ui/v1beta1/frontend/tsconfig.json
@@ -15,7 +15,8 @@
     "paths": {
       "@app/environment": ["src/environments/environment"]
     },
-    "lib": ["es2018", "dom"]
+    "lib": ["es2018", "dom"],
+    "allowSyntheticDefaultImports": true
   },
   "angularCompilerOptions": {
     "fullTemplateTypeCheck": true,