-
diff --git a/ng2-components/ng2-alfresco-core/src/components/collapsable/accordion-group.component.spec.ts b/ng2-components/ng2-alfresco-core/src/components/collapsable/accordion-group.component.spec.ts
index 125d87f737..baa8de6154 100644
--- a/ng2-components/ng2-alfresco-core/src/components/collapsable/accordion-group.component.spec.ts
+++ b/ng2-components/ng2-alfresco-core/src/components/collapsable/accordion-group.component.spec.ts
@@ -45,14 +45,15 @@ describe('AccordionGroupComponent', () => {
it('should be closed by default', () => {
component.heading = 'Fake Header';
component.headingIcon = 'fake-icon';
+ component.contentWrapper.nativeElement.innerHTML = '
Test';
fixture.whenStable().then(() => {
fixture.detectChanges();
- let headerToggle = fixture.nativeElement.querySelector('.adf-panel-heading-toggle .material-icons');
- expect(headerToggle.innerText).toEqual('expand_more');
- let headerText = fixture.nativeElement.querySelector('.adf-panel-heading-text');
+ let headerText = element.querySelector('#heading-text');
expect(headerText.innerText).toEqual('Fake Header');
- let headerIcon = fixture.nativeElement.querySelector('.adf-panel-heading-icon .material-icons');
+ let headerIcon = element.querySelector('#heading-icon .material-icons');
expect(headerIcon.innerText).toEqual('fake-icon');
+ let headerToggle = element.querySelector('#accordion-button .material-icons');
+ expect(headerToggle.innerText).toEqual('expand_more');
});
});
@@ -60,17 +61,53 @@ describe('AccordionGroupComponent', () => {
component.isSelected = true;
component.heading = 'Fake Header';
component.headingIcon = 'fake-icon';
+ component.contentWrapper.nativeElement.innerHTML = '
Test';
fixture.detectChanges();
element.querySelector('#accordion-button').click();
fixture.whenStable().then(() => {
fixture.detectChanges();
- let headerText = fixture.nativeElement.querySelector('.adf-panel-heading-text');
+ let headerText = element.querySelector('#heading-text');
expect(headerText.innerText).toEqual('Fake Header');
- let headerIcon = fixture.nativeElement.querySelector('.adf-panel-heading-icon .material-icons');
+ let headerIcon = element.querySelector('#heading-icon .material-icons');
expect(headerIcon.innerText).toEqual('fake-icon');
- let headerToggle = fixture.nativeElement.querySelector('.adf-panel-heading-toggle .material-icons');
+ let headerToggle = element.querySelector('#accordion-button .material-icons');
expect(headerToggle.innerText).toEqual('expand_less');
});
});
+ it('should hide expand icon by default', () => {
+ component.heading = 'Fake Header';
+ component.headingIcon = 'fake-icon';
+ component.contentWrapper.nativeElement.innerHTML = '';
+ fixture.whenStable().then(() => {
+ fixture.detectChanges();
+ let headerIcon = element.querySelector('#accordion-button');
+ expect(headerIcon).toBeNull();
+ });
+ });
+
+ it('should show expand icon by default', () => {
+ component.heading = 'Fake Header';
+ component.headingIcon = 'fake-icon';
+ component.contentWrapper.nativeElement.innerHTML = '
Test';
+ fixture.whenStable().then(() => {
+ fixture.detectChanges();
+ let headerIcon = element.querySelector('#accordion-button');
+ expect(headerIcon).toBeDefined();
+ });
+ });
+
+ it('should emit an event when a heading clicked', (done) => {
+ component.heading = 'Fake Header';
+ fixture.detectChanges();
+ let heading: string = component.heading;
+ component.headingClick.subscribe((headName: string) => {
+ expect(headName).toBeDefined();
+ expect(headName).toEqual(heading);
+ done();
+ });
+
+ component.onHeadingClick();
+ });
+
});
diff --git a/ng2-components/ng2-alfresco-core/src/components/collapsable/accordion-group.component.ts b/ng2-components/ng2-alfresco-core/src/components/collapsable/accordion-group.component.ts
index 56995042ca..3bad20fda4 100644
--- a/ng2-components/ng2-alfresco-core/src/components/collapsable/accordion-group.component.ts
+++ b/ng2-components/ng2-alfresco-core/src/components/collapsable/accordion-group.component.ts
@@ -15,7 +15,7 @@
* limitations under the License.
*/
-import { Component, Input, OnDestroy } from '@angular/core';
+import { Component, Input, OnDestroy, Output, EventEmitter, ViewChild } from '@angular/core';
import { AccordionComponent } from './accordion.component';
@Component({
@@ -28,12 +28,18 @@ export class AccordionGroupComponent implements OnDestroy {
private _isOpen: boolean = false;
private _isSelected: boolean = false;
+ @ViewChild('contentWrapper')
+ contentWrapper: any;
+
@Input()
heading: string;
@Input()
headingIcon: string;
+ @Output()
+ headingClick: EventEmitter
= new EventEmitter();
+
@Input()
set isOpen(value: boolean) {
this._isOpen = value;
@@ -75,4 +81,12 @@ export class AccordionGroupComponent implements OnDestroy {
getAccordionIcon(): string {
return this.isOpen ? 'expand_less' : 'expand_more';
}
+
+ onHeadingClick() {
+ this.headingClick.emit(this.heading);
+ }
+
+ isGroupContentEmpty() {
+ return this.contentWrapper.nativeElement.innerHTML.trim().length === 0;
+ }
}