From ee3fa7e75f9cec653d4f17319fec8bbf757510ff Mon Sep 17 00:00:00 2001 From: VTHINKXIE Date: Mon, 17 Sep 2018 16:05:09 +0800 Subject: [PATCH] fix(module:steps): fix dynamic steps error (#2149) close #2148 --- components/steps/nz-steps.component.ts | 24 +++++++------ components/steps/nz-steps.spec.ts | 49 +++++++++++++++++++++----- 2 files changed, 54 insertions(+), 19 deletions(-) diff --git a/components/steps/nz-steps.component.ts b/components/steps/nz-steps.component.ts index badfaa083a3..f0b4d566116 100644 --- a/components/steps/nz-steps.component.ts +++ b/components/steps/nz-steps.component.ts @@ -113,16 +113,18 @@ export class NzStepsComponent implements OnInit, OnDestroy, AfterContentInit { updateChildrenSteps = () => { if (this.steps) { this.steps.toArray().forEach((step, index, arr) => { - step.outStatus = this.nzStatus; - step.showProcessDot = this.showProcessDot; - if (this.customProcessDotTemplate) { - step.customProcessTemplate = this.customProcessDotTemplate; - } - step.direction = this.nzDirection; - step.index = index + this.nzStartIndex; - step.currentIndex = this.nzCurrent; - step.last = arr.length === index + 1; - step.updateClassMap(); + Promise.resolve().then(() => { + step.outStatus = this.nzStatus; + step.showProcessDot = this.showProcessDot; + if (this.customProcessDotTemplate) { + step.customProcessTemplate = this.customProcessDotTemplate; + } + step.direction = this.nzDirection; + step.index = index + this.nzStartIndex; + step.currentIndex = this.nzCurrent; + step.last = arr.length === index + 1; + step.updateClassMap(); + }); }); } } @@ -137,7 +139,7 @@ export class NzStepsComponent implements OnInit, OnDestroy, AfterContentInit { } ngAfterContentInit(): void { - Promise.resolve().then(() => this.updateChildrenSteps()); + this.updateChildrenSteps(); if (this.steps) { this.steps.changes.pipe(takeUntil(this.unsubscribe$)).subscribe(this.updateChildrenSteps); } diff --git a/components/steps/nz-steps.spec.ts b/components/steps/nz-steps.spec.ts index 51b0c37602c..b82802b33bd 100644 --- a/components/steps/nz-steps.spec.ts +++ b/components/steps/nz-steps.spec.ts @@ -34,14 +34,18 @@ describe('steps', () => { expect(innerSteps[ 1 ].nativeElement.className).toBe('ant-steps-item ant-steps-item-wait'); expect(innerSteps[ 2 ].nativeElement.className).toBe('ant-steps-item ant-steps-item-wait'); })); - it('should current change correct', () => { + it('should current change correct', fakeAsync(() => { + fixture.detectChanges(); + tick(); fixture.detectChanges(); testComponent.current = 1; fixture.detectChanges(); + tick(); + fixture.detectChanges(); expect(innerSteps[ 0 ].nativeElement.className).toBe('ant-steps-item ant-steps-item-finish'); expect(innerSteps[ 1 ].nativeElement.className).toBe('ant-steps-item ant-steps-item-process'); expect(innerSteps[ 2 ].nativeElement.className).toBe('ant-steps-item ant-steps-item-wait'); - }); + })); it('should tail display correct', fakeAsync(() => { fixture.detectChanges(); tick(); @@ -80,33 +84,49 @@ describe('steps', () => { fixture.detectChanges(); expect(outStep.nativeElement.firstElementChild.className).toBe('ant-steps ant-steps-vertical'); }); - it('should status display correct', () => { + it('should status display correct', fakeAsync(() => { + fixture.detectChanges(); + tick(); fixture.detectChanges(); testComponent.status = 'wait'; fixture.detectChanges(); + tick(); + fixture.detectChanges(); expect(innerSteps[ 0 ].nativeElement.className).toBe('ant-steps-item ant-steps-item-wait'); testComponent.status = 'finish'; fixture.detectChanges(); + tick(); + fixture.detectChanges(); expect(innerSteps[ 0 ].nativeElement.className).toBe('ant-steps-item ant-steps-item-finish'); testComponent.status = 'error'; testComponent.current = 1; fixture.detectChanges(); + tick(); + fixture.detectChanges(); expect(innerSteps[ 1 ].nativeElement.className).toBe('ant-steps-item ant-steps-item-error'); expect(innerSteps[ 0 ].nativeElement.className).toBe('ant-steps-item ant-steps-item-finish ant-steps-next-error'); - }); - it('should processDot display correct', () => { + })); + it('should processDot display correct', fakeAsync(() => { + fixture.detectChanges(); + tick(); fixture.detectChanges(); testComponent.progressDot = true; fixture.detectChanges(); + tick(); + fixture.detectChanges(); expect(outStep.nativeElement.firstElementChild.classList.contains('ant-steps-dot')).toBe(true); expect(innerSteps[ 0 ].nativeElement.querySelector('.ant-steps-icon').firstElementChild.classList.contains('ant-steps-icon-dot')).toBe(true); expect(innerSteps[ 1 ].nativeElement.querySelector('.ant-steps-icon').firstElementChild.classList.contains('ant-steps-icon-dot')).toBe(true); expect(innerSteps[ 2 ].nativeElement.querySelector('.ant-steps-icon').firstElementChild.classList.contains('ant-steps-icon-dot')).toBe(true); - }); - it('should processDot template display correct', () => { + })); + it('should processDot template display correct', fakeAsync(() => { + fixture.detectChanges(); + tick(); fixture.detectChanges(); testComponent.progressDot = testComponent.progressTemplate; fixture.detectChanges(); + tick(); + fixture.detectChanges(); expect(outStep.nativeElement.firstElementChild.classList.contains('ant-steps-dot')).toBe(true); expect(innerSteps[ 0 ].nativeElement.querySelector('.ant-steps-icon').firstElementChild.innerText).toBe('process0'); expect(innerSteps[ 1 ].nativeElement.querySelector('.ant-steps-icon').firstElementChild.innerText).toBe('wait1'); @@ -114,11 +134,14 @@ describe('steps', () => { expect(innerSteps[ 0 ].nativeElement.querySelector('.ant-steps-icon').lastElementChild.classList.contains('ant-steps-icon-dot')).toBe(true); expect(innerSteps[ 1 ].nativeElement.querySelector('.ant-steps-icon').lastElementChild.classList.contains('ant-steps-icon-dot')).toBe(true); expect(innerSteps[ 2 ].nativeElement.querySelector('.ant-steps-icon').lastElementChild.classList.contains('ant-steps-icon-dot')).toBe(true); - }); + })); it('should support custom starting index', fakeAsync(() => { + fixture.detectChanges(); + tick(); fixture.detectChanges(); testComponent.startIndex = 3; testComponent.current = 3; + fixture.detectChanges(); tick(); fixture.detectChanges(); expect(innerSteps[ 0 ].nativeElement.className).toBe('ant-steps-item ant-steps-item-process'); @@ -204,6 +227,12 @@ describe('steps', () => { it('should title display correct', () => { TestBed.createComponent(NzTestStepForComponent).detectChanges(); }); + it('should push works correct', () => { + const comp = TestBed.createComponent(NzTestStepForComponent); + comp.detectChanges(); + comp.debugElement.componentInstance.updateSteps(); + comp.detectChanges(); + }); }); }); @@ -281,4 +310,8 @@ export class NzTestInnerStepTemplateComponent { }) export class NzTestStepForComponent { steps = [ 1, 2, 3 ]; + + updateSteps(): void { + this.steps.push(4); + } }