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()">
Some content
+ `}) class PanelWithContent { expanded: boolean = false;