Add test spec for log component

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"
     }
 }

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',

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<RecentLogComponent>;
   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<AccessLog[]> | Promise<AccessLog[]> | AccessLog[] {
-        return Observable.of([]);
-      }
-
-      public getRecentLogs(lines: number): Observable<AccessLog[]> | Promise<AccessLog[]> | 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');
+    });
+  }));
+
 });

src/ui_ng/lib/src/log/recent-log.template.ts

@@ -35,7 +35,7 @@ export const LOG_TEMPLATE: string = `
                 <clr-dg-cell>{{l.repo_name}}</clr-dg-cell>
                 <clr-dg-cell>{{l.repo_tag}}</clr-dg-cell>
                 <clr-dg-cell>{{l.operation}}</clr-dg-cell>
-                <clr-dg-cell>{{l.op_time | date: 'short'}}</clr-dg-cell>
+                <clr-dg-cell>{{l.op_time}}</clr-dg-cell>
             </clr-dg-row>
             <clr-dg-footer>{{ (recentLogs ? recentLogs.length : 0) }} {{'AUDIT_LOG.ITEMS' | translate}}</clr-dg-footer>
         </clr-datagrid>