Merge pull request #10375 from AllForNothing/more-ut-v2

Add more UT for project-quota-component

src/portal/src/app/base/harbor-shell/harbor-shell.component.html

@@ -62,7 +62,7 @@
                             {{'CONFIG.LABEL' | translate }}
                         </a>
                         <a clrVerticalNavLink routerLink="/harbor/project-quotas" routerLinkActive="active">
-                            <clr-icon shape="volume" clrVerticalNavIcon></clr-icon>
+                            <clr-icon shape="resource-pool" clrVerticalNavIcon></clr-icon>
                             {{'CONFIG.PROJECT_QUOTAS' | translate }}
                         </a>
                         <a clrVerticalNavLink routerLink="/harbor/interrogation-services" routerLinkActive="active">

src/portal/src/lib/components/config/project-quotas/edit-project-quotas/edit-project-quotas.component.html

@@ -75,7 +75,7 @@
   </div>
   <div class="modal-footer">
     <button type="button" class="btn btn-outline" (click)="onCancel()">{{'BUTTON.CANCEL' | translate}}</button>
-    <button type="button" class="btn btn-primary" [disabled]="!isValid"
+    <button id="edit-quota-save" type="button" class="btn btn-primary" [disabled]="!isValid"
       (click)="onSubmit()">{{'BUTTON.OK' | translate}}</button>
   </div>
 </clr-modal>

src/portal/src/lib/components/config/project-quotas/edit-project-quotas/edit-project-quotas.component.spec.ts

@@ -1,10 +1,9 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
 import { EditProjectQuotasComponent } from './edit-project-quotas.component';
-import { SharedModule } from '../../../../utils/shared/shared.module';
-import { InlineAlertComponent } from '../../../inline-alert/inline-alert.component';
 import { SERVICE_CONFIG, IServiceConfig } from '../../../../entities/service.config';
-import { RouterModule } from '@angular/router';
+import { EditQuotaQuotaInterface } from '../../../../services';
+import { HarborLibraryModule } from '../../../../harbor-library.module';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 describe('EditProjectQuotasComponent', () => {
   let component: EditProjectQuotasComponent;
@@ -12,13 +11,20 @@ describe('EditProjectQuotasComponent', () => {
   let config: IServiceConfig = {
     quotaUrl: "/api/quotas/testing"
   };
+  const mockedEditQuota: EditQuotaQuotaInterface = {
+    editQuota: "Edit Default Project Quotas",
+    setQuota: "Set the default project quotas when creating new projects",
+    countQuota: "Default artifact count",
+    storageQuota: "Default storage consumption",
+    quotaHardLimitValue: {storageLimit: -1, storageUnit: "Byte", countLimit: -1},
+    isSystemDefaultQuota: true
+  };
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       imports: [
-        SharedModule,
+        HarborLibraryModule,
-        RouterModule.forRoot([])
+        BrowserAnimationsModule
       ],
-      declarations: [ EditProjectQuotasComponent, InlineAlertComponent ],
       providers: [
         { provide: SERVICE_CONFIG, useValue: config },
       ]
@@ -34,4 +40,18 @@ describe('EditProjectQuotasComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+  it('should open', async () => {
+    component.openEditQuota = true;
+    fixture.detectChanges();
+    await fixture.whenStable();
+    component.openEditQuotaModal(mockedEditQuota);
+    fixture.detectChanges();
+    await fixture.whenStable();
+    let countInput: HTMLInputElement = fixture.nativeElement.querySelector('#count');
+    countInput.value = "100";
+    countInput.dispatchEvent(new Event("input"));
+    fixture.detectChanges();
+    await fixture.whenStable();
+    expect(component.isValid).toBeTruthy();
+  });
 });

src/portal/src/lib/components/config/project-quotas/project-quotas.component.html

@@ -6,7 +6,7 @@
                     <div class="default-quota-text">
                         <span class="width-10rem">{{'QUOTA.PROJECT_QUOTA_DEFAULT_ARTIFACT' | translate}}</span>
                         <span class="num-count">{{ quotaHardLimitValue?.countLimit === -1 ? ('QUOTA.UNLIMITED'| translate) : quotaHardLimitValue?.countLimit }}</span>
-                        <button class="btn btn-link btn-sm  default-quota-edit-button"
+                        <button id="open-edit" class="btn btn-link btn-sm  default-quota-edit-button"
                     (click)="editDefaultQuota(quotaHardLimitValue)">{{'QUOTA.EDIT' | translate}}</button>
                     </div>
                     <div class="default-quota-text">

src/portal/src/lib/components/config/project-quotas/project-quotas.component.spec.ts

@@ -1,11 +1,7 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { async, ComponentFixture, ComponentFixtureAutoDetect, TestBed } from '@angular/core/testing';
-
 import { ProjectQuotasComponent } from './project-quotas.component';
 import { IServiceConfig, SERVICE_CONFIG } from '../../../entities/service.config';
-import { SharedModule } from '../../../utils/shared/shared.module';
+import { Router } from '@angular/router';
-import { RouterModule } from '@angular/router';
-import { EditProjectQuotasComponent } from './edit-project-quotas/edit-project-quotas.component';
-import { InlineAlertComponent } from '../../inline-alert/inline-alert.component';
 import {
   ConfigurationService, ConfigurationDefaultService, QuotaService
   , QuotaDefaultService, Quota, RequestQueryParams
@@ -14,8 +10,12 @@ import { ErrorHandler } from '../../../utils/error-handler';
 import { of } from 'rxjs';
 import { delay } from 'rxjs/operators';
 import {APP_BASE_HREF} from '@angular/common';
+import { HarborLibraryModule } from '../../../harbor-library.module';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 describe('ProjectQuotasComponent', () => {
   let spy: jasmine.Spy;
+  let spyUpdate: jasmine.Spy;
+  let spyRoute: jasmine.Spy;
   let quotaService: QuotaService;
 
   let component: ProjectQuotasComponent;
@@ -43,20 +43,35 @@ describe('ProjectQuotasComponent', () => {
       },
   }
   ];
+  const fakedRouter = {
+    navigate() {
+      return undefined;
+    }
+  };
+  const fakedErrorHandler = {
+    error() {
+      return undefined;
+    },
+    info() {
+      return undefined;
+    }
+  };
+  const timeout = (ms: number) => {
+     return new Promise(resolve => setTimeout(resolve, ms));
+  };
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       imports: [
-        SharedModule,
+        HarborLibraryModule,
-        RouterModule.forRoot([])
+        BrowserAnimationsModule
       ],
-      declarations: [ProjectQuotasComponent, EditProjectQuotasComponent, InlineAlertComponent],
       providers: [
-        ErrorHandler,
+        { provide: ErrorHandler, useValue: fakedErrorHandler },
         { provide: SERVICE_CONFIG, useValue: config },
         { provide: ConfigurationService, useClass: ConfigurationDefaultService },
         { provide: QuotaService, useClass: QuotaDefaultService },
-        { provide: APP_BASE_HREF, useValue : '/' }
+        { provide: APP_BASE_HREF, useValue : '/' },
-
+        { provide: Router, useValue: fakedRouter }
       ]
     })
       .compileComponents();
@@ -83,11 +98,52 @@ describe('ProjectQuotasComponent', () => {
         };
         return of(httpRes).pipe(delay(0));
       });
