diff --git a/src/lib/expansion/expansion-panel.ts b/src/lib/expansion/expansion-panel.ts index d7d56b21fa3..7f2551f73c4 100644 --- a/src/lib/expansion/expansion-panel.ts +++ b/src/lib/expansion/expansion-panel.ts @@ -57,8 +57,8 @@ export const EXPANSION_PANEL_ANIMATION_TIMING = '225ms cubic-bezier(0.4,0.0,0.2, ], animations: [ trigger('bodyExpansion', [ - state('collapsed', style({height: '0px'})), - state('expanded', style({height: '*'})), + state('collapsed', style({height: '0px', visibility: 'hidden'})), + state('expanded', style({height: '*', visibility: 'visible'})), transition('expanded <=> collapsed', animate(EXPANSION_PANEL_ANIMATION_TIMING)), ]), trigger('displayMode', [ diff --git a/src/lib/expansion/expansion.spec.ts b/src/lib/expansion/expansion.spec.ts index e6f53a7d643..abb7495c16e 100644 --- a/src/lib/expansion/expansion.spec.ts +++ b/src/lib/expansion/expansion.spec.ts @@ -1,7 +1,7 @@ -import {async, TestBed} from '@angular/core/testing'; +import {async, TestBed, fakeAsync, tick} from '@angular/core/testing'; import {Component} from '@angular/core'; import {By} from '@angular/platform-browser'; -import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; +import {NoopAnimationsModule} from '@angular/platform-browser/animations'; import {MdExpansionModule} from './index'; @@ -9,7 +9,7 @@ describe('MdExpansionPanel', () => { beforeEach(async(() => { TestBed.configureTestingModule({ imports: [ - BrowserAnimationsModule, + NoopAnimationsModule, MdExpansionModule ], declarations: [ @@ -20,9 +20,9 @@ describe('MdExpansionPanel', () => { })); it('should expanded and collapse the panel', () => { - let fixture = TestBed.createComponent(PanelWithContent); - let contentEl = fixture.debugElement.query(By.css('.mat-expansion-panel-content')); - let headerEl = fixture.debugElement.query(By.css('.mat-expansion-panel-header')); + const fixture = TestBed.createComponent(PanelWithContent); + const contentEl = fixture.debugElement.query(By.css('.mat-expansion-panel-content')); + const headerEl = fixture.debugElement.query(By.css('.mat-expansion-panel-header')); fixture.detectChanges(); expect(headerEl.classes['mat-expanded']).toBeFalsy(); expect(contentEl.classes['mat-expanded']).toBeFalsy(); @@ -34,7 +34,7 @@ describe('MdExpansionPanel', () => { }); it('emit correct events for change in panel expanded state', () => { - let fixture = TestBed.createComponent(PanelWithContent); + const fixture = TestBed.createComponent(PanelWithContent); fixture.componentInstance.expanded = true; fixture.detectChanges(); expect(fixture.componentInstance.openCallback).toHaveBeenCalled(); @@ -45,17 +45,37 @@ describe('MdExpansionPanel', () => { }); it('creates a unique panel id for each panel', () => { - let fixtureOne = TestBed.createComponent(PanelWithContent); - let headerElOne = fixtureOne.nativeElement.querySelector('.mat-expansion-panel-header'); - let fixtureTwo = TestBed.createComponent(PanelWithContent); - let headerElTwo = fixtureTwo.nativeElement.querySelector('.mat-expansion-panel-header'); + const fixtureOne = TestBed.createComponent(PanelWithContent); + const headerElOne = fixtureOne.nativeElement.querySelector('.mat-expansion-panel-header'); + const fixtureTwo = TestBed.createComponent(PanelWithContent); + const headerElTwo = fixtureTwo.nativeElement.querySelector('.mat-expansion-panel-header'); fixtureOne.detectChanges(); fixtureTwo.detectChanges(); - let panelIdOne = headerElOne.getAttribute('aria-controls'); - let panelIdTwo = headerElTwo.getAttribute('aria-controls'); + const panelIdOne = headerElOne.getAttribute('aria-controls'); + const panelIdTwo = headerElTwo.getAttribute('aria-controls'); expect(panelIdOne).not.toBe(panelIdTwo); }); + + it('should not be able to focus content while closed', fakeAsync(() => { + const fixture = TestBed.createComponent(PanelWithContent); + const button = fixture.debugElement.query(By.css('button')).nativeElement; + + fixture.componentInstance.expanded = true; + fixture.detectChanges(); + tick(250); + + button.focus(); + expect(document.activeElement).toBe(button, 'Expected button to start off focusable.'); + + button.blur(); + fixture.componentInstance.expanded = false; + fixture.detectChanges(); + tick(250); + + button.focus(); + expect(document.activeElement).not.toBe(button, 'Expected button to no longer be focusable.'); + })); }); @@ -65,6 +85,7 @@ describe('MdExpansionPanel', () => { (closed)="closeCallback()"> Panel Title

Some content

+ `}) class PanelWithContent { expanded: boolean = false;