test(module:typography): add test

components/typography/nz-text-edit.component.html

@@ -11,7 +11,7 @@
   <textarea #textarea
     nz-input
     nzAutosize
-    [(ngModel)]="currentText"
+    (input)="onInput($event)"
     (blur)="confirm()"
     (keydown.esc)="onCancel()"
     (keydown.enter)="onEnter($event)">

components/typography/nz-text-edit.component.ts

@@ -44,28 +44,36 @@ export class NzTextEditComponent implements OnDestroy {
     this.currentText = this.beforeText;
     this.editing = true;
     this.startEditing.emit();
-    this.focusTextarea();
+    this.focusAndSetValue();
   }
 
   confirm(): void {
     this.editing = false;
     this.endEditing.emit(this.currentText);
   }
 
-  onEnter($event: KeyboardEvent): void {
-    $event.stopPropagation();
-    $event.preventDefault();
-    this.textarea.nativeElement.blur();
+  onInput(event: KeyboardEvent): void {
+    const target = event.target as HTMLTextAreaElement;
+    this.currentText = target.value;
+  }
+
+  onEnter(event: KeyboardEvent): void {
+    event.stopPropagation();
+    event.preventDefault();
+    this.confirm();
   }
 
   onCancel(): void {
     this.currentText = this.beforeText;
-    this.textarea.nativeElement.blur();
+    this.confirm();
   }
 
-  focusTextarea(): void {
+  focusAndSetValue(): void {
     setTimeout(() => {
-      this.textarea.nativeElement.focus();
+      if (this.textarea && this.textarea.nativeElement) {
+        this.textarea.nativeElement.focus();
+        this.textarea.nativeElement.value = this.currentText;
+      }
     });
   }
 }

components/typography/nz-typography.component.html

@@ -4,12 +4,12 @@
 <ng-container *ngIf="!editing && nzEllipsisRows === 1">
   <ng-template [ngTemplateOutlet]="contentTemplate"></ng-template>
 </ng-container>
-<ng-container *ngIf="nzEllipsis && nzEllipsisRows > 1">
+<ng-container *ngIf="nzEllipsis && nzEllipsisRows > 1">s
   <span #ellipsisContainer></span>
   <ng-container *ngIf="isEllipsis">...</ng-container>
   <a #expandable class="ant-typography-expand">展开</a>
 </ng-container>
-<nz-text-copy *ngIf="nzCopyable" [getText]="getText" (textCopy)="onTextCopy($event)"></nz-text-copy>
+<nz-text-copy *ngIf="nzCopyable" [getText]="getCopyText" (textCopy)="onTextCopy($event)"></nz-text-copy>
 <nz-text-edit
   *ngIf="nzEditable"
   [getText]="getText"

components/typography/nz-typography.component.ts

@@ -84,8 +84,8 @@ export class NzTypographyComponent implements OnInit, AfterContentInit, OnDestro
   private rfaId: number = -1;
   private expanded: boolean = false;
   private destroy$ = new Subject();
-  readonly getText = () => (typeof this.nzCopyText === 'string' ? this.nzCopyText : this.host.nativeElement.innerText);
-
+  readonly getText = () => this.host.nativeElement.innerText;
+  readonly getCopyText = () => (typeof this.nzCopyText === 'string' ? this.nzCopyText : this.getText());
   constructor(
     private host: ElementRef<HTMLElement>,
     private cdr: ChangeDetectorRef,

components/typography/nz-typography.module.ts

@@ -8,7 +8,6 @@
 
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
 
 import { NzTransButtonDirective } from 'ng-zorro-antd/core';
 import { NzIconModule } from 'ng-zorro-antd/icon';
@@ -20,7 +19,7 @@ import { NzTextEditComponent } from './nz-text-edit.component';
 import { NzTypographyComponent } from './nz-typography.component';
 
 @NgModule({
-  imports: [CommonModule, FormsModule, NzIconModule, NzToolTipModule, NzInputModule],
+  imports: [CommonModule, NzIconModule, NzToolTipModule, NzInputModule],
   exports: [NzTypographyComponent, NzTextCopyComponent, NzTextEditComponent, NzTransButtonDirective],
   declarations: [NzTypographyComponent, NzTextCopyComponent, NzTextEditComponent, NzTransButtonDirective]
 })

components/typography/nz-typography.spec.ts

@@ -1,26 +1,28 @@
+import { ENTER, ESCAPE } from '@angular/cdk/keycodes';
 import { CommonModule } from '@angular/common';
-import { Component } from '@angular/core';
+import { Component, ViewChild } from '@angular/core';
 import { fakeAsync, flush, tick, ComponentFixture, TestBed } from '@angular/core/testing';
+import { createKeyboardEvent, dispatchFakeEvent, dispatchKeyboardEvent, typeInElement } from 'ng-zorro-antd/core';
 import { NzIconTestModule } from 'ng-zorro-antd/icon/testing';
 
+import { NzTypographyComponent } from './nz-typography.component';
 import { NzTypographyModule } from './nz-typography.module';
 
 describe('typography', () => {
-  let testComponent: NzTestTypographyComponent;
   let componentElement: HTMLElement;
-  let fixture: ComponentFixture<NzTestTypographyComponent | NzTestTypographyCopyComponent>;
 
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [CommonModule, NzTypographyModule, NzIconTestModule],
-      declarations: [NzTestTypographyComponent, NzTestTypographyCopyComponent]
+      declarations: [NzTestTypographyComponent, NzTestTypographyCopyComponent, NzTestTypographyEditComponent]
     }).compileComponents();
   });
 
   describe('base', () => {
+    let fixture: ComponentFixture<NzTestTypographyComponent>;
+
     beforeEach(() => {
       fixture = TestBed.createComponent(NzTestTypographyComponent);
-      testComponent = fixture.componentInstance;
       componentElement = fixture.debugElement.nativeElement;
       fixture.detectChanges();
     });
@@ -47,7 +49,10 @@ describe('typography', () => {
     });
   });
 
