Merge pull request #9226 from zhoumeina/fix_ut

fix harbor portal unit test and set thresholds

src/portal/karma.conf.js

@@ -48,10 +48,10 @@ module.exports = function (config) {
           emitWarning: false, // set to `true` to not fail the test command when thresholds are not met
           // thresholds for all files
           global: {
-            statements: 10,
-            lines: 10,
-            branches: 0,
-            functions: 10
+            statements: 47,
+            branches: 18,
+            functions: 27,
+            lines: 47
           },
           // thresholds per file
           each: {

src/portal/lib/karma.conf.js

@@ -48,10 +48,10 @@ module.exports = function (config) {
           emitWarning: false, // set to `true` to not fail the test command when thresholds are not met
           // thresholds for all files
           global: {
-            statements: 10,
-            lines: 10,
-            branches: 0,
-            functions: 10
+            statements: 37,
+            branches: 20,
+            functions: 28,
+            lines: 36
           },
           // thresholds per file
           each: {

src/portal/src/app/account/account-settings/account-settings-modal-service.service.spec.ts

@@ -1,9 +1,16 @@
 import { TestBed } from '@angular/core/testing';
-
+import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { AccountSettingsModalService } from './account-settings-modal-service.service';
 
 describe('AccountSettingsModalServiceService', () => {
-  beforeEach(() => TestBed.configureTestingModule({}));
+  beforeEach(() => TestBed.configureTestingModule({
+    imports: [
+      HttpClientTestingModule
+    ],
+    providers: [
+      AccountSettingsModalService
+    ]
+  }));
 
   it('should be created', () => {
     const service: AccountSettingsModalService = TestBed.get(AccountSettingsModalService);

src/portal/src/app/app.module.ts

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { BrowserModule } from '@angular/platform-browser';
-import { NgModule, APP_INITIALIZER, LOCALE_ID } from '@angular/core';
+import { NgModule, APP_INITIALIZER, LOCALE_ID, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { AppComponent } from './app.component';
 
 import { BaseModule } from './base/base.module';
@@ -88,6 +88,9 @@ export function getCurrentLanguage(translateService: TranslateService) {
       },
       {provide: LOCALE_ID, useValue: "en-US"}
     ],
+    schemas: [
+        CUSTOM_ELEMENTS_SCHEMA
+    ],
     bootstrap: [AppComponent]
 })
 export class AppModule {}

src/portal/src/app/dev-center/dev-center.component.spec.ts

@@ -1,5 +1,6 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { DevCenterComponent } from './dev-center.component';
 
 describe('DevCenterComponent', () => {
@@ -8,9 +9,16 @@ describe('DevCenterComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ DevCenterComponent ]
+      declarations: [DevCenterComponent],
+      imports: [
+        HttpClientTestingModule,
+        TranslateModule.forRoot()
+      ],
+      providers: [
+        TranslateService
+      ],
     })
-    .compileComponents();
+      .compileComponents();
   }));
 
   beforeEach(() => {

src/portal/src/app/gc-page/gc-page.component.spec.ts

@@ -1,16 +1,34 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
+import { ClarityModule } from '@clr/angular';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
+import { SessionService } from "../shared/session.service";
 import { GcPageComponent } from './gc-page.component';
 
 describe('GcPageComponent', () => {
   let component: GcPageComponent;
   let fixture: ComponentFixture<GcPageComponent>;
-
+  let fakeSessionService = {
+    getCurrentUser: function () {
+      return { has_admin_role: true };
+    }
+  };
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ GcPageComponent ]
+      declarations: [GcPageComponent],
+      schemas: [
+        CUSTOM_ELEMENTS_SCHEMA
+      ],
+      imports: [
+        ClarityModule,
+        TranslateModule.forRoot()
+      ],
+      providers: [
+        TranslateService,
+        { provide: SessionService, useValue: fakeSessionService }
+      ]
     })
-    .compileComponents();
+      .compileComponents();
   }));
 
   beforeEach(() => {

src/portal/src/app/group/add-group-modal/add-group-modal.component.spec.ts

@@ -1,16 +1,57 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
+import { ClarityModule } from '@clr/angular';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
+import { CUSTOM_ELEMENTS_SCHEMA, ChangeDetectorRef } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { GroupService } from "../group.service";
+import { MessageHandlerService } from "./../../shared/message-handler/message-handler.service";
+import { SessionService } from "./../../shared/session.service";
+import { UserGroup } from "./../group";
+import { AppConfigService } from "../../app-config.service";
 import { AddGroupModalComponent } from './add-group-modal.component';
 
 describe('AddGroupModalComponent', () => {
   let component: AddGroupModalComponent;
   let fixture: ComponentFixture<AddGroupModalComponent>;
+  let fakeSessionService = {
+    getCurrentUser: function () {
+      return { has_admin_role: true };
+    }
+  };
+  let fakeGroupService = null;
+  let fakeAppConfigService = {
+    isLdapMode: function () {
+      return true;
+    },
+    isHttpAuthMode: function () {
+      return false;
+    },
+    isOidcMode: function () {
+      return false;
+    }
+  };
+  let fakeMessageHandlerService = null;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ AddGroupModalComponent ]
+      declarations: [AddGroupModalComponent],
+      imports: [
+        ClarityModule,
+        FormsModule,
+        TranslateModule.forRoot()
+      ],
+      schemas: [
+        CUSTOM_ELEMENTS_SCHEMA
+      ],
+      providers: [
+        ChangeDetectorRef,
+        { provide: MessageHandlerService, useValue: fakeMessageHandlerService },
+        { provide: SessionService, useValue: fakeSessionService },
+        { provide: AppConfigService, useValue: fakeAppConfigService },
+        { provide: GroupService, useValue: fakeGroupService },
+      ]
     })
-    .compileComponents();
+      .compileComponents();
   }));
 
   beforeEach(() => {

src/portal/src/app/group/group.component.spec.ts

@@ -1,16 +1,70 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
 import { GroupComponent } from './group.component';
+import { ClarityModule } from '@clr/angular';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
+import { FormsModule } from '@angular/forms';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { OperationService } from "@harbor/ui";
+import { SessionService } from "./../shared/session.service";
+import { GroupService } from "./group.service";
+import { of } from "rxjs";
+import { ConfirmationDialogService } from "./../shared/confirmation-dialog/confirmation-dialog.service";
+import { MessageHandlerService } from '../shared/message-handler/message-handler.service';
+import { AppConfigService } from '../app-config.service';
 
 describe('GroupComponent', () => {
   let component: GroupComponent;
   let fixture: ComponentFixture<GroupComponent>;
+  let fakeMessageHandlerService = null;
+  let fakeOperationService = null;
+  let fakeGroupService = {
+    getUserGroups: function () {
+      return of([{
+        group_name: ''
+      }, {
+        group_name: 'abc'
+      }]);
+    }
+  };
+  let fakeConfirmationDialogService = {
+    confirmationConfirm$: of({
+      state: 1,
+      source: 2
+    })
+  };
+  let fakeSessionService = {
+    currentUser: {
+      has_admin_role: true
+    }
+  };
+  let fakeAppConfigService = {
+    isLdapMode: function () {
+      return true;
+    }
+  };
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ GroupComponent ]
+      declarations: [GroupComponent],
+      imports: [
+        ClarityModule,
+        FormsModule,
+        TranslateModule.forRoot()
+      ],
+      schemas: [
+        CUSTOM_ELEMENTS_SCHEMA
+      ],
+      providers: [
+        TranslateService,
+        { provide: MessageHandlerService, useValue: fakeMessageHandlerService },
+        { provide: OperationService, useValue: fakeOperationService },
+        { provide: GroupService, useValue: fakeGroupService },
+        { provide: ConfirmationDialogService, useValue: fakeConfirmationDialogService },
+        { provide: SessionService, useValue: fakeSessionService },
+        { provide: AppConfigService, useValue: fakeAppConfigService }
+      ]
     })
-    .compileComponents();
+      .compileComponents();
   }));
 
   beforeEach(() => {

src/portal/src/app/group/group.service.spec.ts

@@ -1,11 +1,14 @@
 import { TestBed, inject } from '@angular/core/testing';
-
+import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { GroupService } from './group.service';
 
 describe('GroupService', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
-      providers: [GroupService]
+      providers: [GroupService],
+      imports: [
+        HttpClientTestingModule
+      ]
     });
   });
 

