From 9ea40da0191a2abad30d8956ae8eead4823b0b7b Mon Sep 17 00:00:00 2001 From: Wendell Date: Fri, 9 Aug 2019 12:11:10 +0800 Subject: [PATCH] feat(module:statistics): countdown support finish event (#3902) --- components/statistic/doc/index.en-US.md | 1 + components/statistic/doc/index.zh-CN.md | 1 + .../statistic/nz-countdown.component.ts | 4 + components/statistic/nz-countdown.spec.ts | 77 ++++++++++++------- components/statistic/nz-time-range.spec.ts | 20 ++--- 5 files changed, 65 insertions(+), 38 deletions(-) diff --git a/components/statistic/doc/index.en-US.md b/components/statistic/doc/index.en-US.md index d714e852577..88b0fa728de 100644 --- a/components/statistic/doc/index.en-US.md +++ b/components/statistic/doc/index.en-US.md @@ -42,6 +42,7 @@ import { NzStatisticModule } from 'ng-zorro-antd/statistic'; | `[nzTitle]` | Title | `string \| TemplateRef` | - | | `[nzValue]` | Target time in timestamp form | `string \| number` | - | | `[nzValueTemplate]` | Custom template to render a time | `TemplateRef<{ $implicit: number }>` | - | +| `(nzCountdownFinish)` | Emit when countdown finishes | `void` | - | ### nzFormat diff --git a/components/statistic/doc/index.zh-CN.md b/components/statistic/doc/index.zh-CN.md index 5c5ffd8d687..e039721c3d8 100644 --- a/components/statistic/doc/index.zh-CN.md +++ b/components/statistic/doc/index.zh-CN.md @@ -43,6 +43,7 @@ import { NzStatisticModule } from 'ng-zorro-antd/statistic'; | `[nzTitle]` | 数值的标题 | `string \| TemplateRef` | - | | `[nzValue]` | 时间戳格式的目标时间 | `string \| number` | - | | `[nzValueTemplate]` | 自定义时间展示 | `TemplateRef<{ $implicit: number }>` | - | +| `(nzCountdownFinish)` | 当倒计时完成时发出事件 | `void` | - | ### nzFormat diff --git a/components/statistic/nz-countdown.component.ts b/components/statistic/nz-countdown.component.ts index fba73165e26..d77ad8e5f44 100644 --- a/components/statistic/nz-countdown.component.ts +++ b/components/statistic/nz-countdown.component.ts @@ -11,11 +11,13 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, + EventEmitter, Input, NgZone, OnChanges, OnDestroy, OnInit, + Output, SimpleChanges, ViewEncapsulation } from '@angular/core'; @@ -34,6 +36,7 @@ import { NzStatisticComponent } from './nz-statistic.component'; export class NzCountdownComponent extends NzStatisticComponent implements OnInit, OnChanges, OnDestroy { /** @override */ @Input() nzFormat: string = 'HH:mm:ss'; + @Output() readonly nzCountdownFinish = new EventEmitter(); diff: number; @@ -97,6 +100,7 @@ export class NzCountdownComponent extends NzStatisticComponent implements OnInit if (this.diff === 0) { this.stopTimer(); + this.nzCountdownFinish.next(); } } } diff --git a/components/statistic/nz-countdown.spec.ts b/components/statistic/nz-countdown.spec.ts index 3794afd12c9..341eeafe0f0 100644 --- a/components/statistic/nz-countdown.spec.ts +++ b/components/statistic/nz-countdown.spec.ts @@ -5,6 +5,45 @@ import { By } from '@angular/platform-browser'; import { NzCountdownComponent } from './nz-countdown.component'; import { NzStatisticModule } from './nz-statistic.module'; +@Component({ + template: ` + + + + {{ diff }} + + ` +}) +export class NzTestCountdownComponent { + @ViewChild(NzCountdownComponent, { static: true }) countdown: NzCountdownComponent; + @ViewChild('tpl', { static: true }) tpl: TemplateRef; + + format: string; + value: number; + template: TemplateRef; + finished = 0; + + resetTimerWithFormat(format: string): void { + this.format = format; + this.value = new Date().getTime() + 1000 * 60 * 60 * 24 * 2 + 1000 * 30; + } + + resetWithTemplate(): void { + this.template = this.tpl; + this.value = new Date().getTime() + 1000 * 60 * 60 * 24 * 2 + 1000 * 30; + } + + onFinish(): void { + this.finished += 1; + } +} + describe('nz-countdown', () => { let fixture: ComponentFixture; let testComponent: NzTestCountdownComponent; @@ -54,33 +93,15 @@ describe('nz-countdown', () => { expect(countdownEl.nativeElement.querySelector('.ant-statistic-content-value').innerText).toBe('172829900'); testComponent.countdown.stopTimer(); })); - }); -}); -@Component({ - template: ` - - - - {{ diff }} - - ` -}) -export class NzTestCountdownComponent { - @ViewChild(NzCountdownComponent, { static: true }) countdown: NzCountdownComponent; - @ViewChild('tpl', { static: true }) tpl: TemplateRef; - - format: string; - value: number; - template: TemplateRef; + it('should stop timer and emit event', fakeAsync(() => { + const nearTime = new Date().getTime() + 1000 * 2; + testComponent.value = nearTime; - resetTimerWithFormat(format: string): void { - this.format = format; - this.value = new Date().getTime() + 1000 * 60 * 60 * 24 * 2 + 1000 * 30; - } - - resetWithTemplate(): void { - this.template = this.tpl; - this.value = new Date().getTime() + 1000 * 60 * 60 * 24 * 2 + 1000 * 30; - } -} + fixture.detectChanges(); + tick(3000); + fixture.detectChanges(); + expect(testComponent.finished).toBe(1); + })); + }); +}); diff --git a/components/statistic/nz-time-range.spec.ts b/components/statistic/nz-time-range.spec.ts index ee4b9dcce00..d6786fa728e 100644 --- a/components/statistic/nz-time-range.spec.ts +++ b/components/statistic/nz-time-range.spec.ts @@ -3,6 +3,16 @@ import { Component } from '@angular/core'; import { ComponentFixture, TestBed } from '@angular/core/testing'; import { NzStatisticModule } from './nz-statistic.module'; +@Component({ + template: ` + {{ diff | nzTimeRange: format }} + ` +}) +export class NzTestTimeRangeComponent { + diff = 1000 * 60 * 60 * 24 * 2 + 1000 * 30; + format = 'HH:mm:ss'; +} + describe('nz time range pipeline', () => { let fixture: ComponentFixture; let testComponent: NzTestTimeRangeComponent; @@ -46,13 +56,3 @@ describe('nz time range pipeline', () => { }); }); }); - -@Component({ - template: ` - {{ diff | nzTimeRange: format }} - ` -}) -export class NzTestTimeRangeComponent { - diff = 1000 * 60 * 60 * 24 * 2 + 1000 * 30; - format = 'HH:mm:ss'; -}