test(abc): add testes

.angular-cli.json

@@ -80,6 +80,7 @@
             "exclude": [
                 "./site/**/*",
                 "./src/app/**/*",
+                "./src/core/abc/charts/**/*",
                 "./src/polyfills.ts",
                 "./src/test.ts",
                 "./src/core/cli/**/*"

src/core/abc/charts/bar/bar.component.ts

@@ -29,13 +29,15 @@ export class G2BarComponent implements OnDestroy, OnChanges, OnInit {
     }
 
     @Input() color = 'rgba(24, 144, 255, 0.85)';
+
     @HostBinding('style.height.px')
     @Input()
     get height() { return this._height; }
     set height(value: any) {
         this._height = coerceNumberProperty(value);
     }
     private _height = 0;
+
     @Input() padding: number[];
     @Input() data: Array<{ x: any, y: any, [key: string]: any }>;
 
@@ -48,9 +50,9 @@ export class G2BarComponent implements OnDestroy, OnChanges, OnInit {
 
     // endregion
 
-    @HostBinding('class.g2-chart') _cls = true;
+    @HostBinding('class.g2-chart') private _cls = true;
 
-    @ViewChild('container') node: ElementRef;
+    @ViewChild('container') private node: ElementRef;
 
     chart: any;
     initFlag = false;

src/core/abc/charts/bar/bar.spec.ts

@@ -0,0 +1,85 @@
+import { Component, DebugElement, TemplateRef, ViewChild, OnInit } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+
+import { AdChartsModule } from '../charts.module';
+import { G2BarComponent } from './bar.component';
+
+describe('abc: bar', () => {
+    let fixture: ComponentFixture<TestComponent>;
+    let dl: DebugElement;
+    let context: TestComponent;
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            imports: [ AdChartsModule.forRoot() ],
+            declarations: [ TestComponent ]
+        });
+        fixture = TestBed.createComponent(TestComponent);
+        dl = fixture.debugElement;
+        context = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    afterEach(() => context.comp.ngOnDestroy());
+
+    function isText(cls: string, value: any) {
+        const el = dl.query(By.css(cls)).nativeElement as HTMLElement;
+        if (el) return el.innerText.trim();
+        return '';
+    }
+
+    function isExists(cls: string, stauts: boolean = true) {
+        if (stauts)
+            expect(dl.query(By.css(cls))).not.toBeNull();
+        else
+            expect(dl.query(By.css(cls))).toBeNull();
+    }
+
+    describe('#title', () => {
+        it('with string', () => {
+            isText('h4', context.title);
+        });
+        it('with template', () => {
+            context.title = context.titleTpl;
+            fixture.detectChanges();
+            isExists('#titleTpl');
+        });
+    });
+
+    it(`won't render when invalid data`, () => {
+        spyOn(G2, 'Chart');
+        context.data = null;
+        fixture.detectChanges();
+        expect(G2.Chart).not.toHaveBeenCalled();
+    });
+});
+
+@Component({
+    template: `
+    <bar #comp
+        [height]="height"
+        [title]="title"
+        [padding]="padding"
+        [data]="data"
+        [autoLabel]="autoLabel"></bar>
+    <ng-template #titleTpl><p id="titleTpl">titleTpl</p></ng-template>
+    `
+})
+class TestComponent implements OnInit {
+    @ViewChild('comp') comp: G2BarComponent;
+    data: any[] = [];
+    ngOnInit(): void {
+        for (let i = 0; i < 12; i += 1) {
+            this.data.push({
+                x: `${i + 1}月`,
+                y: Math.floor(Math.random() * 1000) + 200
+            });
+        }
+    }
+    @ViewChild('titleTpl') titleTpl: TemplateRef<void>;
+    title: string | TemplateRef<void> = 'title';
+    height = 0;
+    padding: number[];
+    autoLabel = true;
+}

src/core/abc/full-content/full-content.component.ts

