fix(module:empty): fix locale cannot change dynamically (NG-ZORRO#2866)

* fix(module:empty): fix locale cannot change dynamically

* fix: test

components/empty/nz-empty.component.html

@@ -5,7 +5,7 @@
 </div>
 <p class="ant-empty-description">
   <ng-container *nzStringTemplateOutlet="nzNotFoundContent">
-    {{ nzNotFoundContent || ('Empty.description' | nzI18n) }}
+    {{ shouldRenderContent ? nzNotFoundContent : locale['description'] }}
   </ng-container>
 </p>
 <div class="ant-empty-footer" *ngIf="nzNotFoundFooter">

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<void>;
   @Input() nzNotFoundContent: string | TemplateRef<void>;
   @Input() nzNotFoundFooter: string | TemplateRef<void>;
 
-  // NOTE: It would be very hack to use `ContentChild`, because Angular could tell if user actually pass something to
-  // <ng-content>. 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 <ng-content>.
+  // See: https://github.com/angular/angular/issues/12530.
   // I can use a directive but this would expose the name `footer`.
   // @ContentChild(TemplateRef) nzNotFoundFooter: TemplateRef<void>;
 
   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<void>();
+
+  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();
+  }
 }

components/empty/nz-empty.spec.ts

@@ -2,7 +2,11 @@ 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 { 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 +15,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 +80,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 +102,24 @@ 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');
+    });
   });
 
   /**
@@ -165,7 +186,7 @@ describe('nz-empty', () => {
         };
 
         // String.
-        testComponent.changeToString();
+        testComponent.emptyService.setDefaultContent('empty');
         refresh();
         expect(embedComponent).toBeTruthy();
         expect(emptyComponent).toBeFalsy();
@@ -209,7 +230,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 +310,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({

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,

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', () => {