fix(module:steps): fix steps state change error under onpus strategy

NG-ZORRO · Mar 11, 2019 · 359f066 · 359f066
1 parent b5d70be
commit 359f066
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 5 deletions.
diff --git a/components/steps/nz-step.component.ts b/components/steps/nz-step.component.ts
@@ -92,7 +92,7 @@ export class NzStepComponent {
     renderer.addClass(elementRef.nativeElement, 'ant-steps-item');
   }
 
-  detectChanges(): void {
-    this.cdr.detectChanges();
+  markForCheck(): void {
+    this.cdr.markForCheck();
   }
 }
diff --git a/components/steps/nz-steps.component.ts b/components/steps/nz-steps.component.ts
@@ -98,7 +98,7 @@ export class NzStepsComponent implements OnChanges, OnInit, OnDestroy, AfterCont
           step.index = index + this.nzStartIndex;
           step.currentIndex = this.nzCurrent;
           step.last = length === index + 1;
-          step.detectChanges();
+          step.markForCheck();
         });
       });
     }

diff --git a/components/steps/nz-steps.spec.ts b/components/steps/nz-steps.spec.ts
@@ -1,4 +1,4 @@
-import { Component, TemplateRef, ViewChild } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, TemplateRef, ViewChild } from '@angular/core';
 import { async, fakeAsync, tick, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 
@@ -41,6 +41,7 @@ describe('steps', () => {
       tick();
       fixture.detectChanges();
       testComponent.current = 1;
+      testComponent.cdr.markForCheck();
       fixture.detectChanges();
       tick();
       fixture.detectChanges();
@@ -77,18 +78,21 @@ describe('steps', () => {
     it('should size display correct', () => {
       fixture.detectChanges();
       testComponent.size = 'small';
+      testComponent.cdr.markForCheck();
       fixture.detectChanges();
       expect(outStep.nativeElement.firstElementChild.className).toBe('ant-steps ant-steps-horizontal ant-steps-label-horizontal ant-steps-small');
     });
     it('should direction display correct', () => {
       fixture.detectChanges();
       testComponent.direction = 'vertical';
+      testComponent.cdr.markForCheck();
       fixture.detectChanges();
       expect(outStep.nativeElement.firstElementChild.className).toBe('ant-steps ant-steps-vertical');
     });
     it('should label placement display correct', () => {
       fixture.detectChanges();
       testComponent.labelPlacement = 'vertical';
+      testComponent.cdr.markForCheck();
       fixture.detectChanges();
       expect(outStep.nativeElement.firstElementChild.classList).toContain('ant-steps-label-vertical');
     });
@@ -97,17 +101,20 @@ describe('steps', () => {
       tick();
       fixture.detectChanges();
       testComponent.status = 'wait';
+      testComponent.cdr.markForCheck();
       fixture.detectChanges();
       tick();
       fixture.detectChanges();
       expect(innerSteps[ 0 ].nativeElement.className).toBe('ant-steps-item ant-steps-item-wait');
       testComponent.status = 'finish';
+      testComponent.cdr.markForCheck();
       fixture.detectChanges();
       tick();
       fixture.detectChanges();
       expect(innerSteps[ 0 ].nativeElement.className).toBe('ant-steps-item ant-steps-item-finish');
       testComponent.status = 'error';
       testComponent.current = 1;
+      testComponent.cdr.markForCheck();
       fixture.detectChanges();
       tick();
       fixture.detectChanges();
@@ -119,6 +126,7 @@ describe('steps', () => {
       tick();
       fixture.detectChanges();
       testComponent.progressDot = true;
+      testComponent.cdr.markForCheck();
       fixture.detectChanges();
       tick();
       fixture.detectChanges();
@@ -132,6 +140,7 @@ describe('steps', () => {
       tick();
       fixture.detectChanges();
       testComponent.progressDot = testComponent.progressTemplate;
+      testComponent.cdr.markForCheck();
       fixture.detectChanges();
       tick();
       fixture.detectChanges();
@@ -149,6 +158,7 @@ describe('steps', () => {
       fixture.detectChanges();
       testComponent.startIndex = 3;
       testComponent.current = 3;
+      testComponent.cdr.markForCheck();
       fixture.detectChanges();
       tick();
       fixture.detectChanges();
@@ -250,7 +260,8 @@ describe('steps', () => {
       <span class="insert-span">{{status}}{{index}}</span>
       <ng-template [ngTemplateOutlet]="dot"></ng-template>
     </ng-template>
-  `
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class NzTestOuterStepsComponent {
   @ViewChild('progressTemplate') progressTemplate: TemplateRef<void>;
@@ -261,6 +272,7 @@ export class NzTestOuterStepsComponent {
   status = 'process';
   progressDot = false;
   startIndex = 0;
+  constructor (public cdr: ChangeDetectorRef) {}
 }
 
 @Component({