test(sidenav): add e2e tests (#5463)

e2e/components/sidenav-e2e.spec.ts

@@ -0,0 +1,27 @@
+import {browser, by, element, ExpectedConditions} from 'protractor';
+const EC = ExpectedConditions;
+
+describe('sidenav', () => {
+  describe('opening and closing', () => {
+    beforeEach(() => browser.get('/sidenav'));
+
+    let input = element(by.tagName('md-sidenav'));
+
+
+    it('should be closed', () => {
+      expect(input.isDisplayed()).toBeFalsy();
+    });
+
+    it('should open', () => {
+      element(by.buttonText('Open sidenav')).click();
+      expect(input.isDisplayed()).toBeTruthy();
+    });
+
+    it('should close again', () => {
+      element(by.buttonText('Open sidenav')).click();
+      element(by.buttonText('Open sidenav')).click();
+      browser.wait(EC.presenceOf(element(by.className('mat-sidenav-closed'))), 1000);
+      expect(input.isDisplayed()).toBeFalsy();
+    });
+  });
+});

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

@@ -18,11 +18,13 @@ import {FullscreenE2E, TestDialog as TestDialogFullScreen} from './fullscreen/fu
 import {E2E_APP_ROUTES} from './e2e-app/routes';
 import {SlideToggleE2E} from './slide-toggle/slide-toggle-e2e';
 import {InputE2E} from './input/input-e2e';
+import {SidenavE2E} from './sidenav/sidenav-e2e';
 import {BlockScrollStrategyE2E} from './block-scroll-strategy/block-scroll-strategy-e2e';
 import {
   OverlayContainer, FullscreenOverlayContainer, MdGridListModule, MdProgressBarModule,
   MdProgressSpinnerModule, MdTabsModule, MdRadioModule, MdSlideToggleModule, MdMenuModule,
-  MdListModule, MdInputModule, MdIconModule, MdDialogModule, MdCheckboxModule, MdButtonModule
+  MdListModule, MdInputModule, MdIconModule, MdDialogModule, MdCheckboxModule, MdButtonModule,
+  MdSidenavModule
 } from '@angular/material';
 
 /**
@@ -38,10 +40,11 @@ import {
     MdInputModule,
     MdListModule,
     MdMenuModule,
-    MdSlideToggleModule,
-    MdRadioModule,
     MdProgressBarModule,
     MdProgressSpinnerModule,
+    MdRadioModule,
+    MdSidenavModule,
+    MdSlideToggleModule,
     MdTabsModule
   ]
 })
@@ -68,6 +71,7 @@ export class E2eMaterialModule {}
     MenuE2E,
     ProgressBarE2E,
     ProgressSpinnerE2E,
+    SidenavE2E,
     SimpleCheckboxes,
     SimpleRadioButtons,
     SlideToggleE2E,

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

@@ -14,6 +14,7 @@
   <a md-list-item [routerLink]="['progress-bar']">Progress bar</a>
   <a md-list-item [routerLink]="['progress-spinner']">Progress Spinner</a>
   <a md-list-item [routerLink]="['radio']">Radios</a>
+  <a md-list-item [routerLink]="['sidenav']">Sidenav</a>
   <a md-list-item [routerLink]="['slide-toggle']">Slide Toggle</a>
   <a md-list-item [routerLink]="['tabs']">Tabs</a>
 </md-nav-list>

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

@@ -14,6 +14,7 @@ import {ProgressSpinnerE2E} from '../progress-spinner/progress-spinner-e2e';
 import {SlideToggleE2E} from '../slide-toggle/slide-toggle-e2e';
 import {FullscreenE2E} from '../fullscreen/fullscreen-e2e';
 import {InputE2E} from '../input/input-e2e';
+import {SidenavE2E} from '../sidenav/sidenav-e2e';
 import {BlockScrollStrategyE2E} from '../block-scroll-strategy/block-scroll-strategy-e2e';
 
 export const E2E_APP_ROUTES: Routes = [
@@ -31,6 +32,7 @@ export const E2E_APP_ROUTES: Routes = [
   {path: 'progress-bar', component: ProgressBarE2E},
   {path: 'progress-spinner', component: ProgressSpinnerE2E},
   {path: 'radio', component: SimpleRadioButtons},
+  {path: 'sidenav', component: SidenavE2E},
   {path: 'slide-toggle', component: SlideToggleE2E},
   {path: 'tabs', component: BasicTabs},
 ];

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

@@ -0,0 +1,8 @@
+<section>
+  <md-sidenav-container>
+    <md-sidenav #sidenav mode="side">Drawer content</md-sidenav>
+    <button type="button" (click)="sidenav.toggle()">
+      Open sidenav
+    </button>
+  </md-sidenav-container>
+</section>

src/e2e-app/sidenav/sidenav-e2e.ts

@@ -0,0 +1,10 @@
+import {Component} from '@angular/core';
+
+
+@Component({
+  moduleId: module.id,
+  selector: 'sidenav-e2e',
+  templateUrl: 'sidenav-e2e.html',
+})
+export class SidenavE2E {
+}