[ADF-3354] accordion-group closed behaviour (#3595)

* accordion-group closed fix

* tests fixes

* tests added

* tests fixes

* Fix failing unit test and revert deleted method

lib/core/collapsable/accordion-group.component.html

@@ -1,7 +1,7 @@
 <mat-accordion class="adf-panel">
-    <mat-expansion-panel #expansionPanel 
+    <mat-expansion-panel #expansionPanel
         id="adf-expansion-panel-id"
-        (click)="isExpandable($event)"
+        (click)="isExpandable()"
         [expanded]="toggleExpansion()"
         (opened)="onHeaderClick()"
         [hideToggle]="!hasAccordionIcon">
@@ -19,8 +19,8 @@
                 </div>
             </mat-panel-title>
         </mat-expansion-panel-header>
-            <div id="adf-expansion-panel-content-id" #contentWrapper>
+        <div id="adf-expansion-panel-content-id" #contentWrapper>
-                <ng-content></ng-content>
+            <ng-content></ng-content>
-            </div>
+        </div>
     </mat-expansion-panel>
-</mat-accordion>
+</mat-accordion>

lib/core/collapsable/accordion-group.component.spec.ts

@@ -19,6 +19,10 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { AccordionGroupComponent } from './accordion-group.component';
 import { setupTestBed } from '../testing/setupTestBed';
 import { CoreTestingModule } from '../testing/core.testing.module';
+import { Component, ViewChild } from '@angular/core';
+import { CoreModule } from '../core.module';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { By } from '@angular/platform-browser';
 
 describe('AccordionGroupComponent', () => {
 
@@ -115,4 +119,106 @@ describe('AccordionGroupComponent', () => {
         header.click();
     }));
 
+    it('should display icon if is present', (done) => {
+        component.headingIcon = 'assignment';
+        fixture.detectChanges();
+        fixture.whenStable().then(() => {
+            fixture.detectChanges();
+            expect(component.hasHeadingIcon()).toBe(true);
+            let headerText = element.querySelector('.adf-panel-heading-icon');
+            expect(headerText).toBeDefined();
+            done();
+        });
+    });
+});
+
+@Component({
+    template: `
+    <adf-accordion-group [heading]="'My Header'"
+                         [isSelected]="isSelected"
+                         [isOpen]="isOpen"
+                         [headingIcon]="headingIcon" #accordion>
+        <div>My List</div>
+    </adf-accordion-group>
+       `
+})
+class CustomAccordionGroupComponent extends AccordionGroupComponent {
+    isOpen: boolean;
+    isSelected: boolean;
+    headingIcon: string;
+
+    @ViewChild('accordion')
+    accordion: AccordionGroupComponent;
+}
+
+describe('Custom AccordionGroup', () => {
+    let fixture: ComponentFixture<CustomAccordionGroupComponent>;
+    let component: CustomAccordionGroupComponent;
+
+    setupTestBed({
+        imports: [
+            NoopAnimationsModule,
+            CoreModule.forRoot()
+        ],
+        declarations: [
+            CustomAccordionGroupComponent
+        ]
+    });
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(CustomAccordionGroupComponent);
+        component = fixture.componentInstance;
+    });
+
+    afterEach(() => {
+        fixture.destroy();
+    });
+
+    it('should render the title', () => {
+        component.isOpen = true;
+        component.isSelected = true;
+        fixture.detectChanges();
+        let title: any = fixture.debugElement.queryAll(By.css('.adf-panel-heading-text'));
+        expect(title.length).toBe(1);
+        expect(title[0].nativeElement.innerText).toBe('My Header');
+    });
+
+    it('should render a tab with icon', () => {
+        component.headingIcon = 'assignment';
+        fixture.detectChanges();
+        let tab: any = fixture.debugElement.queryAll(By.css('.material-icons'));
+        expect(tab[0].nativeElement.innerText).toBe('assignment');
+    });
+
+    it('should expand the panel if has content and is selected', (done) => {
+        spyOn(component.accordion, 'expandPanel').and.callThrough();
+        component.isOpen = false;
+        component.isSelected = true;
+        fixture.detectChanges();
+        fixture.whenStable().then(() => {
+            fixture.detectChanges();
+            expect(component.accordion.expansionPanel.expanded).toBe(false);
+            const selectElement = fixture.debugElement.nativeElement.querySelector('#adf-expansion-panel-id');
+            selectElement.click();
+            expect(component.accordion.expandPanel).toHaveBeenCalled();
+            expect(component.accordion.expansionPanel.expanded).toBe(true);
+            done();
+        });
+    });
+
+    it('should close the expanded panel if has content and is selected', (done) => {
+        spyOn(component.accordion, 'expandPanel').and.callThrough();
+        component.isOpen = true;
+        component.isSelected = true;
+        fixture.detectChanges();
+        fixture.whenStable().then(() => {
+            fixture.detectChanges();
+            expect(component.accordion.expansionPanel.expanded).toBe(true);
+            const selectElement = fixture.debugElement.nativeElement.querySelector('#adf-expansion-panel-id');
+            selectElement.click();
+            expect(component.accordion.expandPanel).toHaveBeenCalled();
+            expect(component.accordion.expansionPanel.expanded).toBe(false);
+            done();
+        });
+    });
 });

lib/core/collapsable/accordion-group.component.ts

@@ -78,19 +78,19 @@ export class AccordionGroupComponent implements AfterViewInit {
     constructor() { }
 
     ngAfterViewInit() {
-        this.hasContent = this.contentWrapper.nativeElement && this.contentWrapper.nativeElement.children.length > 0;
+        this.hasContent = this.contentWrapper ? this.contentWrapper.nativeElement && this.contentWrapper.nativeElement.children.length > 0 : false;
     }
 
     hasHeadingIcon() {
-        return this.headingIcon ? true : false;
+        return !!this.headingIcon;
     }
 
     onHeaderClick(): void {
         this.headingClick.emit(this.heading);
     }
 
-    isExpandable(event: any) {
+    isExpandable() {
-        if (!this.hasContent || !this.isOpen) {
+        if (this.hasContent && this.isSelected) {
             this.expandPanel();
         }
     }