Skip to content

Commit 02fcebe

Browse files
crisbetowagnermaciel
authored andcommitted
fix(cdk/accordion): allow for closeAll to be used when multiple mode is disabled (#22055)
Currently `CdkAccordion.closeAll` only works if `multi` is set to false, however it makes sense when a single item is expanded as well. These changes also fix that `_openCloseAllActions` wasn't being completed and they include more unit tests. Fixes #22003. (cherry picked from commit a41fb6e)
1 parent 92de837 commit 02fcebe

File tree

2 files changed

+66
-10
lines changed

2 files changed

+66
-10
lines changed

src/cdk/accordion/accordion.spec.ts

+61-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
import {waitForAsync, TestBed} from '@angular/core/testing';
2-
import {Component, ViewChild} from '@angular/core';
2+
import {Component, QueryList, ViewChild, ViewChildren} from '@angular/core';
33
import {By} from '@angular/platform-browser';
44
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
5-
import {CdkAccordionModule, CdkAccordionItem} from './public-api';
5+
import {CdkAccordion} from './accordion';
6+
import {CdkAccordionItem} from './accordion-item';
7+
import {CdkAccordionModule} from './accordion-module';
68

79
describe('CdkAccordion', () => {
810
beforeEach(waitForAsync(() => {
@@ -59,6 +61,61 @@ describe('CdkAccordion', () => {
5961

6062
expect(innerItem.accordion).not.toBe(outerItem.accordion);
6163
});
64+
65+
it('should be able to expand and collapse all items in multiple mode', () => {
66+
const fixture = TestBed.createComponent(SetOfItems);
67+
fixture.componentInstance.multi = true;
68+
fixture.detectChanges();
69+
fixture.componentInstance.accordion.openAll();
70+
fixture.detectChanges();
71+
72+
expect(fixture.componentInstance.items.toArray().every(item => item.expanded)).toBe(true);
73+
74+
fixture.componentInstance.accordion.closeAll();
75+
fixture.detectChanges();
76+
77+
expect(fixture.componentInstance.items.toArray().some(item => item.expanded)).toBe(false);
78+
});
79+
80+
it('should not be able to expand all items if multiple mode is off', () => {
81+
const fixture = TestBed.createComponent(SetOfItems);
82+
fixture.componentInstance.multi = false;
83+
fixture.detectChanges();
84+
fixture.componentInstance.accordion.openAll();
85+
fixture.detectChanges();
86+
87+
expect(fixture.componentInstance.items.toArray().some(item => item.expanded)).toBe(false);
88+
});
89+
90+
it('should be able to use closeAll even if multiple mode is disabled', () => {
91+
const fixture = TestBed.createComponent(SetOfItems);
92+
fixture.componentInstance.multi = false;
93+
fixture.detectChanges();
94+
const item = fixture.componentInstance.items.first;
95+
96+
item.expanded = true;
97+
fixture.detectChanges();
98+
99+
fixture.componentInstance.accordion.closeAll();
100+
fixture.detectChanges();
101+
102+
expect(item.expanded).toBe(false);
103+
});
104+
105+
it('should complete the accordion observables on destroy', () => {
106+
const fixture = TestBed.createComponent(SetOfItems);
107+
fixture.detectChanges();
108+
const stateSpy = jasmine.createSpy('stateChanges complete spy');
109+
const openCloseSpy = jasmine.createSpy('openCloseAllActions complete spy');
110+
111+
fixture.componentInstance.accordion._stateChanges.subscribe({complete: stateSpy});
112+
fixture.componentInstance.accordion._openCloseAllActions.subscribe({complete: openCloseSpy});
113+
fixture.destroy();
114+
115+
expect(stateSpy).toHaveBeenCalled();
116+
expect(openCloseSpy).toHaveBeenCalled();
117+
});
118+
62119
});
63120

64121
@Component({template: `
@@ -67,6 +124,8 @@ describe('CdkAccordion', () => {
67124
<cdk-accordion-item></cdk-accordion-item>
68125
</cdk-accordion>`})
69126
class SetOfItems {
127+
@ViewChild(CdkAccordion) accordion: CdkAccordion;
128+
@ViewChildren(CdkAccordionItem) items: QueryList<CdkAccordionItem>;
70129
multi: boolean = false;
71130
}
72131

src/cdk/accordion/accordion.ts

+5-8
Original file line numberDiff line numberDiff line change
@@ -46,12 +46,14 @@ export class CdkAccordion implements OnDestroy, OnChanges {
4646

4747
/** Opens all enabled accordion items in an accordion where multi is enabled. */
4848
openAll(): void {
49-
this._openCloseAll(true);
49+
if (this._multi) {
50+
this._openCloseAllActions.next(true);
51+
}
5052
}
5153

5254
/** Closes all enabled accordion items in an accordion where multi is enabled. */
5355
closeAll(): void {
54-
this._openCloseAll(false);
56+
this._openCloseAllActions.next(false);
5557
}
5658

5759
ngOnChanges(changes: SimpleChanges) {
@@ -60,12 +62,7 @@ export class CdkAccordion implements OnDestroy, OnChanges {
6062

6163
ngOnDestroy() {
6264
this._stateChanges.complete();
63-
}
64-
65-
private _openCloseAll(expanded: boolean): void {
66-
if (this.multi) {
67-
this._openCloseAllActions.next(expanded);
68-
}
65+
this._openCloseAllActions.complete();
6966
}
7067

7168
static ngAcceptInputType_multi: BooleanInput;

0 commit comments

Comments
 (0)