-
+    spyUpdate = spyOn(quotaService, 'updateQuota').and.returnValue(of(null));
+    spyRoute = spyOn(fixture.debugElement.injector.get(Router), 'navigate').and.returnValue(of(null));
     fixture.detectChanges();
   }));
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+  it('should open edit quota modal', async () => {
+    // wait getting list and rendering
+    await timeout(10);
+    fixture.detectChanges();
+    await fixture.whenStable();
+    const openEditButton: HTMLButtonElement = fixture.nativeElement.querySelector("#open-edit");
+    openEditButton.dispatchEvent(new Event("click"));
+    fixture.detectChanges();
+    await fixture.whenStable();
+    const modal: HTMLElement = fixture.nativeElement.querySelector("clr-modal");
+    expect(modal).toBeTruthy();
+  });
+  it('edit quota', async () => {
+    // wait getting list and rendering
+    await timeout(10);
+    fixture.detectChanges();
+    await fixture.whenStable();
+    component.editQuota(component.quotaList[0]);
+    fixture.detectChanges();
+    await fixture.whenStable();
+    const countInput: HTMLInputElement = fixture.nativeElement.querySelector('#count');
+    countInput.value = "100";
+    countInput.dispatchEvent(new Event("input"));
+    fixture.detectChanges();
+    await fixture.whenStable();
+    const saveButton: HTMLInputElement = fixture.nativeElement.querySelector('#edit-quota-save');
+    saveButton.dispatchEvent(new Event("click"));
+    fixture.detectChanges();
+    await fixture.whenStable();
+    expect(spyUpdate.calls.count()).toEqual(1);
+  });
+  it('should call navigate function', async () => {
+    // wait getting list and rendering
+    await timeout(10);
+    fixture.detectChanges();
+    await fixture.whenStable();
+    const a: HTMLElement = fixture.nativeElement.querySelector('clr-dg-cell a');
+    a.dispatchEvent(new Event("click"));
+    expect(spyRoute.calls.count()).toEqual(1);
+  });
 });