-  describe('copy', () => {
+  describe('copyable', () => {
+    let fixture: ComponentFixture<NzTestTypographyCopyComponent>;
+    let testComponent: NzTestTypographyCopyComponent;
+
     beforeEach(() => {
       fixture = TestBed.createComponent(NzTestTypographyCopyComponent);
       testComponent = fixture.componentInstance;
@@ -56,42 +61,91 @@ describe('typography', () => {
     });
 
     it('should copyable', () => {
-      const testCopyComponent = testComponent as NzTestTypographyCopyComponent;
-      const copyText = [
-        'h4. Ant Design',
-        'Ant Design, a design language for background applications',
-        'Ant Design',
-        'Replace copy text',
-        'Ant Design mark'
-      ];
-      spyOn(testCopyComponent, 'onCopy');
+      spyOn(testComponent, 'onCopy');
       const copyButtons = componentElement.querySelectorAll<HTMLButtonElement>('.ant-typography-copy');
       expect(copyButtons.length).toBe(5);
       copyButtons.forEach((btn, i) => {
         btn.click();
         fixture.detectChanges();
-        expect(testCopyComponent.onCopy).toHaveBeenCalledWith(copyText[i]);
+        expect(testComponent.onCopy).toHaveBeenCalledWith(`Ant Design-${i}`);
       });
     });
 
     it('should only trigger once within 3000ms', fakeAsync(() => {
-      const testCopyComponent = testComponent as NzTestTypographyCopyComponent;
-      spyOn(testCopyComponent, 'onCopy');
+      spyOn(testComponent, 'onCopy');
       const copyButton = componentElement.querySelector<HTMLButtonElement>('.ant-typography-copy');
-      expect(testCopyComponent.onCopy).toHaveBeenCalledTimes(0);
+      expect(testComponent.onCopy).toHaveBeenCalledTimes(0);
       copyButton!.click();
       fixture.detectChanges();
       copyButton!.click();
       fixture.detectChanges();
-      expect(testCopyComponent.onCopy).toHaveBeenCalledTimes(1);
+      expect(testComponent.onCopy).toHaveBeenCalledTimes(1);
       tick(3000);
       fixture.detectChanges();
       copyButton!.click();
       fixture.detectChanges();
-      expect(testCopyComponent.onCopy).toHaveBeenCalledTimes(2);
+      expect(testComponent.onCopy).toHaveBeenCalledTimes(2);
+      flush();
+      fixture.detectChanges();
+    }));
+  });
+
+  describe('editable', () => {
+    let fixture: ComponentFixture<NzTestTypographyEditComponent>;
+    let testComponent: NzTestTypographyEditComponent;
+    let typographyComponent: NzTypographyComponent;
+
+    beforeEach(fakeAsync(() => {
+      fixture = TestBed.createComponent(NzTestTypographyEditComponent);
+      testComponent = fixture.componentInstance;
+      componentElement = fixture.debugElement.nativeElement;
+      typographyComponent = testComponent.nzTypographyComponent;
+      fixture.detectChanges();
+    }));
+
+    afterEach(fakeAsync(() => {
       flush();
       fixture.detectChanges();
     }));
+
+    it('should edit work', () => {
+      const editButton = componentElement.querySelector<HTMLButtonElement>('.ant-typography-edit');
+      editButton!.click();
+      fixture.detectChanges();
+      expect(testComponent.str).toBe('This is an editable text.');
+      const textarea = componentElement.querySelector<HTMLTextAreaElement>('textarea')!;
+      typeInElement('test', textarea);
+      fixture.detectChanges();
+      dispatchFakeEvent(textarea, 'blur');
+      fixture.detectChanges();
+      expect(testComponent.str).toBe('test');
+    });
+
+    it('should apply changes when Enter keydown', () => {
+      const editButton = componentElement.querySelector<HTMLButtonElement>('.ant-typography-edit');
+      editButton!.click();
+      fixture.detectChanges();
+      expect(testComponent.str).toBe('This is an editable text.');
+      const textarea = componentElement.querySelector<HTMLTextAreaElement>('textarea')!;
+      typeInElement('test', textarea);
+      fixture.detectChanges();
+      typographyComponent.textEditRef.onEnter(createKeyboardEvent('keydown', ENTER, textarea));
+      fixture.detectChanges();
+      expect(testComponent.str).toBe('test');
+    });
+
+    it('should discard changes when Esc keydown', () => {
+      const editButton = componentElement.querySelector<HTMLButtonElement>('.ant-typography-edit');
+      editButton!.click();
+      fixture.detectChanges();
+      expect(testComponent.str).toBe('This is an editable text.');
+      const textarea = componentElement.querySelector<HTMLTextAreaElement>('textarea')!;
+      typeInElement('test', textarea);
+      fixture.detectChanges();
+      dispatchKeyboardEvent(textarea, 'keydown', ESCAPE, textarea);
+      fixture.detectChanges();
+      expect(testComponent.str).toBe('This is an editable text.');
+    });
   });
 });
 
@@ -120,16 +174,12 @@ export class NzTestTypographyComponent {}
 @Component({
   selector: 'nz-test-typography-copy',
   template: `
-    <h4 nz-title nzCopyable class="test-copy-h4" (nzCopy)="onCopy($event)">h4. Ant Design</h4>
-    <p nz-paragraph nzCopyable class="test-copy-p" (nzCopy)="onCopy($event)">
-      Ant Design, a design language for background applications
-    </p>
-    <span nz-text nzCopyable class="test-copy-text" (nzCopy)="onCopy($event)">Ant Design</span>
-    <span nz-text nzCopyable nzCopyText="Replace copy text" class="test-copy-replace" (nzCopy)="onCopy($event)"
-      >Ant Design</span
-    >
+    <h4 nz-title nzCopyable class="test-copy-h4" (nzCopy)="onCopy($event)">Ant Design-0</h4>
+    <p nz-paragraph nzCopyable class="test-copy-p" (nzCopy)="onCopy($event)">Ant Design-1</p>
+    <span nz-text nzCopyable class="test-copy-text" (nzCopy)="onCopy($event)">Ant Design-2</span>
+    <span nz-text nzCopyable nzCopyText="Ant Design-3" class="test-copy-replace" (nzCopy)="onCopy($event)">Test</span>
     <p nz-paragraph nzCopyable class="test-copy-html" (nzCopy)="onCopy($event)">
-      <span nz-text><mark>Ant Design mark</mark></span>
+      <span nz-text><mark>Ant Design</mark>-<code>4</code></span>
     </p>
   `
 })
@@ -138,3 +188,17 @@ export class NzTestTypographyCopyComponent {
     // noop
   }
 }
+
+@Component({
+  selector: 'nz-test-typography-edit',
+  template: `
+    <p nz-paragraph nzEditable (nzChange)="onChange($event)">{{ str }}</p>
+  `
+})
+export class NzTestTypographyEditComponent {
+  @ViewChild(NzTypographyComponent) nzTypographyComponent: NzTypographyComponent;
+  str = 'This is an editable text.';
+  onChange = (text: string): void => {
+    this.str = text;
+  };
+}