From 6df814468cdbaac773e69415588fd6539178532a Mon Sep 17 00:00:00 2001 From: Paul Gschwendtner Date: Tue, 29 Aug 2017 01:28:10 +0200 Subject: [PATCH] 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 --- e2e/components/expansion-e2e.spec.ts | 25 +++++++++++++++++++ src/e2e-app/e2e-app/e2e-app.html | 1 + src/e2e-app/e2e-app/routes.ts | 2 ++ src/material-examples/example-module.ts | 16 ++++++++++++ .../expansion-overview-example.ts | 4 ++- .../expansion-steps-example.ts | 4 ++- src/material-examples/material-module.ts | 3 ++- src/material-examples/public_api.ts | 1 + 8 files changed, 53 insertions(+), 3 deletions(-) create mode 100644 e2e/components/expansion-e2e.spec.ts diff --git a/e2e/components/expansion-e2e.spec.ts b/e2e/components/expansion-e2e.spec.ts new file mode 100644 index 00000000000..944c4e46653 --- /dev/null +++ b/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); + }); + +}); diff --git a/src/e2e-app/e2e-app/e2e-app.html b/src/e2e-app/e2e-app/e2e-app.html index ce04dbf80ba..c6f46682937 100644 --- a/src/e2e-app/e2e-app/e2e-app.html +++ b/src/e2e-app/e2e-app/e2e-app.html @@ -5,6 +5,7 @@ Button Checkbox Dialog + Expansion Fullscreen Grid list Icon diff --git a/src/e2e-app/e2e-app/routes.ts b/src/e2e-app/e2e-app/routes.ts index 078a57761dd..c5cad76ebf0 100644 --- a/src/e2e-app/e2e-app/routes.ts +++ b/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}, diff --git a/src/material-examples/example-module.ts b/src/material-examples/example-module.ts index 740dd140223..8d417f5a9ca 100644 --- a/src/material-examples/example-module.ts +++ b/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, diff --git a/src/material-examples/expansion-overview/expansion-overview-example.ts b/src/material-examples/expansion-overview/expansion-overview-example.ts index e47663d02d8..75cff7cc4ca 100644 --- a/src/material-examples/expansion-overview/expansion-overview-example.ts +++ b/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', diff --git a/src/material-examples/expansion-steps/expansion-steps-example.ts b/src/material-examples/expansion-steps/expansion-steps-example.ts index 4790865e781..e302175fa2a 100644 --- a/src/material-examples/expansion-steps/expansion-steps-example.ts +++ b/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', diff --git a/src/material-examples/material-module.ts b/src/material-examples/material-module.ts index c4f234d336c..1b7bca44a48 100644 --- a/src/material-examples/material-module.ts +++ b/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, diff --git a/src/material-examples/public_api.ts b/src/material-examples/public_api.ts index 0c924467874..44e209b7b5a 100644 --- a/src/material-examples/public_api.ts +++ b/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';