diff --git a/components/collapse/nz-collapse.component.ts b/components/collapse/nz-collapse.component.ts index cd2a9958bac..1804392bb8d 100644 --- a/components/collapse/nz-collapse.component.ts +++ b/components/collapse/nz-collapse.component.ts @@ -43,7 +43,10 @@ export class NzCollapseComponent { if (this.nzAccordion) { this.listOfPanel.forEach(item => { const active = collapse === item; - if (item.nzActive !== active) { + if (active && item.nzActive === active) { + item.nzActive = false; + item.nzActiveChange.emit(item.nzActive); + } else if (item.nzActive !== active) { item.nzActive = active; item.nzActiveChange.emit(item.nzActive); } diff --git a/components/collapse/nz-collapse.spec.ts b/components/collapse/nz-collapse.spec.ts index 8b63bcd3992..1b881e43891 100644 --- a/components/collapse/nz-collapse.spec.ts +++ b/components/collapse/nz-collapse.spec.ts @@ -98,6 +98,32 @@ describe('collapse', () => { expect(testComponent.active01Change).toHaveBeenCalledTimes(2); expect(testComponent.active02Change).toHaveBeenCalledTimes(1); }); + it('should click to fold up work with accordion', () => { + testComponent.accordion = true; + fixture.detectChanges(); + expect(panels[ 0 ].nativeElement.classList).not.toContain('ant-collapse-item-active'); + expect(testComponent.active01).toBe(false); + panels[ 0 ].nativeElement.querySelector('.ant-collapse-header').click(); + fixture.detectChanges(); + panels[ 1 ].nativeElement.querySelector('.ant-collapse-header').click(); + fixture.detectChanges(); + panels[ 0 ].nativeElement.querySelector('.ant-collapse-header').click(); + fixture.detectChanges(); + expect(testComponent.active01).toBe(true); + expect(testComponent.active02).toBe(false); + expect(panels[ 0 ].nativeElement.classList).toContain('ant-collapse-item-active'); + expect(panels[ 1 ].nativeElement.classList).not.toContain('ant-collapse-item-active'); + expect(testComponent.active01Change).toHaveBeenCalledTimes(3); + expect(testComponent.active02Change).toHaveBeenCalledTimes(2); + panels[ 0 ].nativeElement.querySelector('.ant-collapse-header').click(); + fixture.detectChanges(); + expect(testComponent.active01).toBe(false); + expect(testComponent.active02).toBe(false); + expect(panels[ 0 ].nativeElement.classList).not.toContain('ant-collapse-item-active'); + expect(panels[ 1 ].nativeElement.classList).not.toContain('ant-collapse-item-active'); + expect(testComponent.active01Change).toHaveBeenCalledTimes(4); + expect(testComponent.active02Change).toHaveBeenCalledTimes(2); + }); it('should header work', () => { fixture.detectChanges(); expect(panels[ 0 ].nativeElement.querySelector('.ant-collapse-header').innerText).toBe('string');