diff --git a/ng2-components/ng2-alfresco-core/src/components/collapsable/accordion-group.component.html b/ng2-components/ng2-alfresco-core/src/components/collapsable/accordion-group.component.html index 87a52e8b52..f73c292a5e 100644 --- a/ng2-components/ng2-alfresco-core/src/components/collapsable/accordion-group.component.html +++ b/ng2-components/ng2-alfresco-core/src/components/collapsable/accordion-group.component.html @@ -1,15 +1,17 @@
-
- {{headingIcon}} +
+
+ {{headingIcon}} +
+
{{heading}}
-
{{heading}}
-
+
{{getAccordionIcon()}}
-
+
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; + } }