@@ -23,9 +23,7 @@ export class FullContentComponent implements AfterViewInit, OnInit, OnChanges, O
     private inited = false;
     private srv$: Subscription;
     private route$: Subscription;
-
-    @HostBinding('attr.id')
-    id = `_full-content-${Math.random().toString(36).substring(2)}`;
+    private id = `_full-content-${Math.random().toString(36).substring(2)}`;
 
     @HostBinding('style.height.px')
     _height = 0;
@@ -69,15 +67,17 @@ export class FullContentComponent implements AfterViewInit, OnInit, OnChanges, O
         this.inited = true;
         this.bodyEl = this.doc.querySelector('body');
         this.bodyEl.classList.add(cls);
+        (this.el.nativeElement as HTMLElement).id = this.id;
         this.update();
         this.installResizeEvent();
         this.srv$ = <any>this.srv.change.subscribe(res => {
             if (res) this.toggle();
         });
         this.route$ = <any>this.router.events.pipe(
-            filter((e: any) => e instanceof ActivationStart || e instanceof ActivationEnd)
+            filter((e: any) => e instanceof ActivationStart || e instanceof ActivationEnd),
+            debounceTime(200)
         ).subscribe(e => {
-            if (!!this.doc.querySelector('#' + this.id)) {
+            if (!!document.querySelector('#' + this.id)) {
                 this.bodyEl.classList.add(cls);
                 this.updateFsCls();
             } else {

src/core/abc/full-content/full-content.spec.ts

@@ -4,7 +4,7 @@ import { By, DOCUMENT } from '@angular/platform-browser';
 import { RouterModule, Router, ActivationEnd, ActivationStart } from '@angular/router';
 import { APP_BASE_HREF } from '@angular/common';
 import { of } from 'rxjs/observable/of';
-import { delay } from 'rxjs/operators';
+import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 
 import { AdFullContentModule } from './full-content.module';
 import { FullContentComponent } from './full-content.component';
@@ -131,30 +131,34 @@ describe('abc: full-content', () => {
             expect(bodyEl.getBoundingClientRect).toHaveBeenCalled();
             expect(context.comp._height).toBe(bodyHeight - el.getBoundingClientRect().top - context.padding);
         }));
-        it('should be add class when go to include full-content route', (done: () => void) => {
+        it('should be add class when go to include full-content route', () => {
+            const eventsSub = new BehaviorSubject<any>(null);
             class MockRouter {
-                events = of(new ActivationStart(null)).pipe(delay(100));
+                events = eventsSub;
             }
             TestBed.overrideProvider(Router, { useFactory: () => {
                 return new MockRouter();
             }, deps: [] });
             createComp();
-            setTimeout(() => {
-                expect(bodyEl.classList.contains('full-content')).toBe(true);
-                done();
-            }, 101);
+
+            eventsSub.next(new ActivationStart(null));
+            eventsSub.complete();
+            expect(bodyEl.classList.contains('full-content')).toBe(true);
         });
         it('should be clear class when go to other route', () => {
+            const eventsSub = new BehaviorSubject<any>(null);
             class MockRouter {
-                events = of(new ActivationEnd(null));
+                events = eventsSub;
             }
             TestBed.overrideProvider(Router, { useFactory: () => {
                 return new MockRouter();
             }, deps: [] });
-            bodyEl = document.querySelector('body');
-            bodyEl.classList.add('full-content');
-            expect(bodyEl.classList.contains('full-content')).toBe(true);
             createComp();
+            // mock component destroy
+            (dl.nativeElement as HTMLElement).innerHTML = ``;
+
+            eventsSub.next(new ActivationEnd(null));
+            eventsSub.complete();
             expect(bodyEl.classList.contains('full-content')).toBe(false);
         });
     });

src/core/abc/notice-icon/index.md

@@ -19,7 +19,7 @@ loading | 弹出卡片加载状态 | `boolean` | `false`
 select | 点击列表项的回调，参数：`{type:'',item:any}` | `EventEmitter` | -
 clear | 点击清空按钮的回调 | `EventEmitter` | -
 popoverVisible | 手动控制Popover显示 | `boolean` | `false`
-popupVisibleChange | Popover显隐回调 | `EventEmitter` | -
+popoverVisibleChange | Popover显隐回调 | `EventEmitter` | -
 
 ### NoticeItem
 

src/core/abc/notice-icon/index.ts

@@ -1,4 +1,4 @@
 export { NoticeIconComponent } from './notice-icon.component';
 export { NoticeListComponent } from './notice-list.component';
-export { NoticeItem } from './notice-item';
+export * from './interface';
 export { AdNoticeIconModule } from './notice-icon.module';

src/core/abc/notice-icon/notice-icon.component.ts

@@ -1,6 +1,6 @@
 import { Component, Input, Output, EventEmitter, HostListener, HostBinding, ViewEncapsulation } from '@angular/core';
 import { coerceNumberProperty, coerceBooleanProperty } from '@angular/cdk/coercion';
-import { NoticeItem } from './notice-item';
+import { NoticeItem } from './interface';
 
 @Component({
     selector: 'notice-icon',
@@ -32,7 +32,8 @@ import { NoticeItem } from './notice-item';
         </ng-template>
     </nz-popover>
     `,
-    styleUrls: [ './notice-icon.less' ]
+    styleUrls: [ './notice-icon.less' ],
+    preserveWhitespaces: false
 })
 export class NoticeIconComponent {
     @Input() data: NoticeItem[] = [];
@@ -72,10 +73,10 @@ export class NoticeIconComponent {
     }
     private _popoverVisible = false;
 
-    @Output() popupVisibleChange = new EventEmitter<boolean>();
+    @Output() popoverVisibleChange = new EventEmitter<boolean>();
 
     onVisibleChange(result: boolean) {
-        this.popupVisibleChange.emit(result);
+        this.popoverVisibleChange.emit(result);
     }
 
     onSelect(i: any) {

src/core/abc/notice-icon/notice-icon.spec.ts

@@ -0,0 +1,124 @@
+import { Component, DebugElement, TemplateRef, ViewChild } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+
+import { AdNoticeIconModule } from './notice-icon.module';
+import { NoticeIconComponent } from './notice-icon.component';
+import { NoticeItem } from './interface';
+
+describe('abc: notice-icon', () => {
+    let fixture: ComponentFixture<TestComponent>;
+    let dl: DebugElement;
+    let context: TestComponent;
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            imports: [ NoopAnimationsModule, AdNoticeIconModule.forRoot() ],
+            declarations: [ TestComponent ]
+        });
+        fixture = TestBed.createComponent(TestComponent);
+        dl = fixture.debugElement;
+        context = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    function isText(cls: string, value: any) {
+        const el = dl.query(By.css(cls)).nativeElement as HTMLElement;
+        if (el) return el.innerText.trim();
+        return '';
+    }
+
+    function isExists(cls: string, stauts: boolean = true) {
+        if (stauts)
+            expect(dl.query(By.css(cls))).not.toBeNull();
+        else
+            expect(dl.query(By.css(cls))).toBeNull();
+    }
+
+    describe('when not data', () => {
+        beforeEach(() => context.data = []);
+        it('should be count', () => {
+            context.count = 5;
+            fixture.detectChanges();
+            const cur = dl.query(By.css('.ant-scroll-number-only .current')).nativeElement as HTMLElement;
+            expect(+cur.innerText).toBe(context.count);
+        });
+        it('should be dot', () => {
+            context.dot = true;
+            fixture.detectChanges();
+            expect(dl.query(By.css('.ant-badge-dot'))).not.toBeNull();
+        });
+    });
+
+    describe('when has data', () => {
+        it('should be popover list via popoverVisible property', () => {
+            spyOn(context, 'popupVisibleChange');
+            expect(context.popoverVisible).toBeUndefined();
+            context.popoverVisible = true;
+            fixture.detectChanges();
+            expect(context.popoverVisible).toBe(true);
+            expect(context.popupVisibleChange).toHaveBeenCalled();
+        });
+        it('should be popover list via click', () => {
+            expect(context.popoverVisible).toBeUndefined();
+            (dl.query(By.css('.item')).nativeElement as HTMLElement).click();
+            fixture.detectChanges();
+            expect(context.popoverVisible).toBe(true);
+        });
+        it('should be control loading in visible popover', () => {
+            context.loading = true;
+            context.popoverVisible = true;
+            fixture.detectChanges();
+            isExists('.ant-spin-spinning');
+        });
+        it('should be select item', () => {
+            spyOn(context, 'select');
+            context.popoverVisible = true;
+            fixture.detectChanges();
+            expect(context.select).not.toHaveBeenCalled();
+            (dl.query(By.css('nz-list-item')).nativeElement as HTMLElement).click();
+            fixture.detectChanges();
+            expect(context.select).toHaveBeenCalled();
+        });
+        it('should be clear', () => {
+            spyOn(context, 'clear');
+            context.popoverVisible = true;
+            fixture.detectChanges();
+            expect(context.clear).not.toHaveBeenCalled();
+            (dl.query(By.css('.clear')).nativeElement as HTMLElement).click();
+            fixture.detectChanges();
+            expect(context.clear).toHaveBeenCalled();
+        });
+    });
+});
+
+@Component({
+    template: `
+    <notice-icon #comp
+        [data]="data"
+        [count]="count"
+        [dot]="dot"
+        [loading]="loading"
+        (select)="select($event)"
+        (clear)="clear($event)"
+        [(popoverVisible)]="popoverVisible"
+        (popoverVisibleChange)="popupVisibleChange($event)"></notice-icon>
+    `
+})
+class TestComponent {
+    @ViewChild('comp') comp: NoticeIconComponent;
+    data: NoticeItem[] = [
+        {
+            title: 'test',
+            list: [ { 'id': '000000001', 'avatar': 'https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png', 'title': '你收到了 14 份新周报', 'datetime': '7 个月前', 'type': '通知'}, {'id': '000000002', 'avatar': 'https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png', 'title': '你推荐的 曲妮妮 已通过第三轮面试', 'datetime': '7 个月前', 'type': '通知'}, {'id': '000000003', 'avatar': 'https://gw.alipayobjects.com/zos/rmsportal/kISTdvpyTAhtGxpovNWd.png', 'title': '这种模板可以区分多种通知类型', 'datetime': '7 个月前', 'read': true, 'type': '通知'}, {'id': '000000004', 'avatar': 'https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png', 'title': '左侧图标用于区分不同的类型', 'datetime': '7 个月前', 'type': '通知'}, {'id': '000000005', 'avatar': 'https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png', 'title': '内容不要超过两行字，超出时自动截断', 'datetime': '7 个月前', 'type': '通知'} ]
+        }
+    ];
+    count = 10;
+    dot = false;
+    loading = false;
+    popoverVisible: boolean;
+    select() {}
+    clear() {}
+    popupVisibleChange() {}
+}

src/core/abc/notice-icon/notice-list.component.ts

@@ -1,5 +1,5 @@
 import { Component, Input, Output, EventEmitter } from '@angular/core';
-import { NoticeItem } from './notice-item';
+import { NoticeItem } from './interface';
 
 @Component({
     selector: 'notice-list',
@@ -27,7 +27,8 @@ import { NoticeItem } from './notice-item';
         </nz-list>
         <div class="clear" (click)="onClear()">清空{{data.title}}</div>
     </ng-template>
-    `
+    `,
+    preserveWhitespaces: false
 })
 export class NoticeListComponent {
     @Input() data: NoticeItem;