Add front ut in app

Signed-off-by: Yogi_Wang <yawang@vmware.com>

src/portal/lib/src/push-image/push-image.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed, fakeAsync } from '@angular/core/testing';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { PushImageButtonComponent } from './push-image.component';
 import { CopyInputComponent } from './copy-input.component';

src/portal/src/app/config/config.component.ts

@@ -105,7 +105,6 @@ export class ConfigurationComponent implements OnInit, OnDestroy {
 
     ngOnDestroy(): void {
         if (this.confirmSub) {
-            console.log(this.confirmSub);
             this.confirmSub.unsubscribe();
         }
     }

src/portal/src/app/log/audit-log.component.spec.ts

@@ -1,19 +1,68 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { AuditLogComponent } from './audit-log.component';
+import { ClarityModule } from '@clr/angular';
+import { FormsModule } from '@angular/forms';
+import { AuditLogService } from './audit-log.service';
+import { MessageHandlerService } from '../shared/message-handler/message-handler.service';
+import { ActivatedRoute, Router } from '@angular/router';
+import { of } from 'rxjs';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { RouterTestingModule } from '@angular/router/testing';
+import { HarborLibraryModule } from '@harbor/ui';
+import { delay } from 'rxjs/operators';
 
-xdescribe('AuditLogComponent', () => {
+describe('AuditLogComponent', () => {
     let component: AuditLogComponent;
     let fixture: ComponentFixture<AuditLogComponent>;
+    const mockMessageHandlerService = {
+        handleError: () => {}
+    };
+    const mockAuditLogService = {
+        listAuditLogs: () => {
+            return of({
+                headers: new Map().set('x-total-count', 0),
+                body: []
+            }).pipe(delay(0));
+        },
+    };
+    const mockActivatedRoute = {
+        data: of({
+            auditLogResolver: ""
+        }).pipe(delay(0)),
+        snapshot: {
+            parent: {
+                params: {
+                    id: 1
+                }
+            }
+        }
+    };
+    const mockRouter = null;
 
     beforeEach(async(() => {
         TestBed.configureTestingModule({
+            schemas: [
+                CUSTOM_ELEMENTS_SCHEMA
+            ],
             imports: [
-                TranslateModule
+                BrowserAnimationsModule,
+                ClarityModule,
+                TranslateModule.forRoot(),
+                FormsModule,
+                RouterTestingModule,
+                NoopAnimationsModule,
+                HarborLibraryModule
             ],
             declarations: [AuditLogComponent],
             providers: [
-                TranslateService
+                TranslateService,
+                { provide: ActivatedRoute, useValue: mockActivatedRoute },
+                { provide: Router, useValue: mockRouter },
+                { provide: AuditLogService, useValue: mockAuditLogService },
+                { provide: MessageHandlerService, useValue: mockMessageHandlerService },
+
             ]
         }).compileComponents();
     }));

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

@@ -1,19 +1,42 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { CreateProjectComponent } from './create-project.component';
+import { InlineAlertComponent } from '../../shared/inline-alert/inline-alert.component';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { ClarityModule } from '@clr/angular';
+import { FormsModule } from '@angular/forms';
+import { ProjectService } from '@harbor/ui';
+import { MessageHandlerService } from '../../shared/message-handler/message-handler.service';
 
-xdescribe('CreateProjectComponent', () => {
+describe('CreateProjectComponent', () => {
     let component: CreateProjectComponent;
     let fixture: ComponentFixture<CreateProjectComponent>;
+    const mockProjectService = {
+        checkProjectExists: function() {
+        },
+        createProject: function () {
+        }
+    };
+    const mockMessageHandlerService = {
+        showSuccess: function() {
+        }
+    };
 
     beforeEach(async(() => {
         TestBed.configureTestingModule({
             imports: [
+                FormsModule,
+                ClarityModule,
                 TranslateModule.forRoot()
             ],
-            declarations: [CreateProjectComponent],
+            declarations: [CreateProjectComponent, InlineAlertComponent],
+            schemas: [
+                CUSTOM_ELEMENTS_SCHEMA
+            ],
             providers: [
-                TranslateService
+                TranslateService,
+                {provide: ProjectService, useValue: mockProjectService},
+                {provide: MessageHandlerService, useValue: mockMessageHandlerService},
             ]
         }).compileComponents();
     }));

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

@@ -2,7 +2,7 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { ChartDetailDependencyComponent } from './chart-detail-dependency.component';
 
-xdescribe('ChartDetailDependencyComponent', () => {
+describe('ChartDetailDependencyComponent', () => {
     let component: ChartDetailDependencyComponent;
     let fixture: ComponentFixture<ChartDetailDependencyComponent>;
 

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

@@ -1,26 +1,61 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { ChartDetailSummaryComponent } from './chart-detail-summary.component';
-
+import { ClarityModule } from '@clr/angular';
-xdescribe('ChartDetailSummaryComponent', () => {
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MarkedOptions, MarkdownModule, MarkdownService } from 'ngx-markdown';
+import { ErrorHandler, DefaultErrorHandler } from '@harbor/ui';
+import { HelmChartService } from '../../helm-chart.service';
+describe('ChartDetailSummaryComponent', () => {
     let component: ChartDetailSummaryComponent;
     let fixture: ComponentFixture<ChartDetailSummaryComponent>;
+    const mockHelmChartService = {
+        downloadChart: function () {
+        }
+    };
 
     beforeEach(async(() => {
         TestBed.configureTestingModule({
             imports: [
-                TranslateModule.forRoot()
+                TranslateModule.forRoot(),
+                ClarityModule,
+                FormsModule,
+                MarkdownModule,
+            ],
+            schemas: [
+                CUSTOM_ELEMENTS_SCHEMA
             ],
             declarations: [ChartDetailSummaryComponent],
             providers: [
-                TranslateService
+                TranslateService,
+                MarkdownService,
+                { provide: MarkedOptions, useValue: {} },
+                { provide: ErrorHandler, useValue: DefaultErrorHandler },
+                { provide: HelmChartService, useValue: mockHelmChartService },
             ]
         }).compileComponents();
     }));
 
     beforeEach(() => {
         fixture = TestBed.createComponent(ChartDetailSummaryComponent);
+        // markdownService = TestBed.get(MarkdownService);
         component = fixture.componentInstance;
+        component.summary = {
+            name: "string",
+            home: "string",
+            sources: [],
+            version: "string",
+            description: "string",
+            keywords: [],
+            maintainers: [],
+            engine: "string",
+            icon: "string",
+            appVersion: "string",
+            urls: [],
+            created: new Date().toDateString(),
+            digest: "string",
+        };
         fixture.detectChanges();
     });
 

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

@@ -1,19 +1,33 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { ChartDetailValueComponent } from './chart-detail-value.component';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { ClarityModule } from '@clr/angular';
+import { FormsModule } from '@angular/forms';
+import { MarkdownModule, MarkdownService, MarkedOptions  } from 'ngx-markdown';
+import { BrowserModule } from '@angular/platform-browser';
 
-xdescribe('ChartDetailValueComponent', () => {
+describe('ChartDetailValueComponent', () => {
     let component: ChartDetailValueComponent;
     let fixture: ComponentFixture<ChartDetailValueComponent>;
 
     beforeEach(async(() => {
         TestBed.configureTestingModule({
             imports: [
-                TranslateModule.forRoot()
+                TranslateModule.forRoot(),
+                MarkdownModule,
+                ClarityModule,
+                FormsModule,
+                BrowserModule
             ],
             declarations: [ChartDetailValueComponent],
+            schemas: [
+                CUSTOM_ELEMENTS_SCHEMA
+            ],
             providers: [
-                TranslateService
+                TranslateService,
+                MarkdownService,
+                { provide: MarkedOptions, useValue: {} },
             ]
         }).compileComponents();
     }));
@@ -21,6 +35,7 @@ xdescribe('ChartDetailValueComponent', () => {
     beforeEach(() => {
         fixture = TestBed.createComponent(ChartDetailValueComponent);
         component = fixture.componentInstance;
+        component.yaml = "rfrf";
         fixture.detectChanges();
     });
 

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

@@ -1,19 +1,122 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { ChartDetailComponent } from './chart-detail.component';
+import { ClarityModule } from '@clr/angular';
+import { FormsModule } from '@angular/forms';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { HelmChartService } from "../../helm-chart.service";
 
-xdescribe('ChartDetailComponent', () => {
+import {
+    ErrorHandler, SystemInfoService
+} from "@harbor/ui";
+import { of } from 'rxjs';
+describe('ChartDetailComponent', () => {
     let component: ChartDetailComponent;
     let fixture: ComponentFixture<ChartDetailComponent>;
-
+    const mockErrorHandler = {
+        error: function () { }
+    };
+    const mockSystemInfoService = {
+        getSystemInfo: function () {
+            return of(
+                {
+                    "with_notary": false,
+                    "with_admiral": false,
+                    "admiral_endpoint": "",
+                    "auth_mode": "oidc_auth",
+                    "registry_url": "nightly-oidc.harbor.io",
+                    "external_url": "https://nightly-oidc.harbor.io",
+                    "project_creation_restriction": "everyone",
+                    "self_registration": false,
+                    "has_ca_root": false,
+                    "harbor_version": "dev",
+                    "registry_storage_provider_name": "filesystem",
+                    "read_only": false,
+                    "with_chartmuseum": true,
+                    "notification_enable": true
+                }
+            );
+        }
+    };
+    const mockHelmChartService = {
+        getChartDetail: function () {
+            return of(
+                {
+                    "metadata": {
+                      "name": "harbor",
+                      "home": "https://github.com/vmware/harbor",
+                      "sources": [
+                        "https://github.com/vmware/harbor/tree/master/contrib/helm/harbor"
+                      ],
+                      "version": "0.2.0",
+                      "description": "Ane",
+                      "keywords": [
+                        "vmware",
+                        "docker",
+                        "registry",
+                        "harbor"
+                      ],
+                      "maintainers": [
+                        {
+                          "name": "Jessde Hu",
+                          "email": "huh@qq.com"
+                        },
+                        {
+                          "name": "paulczar",
+                          "email": "username@qq.com"
+                        }
+                      ],
+                      "engine": "",
+                      "icon": "ht",
+                      "appVersion": "1.5.0",
+                      "urls": [
+                        ""
+                      ],
+                      "created": "201940492141Z",
+                      "digest": ""
+                    },
+                    "dependencies": [
+                      {
+                        "name": "redis",
+                        "version": "3.2.5",
+                        "repository": ""
+                      }
+                    ],
+                    "values": {
+                      "adminserver.image.pullPolicy": "IfNotPresent"
+                    },
+                    "files": {
+                      "README.md": "",
+                      "values.yaml": ""
+                    },
+                    "security": {
+                      "signature": {
+                        "signed": false,
+                        "prov_file": ""
+                      }
+                    },
+                    "labels": []
+                  }
+            );
+        },
+        downloadChart: function () { }
+    };
     beforeEach(async(() => {
         TestBed.configureTestingModule({
             imports: [
-                TranslateModule.forRoot()
+                TranslateModule.forRoot(),
+                ClarityModule,
+                FormsModule
             ],
             declarations: [ChartDetailComponent],
+            schemas: [
+                CUSTOM_ELEMENTS_SCHEMA
+            ],
             providers: [
-                TranslateService
+                TranslateService,
+                { provide: ErrorHandler, useValue: mockErrorHandler },
+                { provide: SystemInfoService, useValue: mockSystemInfoService },
+                { provide: HelmChartService, useValue: mockHelmChartService },
             ]
         }).compileComponents();
     }));
@@ -21,6 +124,33 @@ xdescribe('ChartDetailComponent', () => {
     beforeEach(() => {
         fixture = TestBed.createComponent(ChartDetailComponent);
         component = fixture.componentInstance;
+        component.chartName = 'chart';
+        component.chartVersion = 'chart-version';
+        component.project = {
+            "project_id": 1,
+            "owner_id": 1,
+            "name": "library",
+            "creation_time": new Date(),
+            "creation_time_str": "123",
+            "update_time": new Date(),
+            "deleted": 1,
+            "owner_name": "",
+            "togglable": true,
+            "current_user_role_id": 1,
+            "has_project_admin_role": true,
+            "is_member": true,
+            "role_name": 'master',
+            "repo_count": 0,
+            "chart_count": 1,
+            "metadata": {
+                "public": "true",
+                "enable_content_trust": "string",
+                "prevent_vul": "string",
+                "severity": 'string',
+                "auto_scan": true,
+                "retention_id": 1
+            }
+        };
         fixture.detectChanges();
     });
 

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

@@ -1,15 +1,23 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { LabelFilterComponent } from './label-filter.component';
+import { ClarityModule } from '@clr/angular';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 
-xdescribe('LabelFilterComponent', () => {
+describe('LabelFilterComponent', () => {
     let component: LabelFilterComponent;
     let fixture: ComponentFixture<LabelFilterComponent>;
 
     beforeEach(async(() => {
         TestBed.configureTestingModule({
+            schemas: [
+                CUSTOM_ELEMENTS_SCHEMA
+              ],
               imports: [
-                TranslateModule.forRoot()
+                ClarityModule,
+                TranslateModule.forRoot(),
+                FormsModule
               ],
             declarations: [LabelFilterComponent],
             providers: [

src/portal/src/app/project/helm-chart/label-filter/label-filter.component.ts

@@ -17,7 +17,7 @@ export class LabelFilterComponent implements ClrDatagridFilterInterface<any>, On
     @Input() labels: Label[] = [];
     @Input() resourceType: ResourceType;
 
-    @ViewChild('filterInput', {static: false}) filterInputRef: ElementRef;
+    @ViewChild('filterInput', {static: true}) filterInputRef: ElementRef;
 
     selectedLabels: Map<number, boolean> = new Map<number, boolean>();
 

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

@@ -1,19 +1,53 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { LabelMarkerComponent } from './label-marker.component';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { ClarityModule } from '@clr/angular';
+import { FormsModule } from '@angular/forms';
+import { Label, LabelService, ErrorHandler } from '@harbor/ui';
+import { of } from 'rxjs';
 
-xdescribe('LabelMarkerComponent', () => {
+describe('LabelMarkerComponent', () => {
+    const mockErrorHandler = null;
+
+    const mockLabelService = {
+        getChartVersionLabels: () => {
+            return of(
+                {
+                    name: "111",
+                    description: "string",
+                    color: "string",
+                    scope: "string",
+                    project_id: 1,
+                }
+            );
+        },
+        markChartLabel: () => {
+
+        },
+        unmarkChartLabel: () => {
+
+        }
+    };
     let component: LabelMarkerComponent;
     let fixture: ComponentFixture<LabelMarkerComponent>;
 
     beforeEach(async(() => {
         TestBed.configureTestingModule({
+            schemas: [
+                CUSTOM_ELEMENTS_SCHEMA
+            ],
             imports: [
-                TranslateModule.forRoot()
+                ClarityModule,
+                TranslateModule.forRoot(),
+                FormsModule
             ],
             declarations: [LabelMarkerComponent],
             providers: [
-                TranslateService
+                TranslateService,
+        { provide: LabelService, useValue: mockLabelService },
+        { provide: ErrorHandler, useValue: mockErrorHandler },
+
             ]
         })
             .compileComponents();

src/portal/src/app/project/helm-chart/label-marker/label-marker.component.ts

@@ -30,7 +30,7 @@ export class LabelMarkerComponent implements OnInit {
 
     labelChangeDebouncer: Subject<any> = new Subject();
 
-    @ViewChild('filterInput', {static: false}) filterInputRef: ElementRef;
+    @ViewChild('filterInput', {static: true}) filterInputRef: ElementRef;
 
     ngOnInit(): void {
         this.sortedLabels = this.labels;

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

@@ -1,19 +1,106 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { ChartVersionComponent } from './helm-chart-version.component';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { ClarityModule } from '@clr/angular';
+import { FormsModule } from '@angular/forms';
+import { HelmChartService } from "../../helm-chart.service";
+import { LabelFilterComponent } from "../../label-filter/label-filter.component";
 
-xdescribe('ChartVersionComponent', () => {
+import {
+    ErrorHandler,
+    SystemInfoService,
+    LabelService,
+    OperationService,
+    UserPermissionService
+} from "@harbor/ui";
+import { of } from 'rxjs';
+describe('ChartVersionComponent', () => {
     let component: ChartVersionComponent;
     let fixture: ComponentFixture<ChartVersionComponent>;
-
+    const mockSystemInfoService = {
+        getSystemInfo: () => {
+            return of(
+                {
+                    "with_notary": false,
+                    "with_admiral": false,
+                    "admiral_endpoint": "",
+                    "auth_mode": "oidc_auth",
+                    "registry_url": "nightly-oidc.harbor.io",
+                    "external_url": "https://nightly-oidc.harbor.io",
+                    "project_creation_restriction": "everyone",
+                    "self_registration": false,
+                    "has_ca_root": false,
+                    "harbor_version": "dev",
+                    "registry_storage_provider_name": "filesystem",
+                    "read_only": false,
+                    "with_chartmuseum": true,
+                    "notification_enable": true
+                }
+            );
+        }
+    };
+    const mockLabelService = {
+        getLabels: () => {
+            return of([]);
+        },
+        getProjectLabels: () => {
+            return of([]);
+        },
+    };
+    const mockErrorHandler = null;
+    const mockOperationService = {
+        publishInfo: () => {
+            return of([]);
+        },
+    };
+    const mockUserPermissionService = {
+        getPermission() {
+            return of(true);
+        }
+    };
+    const mockHelmChartService = {
+        getChartVersions() {
+            return of(
+                [{
+                    name: "string",
+                    home: "string",
+                    sources: [],
+                    version: "string",
+                    description: "string",
+                    keywords: [],
+                    maintainers: [],
+                    engine: "string",
+                    icon: "string",
+                    appVersion: "string",
+                    apiVersion: "string",
+                    urls: [],
+                    created: "string",
+                    digest: "string",
+                    labels: []
+                }]
+            );
+        }
+    };
     beforeEach(async(() => {
         TestBed.configureTestingModule({
-            imports: [
+            schemas: [
-                TranslateModule.forRoot()
+                CUSTOM_ELEMENTS_SCHEMA
             ],
-            declarations: [ChartVersionComponent],
+            imports: [
+                ClarityModule,
+                TranslateModule.forRoot(),
+                FormsModule
+            ],
+            declarations: [ChartVersionComponent, LabelFilterComponent],
             providers: [
-                TranslateService
+                TranslateService,
+                { provide: SystemInfoService, useValue: mockSystemInfoService },
+                { provide: LabelService, useValue: mockLabelService },
+                { provide: UserPermissionService, useValue: mockUserPermissionService },
+                { provide: ErrorHandler, useValue: mockErrorHandler },
+                { provide: HelmChartService, useValue: mockHelmChartService },
+                { provide: OperationService, useValue: mockOperationService },
             ]
         })
             .compileComponents();

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

@@ -1,19 +1,94 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { HelmChartComponent } from './helm-chart.component';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { ErrorHandler, SystemInfoService, UserPermissionService, OperationService } from '@harbor/ui';
+import { ClarityModule } from '@clr/angular';
+import { FormsModule } from '@angular/forms';
+import { of } from 'rxjs';
+import { HelmChartService } from "../helm-chart.service";
 
-xdescribe('HelmChartComponent', () => {
+describe('HelmChartComponent', () => {
     let component: HelmChartComponent;
     let fixture: ComponentFixture<HelmChartComponent>;
-
+    const mockErrorHandler = null;
+    const mockSystemInfoService = {
+        getSystemInfo: () => {
+            return of(
+                {
+                    "with_notary": false,
+                    "with_admiral": false,
+                    "admiral_endpoint": "",
+                    "auth_mode": "oidc_auth",
+                    "registry_url": "nightly-oidc.harbor.io",
+                    "external_url": "https://nightly-oidc.harbor.io",
+                    "project_creation_restriction": "everyone",
+                    "self_registration": false,
+                    "has_ca_root": false,
+                    "harbor_version": "dev",
+                    "registry_storage_provider_name": "filesystem",
+                    "read_only": false,
+                    "with_chartmuseum": true,
+                    "notification_enable": true
+                }
+            );
+        }
+    };
+    const mockHelmChartService = {
+        getChartVersions() {
+            return of(
+                [{
+                    name: "string",
+                    home: "string",
+                    sources: [],
+                    version: "string",
+                    description: "string",
+                    keywords: [],
+                    maintainers: [],
+                    engine: "string",
+                    icon: "string",
+                    appVersion: "string",
+                    apiVersion: "string",
+                    urls: [],
+                    created: "string",
+                    digest: "string",
+                    labels: []
+                }]
+            );
+        },
+        getHelmCharts() {
+            return of([]);
+        },
+    };
+    const mockUserPermissionService = {
+        getPermission() {
+            return of(true);
+        }
+    };
+    const mockOperationService = {
+        publishInfo: () => {
+            return of([]);
+        },
+    };
     beforeEach(async(() => {
         TestBed.configureTestingModule({
+            schemas: [
+                CUSTOM_ELEMENTS_SCHEMA
+            ],
             imports: [
-                TranslateModule.forRoot()
+                ClarityModule,
+                TranslateModule.forRoot(),
+                FormsModule
             ],
             declarations: [HelmChartComponent],
             providers: [
-                TranslateService
+                TranslateService,
+                { provide: ErrorHandler, useValue: mockErrorHandler },
+                { provide: SystemInfoService, useValue: mockSystemInfoService },
+                { provide: HelmChartService, useValue: mockHelmChartService },
+                { provide: UserPermissionService, useValue: mockUserPermissionService },
+                { provide: OperationService, useValue: mockOperationService },
+
             ]
         })
             .compileComponents();

src/portal/src/app/project/immutable-tag/add-rule/add-rule.component.ts

@@ -86,7 +86,6 @@ export class AddRuleComponent implements OnInit, OnDestroy {
 
     set tagsInput(tagsInput) {
         if (this.rule && this.rule.tag_selectors && this.rule.tag_selectors[0] && this.rule.tag_selectors[0].pattern) {
-
             if (tagsInput.indexOf(",") !== -1) {
                 this.rule.tag_selectors[0].pattern = "{" + tagsInput + "}";
             } else {

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

@@ -1,19 +1,91 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { ListProjectComponent } from './list-project.component';
-
+import { CUSTOM_ELEMENTS_SCHEMA, ChangeDetectorRef } from '@angular/core';
-xdescribe('ListProjectComponent', () => {
+import { ClarityModule } from '@clr/angular';
+import { FormsModule } from '@angular/forms';
+import { OperationService, ProjectService } from "@harbor/ui";
+import { SessionService } from "../../shared/session.service";
+import { AppConfigService } from "../../app-config.service";
+import { RouterTestingModule } from '@angular/router/testing';
+import { SearchTriggerService } from "../../base/global-search/search-trigger.service";
+import { MessageHandlerService } from "../../shared/message-handler/message-handler.service";
+import { StatisticHandler } from "../../shared/statictics/statistic-handler.service";
+import { ConfirmationDialogService } from "../../shared/confirmation-dialog/confirmation-dialog.service";
+import { of } from 'rxjs';
+import { BrowserAnimationsModule, NoopAnimationsModule } from "@angular/platform-browser/animations";
+describe('ListProjectComponent', () => {
     let component: ListProjectComponent;
     let fixture: ComponentFixture<ListProjectComponent>;
-
+    const mockProjectService = {
+        listProjects: () => {
+            return of({
+                body: []
+            });
+        }
+    };
+    const mockSessionService = {
+        getCurrentUser: () => {
+            return false;
+        }
+    };
+    const mockAppConfigService = {
+        getConfig: () => {
+            return {
+                project_creation_restriction: "",
+                with_chartmuseum: ""
+            };
+        }
+    };
+    const mockSearchTriggerService = {
+        closeSearch: () => {
+        }
+    };
+    const mockStatisticHandler = {
+        handleError: () => {
+        }
+    };
+    const mockMessageHandlerService = {
+        refresh: () => {
+        },
+        showSuccess: () => {
+        },
+    };
+    const mockConfirmationDialogService = {
+        confirmationConfirm$: of({
+            state: "",
+            data: []
+        })
+    };
+    const mockOperationService = {
+        publishInfo$: () => {}
+    };
     beforeEach(async(() => {
         TestBed.configureTestingModule({
+            schemas: [
+                CUSTOM_ELEMENTS_SCHEMA
+            ],
             imports: [
-                TranslateModule.forRoot()
+                BrowserAnimationsModule,
+                ClarityModule,
+                TranslateModule.forRoot(),
+                FormsModule,
+                RouterTestingModule,
+                NoopAnimationsModule
             ],
             declarations: [ListProjectComponent],
             providers: [
-                TranslateService
+                TranslateService,
+                ChangeDetectorRef,
+                { provide: ProjectService, useValue: mockProjectService },
+                { provide: SessionService, useValue: mockSessionService },
+                { provide: AppConfigService, useValue: mockAppConfigService },
+                { provide: SearchTriggerService, useValue: mockSearchTriggerService },
+                { provide: MessageHandlerService, useValue: mockMessageHandlerService },
+                { provide: StatisticHandler, useValue: mockStatisticHandler },
+                { provide: ConfirmationDialogService, useValue: mockConfirmationDialogService },
+                { provide: OperationService, useValue: mockOperationService },
+
             ]
         })
             .compileComponents();
@@ -24,6 +96,15 @@ xdescribe('ListProjectComponent', () => {
         component = fixture.componentInstance;
         fixture.detectChanges();
     });
+    let originalTimeout;
+    beforeEach(function () {
+        originalTimeout = jasmine.DEFAULT_TIMEOUT_INTERVAL;
+        jasmine.DEFAULT_TIMEOUT_INTERVAL = 100000;
+      });
+
+      afterEach(function () {
+        jasmine.DEFAULT_TIMEOUT_INTERVAL = originalTimeout;
+      });
 
     it('should create', () => {
         expect(component).toBeTruthy();

src/portal/src/app/project/list-project/list-project.component.ts

@@ -38,7 +38,7 @@ import { SearchTriggerService } from "../../base/global-search/search-trigger.se
 import { AppConfigService } from "../../app-config.service";
 
 import { Project } from "../project";
-import { map, catchError } from "rxjs/operators";
+import { map, catchError, finalize } from "rxjs/operators";
 import { throwError as observableThrowError } from "rxjs";
 
 @Component({
@@ -87,9 +87,6 @@ export class ListProjectComponent implements OnDestroy {
                 this.delProjects(message.data);
             }
         });
-
-        let hnd = setInterval(() => ref.markForCheck(), 100);
-        setTimeout(() => clearInterval(hnd), 5000);
     }
 
     get showRoleInfo(): boolean {
@@ -149,7 +146,7 @@ export class ListProjectComponent implements OnDestroy {
 
     selectedChange(): void {
         let hnd = setInterval(() => this.ref.markForCheck(), 100);
-        setTimeout(() => clearInterval(hnd), 2000);
+        setTimeout(() => clearInterval(hnd), 1000);
     }
 
     clrLoad(state: State) {
@@ -168,6 +165,11 @@ export class ListProjectComponent implements OnDestroy {
             passInFilteredType = this.filteredType - 1;
         }
         this.proService.listProjects(this.searchKeyword, passInFilteredType, pageNumber, this.pageSize)
+        .pipe(finalize(() => {
+            // Force refresh view
+            let hnd = setInterval(() => this.ref.markForCheck(), 100);
+            setTimeout(() => clearInterval(hnd), 1000);
+        }))
             .subscribe(response => {
                 // Get total count
                 if (response.headers) {
@@ -187,10 +189,6 @@ export class ListProjectComponent implements OnDestroy {
                 this.loading = false;
                 this.msgHandler.handleError(error);
             });
-
-        // Force refresh view
-        let hnd = setInterval(() => this.ref.markForCheck(), 100);
-        setTimeout(() => clearInterval(hnd), 5000);
     }
 
     newReplicationRule(p: Project) {

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

@@ -1,19 +1,71 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { AddMemberComponent } from './add-member.component';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { ClarityModule } from '@clr/angular';
+import { FormsModule } from '@angular/forms';
+import { RouterTestingModule } from '@angular/router/testing';
+import { HttpClientTestingModule } from "@angular/common/http/testing";
+import { MemberService } from '../member.service';
+import { UserService } from '../../../user/user.service';
+import { of } from 'rxjs';
+import { MessageHandlerService } from '../../../shared/message-handler/message-handler.service';
+import { ActivatedRoute } from '@angular/router';
 
-xdescribe('AddMemberComponent', () => {
+describe('AddMemberComponent', () => {
     let component: AddMemberComponent;
     let fixture: ComponentFixture<AddMemberComponent>;
+    const mockMemberService = {
+        getUsersNameList: () => {
+            return of([]);
+        }
+    };
+    const mockUserService = {
+        getUsersNameList: () => {
+            return of([
+                [], []
+            ]);
+        }
+    };
 
+    const mockMessageHandlerService = {
+        showSuccess: () => { },
+        handleError: () => { },
+        isAppLevel: () => { },
+    };
     beforeEach(async(() => {
         TestBed.configureTestingModule({
+            schemas: [
+                CUSTOM_ELEMENTS_SCHEMA
+            ],
             imports: [
-                TranslateModule.forRoot()
+                BrowserAnimationsModule,
+                ClarityModule,
+                TranslateModule.forRoot(),
+                FormsModule,
+                RouterTestingModule,
+                NoopAnimationsModule,
+                HttpClientTestingModule
             ],
             declarations: [AddMemberComponent],
             providers: [
-                TranslateService
+                TranslateService,
+                { provide: MemberService, useValue: mockMemberService },
+                { provide: UserService, useValue: mockUserService },
+                { provide: MessageHandlerService, useValue: mockMessageHandlerService },
+                {
+                    provide: ActivatedRoute, useValue: {
+                        RouterparamMap: of({ get: (key) => 'value' }),
+                        snapshot: {
+                            parent: {
+                                params: { id: 1 }
+                            },
+                            data: 1
+                        }
+                    }
+                }
+
             ]
         }).compileComponents();
     }));

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

@@ -64,7 +64,7 @@ export class AddMemberComponent implements AfterViewChecked, OnInit, OnDestroy {
   staticBackdrop: boolean = true;
   closable: boolean = false;
 
-  @ViewChild('memberForm', {static: false})
+  @ViewChild('memberForm', {static: true})
   currentForm: NgForm;
 
   hasChanged: boolean;

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

@@ -1,19 +1,123 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { MemberComponent } from './member.component';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { ClarityModule } from '@clr/angular';
+import { FormsModule } from '@angular/forms';
+import { RouterTestingModule } from '@angular/router/testing';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
 
-xdescribe('MemberComponent', () => {
+import { ActivatedRoute, Router } from "@angular/router";
+import { OperationService, UserPermissionService, ErrorHandler } from "@harbor/ui";
+
+import { MessageHandlerService } from "../../shared/message-handler/message-handler.service";
+import { ConfirmationDialogService } from "../../shared/confirmation-dialog/confirmation-dialog.service";
+import { SessionService } from "../../shared/session.service";
+import { AddGroupComponent } from './add-group/add-group.component';
+import { AddHttpAuthGroupComponent } from './add-http-auth-group/add-http-auth-group.component';
+import { MemberService } from "./member.service";
+import { AddMemberComponent } from "./add-member/add-member.component";
+import { AppConfigService } from "../../app-config.service";
+import { of } from 'rxjs';
+describe('MemberComponent', () => {
     let component: MemberComponent;
     let fixture: ComponentFixture<MemberComponent>;
+    const mockMemberService = {
+        getUsersNameList: () => {
+            return of([]);
+        },
+        listMembers: () => {
+            return of([]);
+        },
+        changeMemberRole: () => {
+            return of(null);
+        },
+        deleteMember: () => {
+            return of(null);
+        },
+    };
+    const mockSessionService = {
+        getCurrentUser: () => {
+            return of({
+                user_id: 1
+            });
+        }
+    };
+    const mockAppConfigService = {
+        isLdapMode: () => {
+            return false;
+        },
+        isHttpAuthMode: () => {
+            return false;
+        },
+        isOidcMode: () => {
+            return true;
+        },
+
+    };
+    const mockOperationService = {
+        publishInfo: () => { }
+    };
+    const mockMessageHandlerService = {
+        handleError: () => { }
+    };
+    const mockConfirmationDialogService = {
+        openComfirmDialog: () => { },
+        confirmationConfirm$:  of(
+                {
+                    state: 1,
+                    source: 2,
+                }
+            )
+    };
+    const mockUserPermissionService = {
+        getPermission() {
+          return of(true);
+        }
+      };
+    const mockErrorHandler = {
+        error() { }
+      };
+
 
     beforeEach(async(() => {
         TestBed.configureTestingModule({
+            schemas: [
+                CUSTOM_ELEMENTS_SCHEMA
+            ],
             imports: [
-                TranslateModule.forRoot()
+                BrowserAnimationsModule,
+                ClarityModule,
+                TranslateModule.forRoot(),
+                FormsModule,
+                RouterTestingModule,
+                NoopAnimationsModule,
+                HttpClientTestingModule
             ],
             declarations: [MemberComponent],
             providers: [
-                TranslateService
+                TranslateService,
+                { provide: MemberService, useValue: mockMemberService },
+                { provide: MessageHandlerService, useValue: mockMessageHandlerService },
+                { provide: ConfirmationDialogService, useValue: mockConfirmationDialogService },
+                { provide: SessionService, useValue: mockSessionService },
+                { provide: OperationService, useValue: mockOperationService },
+                { provide: AppConfigService, useValue: mockAppConfigService },
+                { provide: UserPermissionService, useValue: mockUserPermissionService },
+                { provide: ErrorHandler, useValue: mockErrorHandler },
+                {
+                    provide: ActivatedRoute, useValue: {
+                        RouterparamMap: of({ get: (key) => 'value' }),
+                        snapshot: {
+                            parent: {
+                                params: { id: 1 }
+                            },
+                            data: 1
+                        }
+                    }
+                }
+
             ]
         }).compileComponents();
     }));

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

@@ -1,19 +1,85 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { ProjectDetailComponent } from './project-detail.component';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { ClarityModule } from '@clr/angular';
+import { FormsModule } from '@angular/forms';
+import { RouterTestingModule } from '@angular/router/testing';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { of } from 'rxjs';
+import { ActivatedRoute } from '@angular/router';
 
-xdescribe('ProjectDetailComponent', () => {
+import { SessionService } from '../../shared/session.service';
+
+import { AppConfigService } from "../../app-config.service";
+import { UserPermissionService, USERSTATICPERMISSION, ErrorHandler, ProjectService } from "@harbor/ui";
+describe('ProjectDetailComponent', () => {
     let component: ProjectDetailComponent;
     let fixture: ComponentFixture<ProjectDetailComponent>;
+    const mockSessionService = {
+        getCurrentUser: () => {
+            return of({
+                user_id: 1
+            });
+        }
+    };
+    const mockAppConfigService = {
+        getConfig: () => {
+            return {
+                with_admiral: true,
+                with_chartmuseum: true,
+            };
+        },
 
+    };
+    const mockUserPermissionService = {
+        getPermission() {
+          return of(true);
+        }
+      };
+    const mockProjectService = null;
+    const mockErrorHandler = {
+        error() { }
+      };
+    const mockActivatedRoute = {
+        RouterparamMap: of({ get: (key) => 'value' }),
+        snapshot: {
+                params: { id: 1 },
+                data: 1
+        },
+        data: of({
+            projectResolver: {
+                ismember: true,
+                role_name: 'master',
+            }
+        })
+    };
     beforeEach(async(() => {
         TestBed.configureTestingModule({
+            schemas: [
+                CUSTOM_ELEMENTS_SCHEMA
+            ],
             imports: [
-                TranslateModule.forRoot()
+                BrowserAnimationsModule,
+                ClarityModule,
+                TranslateModule.forRoot(),
+                FormsModule,
+                RouterTestingModule,
+                NoopAnimationsModule,
+                HttpClientTestingModule
             ],
             declarations: [ProjectDetailComponent],
             providers: [
-                TranslateService
+                TranslateService,
+                { provide: SessionService, useValue: mockSessionService },
+                { provide: AppConfigService, useValue: mockAppConfigService },
+                { provide: UserPermissionService, useValue: mockUserPermissionService },
+                { provide: ErrorHandler, useValue: mockErrorHandler },
+                { provide: ProjectService, useValue: mockProjectService },
+                {
+                    provide: ActivatedRoute, useValue: mockActivatedRoute
+                }
             ]
         }).compileComponents();
     }));

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

@@ -1,19 +1,235 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { ProjectComponent } from './project.component';
-
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-xdescribe('ProjectComponent', () => {
+import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { ClarityModule } from '@clr/angular';
+import { FormsModule } from '@angular/forms';
+import { RouterTestingModule } from '@angular/router/testing';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { ConfigurationService } from '../config/config.service';
+import { SessionService } from "../shared/session.service";
+import { of } from 'rxjs';
+describe('ProjectComponent', () => {
     let component: ProjectComponent;
     let fixture: ComponentFixture<ProjectComponent>;
-
+    const mockSessionService = {
+        getCurrentUser: () => {
+            return of({
+                user_id: 1
+            });
+        }
+    };
+    const mockConfigurationService = {
+        getConfiguration: () => {
+            return of({
+                "auth_mode": {
+                  "value": "oidc_auth",
+                  "editable": false
+                },
+                "count_per_project": {
+                  "value": -1,
+                  "editable": true
+                },
+                "email_from": {
+                  "value": "admin \u003csamplin@mydomain.com\u003e",
+                  "editable": true
+                },
+                "email_host": {
+                  "value": "smtp.mydomain.com",
+                  "editable": true
+                },
+                "email_identity": {
+                  "value": "",
+                  "editable": true
+                },
+                "email_insecure": {
+                  "value": false,
+                  "editable": true
+                },
+                "email_port": {
+                  "value": 25,
+                  "editable": true
+                },
+                "email_ssl": {
+                  "value": false,
+                  "editable": true
+                },
+                "email_username": {
+                  "value": "sample_admin@mydomain.com",
+                  "editable": true
+                },
+                "http_authproxy_endpoint": {
+                  "value": "",
+                  "editable": true
+                },
+                "http_authproxy_skip_search": {
+                  "value": false,
+                  "editable": true
+                },
+                "http_authproxy_tokenreview_endpoint": {
+                  "value": "",
+                  "editable": true
+                },
+                "http_authproxy_verify_cert": {
+                  "value": true,
+                  "editable": true
+                },
+                "ldap_base_dn": {
+                  "value": "",
+                  "editable": true
+                },
+                "ldap_filter": {
+                  "value": "",
+                  "editable": true
+                },
+                "ldap_group_admin_dn": {
+                  "value": "",
+                  "editable": true
+                },
+                "ldap_group_attribute_name": {
+                  "value": "",
+                  "editable": true
+                },
+                "ldap_group_base_dn": {
+                  "value": "",
+                  "editable": true
+                },
+                "ldap_group_membership_attribute": {
+                  "value": "memberof",
+                  "editable": true
+                },
+                "ldap_group_search_filter": {
+                  "value": "",
+                  "editable": true
+                },
+                "ldap_group_search_scope": {
+                  "value": 2,
+                  "editable": true
+                },
+                "ldap_scope": {
+                  "value": 2,
+                  "editable": true
+                },
+                "ldap_search_dn": {
+                  "value": "",
+                  "editable": true
+                },
+                "ldap_timeout": {
+                  "value": 5,
+                  "editable": true
+                },
+                "ldap_uid": {
+                  "value": "cn",
+                  "editable": true
+                },
+                "ldap_url": {
+                  "value": "",
+                  "editable": true
+                },
+                "ldap_verify_cert": {
+                  "value": true,
+                  "editable": true
+                },
+                "notification_enable": {
+                  "value": true,
+                  "editable": true
+                },
+                "oidc_client_id": {
+                  "value": "harb-https",
+                  "editable": true
+                },
+                "oidc_endpoint": {
+                  "value": "https://10.158..96:5554/dex",
+                  "editable": true
+                },
+                "oidc_groups_claim": {
+                  "value": "",
+                  "editable": true
+                },
+                "oidc_name": {
+                  "value": "dex",
+                  "editable": true
+                },
+                "oidc_scope": {
+                  "value": "openid,profilline_access",
+                  "editable": true
+                },
+                "oidc_verify_cert": {
+                  "value": false,
+                  "editable": true
+                },
+                "project_creation_restriction": {
+                  "value": "everyone",
+                  "editable": true
+                },
+                "quota_per_project_enable": {
+                  "value": true,
+                  "editable": true
+                },
+                "read_only": {
+                  "value": false,
+                  "editable": true
+                },
+                "robot_token_duration": {
+                  "value": 43200,
+                  "editable": true
+                },
+                "scan_all_policy": {
+                  "value": null,
+                  "editable": true
+                },
+                "self_registration": {
+                  "value": false,
+                  "editable": true
+                },
+                "storage_per_project": {
+                  "value": -1,
+                  "editable": true
+                },
+                "token_expiration": {
+                  "value": 30,
+                  "editable": true
+                },
+                "uaa_client_id": {
+                  "value": "",
+                  "editable": true
+                },
+                "uaa_client_secret": {
+                  "value": "",
+                  "editable": true
+                },
+                "uaa_endpoint": {
+                  "value": "",
+                  "editable": true
+                },
+                "uaa_verify_cert": {
+                  "value": false,
+                  "editable": true
+                }
+              });
+        }
+    };
     beforeEach(async(() => {
         TestBed.configureTestingModule({
+            schemas: [
+                CUSTOM_ELEMENTS_SCHEMA
+            ],
             imports: [
-                TranslateModule.forRoot()
+                BrowserAnimationsModule,
+                ClarityModule,
+                TranslateModule.forRoot(),
+                FormsModule,
+                RouterTestingModule,
+                NoopAnimationsModule,
+                HttpClientTestingModule
             ],
             declarations: [ProjectComponent],
             providers: [
-                TranslateService
+                TranslateService,
+                { provide: SessionService, useValue: mockSessionService },
+                { provide: ConfigurationService, useValue: mockConfigurationService },
+
             ]
         })
             .compileComponents();

src/portal/src/app/project/tag-retention/add-rule/add-rule.component.spec.ts

@@ -1,19 +1,38 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { AddRuleComponent } from './add-rule.component';
-
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-xdescribe('AddRuleComponent', () => {
+import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { ClarityModule } from '@clr/angular';
+import { FormsModule } from '@angular/forms';
+import { RouterTestingModule } from '@angular/router/testing';
+import { of } from 'rxjs';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { TagRetentionService } from "../tag-retention.service";
+import { InlineAlertComponent } from "../../../shared/inline-alert/inline-alert.component";
+import { delay } from 'rxjs/operators';
+describe('AddRuleComponent', () => {
     let component: AddRuleComponent;
     let fixture: ComponentFixture<AddRuleComponent>;
-
+    const mockTagRetentionService = { };
     beforeEach(async(() => {
         TestBed.configureTestingModule({
-            imports: [
+            schemas: [
-                TranslateModule.forRoot()
+                CUSTOM_ELEMENTS_SCHEMA
             ],
-            declarations: [AddRuleComponent],
+            imports: [
+                BrowserAnimationsModule,
+                ClarityModule,
+                TranslateModule.forRoot(),
+                FormsModule,
+                RouterTestingModule,
+                NoopAnimationsModule,
+                HttpClientTestingModule
+            ],
+            declarations: [AddRuleComponent, InlineAlertComponent],
             providers: [
-                TranslateService
+                TranslateService,
+                { provide: TagRetentionService, useValue: mockTagRetentionService },
             ]
         })
             .compileComponents();

src/portal/src/app/project/tag-retention/tag-retention.component.spec.ts

@@ -1,19 +1,82 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { TagRetentionComponent } from './tag-retention.component';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { ClarityModule } from '@clr/angular';
+import { FormsModule } from '@angular/forms';
+import { RouterTestingModule } from '@angular/router/testing';
+import { of } from 'rxjs';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { ActivatedRoute } from '@angular/router';
+import { AddRuleComponent } from "./add-rule/add-rule.component";
+import { TagRetentionService } from "./tag-retention.service";
+import { RuleMetadate, Retention } from './retention';
+import { ErrorHandler } from "@harbor/ui";
+import { delay } from 'rxjs/operators';
 
-xdescribe('TagRetentionComponent', () => {
+describe('TagRetentionComponent', () => {
     let component: TagRetentionComponent;
     let fixture: ComponentFixture<TagRetentionComponent>;
-
+    const mockTagRetentionService = {
+        createRetention: () => of(null).pipe(delay(0)),
+        updateRetention: () => of(null).pipe(delay(0)),
+        runNowTrigger: () => of(null).pipe(delay(0)),
+        whatIfRunTrigger: () => of(null).pipe(delay(0)),
+        AbortRun: () => of(null).pipe(delay(0)),
+        seeLog: () => of(null).pipe(delay(0)),
+        getExecutionHistory: () => of({
+            body: []
+        }).pipe(delay(0)),
+        getRunNowList: () => of({
+            body: []
+        }).pipe(delay(0)),
+        getProjectInfo: () => of({
+            metadata: {
+                retention_id: 1
+            }
+        }).pipe(delay(0)),
+        getRetentionMetadata: () => of(new RuleMetadate()).pipe(delay(0)),
+        getRetention: () => of(new Retention()).pipe(delay(0)),
+    };
+    const mockActivatedRoute = {
+        snapshot: {
+            parent: {
+                params: { id: 1 },
+                data: {
+                    projectResolver: {
+                        metadata: {
+                            retention_id: 1
+                        }
+                    }
+                }
+            }
+        }
+    };
+    const mockErrorHandler = {
+        error: () => {}
+    };
     beforeEach(async(() => {
         TestBed.configureTestingModule({
-            imports: [
+            schemas: [
-                TranslateModule.forRoot()
+                CUSTOM_ELEMENTS_SCHEMA
             ],
-            declarations: [TagRetentionComponent],
+            imports: [
+                BrowserAnimationsModule,
+                ClarityModule,
+                TranslateModule.forRoot(),
+                FormsModule,
+                RouterTestingModule,
+                NoopAnimationsModule,
+                HttpClientTestingModule
+            ],
+            declarations: [TagRetentionComponent, AddRuleComponent],
             providers: [
-                TranslateService
+                TranslateService,
+                { provide: TagRetentionService, useValue: mockTagRetentionService },
+                { provide: ActivatedRoute, useValue: mockActivatedRoute },
+                { provide: ErrorHandler, useValue: mockErrorHandler }
+
             ]
         })
             .compileComponents();
@@ -22,6 +85,9 @@ xdescribe('TagRetentionComponent', () => {
     beforeEach(() => {
         fixture = TestBed.createComponent(TagRetentionComponent);
         component = fixture.componentInstance;
+        component.loadingHistories = false;
+        component.loadingRule = false;
+        component.loadingHistories = false;
         fixture.detectChanges();
     });
 

src/portal/src/app/project/webhook/add-webhook-form/add-webhook-form.component.spec.ts

@@ -1,19 +1,49 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { AddWebhookFormComponent } from './add-webhook-form.component';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { RouterTestingModule } from '@angular/router/testing';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { ClarityModule } from '@clr/angular';
+import { FormsModule } from '@angular/forms';
+import { WebhookService } from "../webhook.service";
+import { MessageHandlerService } from "../../../shared/message-handler/message-handler.service";
+import { of } from 'rxjs';
 
-xdescribe('AddWebhookFormComponent', () => {
+describe('AddWebhookFormComponent', () => {
     let component: AddWebhookFormComponent;
     let fixture: ComponentFixture<AddWebhookFormComponent>;
+    const mockWebhookService = {
+        getCurrentUser: () => {
+            return of(null);
+        }
+    };
+    const mockMessageHandlerService = {
+        handleError: () => { }
+    };
 
     beforeEach(async(() => {
         TestBed.configureTestingModule({
+            schemas: [
+                CUSTOM_ELEMENTS_SCHEMA
+            ],
             imports: [
-                TranslateModule.forRoot()
+                BrowserAnimationsModule,
+                ClarityModule,
+                TranslateModule.forRoot(),
+                FormsModule,
+                RouterTestingModule,
+                NoopAnimationsModule,
+                HttpClientTestingModule
             ],
             declarations: [AddWebhookFormComponent],
             providers: [
-                TranslateService
+                TranslateService,
+                { provide: WebhookService, useValue: mockWebhookService },
+                { provide: MessageHandlerService, useValue: mockMessageHandlerService },
+
+
             ]
         })
             .compileComponents();

src/portal/src/app/project/webhook/add-webhook/add-webhook.component.spec.ts

@@ -1,15 +1,29 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { AddWebhookComponent } from './add-webhook.component';
-
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-xdescribe('AddWebhookComponent', () => {
+import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { ClarityModule } from '@clr/angular';
+import { FormsModule } from '@angular/forms';
+import { RouterTestingModule } from '@angular/router/testing';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+describe('AddWebhookComponent', () => {
     let component: AddWebhookComponent;
     let fixture: ComponentFixture<AddWebhookComponent>;
 
     beforeEach(async(() => {
         TestBed.configureTestingModule({
+            schemas: [
+                CUSTOM_ELEMENTS_SCHEMA
+            ],
             imports: [
-                TranslateModule.forRoot()
+                BrowserAnimationsModule,
+                ClarityModule,
+                TranslateModule.forRoot(),
+                FormsModule,
+                RouterTestingModule,
+                NoopAnimationsModule,
+                HttpClientTestingModule
             ],
             declarations: [AddWebhookComponent],
             providers: [

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

@@ -1,19 +1,72 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { WebhookComponent } from './webhook.component';
-
+import { ActivatedRoute } from '@angular/router';
-xdescribe('WebhookComponent', () => {
+import { WebhookService } from './webhook.service';
+import { MessageHandlerService } from "../../shared/message-handler/message-handler.service";
+import { of } from 'rxjs';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { ClarityModule } from '@clr/angular';
+import { FormsModule } from '@angular/forms';
+import { RouterTestingModule } from '@angular/router/testing';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+describe('WebhookComponent', () => {
     let component: WebhookComponent;
     let fixture: ComponentFixture<WebhookComponent>;
+    const mockMessageHandlerService = {
+        handleError: () => { }
+    };
+    const mockWebhookService = {
+        listLastTrigger: () => {
+            return of([]);
+        },
+        listWebhook: () => {
+            return of([
+                {
+                    targets: [
+                        { address: "" }
+                    ],
+                    enabled: true
+                }
+            ]);
+        },
+    };
+    const mockActivatedRoute = {
+        RouterparamMap: of({ get: (key) => 'value' }),
+        snapshot: {
+            parent: {
+                params: { id: 1 },
+                data: {
+                    projectResolver: {
+                        ismember: true,
+                        name: 'library',
+                    }
+                }
+            }
+        }
+    };
 
     beforeEach(async(() => {
         TestBed.configureTestingModule({
+            schemas: [
+                CUSTOM_ELEMENTS_SCHEMA
+            ],
             imports: [
-                TranslateModule.forRoot()
+                BrowserAnimationsModule,
+                ClarityModule,
+                TranslateModule.forRoot(),
+                FormsModule,
+                RouterTestingModule,
+                NoopAnimationsModule,
+                HttpClientTestingModule
             ],
             declarations: [WebhookComponent],
             providers: [
-                TranslateService
+                TranslateService,
+                { provide: WebhookService, useValue: mockWebhookService },
+                { provide: MessageHandlerService, useValue: mockMessageHandlerService },
+                { provide: ActivatedRoute, useValue: mockActivatedRoute },
             ]
         })
             .compileComponents();

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

@@ -1,15 +1,29 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { DestinationPageComponent } from './destination-page.component';
-
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-xdescribe('DestinationPageComponent', () => {
+import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { ClarityModule } from '@clr/angular';
+import { FormsModule } from '@angular/forms';
+import { RouterTestingModule } from '@angular/router/testing';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+describe('DestinationPageComponent', () => {
     let component: DestinationPageComponent;
     let fixture: ComponentFixture<DestinationPageComponent>;
 
     beforeEach(async(() => {
         TestBed.configureTestingModule({
+            schemas: [
+                CUSTOM_ELEMENTS_SCHEMA
+            ],
             imports: [
-                TranslateModule.forRoot()
+                BrowserAnimationsModule,
+                ClarityModule,
+                TranslateModule.forRoot(),
+                FormsModule,
+                RouterTestingModule,
+                NoopAnimationsModule,
+                HttpClientTestingModule
             ],
             declarations: [DestinationPageComponent],
             providers: [

src/portal/src/app/replication/replication-management/replication-management.component.spec.ts

@@ -1,15 +1,29 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { ReplicationManagementComponent } from './replication-management.component';
-
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-xdescribe('ReplicationManagementComponent', () => {
+import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { ClarityModule } from '@clr/angular';
+import { FormsModule } from '@angular/forms';
+import { RouterTestingModule } from '@angular/router/testing';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+describe('ReplicationManagementComponent', () => {
     let component: ReplicationManagementComponent;
     let fixture: ComponentFixture<ReplicationManagementComponent>;
 
     beforeEach(async(() => {
         TestBed.configureTestingModule({
+            schemas: [
+                CUSTOM_ELEMENTS_SCHEMA
+            ],
             imports: [
-                TranslateModule.forRoot()
+                BrowserAnimationsModule,
+                ClarityModule,
+                TranslateModule.forRoot(),
+                FormsModule,
+                RouterTestingModule,
+                NoopAnimationsModule,
+                HttpClientTestingModule
             ],
             declarations: [ReplicationManagementComponent],
             providers: [

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

@@ -1,19 +1,84 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { ReplicationPageComponent } from './replication-page.component';
+import { ActivatedRoute, Router } from '@angular/router';
 
-xdescribe('ReplicationPageComponent', () => {
+import { SessionService } from "../shared/session.service";
+import { Project } from "../project/project";
+import { ReplicationComponent, UserPermissionService, USERSTATICPERMISSION, ErrorHandler, ProjectService } from "@harbor/ui";
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { ClarityModule } from '@clr/angular';
+import { FormsModule } from '@angular/forms';
+import { RouterTestingModule } from '@angular/router/testing';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { of } from 'rxjs';
+describe('ReplicationPageComponent', () => {
     let component: ReplicationPageComponent;
     let fixture: ComponentFixture<ReplicationPageComponent>;
-
+    const mockSessionService = {
+        getCurrentUser: () => { }
+    };
+    const mockUserPermissionService = {
+        getPermission() {
+            return of(true);
+        }
+    };
+    const mockErrorHandler = {
+        error: () => { }
+    };
+    const mockProjectService = {
+        listProjects: () => {
+            return of({
+                body: []
+            });
+        }
+    };
+    const mockActivatedRoute = {
+        RouterparamMap: of({ get: (key) => 'value' }),
+        snapshot: {
+            parent: {
+                params: { id: 1 },
+                data: {
+                    projectResolver: {
+                        ismember: true,
+                        name: 'library',
+                    }
+                }
+            },
+            queryParams: {
+                is_create: ""
+            }
+        }
+    };
+    const mockRouter = {
+        navigate: () => { }
+    };
     beforeEach(async(() => {
         TestBed.configureTestingModule({
+            schemas: [
+                CUSTOM_ELEMENTS_SCHEMA
+            ],
             imports: [
-                TranslateModule.forRoot()
+                BrowserAnimationsModule,
+                ClarityModule,
+                TranslateModule.forRoot(),
+                FormsModule,
+                RouterTestingModule,
+                NoopAnimationsModule,
+                HttpClientTestingModule
             ],
             declarations: [ReplicationPageComponent],
             providers: [
-                TranslateService
+                TranslateService,
+                { provide: ErrorHandler, useValue: mockErrorHandler },
+                { provide: SessionService, useValue: mockSessionService },
+                { provide: UserPermissionService, useValue: mockUserPermissionService },
+                { provide: ProjectService, useValue: mockProjectService },
+                { provide: ErrorHandler, useValue: mockErrorHandler },
+                { provide: ActivatedRoute, useValue: mockActivatedRoute },
+                { provide: Router, useValue: mockRouter },
+
             ]
         })
             .compileComponents();

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

@@ -1,19 +1,57 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { TotalReplicationPageComponent } from './total-replication-page.component';
+import {Router, ActivatedRoute} from "@angular/router";
+import {ReplicationRule} from "@harbor/ui";
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { ClarityModule } from '@clr/angular';
+import { FormsModule } from '@angular/forms';
+import { RouterTestingModule } from '@angular/router/testing';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import {SessionService} from "../../shared/session.service";
+import {AppConfigService} from "../../app-config.service";
 
-xdescribe('TotalReplicationPageComponent', () => {
+describe('TotalReplicationPageComponent', () => {
     let component: TotalReplicationPageComponent;
     let fixture: ComponentFixture<TotalReplicationPageComponent>;
-
+    const mockSessionService = {
+        getCurrentUser: () => { }
+    };
+    const mockAppConfigService = {
+        getConfig: () => {
+            return {
+                project_creation_restriction: "",
+                with_chartmuseum: ""
+            };
+        }
+    };
+    const mockRouter = {
+        navigate: () => { }
+    };
+    const mockActivatedRoute = null;
     beforeEach(async(() => {
         TestBed.configureTestingModule({
+            schemas: [
+                CUSTOM_ELEMENTS_SCHEMA
+            ],
             imports: [
-                TranslateModule.forRoot()
+                BrowserAnimationsModule,
+                ClarityModule,
+                TranslateModule.forRoot(),
+                FormsModule,
+                RouterTestingModule,
+                NoopAnimationsModule,
+                HttpClientTestingModule
             ],
             declarations: [TotalReplicationPageComponent],
             providers: [
-                TranslateService
+                TranslateService,
+                { provide: SessionService, useValue: mockSessionService },
+                { provide: AppConfigService, useValue: mockAppConfigService },
+                { provide: Router, useValue: mockRouter },
+                { provide: ActivatedRoute, useValue: mockActivatedRoute },
+
             ]
         })
             .compileComponents();

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

@@ -1,19 +1,55 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { RepositoryPageComponent } from './repository-page.component';
-
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-xdescribe('RepositoryPageComponent', () => {
+import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { ClarityModule } from '@clr/angular';
+import { FormsModule } from '@angular/forms';
+import { RouterTestingModule } from '@angular/router/testing';
+import { of } from 'rxjs';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { ActivatedRoute, Router } from '@angular/router';
+import { SessionService } from '../shared/session.service';
+describe('RepositoryPageComponent', () => {
     let component: RepositoryPageComponent;
     let fixture: ComponentFixture<RepositoryPageComponent>;
-
+    const mockActivatedRoute = {
+        RouterparamMap: of({ get: (key) => 'value' }),
+        snapshot: {
+            parent: {
+                params: { id: 1 },
+                data: {
+                    projectResolver: {
+                        ismember: true,
+                        name: 'library',
+                    }
+                }
+            }
+        }
+    };
+    const mockSessionService = {
+        getCurrentUser: () => { }
+    };
     beforeEach(async(() => {
         TestBed.configureTestingModule({
+            schemas: [
+                CUSTOM_ELEMENTS_SCHEMA
+            ],
             imports: [
-                TranslateModule.forRoot()
+                BrowserAnimationsModule,
+                ClarityModule,
+                TranslateModule.forRoot(),
+                FormsModule,
+                RouterTestingModule,
+                NoopAnimationsModule,
+                HttpClientTestingModule
             ],
             declarations: [RepositoryPageComponent],
             providers: [
-                TranslateService
+                TranslateService,
+                { provide: ActivatedRoute, useValue: mockActivatedRoute },
+                { provide: SessionService, useValue: mockSessionService },
+
             ]
         })
             .compileComponents();

src/portal/src/app/repository/tag-detail/tag-detail-page.component.spec.ts

@@ -1,19 +1,80 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { TagDetailPageComponent } from './tag-detail-page.component';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { ClarityModule } from '@clr/angular';
+import { FormsModule } from '@angular/forms';
+import { RouterTestingModule } from '@angular/router/testing';
+import { of } from 'rxjs';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
 
-xdescribe('TagDetailPageComponent', () => {
+import { ActivatedRoute, Router } from '@angular/router';
+import {AppConfigService} from "../../app-config.service";
+import { SessionService } from '../../shared/session.service';
+describe('TagDetailPageComponent', () => {
     let component: TagDetailPageComponent;
     let fixture: ComponentFixture<TagDetailPageComponent>;
+    const mockSessionService = {
+        getCurrentUser: () => { }
+    };
+    const mockAppConfigService = {
+        getConfig: () => {
+            return {
+                registry_storage_provider_name : ""
+            };
+        }
+    };
+    const mockRouter = {
+        navigate: () => { }
+    };
+    const mockActivatedRoute = {
+        RouterparamMap: of({ get: (key) => 'value' }),
+        snapshot: {
+            params: {
+                id: 1,
+                repo: "ere",
+                tag: "33"
+            },
+            parent: {
+                params: { id: 1 },
 
+            },
+            data: {
+                projectResolver: {
+                    has_project_admin_role: true,
+                    current_user_role_id: 3,
+                }
+            }
+        },
+        data: of({
+            projectResolver: {
+                ismember: true,
+                role_name: 'master',
+            }
+        })
+    };
     beforeEach(async(() => {
         TestBed.configureTestingModule({
+            schemas: [
+                CUSTOM_ELEMENTS_SCHEMA
+            ],
             imports: [
-                TranslateModule.forRoot()
+                BrowserAnimationsModule,
+                ClarityModule,
+                TranslateModule.forRoot(),
+                FormsModule,
+                RouterTestingModule,
+                NoopAnimationsModule,
+                HttpClientTestingModule
             ],
             declarations: [TagDetailPageComponent],
             providers: [
-                TranslateService
+                TranslateService,
+                { provide: SessionService, useValue: mockSessionService },
+                { provide: AppConfigService, useValue: mockAppConfigService },
+                { provide: Router, useValue: mockRouter },
+                { provide: ActivatedRoute, useValue: mockActivatedRoute },
             ]
         })
             .compileComponents();

src/portal/src/app/repository/tag-repository/tag-repository.component.spec.ts

@@ -1,19 +1,81 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { TagRepositoryComponent } from './tag-repository.component';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { ClarityModule } from '@clr/angular';
+import { FormsModule } from '@angular/forms';
+import { RouterTestingModule } from '@angular/router/testing';
+import { of } from 'rxjs';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { ActivatedRoute, Router } from '@angular/router';
 
-xdescribe('TagRepositoryComponent', () => {
+import { AppConfigService } from '../../app-config.service';
+import { SessionService } from '../../shared/session.service';
+describe('TagRepositoryComponent', () => {
     let component: TagRepositoryComponent;
     let fixture: ComponentFixture<TagRepositoryComponent>;
+    const mockSessionService = {
+        getCurrentUser: () => { }
+    };
+    const mockAppConfigService = {
+        getConfig: () => {
+            return {
+                project_creation_restriction: "",
+                with_chartmuseum: "",
+                with_notary: "",
+                with_clair: "",
+                with_admiral: "",
+                registry_url: "",
+            };
+        }
+    };
+    const mockRouter = {
+        navigate: () => { }
+    };
+    const mockActivatedRoute = {
+        RouterparamMap: of({ get: (key) => 'value' }),
+        snapshot: {
+            params: { id: 1 },
+            parent: {
+                params: { id: 1 },
 
+            },
+            data: {
+                projectResolver: {
+                    has_project_admin_role: true,
+                    current_user_role_id: 3,
+                }
+            }
+        },
+        data: of({
+            projectResolver: {
+                ismember: true,
+                role_name: 'master',
+            }
+        })
+    };
     beforeEach(async(() => {
         TestBed.configureTestingModule({
+            schemas: [
+                CUSTOM_ELEMENTS_SCHEMA
+            ],
             imports: [
-                TranslateModule.forRoot()
+                BrowserAnimationsModule,
+                ClarityModule,
+                TranslateModule.forRoot(),
+                FormsModule,
+                RouterTestingModule,
+                NoopAnimationsModule,
+                HttpClientTestingModule
             ],
             declarations: [TagRepositoryComponent],
             providers: [
-                TranslateService
+                TranslateService,
+                { provide: SessionService, useValue: mockSessionService },
+                { provide: AppConfigService, useValue: mockAppConfigService },
+                { provide: Router, useValue: mockRouter },
+                { provide: ActivatedRoute, useValue: mockActivatedRoute },
             ]
         })
             .compileComponents();

src/portal/src/app/repository/top-repo/top-repo.component.spec.ts

@@ -1,19 +1,46 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { TopRepoComponent } from './top-repo.component';
-
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-xdescribe('TopRepoComponent', () => {
+import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { ClarityModule } from '@clr/angular';
+import { FormsModule } from '@angular/forms';
+import { RouterTestingModule } from '@angular/router/testing';
+import { of } from 'rxjs';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { MessageHandlerService } from '../../shared/message-handler/message-handler.service';
+import { TopRepoService } from './top-repository.service';
+describe('TopRepoComponent', () => {
     let component: TopRepoComponent;
     let fixture: ComponentFixture<TopRepoComponent>;
-
+    const mockMessageHandlerService = {
+        showSuccess: () => { },
+        handleError: () => { },
+        isAppLevel: () => { },
+    };
+    const mockTopRepoService = {
+        getTopRepos: () => of([])
+    };
     beforeEach(async(() => {
         TestBed.configureTestingModule({
+            schemas: [
+                CUSTOM_ELEMENTS_SCHEMA
+            ],
             imports: [
-                TranslateModule.forRoot()
+                BrowserAnimationsModule,
+                ClarityModule,
+                TranslateModule.forRoot(),
+                FormsModule,
+                RouterTestingModule,
+                NoopAnimationsModule,
+                HttpClientTestingModule
             ],
             declarations: [TopRepoComponent],
             providers: [
-                TranslateService
+                TranslateService,
+                { provide: TopRepoService, useValue: mockTopRepoService },
+                { provide: MessageHandlerService, useValue: mockMessageHandlerService },
+
             ]
         })
             .compileComponents();

src/portal/src/app/shared/confirmation-dialog/confirmation-dialog.component.spec.ts

@@ -1,19 +1,46 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { ConfirmationDialogComponent } from './confirmation-dialog.component';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { ClarityModule } from '@clr/angular';
+import { FormsModule } from '@angular/forms';
+import { RouterTestingModule } from '@angular/router/testing';
+import { of } from 'rxjs';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { ConfirmationDialogService } from './confirmation-dialog.service';
 
-xdescribe('ConfirmationDialogComponent', () => {
+describe('ConfirmationDialogComponent', () => {
     let component: ConfirmationDialogComponent;
     let fixture: ComponentFixture<ConfirmationDialogComponent>;
-
+    const mockConfirmationDialogService = {
+        confirmationAnnouced$: of({
+            title: "title",
+            message: "title",
+            param: "AAA"
+        }),
+        cancel: () => { },
+        confirm: () => { },
+    };
     beforeEach(async(() => {
         TestBed.configureTestingModule({
+            schemas: [
+                CUSTOM_ELEMENTS_SCHEMA
+            ],
             imports: [
-                TranslateModule.forRoot()
+                BrowserAnimationsModule,
+                ClarityModule,
+                TranslateModule.forRoot(),
+                FormsModule,
+                RouterTestingModule,
+                NoopAnimationsModule,
+                HttpClientTestingModule
             ],
             declarations: [ConfirmationDialogComponent],
             providers: [
-                TranslateService
+                TranslateService,
+                { provide: ConfirmationDialogService, useValue: mockConfirmationDialogService },
+
             ]
         }).compileComponents();
     }));

src/portal/src/app/shared/gauge/gauge.component.spec.ts

@@ -1,15 +1,30 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { GaugeComponent } from './gauge.component';
-
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-xdescribe('GaugeComponent', () => {
+import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { ClarityModule } from '@clr/angular';
+import { FormsModule } from '@angular/forms';
+import { RouterTestingModule } from '@angular/router/testing';
+import { of } from 'rxjs';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+describe('GaugeComponent', () => {
     let component: GaugeComponent;
     let fixture: ComponentFixture<GaugeComponent>;
 
     beforeEach(async(() => {
         TestBed.configureTestingModule({
+            schemas: [
+                CUSTOM_ELEMENTS_SCHEMA
+            ],
             imports: [
-                TranslateModule.forRoot()
+                BrowserAnimationsModule,
+                ClarityModule,
+                TranslateModule.forRoot(),
+                FormsModule,
+                RouterTestingModule,
+                NoopAnimationsModule,
+                HttpClientTestingModule
             ],
             declarations: [GaugeComponent],
             providers: [

src/portal/src/app/shared/gauge/gauge.component.ts

@@ -164,7 +164,9 @@ export class GaugeComponent implements AfterViewInit {
       }
 
       ngAfterViewInit() {
+            setTimeout(() => {
                   this.determineColors();
+            }, 0);
       }
 
       @ViewChild('barOne', {static: true}) private barOne: ElementRef;

src/portal/src/app/shared/inline-alert/inline-alert.component.spec.ts

@@ -1,15 +1,30 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { InlineAlertComponent } from './inline-alert.component';
-
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-xdescribe('InlineAlertComponent', () => {
+import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { ClarityModule } from '@clr/angular';
+import { FormsModule } from '@angular/forms';
+import { RouterTestingModule } from '@angular/router/testing';
+import { of } from 'rxjs';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+describe('InlineAlertComponent', () => {
     let component: InlineAlertComponent;
     let fixture: ComponentFixture<InlineAlertComponent>;
 
     beforeEach(async(() => {
         TestBed.configureTestingModule({
+            schemas: [
+                CUSTOM_ELEMENTS_SCHEMA
+            ],
             imports: [
-                TranslateModule.forRoot()
+                BrowserAnimationsModule,
+                ClarityModule,
+                TranslateModule.forRoot(),
+                FormsModule,
+                RouterTestingModule,
+                NoopAnimationsModule,
+                HttpClientTestingModule
             ],
             declarations: [InlineAlertComponent],
             providers: [

src/portal/src/app/shared/list-chart-version-ro/list-chart-version-ro.component.spec.ts

@@ -1,19 +1,51 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { ListChartVersionRoComponent } from './list-chart-version-ro.component';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { ClarityModule } from '@clr/angular';
+import { FormsModule } from '@angular/forms';
+import { RouterTestingModule } from '@angular/router/testing';
+import { of } from 'rxjs';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { SearchTriggerService } from '../../base/global-search/search-trigger.service';
+import { ProjectService } from '@harbor/ui';
 
-xdescribe('ListChartVersionRoComponent', () => {
+describe('ListChartVersionRoComponent', () => {
     let component: ListChartVersionRoComponent;
     let fixture: ComponentFixture<ListChartVersionRoComponent>;
-
+    const mockSearchTriggerService = {
+        closeSearch: () => { }
+    };
+    const mockProjectService = {
+        listProjects: () => {
+            return of(
+                {
+                    body: []
+                }
+            );
+        }
+    };
     beforeEach(async(() => {
         TestBed.configureTestingModule({
+            schemas: [
+                CUSTOM_ELEMENTS_SCHEMA
+            ],
             imports: [
-                TranslateModule.forRoot()
+                BrowserAnimationsModule,
+                ClarityModule,
+                TranslateModule.forRoot(),
+                FormsModule,
+                RouterTestingModule,
+                NoopAnimationsModule,
+                HttpClientTestingModule
             ],
             declarations: [ListChartVersionRoComponent],
             providers: [
-                TranslateService
+                TranslateService,
+                { provide: ProjectService, useValue: mockProjectService },
+                { provide: SearchTriggerService, useValue: mockSearchTriggerService }
+
             ]
         })
             .compileComponents();

src/portal/src/app/shared/list-project-ro/list-project-ro.component.spec.ts

@@ -1,19 +1,40 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { ListProjectROComponent } from './list-project-ro.component';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { ClarityModule } from '@clr/angular';
+import { FormsModule } from '@angular/forms';
+import { RouterTestingModule } from '@angular/router/testing';
+import { of } from 'rxjs';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { SearchTriggerService } from '../../base/global-search/search-trigger.service';
 
-xdescribe('ListProjectROComponent', () => {
+describe('ListProjectROComponent', () => {
     let component: ListProjectROComponent;
     let fixture: ComponentFixture<ListProjectROComponent>;
-
+    const mockSearchTriggerService = {
+        closeSearch: () => { }
+    };
     beforeEach(async(() => {
         TestBed.configureTestingModule({
+            schemas: [
+                CUSTOM_ELEMENTS_SCHEMA
+            ],
             imports: [
-                TranslateModule.forRoot()
+                BrowserAnimationsModule,
+                ClarityModule,
+                TranslateModule.forRoot(),
+                FormsModule,
+                RouterTestingModule,
+                NoopAnimationsModule,
+                HttpClientTestingModule
             ],
             declarations: [ListProjectROComponent],
             providers: [
-                TranslateService
+                TranslateService,
+                { provide: SearchTriggerService, useValue: mockSearchTriggerService }
+
             ]
         })
             .compileComponents();

src/portal/src/app/shared/list-repository-ro/list-repository-ro.component.spec.ts

@@ -1,19 +1,40 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { ListRepositoryROComponent } from './list-repository-ro.component';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { ClarityModule } from '@clr/angular';
+import { FormsModule } from '@angular/forms';
+import { RouterTestingModule } from '@angular/router/testing';
+import { of } from 'rxjs';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { SearchTriggerService } from '../../base/global-search/search-trigger.service';
 
-xdescribe('ListRepositoryRoComponent', () => {
+describe('ListRepositoryRoComponent', () => {
     let component: ListRepositoryROComponent;
     let fixture: ComponentFixture<ListRepositoryROComponent>;
-
+    const mockSearchTriggerService = {
+        closeSearch: () => { }
+    };
     beforeEach(async(() => {
         TestBed.configureTestingModule({
+            schemas: [
+                CUSTOM_ELEMENTS_SCHEMA
+            ],
             imports: [
-                TranslateModule.forRoot()
+                BrowserAnimationsModule,
+                ClarityModule,
+                TranslateModule.forRoot(),
+                FormsModule,
+                RouterTestingModule,
+                NoopAnimationsModule,
+                HttpClientTestingModule
             ],
             declarations: [ListRepositoryROComponent],
             providers: [
-                TranslateService
+                TranslateService,
+                { provide: SearchTriggerService, useValue: mockSearchTriggerService }
+
             ]
         }).compileComponents();
     }));

src/portal/src/app/shared/new-user-form/new-user-form.component.spec.ts

@@ -1,18 +1,38 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { NewUserFormComponent } from './new-user-form.component';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { ClarityModule } from '@clr/angular';
+import { FormsModule } from '@angular/forms';
+import { RouterTestingModule } from '@angular/router/testing';
+import { of } from 'rxjs';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { SessionService } from '../../shared/session.service';
 
-xdescribe('NewUserFormComponent', () => {
+describe('NewUserFormComponent', () => {
     let component: NewUserFormComponent;
     let fixture: ComponentFixture<NewUserFormComponent>;
-
+    const mockSessionService = {
+        getCurrentUser: () => { }
+    };
     beforeEach(async(() => {
         TestBed.configureTestingModule({
+            schemas: [
+                CUSTOM_ELEMENTS_SCHEMA
+            ],
             imports: [
-                TranslateModule.forRoot()
+                BrowserAnimationsModule,
+                ClarityModule,
+                TranslateModule.forRoot(),
+                FormsModule,
+                RouterTestingModule,
+                NoopAnimationsModule,
+                HttpClientTestingModule
             ],
             declarations: [NewUserFormComponent],
             providers: [
+                { provide: SessionService, useValue: mockSessionService },
                 TranslateService
             ]
         })

src/portal/src/app/shared/not-found/not-found.component.spec.ts

@@ -1,15 +1,34 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { PageNotFoundComponent } from './not-found.component';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { ClarityModule } from '@clr/angular';
+import { FormsModule } from '@angular/forms';
+import { RouterTestingModule } from '@angular/router/testing';
+import { of } from 'rxjs';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { Router } from '@angular/router';
 
-xdescribe('PageNotFoundComponent', () => {
+describe('PageNotFoundComponent', () => {
     let component: PageNotFoundComponent;
     let fixture: ComponentFixture<PageNotFoundComponent>;
-
+    const mockRouter = {
+        navigate: () => {}
+    };
     beforeEach(async(() => {
         TestBed.configureTestingModule({
+            schemas: [
+                CUSTOM_ELEMENTS_SCHEMA
+            ],
             imports: [
-                TranslateModule.forRoot()
+                BrowserAnimationsModule,
+                ClarityModule,
+                TranslateModule.forRoot(),
+                FormsModule,
+                RouterTestingModule,
+                NoopAnimationsModule,
+                HttpClientTestingModule
             ],
             declarations: [PageNotFoundComponent],
             providers: [

src/portal/src/app/shared/statictics/statistics-panel.component.spec.ts

@@ -1,19 +1,69 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { StatisticsPanelComponent } from './statistics-panel.component';
-
+import { StatisticsComponent } from './statistics.component';
-xdescribe('StatisticsPanelComponent', () => {
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { ClarityModule } from '@clr/angular';
+import { FormsModule } from '@angular/forms';
+import { RouterTestingModule } from '@angular/router/testing';
+import { of } from 'rxjs';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { StatisticsService } from "./statistics.service";
+import { SessionService } from "../session.service";
+import { MessageHandlerService } from "../message-handler/message-handler.service";
+import { StatisticHandler } from "./statistic-handler.service";
+import { AppConfigService } from "./../../app-config.service";
+import { Statistics } from './statistics';
+import { Volumes } from './volumes';
+describe('StatisticsPanelComponent', () => {
     let component: StatisticsPanelComponent;
     let fixture: ComponentFixture<StatisticsPanelComponent>;
-
+    const mockStatisticsService = {
+        getStatistics: () => of(new Statistics()),
+        getVolumes: () => of(new Volumes()),
+    };
+    const mockSessionService = {
+        getCurrentUser: () => { }
+    };
+    const mockAppConfigService = {
+        getConfig: () => {
+            return {
+                registry_storage_provider_name : ""
+            };
+        }
+    };
+    const mockMessageHandlerService = {
+        handleError: () => { }
+    };
+    const mockStatisticHandler = {
+        refreshChan$: of(null)
+    };
+    const mockRouter = {
+        navigate: () => { }
+    };
     beforeEach(async(() => {
         TestBed.configureTestingModule({
-            imports: [
+            schemas: [
-                TranslateModule.forRoot()
+                CUSTOM_ELEMENTS_SCHEMA
             ],
-            declarations: [StatisticsPanelComponent],
+            imports: [
+                BrowserAnimationsModule,
+                ClarityModule,
+                TranslateModule.forRoot(),
+                FormsModule,
+                RouterTestingModule,
+                NoopAnimationsModule,
+                HttpClientTestingModule
+            ],
+            declarations: [StatisticsPanelComponent, StatisticsComponent],
             providers: [
-                TranslateService
+                TranslateService,
+                { provide: SessionService, useValue: mockSessionService },
+                { provide: AppConfigService, useValue: mockAppConfigService },
+                { provide: StatisticsService, useValue: mockStatisticsService },
+                { provide: StatisticHandler, useValue: mockStatisticHandler },
+                { provide: MessageHandlerService, useValue: mockMessageHandlerService }
             ]
         }).compileComponents();
     }));