src/portal/src/app/license/license.component.spec.ts

@@ -2,7 +2,7 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { LicenseComponent } from './license.component';
 
-fdescribe('LicenseComponent', () => {
+describe('LicenseComponent', () => {
   let component: LicenseComponent;
   let fixture: ComponentFixture<LicenseComponent>;
 

src/portal/src/app/oidc-onboard/oidc-onboard.component.spec.ts

@@ -1,16 +1,48 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
+import { ClarityModule } from '@clr/angular';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { OidcOnboardService } from './oidc-onboard.service';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
+import { Router, ActivatedRoute } from '@angular/router';
+import { of } from 'rxjs';
 import { OidcOnboardComponent } from './oidc-onboard.component';
 
 describe('OidcOnboardComponent', () => {
   let component: OidcOnboardComponent;
   let fixture: ComponentFixture<OidcOnboardComponent>;
+  let fakeOidcOnboardService = null;
+  let fakeRouter = null;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ OidcOnboardComponent ]
-    })
-    .compileComponents();
+      declarations: [OidcOnboardComponent],
+      schemas: [
+        CUSTOM_ELEMENTS_SCHEMA
+      ],
+      imports: [
+        ClarityModule,
+        FormsModule,
+        ReactiveFormsModule,
+        TranslateModule.forRoot()
+      ],
+      providers: [
+        TranslateService,
+        { provide: OidcOnboardService, useValue: fakeOidcOnboardService },
+        { provide: Router, useValue: fakeRouter },
+        {
+          provide: ActivatedRoute, useValue: {
+            queryParams: of({
+              view: 'abc',
+              objectId: 'ddd',
+              actionUid: 'ddd',
+              targets: '',
+              locale: ''
+            })
+          }
+        }
+      ]
+    }).compileComponents();
   }));
 
   beforeEach(() => {

src/portal/src/app/oidc-onboard/oidc-onboard.service.spec.ts

@@ -1,9 +1,17 @@
 import { TestBed } from '@angular/core/testing';
-
+import { HttpClient } from '@angular/common/http';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { OidcOnboardService } from './oidc-onboard.service';
 
 describe('OidcOnboardService', () => {
-  beforeEach(() => TestBed.configureTestingModule({}));
+  beforeEach(() => TestBed.configureTestingModule({
+    imports: [
+      HttpClientTestingModule
+    ],
+    providers: [
+      OidcOnboardService
+    ]
+  }));
 
   it('should be created', () => {
     const service: OidcOnboardService = TestBed.get(OidcOnboardService);

src/portal/src/app/project/helm-chart/helm-chart-detail/chart-detail.component.spec.ts

@@ -1,16 +1,51 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { ClarityModule } from '@clr/angular';
+import { ActivatedRoute, Router } from "@angular/router";
+import { SessionService } from './../../../shared/session.service';
+import { of } from 'rxjs';
 import { HelmChartDetailComponent } from './chart-detail.component';
 
 describe('ChartDetailComponent', () => {
   let component: HelmChartDetailComponent;
   let fixture: ComponentFixture<HelmChartDetailComponent>;
+  let fakeRouter = null;
+  let fakeSessionService = {
+    getCurrentUser: function () {
+      return { has_admin_role: true };
+    }
+  };
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ HelmChartDetailComponent ]
-    })
-    .compileComponents();
+      declarations: [HelmChartDetailComponent],
+      schemas: [
+        CUSTOM_ELEMENTS_SCHEMA
+      ],
+      imports: [
+        ClarityModule,
+        TranslateModule.forRoot()
+      ],
+      providers: [
+        {
+          provide: ActivatedRoute, useValue: {
+            paramMap: of({ get: (key) => 'value' }),
+            snapshot: {
+              params: { id: 1, chart: 'chart', version: 1.0 },
+              data: {
+                projectResolver: {
+                  role_name: 'admin'
+                }
+              }
+            }
+          }
+        },
+        { provide: Router, useValue: fakeRouter },
+        { provide: SessionService, useValue: fakeSessionService },
+        TranslateService
+      ]
+    }).compileComponents();
   }));
 
   beforeEach(() => {

src/portal/src/app/project/helm-chart/list-chart-versions/list-chart-versions.component.spec.ts

@@ -1,16 +1,49 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
+import { ClarityModule } from '@clr/angular';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
+import { ActivatedRoute } from '@angular/router';
+import { Router } from '@angular/router';
+import { of } from 'rxjs';
+import { SessionService } from './../../../shared/session.service';
 import { ListChartVersionsComponent } from './list-chart-versions.component';
 
 describe('ListChartVersionsComponent', () => {
   let component: ListChartVersionsComponent;
   let fixture: ComponentFixture<ListChartVersionsComponent>;
+  let fakeSessionService = {
+    getCurrentUser: function () {
+      return "admin";
+    }
+  };
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ ListChartVersionsComponent ]
+      declarations: [ListChartVersionsComponent],
+      imports: [
+        ClarityModule,
+        TranslateModule.forRoot()
+      ],
+      schemas: [
+        CUSTOM_ELEMENTS_SCHEMA
+      ],
+      providers: [
+        TranslateService,
+        {
+          provide: ActivatedRoute, useValue: {
+            snapshot: {
+              params: {
+                id: 1,
+                chart: 'chart'
+              }
+            }
+          }
+        },
+        { provide: Router, useValue: null },
+        { provide: SessionService, useValue: fakeSessionService }
+      ]
     })
-    .compileComponents();
+      .compileComponents();
   }));
 
   beforeEach(() => {

src/portal/src/app/project/helm-chart/list-charts.component.spec.ts

@@ -1,16 +1,47 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
+import { ClarityModule } from '@clr/angular';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
+import { CUSTOM_ELEMENTS_SCHEMA, ChangeDetectorRef } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { SessionService } from './../../shared/session.service';
 import { ListChartsComponent } from './list-charts.component';
 
 describe('ListChartsComponent', () => {
   let component: ListChartsComponent;
   let fixture: ComponentFixture<ListChartsComponent>;
+  let fakeSessionService = {
+    getCurrentUser: function () {
+      return "admin";
+    }
+  };
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ ListChartsComponent ]
-    })
-    .compileComponents();
+      declarations: [ListChartsComponent],
+      imports: [
+        ClarityModule,
+        TranslateModule.forRoot()
+      ],
+      schemas: [
+        CUSTOM_ELEMENTS_SCHEMA
+      ],
+      providers: [
+        {
+          provide: ActivatedRoute, useValue: {
+            snapshot: {
+              parent: {
+                params: {
+                  id: 1,
+                  data: 'chart'
+                }
+              }
+            }
+          }
+        },
+        { provide: Router, useValue: null },
+        { provide: SessionService, useValue: fakeSessionService }
+      ]
+    }).compileComponents();
   }));
 
   beforeEach(() => {

src/portal/src/app/project/member/add-group/add-group.component.spec.ts

@@ -1,16 +1,41 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
+import { ClarityModule } from '@clr/angular';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
+import { FormsModule } from '@angular/forms';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { AddGroupComponent } from './add-group.component';
+import { OperationService } from "@harbor/ui";
+import { GroupService } from "../../../group/group.service";
+import { MemberService } from "./../member.service";
+import { MessageHandlerService } from '../../../shared/message-handler/message-handler.service';
 
 describe('AddGroupComponent', () => {
   let component: AddGroupComponent;
   let fixture: ComponentFixture<AddGroupComponent>;
+  let fakeMessageHandlerService = null;
+  let fakeOperationService = null;
+  let fakeGroupService = null;
+  let fakeMemberService = null;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ AddGroupComponent ]
-    })
-    .compileComponents();
+      declarations: [AddGroupComponent],
+      imports: [
+        ClarityModule,
+        FormsModule,
+        TranslateModule.forRoot()
+      ],
+      schemas: [
+        CUSTOM_ELEMENTS_SCHEMA
+      ],
+      providers: [
+        TranslateService,
+        { provide: MessageHandlerService, useValue: fakeMessageHandlerService },
+        { provide: OperationService, useValue: fakeOperationService },
+        { provide: GroupService, useValue: fakeGroupService },
+        { provide: MemberService, useValue: fakeMemberService }
+      ]
+    }).compileComponents();
   }));
 
   beforeEach(() => {

src/portal/src/app/project/member/add-http-auth-group/add-http-auth-group.component.spec.ts

@@ -1,16 +1,44 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
+import { HarborLibraryModule } from "@harbor/ui";
+import { of } from "rxjs";
+import { MemberService } from '../member.service';
+import { AppConfigService } from "../../../app-config.service";
+import { ClarityModule } from '@clr/angular';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { AddHttpAuthGroupComponent } from './add-http-auth-group.component';
 
 describe('AddHttpAuthGroupComponent', () => {
   let component: AddHttpAuthGroupComponent;
   let fixture: ComponentFixture<AddHttpAuthGroupComponent>;
+  let fakeAppConfigService = {
+    isHttpAuthMode: function () {
+      return true;
+    }
+  };
+
+  let fakeMemberService = {addGroupMember: function() {
+    return of(null);
+  }};
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ AddHttpAuthGroupComponent ]
+      declarations: [AddHttpAuthGroupComponent],
+      schemas: [
+        CUSTOM_ELEMENTS_SCHEMA
+      ],
+      imports: [
+        ClarityModule,
+        HarborLibraryModule,
+        TranslateModule.forRoot()
+      ],
+      providers: [
+        TranslateService,
+        { provide: AppConfigService, useValue: fakeAppConfigService },
+        { provide: MemberService, useValue: fakeMemberService }
+      ],
     })
-    .compileComponents();
+      .compileComponents();
   }));
 
   beforeEach(() => {

src/portal/src/app/project/member/add-http-auth-group/add-http-auth-group.component.ts

@@ -55,7 +55,7 @@ export class AddHttpAuthGroupComponent implements OnInit {
   staticBackdrop: boolean = true;
   closable: boolean = false;
 
-  @ViewChild('memberForm', {static: false})
+  @ViewChild('memberForm', {static: true})
   currentForm: NgForm;
 
   @ViewChild(InlineAlertComponent, {static: false})

src/portal/src/app/project/project-config/project-config.component.spec.ts

@@ -1,16 +1,53 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { ClarityModule } from '@clr/angular';
+import { ActivatedRoute, Router } from "@angular/router";
+import { SessionService } from '../../shared/session.service';
+import { of } from 'rxjs';
 import { ProjectConfigComponent } from './project-config.component';
 
-describe('ProjectConfigPageComponent', () => {
+describe('ProjectConfigComponent', () => {
   let component: ProjectConfigComponent;
   let fixture: ComponentFixture<ProjectConfigComponent>;
+  let fakeSessionService = {
+    getCurrentUser: function () {
+      return { has_admin_role: true };
+    }
+  };
+  let fakeRouter = null;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ ProjectConfigComponent ]
-    })
-    .compileComponents();
+      declarations: [ProjectConfigComponent],
+      schemas: [
+        CUSTOM_ELEMENTS_SCHEMA
+      ],
+      imports: [
+        ClarityModule,
+        TranslateModule.forRoot()
+      ],
+      providers: [
+        {
+          provide: ActivatedRoute, useValue: {
+            paramMap: of({ get: (key) => 'value' }),
+            snapshot: {
+              parent: {
+                params: { id: 1, chart: 'chart', version: 1.0 }
+              },
+              data: {
+                projectResolver: {
+                  role_name: 'admin'
+                }
+              }
+            }
+          }
+        },
+        { provide: Router, useValue: fakeRouter },
+        { provide: SessionService, useValue: fakeSessionService },
+        TranslateService
+      ]
+    }).compileComponents();
   }));
 
   beforeEach(() => {

src/portal/src/app/project/robot-account/add-robot/add-robot.component.spec.ts

@@ -1,16 +1,48 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
+import { ClarityModule } from '@clr/angular';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { AddRobotComponent } from './add-robot.component';
+import { FormsModule } from '@angular/forms';
+import { RobotService } from "../robot-account.service";
+import { of } from "rxjs";
+import { ErrorHandler } from "@harbor/ui";
+import { MessageHandlerService } from "../../../shared/message-handler/message-handler.service";
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
 
 describe('AddRobotComponent', () => {
   let component: AddRobotComponent;
   let fixture: ComponentFixture<AddRobotComponent>;
+  let fakeRobotService = {
+    listRobotAccount: function () {
+      return of([{
+        name: "robot$" + 1
+      }, {
+        name: "abc"
+      }]);
+    }
+  };
+  let fakeMessageHandlerService = {
+    showSuccess: function() {}
+  };
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ AddRobotComponent ]
-    })
-    .compileComponents();
+      declarations: [AddRobotComponent],
+      schemas: [
+        CUSTOM_ELEMENTS_SCHEMA
+      ],
+      imports: [
+        ClarityModule,
+        TranslateModule.forRoot(),
+        FormsModule
+      ],
+      providers: [
+        TranslateService,
+        ErrorHandler,
+        { provide: MessageHandlerService, useValue: fakeMessageHandlerService },
+        { provide: RobotService, useValue: fakeRobotService }
+      ]
+    }).compileComponents();
   }));
 
   beforeEach(() => {

src/portal/src/app/project/robot-account/robot-account.component.spec.ts

@@ -1,16 +1,73 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { ClarityModule } from '@clr/angular';
+import { of } from 'rxjs';
+import { ActivatedRoute, Router } from "@angular/router";
+import { MessageHandlerService } from "../../shared/message-handler/message-handler.service";
+import { RobotService } from "./robot-account.service";
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
+import { ConfirmationDialogService } from "../../shared/confirmation-dialog/confirmation-dialog.service";
 import { RobotAccountComponent } from './robot-account.component';
+import {
+  operateChanges,
+  OperateInfo,
+  OperationService,
+  OperationState,
+  UserPermissionService,
+  USERSTATICPERMISSION,
+  ErrorHandler,
+  errorHandler as errorHandFn
+} from "@harbor/ui";
 
 describe('RobotAccountComponent', () => {
   let component: RobotAccountComponent;
   let fixture: ComponentFixture<RobotAccountComponent>;
-
+  let robotService = {
+    listRobotAccount: function () {
+      return of([]);
+    }
+  };
+  let mockConfirmationDialogService = null;
+  let mockUserPermissionService = {
+    getPermission: function () {
+      return 1;
+    }
+  };
+  let mockErrorHandler = {
+    error: function () { }
+  };
+  let mockMessageHandlerService = null;
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ RobotAccountComponent ]
-    })
-    .compileComponents();
+      schemas: [
+        CUSTOM_ELEMENTS_SCHEMA
+      ],
+      imports: [
+        ClarityModule,
+        TranslateModule.forRoot()
+      ],
+      providers: [
+        {
+          provide: ActivatedRoute, useValue: {
+            paramMap: of({ get: (key) => 'value' }),
+            snapshot: {
+              parent: {
+                params: { id: 1 }
+              },
+              data: 1
+            }
+          }
+        },
+        TranslateService,
+        { provide: RobotService, useValue: robotService },
+        { provide: ConfirmationDialogService, useClass: ConfirmationDialogService },
+        { provide: UserPermissionService, useValue: mockUserPermissionService },
+        { provide: ErrorHandler, useValue: mockErrorHandler },
+        { provide: MessageHandlerService, useValue: mockMessageHandlerService },
+        OperationService
+      ],
+      declarations: [RobotAccountComponent]
+    }).compileComponents();
   }));
 
   beforeEach(() => {

src/portal/src/app/project/summary/summary.component.spec.ts

@@ -1,16 +1,52 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
+import { ClarityModule } from '@clr/angular';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
+import { ProjectService, ErrorHandler} from '@harbor/ui';
+import { ActivatedRoute } from '@angular/router';
+import { of } from 'rxjs';
+import { AppConfigService } from "../../app-config.service";
 import { SummaryComponent } from './summary.component';
 
 describe('SummaryComponent', () => {
   let component: SummaryComponent;
   let fixture: ComponentFixture<SummaryComponent>;
+  let fakeAppConfigService = null;
+  let fakeProjectService = {
+    getProjectSummary: function () {
+      return of();
+    }
+  };
+  let fakeErrorHandler = null;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ SummaryComponent ]
-    })
-    .compileComponents();
+      declarations: [SummaryComponent],
+      imports: [
+        ClarityModule,
+        TranslateModule.forRoot()
+      ],
+      schemas: [
+        CUSTOM_ELEMENTS_SCHEMA
+      ],
+      providers: [
+        TranslateService,
+        { provide: AppConfigService, useValue: fakeAppConfigService },
+        { provide: ProjectService, useValue: fakeProjectService },
+        { provide: ErrorHandler, useValue: fakeErrorHandler },
+        {
+          provide: ActivatedRoute, useValue: {
+            paramMap: of({ get: (key) => 'value' }),
+            snapshot: {
+              parent: {
+                params: { id: 1 }
+              },
+              data: 1
+            }
+          }
+        },
+      ]
+    }).compileComponents();
   }));
 
   beforeEach(() => {

src/portal/src/app/replication/replication-tasks-page/replication-tasks-page.component.spec.ts

@@ -1,16 +1,39 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { ReplicationTasksPageComponent } from './replication-tasks-page.component';
+import { ActivatedRoute, Router } from '@angular/router';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
+import { of } from 'rxjs';
 
 describe('ReplicationTasksPageComponent', () => {
   let component: ReplicationTasksPageComponent;
   let fixture: ComponentFixture<ReplicationTasksPageComponent>;
+  let mockActivatedRoute = {
+    snapshot: {
+      params: 1
+    }
+  };
+  let mockRouter = null;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ ReplicationTasksPageComponent ]
-    })
-    .compileComponents();
+      declarations: [ReplicationTasksPageComponent],
+      schemas: [
+        CUSTOM_ELEMENTS_SCHEMA
+      ],
+      imports: [
+        TranslateModule.forRoot()
+      ],
+      providers: [
+        {
+          provide: ActivatedRoute, useValue: mockActivatedRoute
+        },
+        {
+          provide: Router, useValue: mockRouter
+        },
+        TranslateService
+      ]
+    }).compileComponents();
   }));
 
   beforeEach(() => {

src/portal/src/app/vulnerability-page/vulnerability-page.component.spec.ts

@@ -1,16 +1,29 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
+import { ClarityModule } from '@clr/angular';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
+import { AppConfigService } from "../app-config.service";
 import { VulnerabilityPageComponent } from './vulnerability-page.component';
 
 describe('VulnerabilityPageComponent', () => {
   let component: VulnerabilityPageComponent;
   let fixture: ComponentFixture<VulnerabilityPageComponent>;
-
+  let fakeAppConfigService = null;
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ VulnerabilityPageComponent ]
-    })
-    .compileComponents();
+      schemas: [
+        CUSTOM_ELEMENTS_SCHEMA
+      ],
+      imports: [
+        ClarityModule,
+        TranslateModule.forRoot()
+      ],
+      providers: [
+        TranslateService,
+        { provide: AppConfigService, useValue: fakeAppConfigService }
+      ],
+      declarations: [VulnerabilityPageComponent]
+    }).compileComponents();
   }));
 
   beforeEach(() => {