test(module:typography): add the suffix test

components/typography/demo/suffix.ts

@@ -4,7 +4,9 @@ import { Component } from '@angular/core';
   selector: 'nz-demo-typography-suffix',
   template: `
     <nz-slider [(ngModel)]="rows" [nzMax]="10" [nzMin]="1"></nz-slider>
-    <p nz-paragraph nzEllipsis [nzEllipsisRows]="rows" [nzSuffix]="suffix">{{ content }}</p>
+    <p nz-paragraph nzEllipsis nzExpandable [attr.title]="content + suffix" [nzEllipsisRows]="rows" [nzSuffix]="suffix">
+      {{ content }}
+    </p>
   `
 })
 export class NzDemoTypographySuffixComponent {

components/typography/doc/index.en-US.md

@@ -24,7 +24,7 @@ Basic text writing, including headings, body text, lists, and more.
 | `[nzCopyable]` | Can copy, require use `[nzContent]` | `boolean` | `false` ||
 | `[nzEditable]` | Editable, require use `[nzContent]` | `boolean` | `false` ||
 | `[nzEllipsis]` | Display ellipsis when overflow, require use `[nzContent]` when dynamic content | `boolean` | `false` ||
-| `[nzSuffix]` | Set the text suffix | `string` | - ||
+| `[nzSuffix]` | The text suffix when used `nzEllipsis` | `string` | - ||
 | `[nzCopyText]` | Customize the copy text | `string` | - ||
 | `[nzDisabled]` | Disable content | `boolean` | `false` ||
 | `[nzExpandable]` | Expandable when ellipsis | `boolean` | `false` ||

components/typography/doc/index.zh-CN.md

@@ -25,7 +25,7 @@ cols: 1
 | `[nzEditable]` | 是否可编辑，需要配合 `[nzContent]` 使用 | `boolean` | `false` |
 | `[nzEllipsis]` | 自动溢出省略，动态内容时需要配合 `[nzContent]` 使用 | `boolean` | `false` |
 | `[nzExpandable]` | 自动溢出省略时是否可展开 | `boolean` | `false` |
-| `[nzSuffix]` | 设置文本后缀 | `string` | - |
+| `[nzSuffix]` | 自动溢出省略时的文本后缀 | `string` | - |
 | `[nzCopyText]` | 自定义被拷贝的文本 | `string` | - |
 | `[nzDisabled]` | 禁用文本 | `boolean` | `false` |
 | `[nzEllipsisRows]` | 自动溢出省略时省略行数 | `number` | `1` | ✅ |

components/typography/nz-typography.component.html

@@ -12,7 +12,9 @@
       [ngTemplateOutletContext]="{ content: nzContent }"
     ></ng-template>
   </ng-container>
-  <ng-container *ngIf="nzEllipsis && !expanded && (nzEllipsisRows > 1 || nzExpandable || nzSuffix)">
+  <ng-container
+    *ngIf="(nzEllipsis && !expanded && (nzEllipsisRows > 1 || nzExpandable)) || nzSuffix"
+  >
     <span #ellipsisContainer></span>
     <ng-container *ngIf="isEllipsis">{{ ellipsisStr }}</ng-container>
     <ng-container *ngIf="nzSuffix">{{ nzSuffix }}</ng-container>

components/typography/nz-typography.component.ts

@@ -7,6 +7,7 @@
  */
 
 import { Platform } from '@angular/cdk/platform';
+import { DOCUMENT } from '@angular/common';
 import {
   AfterViewInit,
   ChangeDetectionStrategy,
@@ -15,6 +16,7 @@ import {
   ElementRef,
   EmbeddedViewRef,
   EventEmitter,
+  Inject,
   Input,
   OnChanges,
   OnDestroy,
@@ -48,6 +50,7 @@ import { NzTextCopyComponent } from './nz-text-copy.component';
 import { NzTextEditComponent } from './nz-text-edit.component';
 
 const NZ_CONFIG_COMPONENT_NAME = 'typography';
+const EXPAND_ELEMENT_CLASSNAME = 'ant-typography-expand';
 
 @Component({
   selector: `
@@ -98,6 +101,8 @@ export class NzTypographyComponent implements OnInit, AfterViewInit, OnDestroy,
 
   // tslint:disable-next-line:no-any
   locale: any = {};
+  document: Document;
+  expandableBtnElementCache: HTMLElement | null = null;
   editing = false;
   ellipsisText: string | undefined;
   cssEllipsis: boolean = false;
@@ -125,8 +130,11 @@ export class NzTypographyComponent implements OnInit, AfterViewInit, OnDestroy,
     private renderer: Renderer2,
     private platform: Platform,
     private i18n: NzI18nService,
+    @Inject(DOCUMENT) document: any, // tslint:disable-line no-any
     private nzDomEventService: NzDomEventService
-  ) {}
+  ) {
+    this.document = document;
+  }
 
   onTextCopy(text: string): void {
     this.nzCopy.emit(text);
@@ -188,7 +196,11 @@ export class NzTypographyComponent implements OnInit, AfterViewInit, OnDestroy,
       return;
     }
     const { viewRef, removeView } = this.getOriginContentViewRef();
-    const fixedNodes = [this.textCopyRef, this.textEditRef, this.expandableBtn].filter(e => e && e.nativeElement).map(e => e.nativeElement);
+    const fixedNodes = [this.textCopyRef, this.textEditRef].filter(e => e && e.nativeElement).map(e => e.nativeElement);
+    const expandableBtnElement = this.getExpandableBtnElement();
+    if (expandableBtnElement) {
+      fixedNodes.push(expandableBtnElement);
+    }
     const { contentNodes, text, ellipsis } = measure(
       this.host.nativeElement,
       this.nzEllipsisRows,
@@ -212,6 +224,24 @@ export class NzTypographyComponent implements OnInit, AfterViewInit, OnDestroy,
     this.cdr.markForCheck();
   }
 
+  // Need to create the element for calculation size before view init
+  private getExpandableBtnElement(): HTMLElement | null {
+    if (this.nzExpandable) {
+      const expandText = this.locale ? this.locale.expand : '';
+      const cache = this.expandableBtnElementCache;
+      if (!cache || cache.innerText === expandText) {
+        const el = this.document.createElement('a');
+        el.className = EXPAND_ELEMENT_CLASSNAME;
+        el.innerText = expandText;
+        this.expandableBtnElementCache = el;
+      }
+      return this.expandableBtnElementCache;
+    } else {
+      this.expandableBtnElementCache = null;
+      return null;
+    }
+  }
+
   private renderAndSubscribeWindowResize(): void {
     if (this.platform.isBrowser) {
       this.windowResizeSubscription.unsubscribe();
@@ -255,6 +285,7 @@ export class NzTypographyComponent implements OnInit, AfterViewInit, OnDestroy,
   ngOnDestroy(): void {
     this.destroy$.next();
     this.destroy$.complete();
+    this.expandableBtnElementCache = null;
     this.windowResizeSubscription.unsubscribe();
   }
 }

components/typography/nz-typography.spec.ts

@@ -260,8 +260,7 @@ describe('typography', () => {
       viewport.reset();
     }));
 
-    // TODO Uncaught RangeError: Maximum call stack size exceeded thrown
-    xit('should resize work', fakeAsync(() => {
+    it('should resize work', fakeAsync(() => {
       testComponent.expandable = true;
       viewport.set(400, 1000);
       dispatchFakeEvent(window, 'resize');
@@ -295,6 +294,39 @@ describe('typography', () => {
       });
       viewport.reset();
     }));
+
+    it('should suffix work', fakeAsync(() => {
+      testComponent.expandable = true;
+      testComponent.suffix = 'The suffix.';
+
+      {
+        viewport.set(8000, 1000);
+        dispatchFakeEvent(window, 'resize');
+        fixture.detectChanges();
+        tick(32);
+        fixture.detectChanges();
+        const el = componentElement.querySelector('.dynamic') as HTMLParagraphElement;
+        expect(el.innerText.endsWith('The suffix.')).toBe(true);
+        expect(el.innerText.includes('...')).toBe(false);
+      }
+
+      {
+        viewport.set(800, 1000);
+        dispatchFakeEvent(window, 'resize');
+        fixture.detectChanges();
+        tick(32);
+        fixture.detectChanges();
+        const el = componentElement.querySelector('.dynamic') as HTMLParagraphElement;
+        expect(el.innerText.includes('The suffix.')).toBe(true);
+        expect(el.innerText.includes('...')).toBe(true);
+      }
+
+      viewport.reset();
+      dispatchFakeEvent(window, 'resize');
+      fixture.detectChanges();
+      tick(32);
+      fixture.detectChanges();
+    }));
   });
 });
 
@@ -368,6 +400,7 @@ export class NzTestTypographyEditComponent {
       [nzEllipsisRows]="2"
       (nzExpandChange)="onExpand()"
       [nzContent]="str"
+      [nzSuffix]="suffix"
       class="dynamic"
     ></p>
   `,
@@ -382,7 +415,7 @@ export class NzTestTypographyEditComponent {
 export class NzTestTypographyEllipsisComponent {
   expandable = false;
   onExpand = jasmine.createSpy('expand callback');
-
+  suffix: string | null = null;
   @ViewChild(NzTypographyComponent, { static: false }) nzTypographyComponent: NzTypographyComponent;
   str = new Array(5).fill('Ant Design, a design language for background applications, is refined by Ant UED Team.').join('');
 }