Skip to content

Commit

Permalink
fix(module:steps): fix dynamic steps error (#2149)
Browse files Browse the repository at this point in the history 
close #2148
  • Loading branch information
@vthinkxie
vthinkxie committed Sep 17, 2018
1 parent c040c46 commit ee3fa7e
Show file tree
Hide file tree
Showing 2 changed files with 54 additions and 19 deletions.
24 changes: 13 additions & 11 deletions components/steps/nz-steps.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
});
});
}
}
Expand All @@ -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);
}
Expand Down
49 changes: 41 additions & 8 deletions components/steps/nz-steps.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -80,45 +84,64 @@ 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');
expect(innerSteps[ 2 ].nativeElement.querySelector('.ant-steps-icon').firstElementChild.innerText).toBe('wait2');
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');
Expand Down Expand Up @@ -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();
});
});
});

Expand Down Expand Up @@ -281,4 +310,8 @@ export class NzTestInnerStepTemplateComponent {
})
export class NzTestStepForComponent {
steps = [ 1, 2, 3 ];

updateSteps(): void {
this.steps.push(4);
}
}

0 comments on commit ee3fa7e

Please sign in to comment.