chore: add material-examples to e2e-app (#5735)

Author: jelbourn

e2e/components/card-e2e.spec.ts

@@ -0,0 +1,15 @@
+import {browser, by, element} from 'protractor';
+import {screenshot} from '../screenshot';
+
+describe('md-card', () => {
+  describe('card-fancy', () => {
+    beforeEach(() => browser.get('/card-fancy'));
+
+    it('should show a card', async () => {
+      const card = element(by.tagName('md-card'));
+      expect(card).toBeDefined();
+
+      screenshot('fancy card example');
+    });
+  });
+});

e2e/components/menu-e2e.spec.ts

@@ -1,4 +1,4 @@
-import {Key, protractor, browser, by, element} from 'protractor';
+import {Key, protractor, browser, by, element, ExpectedConditions} from 'protractor';
 import {screenshot} from '../screenshot';
 import {
   expectToExist,
@@ -8,6 +8,9 @@ import {
   pressKeys,
 } from '../util/index';
 
+const presenceOf = ExpectedConditions.presenceOf;
+const not = ExpectedConditions.not;
+
 
 describe('menu', () => {
   const menuSelector = '.mat-menu-panel';
@@ -50,22 +53,25 @@ describe('menu', () => {
     screenshot();
   });
 
-  it('should support multiple triggers opening the same menu', () => {
+  it('should support multiple triggers opening the same menu', async () => {
     page.triggerTwo().click();
 
     expect(page.menu().getText()).toEqual('One\nTwo\nThree\nFour');
     expectAlignedWith(page.menu(), '#trigger-two');
 
     page.backdrop().click();
-    expectToExist(menuSelector, false);
+    await browser.wait(not(presenceOf(element(by.css(menuSelector)))));
+    await browser.wait(not(presenceOf(element(by.css('.cdk-overlay-backdrop')))));
 
     page.trigger().click();
 
     expect(page.menu().getText()).toEqual('One\nTwo\nThree\nFour');
     expectAlignedWith(page.menu(), '#trigger');
 
     page.backdrop().click();
-    expectToExist(menuSelector, false);
+
+    await browser.wait(not(presenceOf(element(by.css(menuSelector)))));
+    await browser.wait(not(presenceOf(element(by.css('.cdk-overlay-backdrop')))));
   });
 
   it('should mirror classes on host to menu template in overlay', () => {

package.json

@@ -56,7 +56,7 @@
     "@types/node": "^7.0.21",
     "@types/run-sequence": "^0.0.29",
     "autoprefixer": "^6.7.6",
-    "axe-core": "^2.2.1",
+    "axe-core": "^2.3.1",
     "axe-webdriverjs": "^1.1.1",
     "chalk": "^1.1.3",
     "conventional-changelog": "^1.1.3",

src/e2e-app/e2e-app-module.ts

@@ -24,8 +24,9 @@ import {
   OverlayContainer, FullscreenOverlayContainer, MdGridListModule, MdProgressBarModule,
   MdProgressSpinnerModule, MdTabsModule, MdRadioModule, MdSlideToggleModule, MdMenuModule,
   MdListModule, MdInputModule, MdIconModule, MdDialogModule, MdCheckboxModule, MdButtonModule,
-  MdSidenavModule
+  MdSidenavModule, MdNativeDateModule,
 } from '@angular/material';
+import {ExampleModule} from '@angular/material-examples';
 
 /**
  * NgModule that contains all Material modules that are required to serve the e2e-app.
@@ -45,7 +46,8 @@ import {
     MdRadioModule,
     MdSidenavModule,
     MdSlideToggleModule,
-    MdTabsModule
+    MdTabsModule,
+    MdNativeDateModule,
   ]
 })
 export class E2eMaterialModule {}
@@ -56,6 +58,7 @@ export class E2eMaterialModule {}
     RouterModule.forRoot(E2E_APP_ROUTES),
     E2eMaterialModule,
     NoopAnimationsModule,
+    ExampleModule,
   ],
   declarations: [
     BasicTabs,

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

@@ -1,4 +1,6 @@
 import {Routes} from '@angular/router';
+import {CardFancyExample} from '@angular/material-examples';
+
 import {Home} from './e2e-app';
 import {ButtonE2E} from '../button/button-e2e';
 import {BasicTabs} from '../tabs/tabs-e2e';
@@ -35,4 +37,5 @@ export const E2E_APP_ROUTES: Routes = [
   {path: 'sidenav', component: SidenavE2E},
   {path: 'slide-toggle', component: SlideToggleE2E},
   {path: 'tabs', component: BasicTabs},
+  {path: 'card-fancy', component: CardFancyExample},
 ];

src/e2e-app/system-config.ts

@@ -26,7 +26,8 @@ System.config({
       'node:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
 
     '@angular/material': 'dist/bundles/material.umd.js',
-    '@angular/cdk': 'dist/bundles/cdk.umd.js'
+    '@angular/cdk': 'dist/bundles/cdk.umd.js',
+    '@angular/material-examples': 'dist/bundles/material-examples.umd.js'
   },
   packages: {
     // Thirdparty barrels.

src/e2e-app/tsconfig-build.json

@@ -7,7 +7,9 @@
     "experimentalDecorators": true,
     // TODO(paul): Remove once Angular has been upgraded and supports noUnusedParameters in AOT.
     "noUnusedParameters": false,
-    "strictNullChecks": true,
+    // Don't use strict nulls for the e2e-app because the material-examples are not
+    // strict-null compliant.
+    "strictNullChecks": false,
     "lib": ["es6", "es2015", "dom"],
     "module": "commonjs",
     "moduleResolution": "node",
@@ -20,10 +22,11 @@
     "typeRoots": [
       "../../node_modules/@types/!(node)"
     ],
-    "baseUrl": "",
+    "baseUrl": ".",
     "paths": {
       "@angular/material": ["./material"],
-      "@angular/cdk": ["./cdk"]
+      "@angular/cdk": ["./cdk"],
+      "@angular/material-examples": ["./material-examples"]
     }
   },
   "files": [

src/material-examples/card-fancy/card-fancy-example.html

@@ -4,7 +4,7 @@
     <md-card-title>Shiba Inu</md-card-title>
     <md-card-subtitle>Dog Breed</md-card-subtitle>
   </md-card-header>
-  <img md-card-image src="assets/img/examples/shiba2.jpg">
+  <img md-card-image src="assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
   <md-card-content>
     <p>
       The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.

src/material-examples/index.ts

@@ -0,0 +1 @@
+export * from './public_api';

src/material-examples/public_api.ts

@@ -1,2 +1,4 @@
 export * from './example-data';
 export * from './example-module';
+export * from './datepicker-overview/datepicker-overview-example';
+export * from './card-fancy/card-fancy-example';

tools/gulp/tasks/e2e.ts

@@ -34,7 +34,7 @@ task('e2e', sequenceTask(
 /** Task that builds the e2e-app in AOT mode. */
 task('e2e-app:build', sequenceTask(
   'clean',
-  ['material:build-release', 'cdk:build-release'],
+  ['material:build-release', 'cdk:build-release', 'material-examples:build-release'],
   ['e2e-app:copy-release', 'e2e-app:copy-assets'],
   'e2e-app:build-ts'
 ));
@@ -76,5 +76,6 @@ task('serve:e2eapp:watch', ['serve:e2eapp', 'material:watch', ':watch:e2eapp']);
 task('e2e-app:copy-release', () => {
   copySync(join(releasesDir, 'material'), join(outDir, 'material'));
   copySync(join(releasesDir, 'cdk'), join(outDir, 'cdk'));
+  copySync(join(releasesDir, 'material-examples'), join(outDir, 'material-examples'));
 });
 

tsconfig.json

@@ -17,7 +17,8 @@
     "paths": {
       "@angular/material": ["./src/lib/public_api.ts"],
       "@angular/cdk": ["./src/cdk/public_api.ts"],
-      "@angular/cdk/testing": ["./src/cdk/testing"]
+      "@angular/cdk/testing": ["./src/cdk/testing"],
+      "@angular/material-examples": ["./src/material-examples"]
     }
   },
   "include": [