From 97adb2c41fe98d7e5cc82a9c44186463355be8d1 Mon Sep 17 00:00:00 2001
From: CoderPoet <coderpoet@outlook.com>
Date: Mon, 11 Mar 2019 14:39:19 +0800
Subject: [PATCH] fix(module:steps): fix steps state change error under onpus
 strategy (#3061)

---
 components/steps/nz-step.component.ts  |  4 ++--
 components/steps/nz-steps.component.ts |  2 +-
 components/steps/nz-steps.spec.ts      | 16 ++++++++++++++--
 3 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/components/steps/nz-step.component.ts b/components/steps/nz-step.component.ts
index 1a56230d406..9abe2f6ffab 100644
--- 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
index 7110ffb2fd8..675df686485 100644
--- 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
index ed7551f4fb6..987c5151bdd 100644
--- 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({