From c837a1fb9ea8039694724d99884d4d9f6d45a9ab Mon Sep 17 00:00:00 2001 From: Steven Zou Date: Fri, 5 May 2017 10:41:42 +0800 Subject: [PATCH] Add test spec for log component --- src/ui_ng/lib/pkg/package.json | 2 +- src/ui_ng/lib/rollup.config.js | 2 +- .../lib/src/log/recent-log.component.spec.ts | 138 ++++++++++++------ src/ui_ng/lib/src/log/recent-log.template.ts | 2 +- 4 files changed, 98 insertions(+), 46 deletions(-) diff --git a/src/ui_ng/lib/pkg/package.json b/src/ui_ng/lib/pkg/package.json index fdb49e6fcb..421658ca72 100644 --- a/src/ui_ng/lib/pkg/package.json +++ b/src/ui_ng/lib/pkg/package.json @@ -40,6 +40,6 @@ "mutationobserver-shim": "^0.3.2", "@ngx-translate/core": "^6.0.0", "@ngx-translate/http-loader": "0.0.3", - "angular2-cookie": "^1.2.6" + "ngx-cookie": "^1.0.0" } } \ No newline at end of file diff --git a/src/ui_ng/lib/rollup.config.js b/src/ui_ng/lib/rollup.config.js index 2fb4b03c75..97d5f17b19 100644 --- a/src/ui_ng/lib/rollup.config.js +++ b/src/ui_ng/lib/rollup.config.js @@ -31,7 +31,7 @@ export default { '@angular/platform-browser': 'ng.platformBrowser', 'rxjs': 'rxjs', 'rxjs/Subject': 'rxjs.Subject', - 'rxjs/Observable': 'rxjs/Observable', + 'rxjs/Observable': 'Rx', 'rxjs/ReplaySubject': 'Rx', 'rxjs/add/operator/map': 'Rx.Observable.prototype', 'rxjs/add/operator/mergeMap': 'Rx.Observable.prototype', diff --git a/src/ui_ng/lib/src/log/recent-log.component.spec.ts b/src/ui_ng/lib/src/log/recent-log.component.spec.ts index 0db92aae59..d296d348f5 100644 --- a/src/ui_ng/lib/src/log/recent-log.component.spec.ts +++ b/src/ui_ng/lib/src/log/recent-log.component.spec.ts @@ -1,4 +1,4 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { async, ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; import { HttpModule } from '@angular/http'; import { DebugElement } from '@angular/core'; @@ -6,7 +6,7 @@ import { Observable } from 'rxjs/Observable'; import { AccessLog, RequestQueryParams } from '../service/index'; import { RecentLogComponent } from './recent-log.component'; -import { AccessLogService } from '../service/access-log.service'; +import { AccessLogService, AccessLogDefaultService } from '../service/access-log.service'; import { SERVICE_CONFIG, IServiceConfig } from '../service.config'; import { ErrorHandler } from '../error-handler/index'; import { SharedModule } from '../shared/shared.module'; @@ -17,41 +17,31 @@ describe('RecentLogComponent', () => { let fixture: ComponentFixture; let serviceConfig: IServiceConfig; let logService: AccessLogService; + let spy: jasmine.Spy; + let mockData: AccessLog[] = [{ + log_id: 23, + user_id: 45, + project_id: 11, + repo_name: "myproject/", + repo_tag: "N/A", + operation: "create", + op_time: "2017-04-11T10:26:22Z", + username: "user91" + }, { + log_id: 18, + user_id: 1, + project_id: 5, + repo_name: "demo2/vmware/harbor-ui", + repo_tag: "0.6", + operation: "push", + op_time: "2017-03-09T02:29:59Z", + username: "admin" + }]; + let testConfig: IServiceConfig = { + logBaseEndpoint: "/api/logs/testing" + }; beforeEach(async(() => { - const testConfig: IServiceConfig = { - logBaseEndpoint: "/api/logs/testing" - }; - - class MockLogService extends AccessLogService { - public getAuditLogs(projectId: number | string, queryParams?: RequestQueryParams): Observable | Promise | AccessLog[] { - return Observable.of([]); - } - - public getRecentLogs(lines: number): Observable | Promise | AccessLog[] { - let mockData: AccessLog[] = [{ - log_id: 23, - user_id: 45, - project_id: 11, - repo_name: "myproject/", - repo_tag: "N/A", - operation: "create", - op_time: "2017-04-11T10:26:22Z", - username: "user91" - }, { - log_id: 18, - user_id: 1, - project_id: 5, - repo_name: "demo2/vmware/harbor-ui", - repo_tag: "0.6", - operation: "push", - op_time: "2017-03-09T02:29:59Z", - username: "admin" - }]; - return Observable.of(mockData); - } - } - TestBed.configureTestingModule({ imports: [ SharedModule @@ -60,20 +50,21 @@ describe('RecentLogComponent', () => { providers: [ ErrorHandler, { provide: SERVICE_CONFIG, useValue: testConfig }, - { provide: AccessLogService, useClass: MockLogService } + { provide: AccessLogService, useClass: AccessLogDefaultService } ] - }) - .compileComponents(); - })); + }); - beforeEach(() => { fixture = TestBed.createComponent(RecentLogComponent); component = fixture.componentInstance; serviceConfig = TestBed.get(SERVICE_CONFIG); - logService = TestBed.get(AccessLogService); + logService = fixture.debugElement.injector.get(AccessLogService); + + spy = spyOn(logService, 'getRecentLogs') + .and.returnValue(Promise.resolve(mockData)); fixture.detectChanges(); - }); + + })); it('should be created', () => { expect(component).toBeTruthy(); @@ -84,7 +75,68 @@ describe('RecentLogComponent', () => { expect(serviceConfig.logBaseEndpoint).toEqual("/api/logs/testing"); }); - it('should inject the AccessLogService', () => { + it('should inject and call the AccessLogService', () => { expect(logService).toBeTruthy(); + expect(spy.calls.any()).toBe(true, 'getRecentLogs called'); }); + + it('should get data from AccessLogService', async(() => { + fixture.detectChanges(); + + fixture.whenStable().then(() => { // wait for async getRecentLogs + fixture.detectChanges(); + expect(component.recentLogs).toBeTruthy(); + expect(component.logsCache).toBeTruthy(); + expect(component.recentLogs.length).toEqual(2); + }); + })); + + it('should support filtering list by keywords', async(() => { + fixture.detectChanges(); + + fixture.whenStable().then(() => { + fixture.detectChanges(); + + component.doFilter('push'); + fixture.detectChanges(); + expect(component.recentLogs.length).toEqual(1); + let log: AccessLog = component.recentLogs[0]; + expect(log).toBeTruthy(); + expect(log.username).toEqual('admin'); + }); + })); + + it('should support refreshing', async(() => { + fixture.detectChanges(); + + fixture.whenStable().then(() => { + fixture.detectChanges(); + + component.doFilter('push'); + fixture.detectChanges(); + expect(component.recentLogs.length).toEqual(1); + }); + + component.refresh(); + fixture.detectChanges(); + fixture.whenStable().then(() => { + fixture.detectChanges(); + + expect(component.recentLogs.length).toEqual(2); + }); + })); + + it('should render data to view', async(() => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + fixture.detectChanges(); + + let de: DebugElement = fixture.debugElement.query(del => del.classes['datagrid-cell']); + expect(de).toBeTruthy(); + let el: HTMLElement = de.nativeElement; + expect(el).toBeTruthy(); + expect(el.textContent.trim()).toEqual('user91'); + }); + })); + }); diff --git a/src/ui_ng/lib/src/log/recent-log.template.ts b/src/ui_ng/lib/src/log/recent-log.template.ts index ed05bfd89b..a1ba7bcef3 100644 --- a/src/ui_ng/lib/src/log/recent-log.template.ts +++ b/src/ui_ng/lib/src/log/recent-log.template.ts @@ -35,7 +35,7 @@ export const LOG_TEMPLATE: string = ` {{l.repo_name}} {{l.repo_tag}} {{l.operation}} - {{l.op_time | date: 'short'}} + {{l.op_time}} {{ (recentLogs ? recentLogs.length : 0) }} {{'AUDIT_LOG.ITEMS' | translate}}