chore(material): add simple e2e smoke tests for components.

Author: jelbourn

gulpfile.js

@@ -746,11 +746,22 @@ gulp.task('build', ['build.js', 'build.dart']);
 
 // ------------
 // angular material testing rules
-gulp.task('build.js.material', ['build.js.dev'], function() {
+gulp.task('build.css.material', function() {
  return gulp.src('modules/*/src/**/*.scss')
  .pipe(sass())
  .pipe(autoprefixer())
- .pipe(gulp.dest(CONFIG.dest.js.dev.es5));
+ .pipe(gulp.dest(CONFIG.dest.js.prod.es5))
+ .pipe(gulp.dest(CONFIG.dest.js.dev.es5))
+ .pipe(gulp.dest(CONFIG.dest.js.dart2js + '/examples/packages'));
+});
+
+
+gulp.task('build.js.material', function(done) {
+ runSequence('build.js.dev', 'build.css.material', done);
+});
+
+gulp.task('build.dart2js.material', function(done) {
+ runSequence('build.dart', 'build.css.material', done);
 });
 
 // TODO: this target is temporary until we find a way to use the SASS transformer

modules/angular2_material/src/components/checkbox/checkbox.js

@@ -19,7 +19,7 @@ import {NumberWrapper} from 'angular2/src/facade/lang';
  'tabindex': 'tabindex',
  'role': 'attr.role',
  'checked': 'attr.aria-checked',
- 'disabled_': 'attr.aria-disabled'
+ 'disabled': 'attr.aria-disabled'
  }
 })
 @View({
@@ -31,7 +31,7 @@ export class MdCheckbox {
  checked: boolean;
 
  /** Whether this checkbox is disabled. */
- disabled_: boolean;
+ _disabled: boolean;
 
  /** Setter for `role` attribute. */
  role: string;
@@ -43,14 +43,15 @@ export class MdCheckbox {
  this.role = 'checkbox';
  this.checked = false;
  this.tabindex = isPresent(tabindex) ? NumberWrapper.parseInt(tabindex, 10) : 0;
+ this._disabled = false;
  }
 
  get disabled() {
- return this.disabled_;
+ return this._disabled;
  }
 
  set disabled(value) {
- this.disabled_ = isPresent(value) && value !== false;
+ this._disabled = isPresent(value) && value !== false;
  }
 
  onKeydown(event: KeyboardEvent) {

modules/angular2_material/src/components/radio/radio_button.js

@@ -77,8 +77,8 @@ export class MdRadioButton {
 
  constructor(
  @Optional() @Parent() radioGroup: MdRadioGroup,
- @Attribute('id') id: string,
- @Attribute('tabindex') tabindex: string,
+ @Attribute('id') id: String,
+ @Attribute('tabindex') tabindex: String,
  radioDispatcher: MdRadioDispatcher) {
  // Assertions. Ideally these should be stripped out by the compiler.
  // TODO(jelbourn): Assert that there's no name binding AND a parent radio group.
@@ -213,8 +213,8 @@ export class MdRadioGroup {
  role: string;
 
  constructor(
- @Attribute('tabindex') tabindex: string,
- @Attribute('disabled') disabled: string,
+ @Attribute('tabindex') tabindex: String,
+ @Attribute('disabled') disabled: String,
  radioDispatcher: MdRadioDispatcher) {
  this.name_ = `md-radio-group-${_uniqueIdCounter++}`;
  this.radios_ = [];

modules/examples/e2e_test/material/button_spec.es6

@@ -0,0 +1,10 @@
+var testUtil = require('angular2/src/test_lib/e2e_util');
+
+describe('md-button', function () {
+ var url = 'examples/src/material/button/index.html';
+
+ beforeEach(() => { browser.get(url); });
+ afterEach(testUtil.verifyNoBrowserErrors);
+
+ // Buttons are broken right now, see https://github.com/angular/angular/issues/1602
+});

modules/examples/e2e_test/material/checkbox_spec.es6

@@ -0,0 +1,18 @@
+var testUtil = require('angular2/src/test_lib/e2e_util');
+
+describe('md-checkbox', function () {
+ var url = 'examples/src/material/checkbox/index.html';
+
+ beforeEach(() => { browser.get(url); });
+ afterEach(testUtil.verifyNoBrowserErrors);
+
+ it('should toggle a checkbox', function() {
+ var checkbox = element.all(by.css('md-checkbox')).first();
+
+ checkbox.click();
+ expect(checkbox.getAttribute('aria-checked')).toBe('true');
+
+ checkbox.click();
+ expect(checkbox.getAttribute('aria-checked')).toBe('false');
+ });
+});

modules/examples/e2e_test/material/dialog_spec.es6

@@ -0,0 +1,19 @@
+var testUtil = require('angular2/src/test_lib/e2e_util');
+
+describe('md-dialog', function () {
+ var url = 'examples/src/material/dialog/index.html';
+
+ beforeEach(() => { browser.get(url); });
+ afterEach(testUtil.verifyNoBrowserErrors);
+
+ it('should open a dialog', function() {
+ var openButton = element(by.id('open'));
+ openButton.click();
+ expect(element(by.css('.md-dialog')).isPresent()).toBe(true);
+
+ var dialog = element(by.css('.md-dialog'));
+ dialog.sendKeys(protractor.Key.ESCAPE);
+
+ expect(element(by.css('.md-dialog')).isPresent()).toBe(false);
+ });
+});

modules/examples/e2e_test/material/progress_linear_spec.es6

@@ -0,0 +1,23 @@
+var testUtil = require('angular2/src/test_lib/e2e_util');
+
+describe('md-progress-linear', function () {
+ var url = 'examples/src/material/progress-linear/index.html';
+
+ beforeEach(() => { browser.get(url); });
+ afterEach(testUtil.verifyNoBrowserErrors);
+
+ it('should increment and decrement progress', function() {
+ var progressBar = element.all(by.css('md-progress-linear')).first();
+ var incrementButton = element(by.id('increment'));
+ var decrementButton = element(by.id('decrement'));
+
+ var initialValue = progressBar.getAttribute('aria-valuenow');
+
+ incrementButton.click();
+ expect(progressBar.getAttribute('aria-valuenow')).toBeGreaterThan(initialValue);
+
+ decrementButton.click();
+ decrementButton.click();
+ expect(progressBar.getAttribute('aria-valuenow')).toBeLessThan(initialValue);
+ });
+});

modules/examples/e2e_test/material/radio_spec.es6

@@ -0,0 +1,10 @@
+var testUtil = require('angular2/src/test_lib/e2e_util');
+
+describe('md-radio-button', function () {
+ var url = 'examples/src/material/radio/index.html';
+
+ beforeEach(() => { browser.get(url); });
+ afterEach(testUtil.verifyNoBrowserErrors);
+
+ // Radio buttons are broken right now, see https://github.com/angular/angular/issues/1643
+});

modules/examples/src/material/button/index.html

@@ -7,10 +7,7 @@
  <style> * { font-family: RobotoDraft, Roboto, 'Helvetica Neue', sans-serif; } </style>
 </head>
 <body>
-
  <demo-app>Loading...</demo-app>
-
  $SCRIPTS$
-
 </body>
 </html>

modules/examples/src/material/checkbox/index.html

@@ -4,15 +4,10 @@
  <meta charset="UTF-8">
  <title>ng-material checkbox demo</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:400,500,700,400italic">
- <style>
- * {
- font-family: RobotoDraft, Roboto;
- }
- </style>
+ <style> * { font-family: RobotoDraft, Roboto; } </style>
 </head>
 <body>
-
-$SCRIPTS$
  <demo-app>Loading...</demo-app>
+ $SCRIPTS$
 </body>
 </html>