test(): screenshot diff for expansion (#6666)

* Adds the expansion overview example to the e2e app and captures a screenshot diff for it.
* Also adds a e2e test for the button-toggle

Author: devversion

e2e/components/expansion-e2e.spec.ts

@@ -0,0 +1,25 @@
+import {browser, by, element} from 'protractor';
+import {screenshot} from '../screenshot';
+
+describe('expansion', () => {
+
+  beforeEach(() => browser.get('/expansion'));
+
+  it('should show a expansion panel', async () => {
+    expect(element(by.css('.mat-expansion-panel'))).toBeDefined();
+
+    screenshot();
+  });
+
+  it('should hide contents of the expansion panel on click', async () => {
+    const panelHeader = element(by.css('.mat-expansion-panel-header'));
+    const panelContent = element(by.css('.mat-expansion-panel-content'));
+
+    expect(panelContent.isDisplayed()).toBe(false);
+
+    panelHeader.click();
+
+    expect(panelContent.isDisplayed()).toBe(true);
+  });
+
+});

src/e2e-app/e2e-app/e2e-app.html

@@ -5,6 +5,7 @@
   <a md-list-item [routerLink]="['button']">Button</a>
   <a md-list-item [routerLink]="['checkbox']">Checkbox</a>
   <a md-list-item [routerLink]="['dialog']">Dialog</a>
+  <a md-list-item [routerLink]="['expansion']">Expansion</a>
   <a md-list-item [routerLink]="['fullscreen']">Fullscreen</a>
   <a md-list-item [routerLink]="['grid-list']">Grid list</a>
   <a md-list-item [routerLink]="['icon']">Icon</a>

src/e2e-app/e2e-app/routes.ts

@@ -20,6 +20,7 @@ import {
   ListOverviewExample,
   ToolbarMultirowExample,
   ButtonToggleOverviewExample,
+  ExpansionOverviewExample
 } from '@angular/material-examples';
 
 export const E2E_APP_ROUTES: Routes = [
@@ -29,6 +30,7 @@ export const E2E_APP_ROUTES: Routes = [
   {path: 'button-toggle', component: ButtonToggleOverviewExample},
   {path: 'checkbox', component: SimpleCheckboxes},
   {path: 'dialog', component: DialogE2E},
+  {path: 'expansion', component: ExpansionOverviewExample},
   {path: 'fullscreen', component: FullscreenE2E},
   {path: 'grid-list', component: GridListE2E},
   {path: 'icon', component: IconE2E},

src/material-examples/example-module.ts

@@ -38,6 +38,8 @@ import {DialogContentExampleDialog,DialogContentExample} from './dialog-content/
 import {DialogDataExampleDialog,DialogDataExample} from './dialog-data/dialog-data-example';
 import {DialogElementsExampleDialog,DialogElementsExample} from './dialog-elements/dialog-elements-example';
 import {DialogOverviewExampleDialog,DialogOverviewExample} from './dialog-overview/dialog-overview-example';
+import {ExpansionOverviewExample} from './expansion-overview/expansion-overview-example';
+import {ExpansionStepsExample} from './expansion-steps/expansion-steps-example';
 import {GridListDynamicExample} from './grid-list-dynamic/grid-list-dynamic-example';
 import {GridListOverviewExample} from './grid-list-overview/grid-list-overview-example';
 import {IconOverviewExample} from './icon-overview/icon-overview-example';
@@ -236,6 +238,18 @@ export const EXAMPLE_COMPONENTS = {
     additionalFiles: ["dialog-overview-example-dialog.html"],
     selectorName: 'DialogOverviewExample, DialogOverviewExampleDialog'
   },
+  'expansion-overview': {
+    title: 'Basic expansion panel',
+    component: ExpansionOverviewExample,
+    additionalFiles: null,
+    selectorName: null
+  },
+  'expansion-steps': {
+    title: 'Expansion panel as accordion',
+    component: ExpansionStepsExample,
+    additionalFiles: null,
+    selectorName: null
+  },
   'grid-list-dynamic': {
     title: 'Dynamic grid-list',
     component: GridListDynamicExample,
@@ -540,6 +554,8 @@ export const EXAMPLE_LIST = [
   DialogDataExampleDialog,DialogDataExample,
   DialogElementsExampleDialog,DialogElementsExample,
   DialogOverviewExampleDialog,DialogOverviewExample,
+  ExpansionOverviewExample,
+  ExpansionStepsExample,
   GridListDynamicExample,
   GridListOverviewExample,
   IconOverviewExample,

src/material-examples/expansion-overview/expansion-overview-example.ts

@@ -1,6 +1,8 @@
 import {Component} from '@angular/core';
 
-
+/**
+ * @title Basic expansion panel
+ */
 @Component({
   selector: 'expansion-overview-example',
   templateUrl: 'expansion-overview-example.html',

src/material-examples/expansion-steps/expansion-steps-example.ts

@@ -1,6 +1,8 @@
 import {Component} from '@angular/core';
 
-
+/**
+ * @title Expansion panel as accordion
+ */
 @Component({
   selector: 'expansion-steps-example',
   templateUrl: 'expansion-steps-example.html',

src/material-examples/material-module.ts

@@ -8,7 +8,7 @@ import {
   MdListModule, MdMenuModule, MdProgressBarModule, MdProgressSpinnerModule,
   MdRadioModule, MdSelectModule, MdSidenavModule, MdSliderModule, MdSortModule,
   MdSlideToggleModule, MdSnackBarModule, MdTableModule, MdTabsModule, MdToolbarModule,
-  MdTooltipModule, MdFormFieldModule
+  MdTooltipModule, MdFormFieldModule, MdExpansionModule
 } from '@angular/material';
 
 @NgModule({
@@ -22,6 +22,7 @@ import {
     MdChipsModule,
     MdDatepickerModule,
     MdDialogModule,
+    MdExpansionModule,
     MdFormFieldModule,
     MdGridListModule,
     MdIconModule,

src/material-examples/public_api.ts

@@ -6,3 +6,4 @@ export * from './datepicker-overview/datepicker-overview-example';
 export * from './card-fancy/card-fancy-example';
 export * from './toolbar-multirow/toolbar-multirow-example';
 export * from './button-toggle-overview/button-toggle-overview-example';
+export * from './expansion-overview/expansion-overview-example';