From 16fb6f6e5a2c9921a70b4f09e2359c0a0ddff1b6 Mon Sep 17 00:00:00 2001 From: Wendell Date: Fri, 1 Feb 2019 15:58:15 +0800 Subject: [PATCH 1/2] fix(module:empty): fix locale cannot change dynamically --- components/empty/nz-empty.component.html | 2 +- components/empty/nz-empty.component.ts | 47 +++++++++++++++++---- components/empty/nz-empty.spec.ts | 53 ++++++++++++++++-------- components/icon/nz-icon.service.ts | 7 ++++ 4 files changed, 82 insertions(+), 27 deletions(-) diff --git a/components/empty/nz-empty.component.html b/components/empty/nz-empty.component.html index 3936ab2bc24..9542c8aaa5b 100644 --- a/components/empty/nz-empty.component.html +++ b/components/empty/nz-empty.component.html @@ -5,7 +5,7 @@

- {{ nzNotFoundContent || ('Empty.description' | nzI18n) }} + {{ shouldRenderContent ? nzNotFoundContent : locale['description'] }}

diff --git a/components/empty/nz-empty.component.ts b/components/empty/nz-empty.component.ts index ac3cdfe5bdd..d15eb43e910 100644 --- a/components/empty/nz-empty.component.ts +++ b/components/empty/nz-empty.component.ts @@ -1,13 +1,16 @@ import { - ChangeDetectionStrategy, + ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, - OnChanges, + OnChanges, OnDestroy, OnInit, SimpleChanges, TemplateRef, ViewEncapsulation } from '@angular/core'; import { DomSanitizer } from '@angular/platform-browser'; +import { Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; +import { NzI18nService } from '../i18n/nz-i18n.service'; import { emptyImage } from './nz-empty-config'; @@ -21,25 +24,53 @@ import { emptyImage } from './nz-empty-config'; 'class': 'ant-empty' } }) -export class NzEmptyComponent implements OnChanges { +export class NzEmptyComponent implements OnChanges, OnInit, OnDestroy { @Input() nzNotFoundImage: string | TemplateRef; @Input() nzNotFoundContent: string | TemplateRef; @Input() nzNotFoundFooter: string | TemplateRef; - // NOTE: It would be very hack to use `ContentChild`, because Angular could tell if user actually pass something to - // . See: https://github.com/angular/angular/issues/12530. + // NOTE: It would be very hack to use `ContentChild`, because Angular could + // tell if user actually pass something to . + // See: https://github.com/angular/angular/issues/12530. // I can use a directive but this would expose the name `footer`. // @ContentChild(TemplateRef) nzNotFoundFooter: TemplateRef; defaultSvg = this.sanitizer.bypassSecurityTrustResourceUrl(emptyImage); isContentString = false; + locale = {}; - constructor(private sanitizer: DomSanitizer) { + get shouldRenderContent(): boolean { + const content = this.nzNotFoundContent; + return !!(content || typeof content === 'string'); + } + + private destroy$ = new Subject(); + + constructor( + private sanitizer: DomSanitizer, + private i18n: NzI18nService, + private cdr: ChangeDetectorRef + ) { } ngOnChanges(changes: SimpleChanges): void { - if (changes.nzNotFoundContent) { - this.isContentString = typeof changes.nzNotFoundContent.currentValue === 'string'; + const { nzNotFoundContent } = changes; + if (nzNotFoundContent) { + this.isContentString = typeof nzNotFoundContent.currentValue === 'string'; } } + + ngOnInit(): void { + this.i18n.localeChange.pipe( + takeUntil(this.destroy$) + ).subscribe(() => { + this.locale = this.i18n.getLocaleData('Empty'); + this.cdr.markForCheck(); + }); + } + + ngOnDestroy(): void { + this.destroy$.next(); + this.destroy$.complete(); + } } diff --git a/components/empty/nz-empty.spec.ts b/components/empty/nz-empty.spec.ts index 34addd76ad7..3cf5fcf5db7 100644 --- a/components/empty/nz-empty.spec.ts +++ b/components/empty/nz-empty.spec.ts @@ -2,7 +2,12 @@ import { CommonModule } from '@angular/common'; import { Component, Inject, NgModule, TemplateRef, ViewChild } from '@angular/core'; import { fakeAsync, tick, TestBed } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; + +import { NzI18nService } from '../i18n'; +import en_US from '../i18n/languages/en_US'; +import zh_CN from '../i18n/languages/zh_CN'; import { NzListModule } from '../list'; + import { NzEmbedEmptyComponent } from './nz-embed-empty.component'; import { NZ_DEFAULT_EMPTY_CONTENT, NZ_EMPTY_COMPONENT_NAME } from './nz-empty-config'; import { NzEmptyComponent } from './nz-empty.component'; @@ -11,23 +16,24 @@ import { NzEmptyService } from './nz-empty.service'; describe('nz-empty', () => { let fixture; + let testBed; let testComponent; let emptyComponent; let embedComponent; - /** - * Basic usage. - */ describe('basic', () => { beforeEach(() => { - TestBed.configureTestingModule({ + testBed = TestBed.configureTestingModule({ imports : [ CommonModule, NzEmptyModule ], declarations: [ NzEmptyTestBasicComponent ] - }).compileComponents(); + }); + + TestBed.compileComponents(); fixture = TestBed.createComponent(NzEmptyTestBasicComponent); testComponent = fixture.debugElement.componentInstance; emptyComponent = fixture.debugElement.query(By.directive(NzEmptyComponent)); + fixture.detectChanges(); }); @@ -75,7 +81,6 @@ describe('nz-empty', () => { testComponent.image = 'https://ng.ant.design/assets/img/logo.svg'; testComponent.content = 'zorro icon'; testComponent.footer = 'Footer'; - fixture.detectChanges(); expect(emptyComponent.nativeElement.classList.contains('ant-empty')).toBe(true); @@ -98,7 +103,26 @@ describe('nz-empty', () => { expect(footerEl.innerText).toBe('Footer'); }); - // TODO: need to add i18n test later. + it('should render empty string as content', () => { + testComponent.content = ''; + fixture.detectChanges(); + + const contentEl = emptyComponent.nativeElement.querySelector('.ant-empty-description'); + expect(contentEl).not.toBeFalsy(); + expect(contentEl.tagName).toBe('P'); + expect(contentEl.innerText).toBe(''); + }); + + it('#i18n', () => { + const contentEl = emptyComponent.nativeElement.lastElementChild; + expect(contentEl.innerText.trim()).toBe('暂无数据'); + + testBed.get(NzI18nService).setLocale(en_US); + fixture.detectChanges(); + expect(contentEl.innerText.trim()).toBe('No Data'); + + testBed.get(NzI18nService).setLocale(zh_CN); + }); }); /** @@ -165,7 +189,7 @@ describe('nz-empty', () => { }; // String. - testComponent.changeToString(); + testComponent.emptyService.setDefaultContent('empty'); refresh(); expect(embedComponent).toBeTruthy(); expect(emptyComponent).toBeFalsy(); @@ -209,7 +233,8 @@ describe('nz-empty', () => { it('should raise error when set a invalid default value', () => { expect(() => { - testComponent.changeToInvalid(); + // tslint:disable-next-line:no-any + testComponent.emptyService.setDefaultContent(false as any); fixture.detectChanges(); tick(); fixture.detectChanges(); @@ -288,24 +313,16 @@ export class NzEmptyTestServiceComponent { noResult = undefined; - constructor(private emptyService: NzEmptyService) { + constructor(public emptyService: NzEmptyService) { } reset(): void { this.emptyService.resetDefault(); } - changeToString(): void { - this.emptyService.setDefaultContent('empty'); - } - changeToTemplate(): void { this.emptyService.setDefaultContent(this.template); } - - changeToInvalid(): void { - this.emptyService.setDefaultContent(false as any); // tslint:disable-line:no-any - } } @Component({ diff --git a/components/icon/nz-icon.service.ts b/components/icon/nz-icon.service.ts index 8971920c9cc..88d6386be19 100644 --- a/components/icon/nz-icon.service.ts +++ b/components/icon/nz-icon.service.ts @@ -8,6 +8,8 @@ import { CalendarOutline, CaretDownFill, CaretDownOutline, + CaretUpFill, + CaretUpOutline, CheckCircleFill, CheckCircleOutline, CheckOutline, @@ -43,11 +45,16 @@ export interface NzIconfontOption { } export const NZ_ICONS = new InjectionToken('nz_icons'); + export const NZ_ICON_DEFAULT_TWOTONE_COLOR = new InjectionToken('nz_icon_default_twotone_color'); + export const DEFAULT_TWOTONE_COLOR = '#1890ff'; + export const NZ_ICONS_USED_BY_ZORRO: IconDefinition[] = [ BarsOutline, CalendarOutline, + CaretUpFill, + CaretUpOutline, CaretDownFill, CaretDownOutline, CheckCircleFill, From 0b2c7d2ee9cfdfa7458385872342ebeb63a1acf1 Mon Sep 17 00:00:00 2001 From: Wendell Date: Sat, 2 Feb 2019 19:35:37 +0800 Subject: [PATCH 2/2] fix: test --- components/empty/nz-empty.spec.ts | 3 --- components/table/nz-table.spec.ts | 3 +-- 2 files changed, 1 insertion(+), 5 deletions(-) diff --git a/components/empty/nz-empty.spec.ts b/components/empty/nz-empty.spec.ts index 3cf5fcf5db7..484835bf0b4 100644 --- a/components/empty/nz-empty.spec.ts +++ b/components/empty/nz-empty.spec.ts @@ -5,7 +5,6 @@ import { By } from '@angular/platform-browser'; import { NzI18nService } from '../i18n'; import en_US from '../i18n/languages/en_US'; -import zh_CN from '../i18n/languages/zh_CN'; import { NzListModule } from '../list'; import { NzEmbedEmptyComponent } from './nz-embed-empty.component'; @@ -120,8 +119,6 @@ describe('nz-empty', () => { testBed.get(NzI18nService).setLocale(en_US); fixture.detectChanges(); expect(contentEl.innerText.trim()).toBe('No Data'); - - testBed.get(NzI18nService).setLocale(zh_CN); }); }); diff --git a/components/table/nz-table.spec.ts b/components/table/nz-table.spec.ts index ba1b569d3ec..87bab8358cc 100644 --- a/components/table/nz-table.spec.ts +++ b/components/table/nz-table.spec.ts @@ -216,8 +216,7 @@ describe('nz-table', () => { expect(table.nativeElement.querySelector('.ant-table-placeholder').innerText.trim()).toBe('暂无数据'); injector.get(NzI18nService).setLocale(en_US); fixture.detectChanges(); - // TODO: deal with i18n test with a unified way later - expect(table.nativeElement.querySelector('.ant-table-placeholder').innerText.trim()).toBe('暂无数据'); + expect(table.nativeElement.querySelector('.ant-table-placeholder').innerText.trim()).toBe('No Data'); }); }); describe('scroll nz-table', () => {