From a17ea49dbbb903cfb4e600913460e06222e35d21 Mon Sep 17 00:00:00 2001 From: wheeljs Date: Tue, 13 Nov 2018 13:22:39 +0800 Subject: [PATCH] fix(module:collapse): can't fold up active panel with accordion (#2440) close #2437 --- components/collapse/nz-collapse.component.ts | 5 +++- components/collapse/nz-collapse.spec.ts | 26 ++++++++++++++++++++ 2 files changed, 30 insertions(+), 1 deletion(-) 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');