test(progress-bar): add basic e2e tests (#1895)

Adds basic e2e tests that assert that the different progress bars are being rendered.

Referencing #559.

Author: crisbeto

e2e/components/progress-bar/progress-bar.e2e.ts

@@ -0,0 +1,23 @@
+describe('progress-bar', () => {
+  beforeEach(() => browser.get('/progress-bar'));
+
+  it('should render a determinate progress bar', () => {
+    shouldExist('md-progress-bar[mode="determinate"]');
+  });
+
+  it('should render a buffer progress bar', () => {
+    shouldExist('md-progress-bar[mode="buffer"]');
+  });
+
+  it('should render a query progress bar', () => {
+    shouldExist('md-progress-bar[mode="query"]');
+  });
+
+  it('should render a indeterminate progress bar', () => {
+    shouldExist('md-progress-bar[mode="indeterminate"]');
+  });
+
+  function shouldExist(selector: string): void {
+    expect(element(by.css(selector)).isPresent()).toBe(true);
+  }
+});

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

@@ -11,6 +11,7 @@ import {BasicTabs} from './tabs/tabs-e2e';
 import {DialogE2E, TestDialog} from './dialog/dialog-e2e';
 import {GridListE2E} from './grid-list/grid-list-e2e';
 import {ListE2E} from './list/list-e2e';
+import {ProgressBarE2E} from './progress-bar/progress-bar-e2e';
 import {MaterialModule} from '@angular/material';
 import {E2E_APP_ROUTES} from './e2e-app/routes';
 
@@ -34,6 +35,7 @@ import {E2E_APP_ROUTES} from './e2e-app/routes';
     TestDialog,
     GridListE2E,
     ListE2E,
+    ProgressBarE2E,
   ],
   bootstrap: [E2EApp],
   providers: [

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

@@ -5,6 +5,7 @@
 <a md-list-item [routerLink]="['icon']">Icon</a>
 <a md-list-item [routerLink]="['list']">List</a>
 <a md-list-item [routerLink]="['menu']">Menu</a>
+<a md-list-item [routerLink]="['progress-bar']">Progress bar</a>
 <a md-list-item [routerLink]="['radio']">Radios</a>
 <a md-list-item [routerLink]="['tabs']">Tabs</a>
 

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

@@ -9,6 +9,7 @@ import {SimpleCheckboxes} from '../checkbox/checkbox-e2e';
 import {DialogE2E} from '../dialog/dialog-e2e';
 import {GridListE2E} from '../grid-list/grid-list-e2e';
 import {ListE2E} from '../list/list-e2e';
+import {ProgressBarE2E} from '../progress-bar/progress-bar-e2e';
 
 export const E2E_APP_ROUTES: Routes = [
   {path: '', component: Home},
@@ -21,4 +22,5 @@ export const E2E_APP_ROUTES: Routes = [
   {path: 'dialog', component: DialogE2E},
   {path: 'grid-list', component: GridListE2E},
   {path: 'list', component: ListE2E},
+  {path: 'progress-bar', component: ProgressBarE2E},
 ];

src/e2e-app/menu/menu-e2e.ts

@@ -12,8 +12,7 @@ import {Component} from '@angular/core';
     }
 
     .bottom-row {
-      position: absolute;
-      top: 200px;
+      margin-top: 5px;
     }
   `]
 })

src/e2e-app/progress-bar/progress-bar-e2e.html

@@ -0,0 +1,4 @@
+<md-progress-bar mode="determinate" [value]="determinateValue"></md-progress-bar>
+<md-progress-bar mode="buffer" [value]="bufferValue"></md-progress-bar>
+<md-progress-bar mode="query"></md-progress-bar>
+<md-progress-bar mode="indeterminate"></md-progress-bar>

src/e2e-app/progress-bar/progress-bar-e2e.ts

@@ -0,0 +1,17 @@
+import {Component} from '@angular/core';
+
+
+@Component({
+  moduleId: module.id,
+  selector: 'progress-bar-e2e',
+  templateUrl: 'progress-bar-e2e.html',
+  styles: [`
+    md-progress-bar {
+      margin-bottom: 10px;
+    }
+  `]
+})
+export class ProgressBarE2E {
+  determinateValue: number = 57;
+  bufferValue: number = 35;
+}