chore(material): add e2e smoke tests for a few more components.

Closes angular#1884

Author: jelbourn

modules/angular2_material/src/components/radio/radio-button.scss

@@ -16,7 +16,7 @@ md-radio-button {
 
 md-radio-group {
   border: 1px dotted transparent;
-  display: block;
+  display: inline-block;
   outline: none;
 }
 
@@ -71,6 +71,11 @@ md-radio-group {
   width: auto;
 }
 
+.md-radio-root {
+  display: block;
+  cursor: pointer;
+}
+
 
 // THEME
 

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

@@ -2,9 +2,9 @@
 
 <!-- TODO(jelbourn): render the radio on either side of the content -->
 
-<label role="radio"
+<label role="radio" class="md-radio-root"
     [class.md-radio-checked]="checked"
-    (^click)="select($event)" >
+    (^click)="select($event)">
   <!-- The actual `radio` part of the control. -->
   <div class="md-radio-container">
     <div class="md-radio-off"></div>

modules/examples/e2e_test/material/grid_list_spec.es6

@@ -0,0 +1,16 @@
+var testUtil = require('angular2/src/test_lib/e2e_util');
+
+describe('md-grid-list', function () {
+  var url = 'examples/src/material/grid_list/index.html';
+
+  beforeEach(() => { browser.get(url); });
+  afterEach(testUtil.verifyNoBrowserErrors);
+
+  it('should set tiles into different positions', () => {
+    var tiles = element.all(by.css('md-grid-list#complex md-grid-tile'));
+
+    // If the grid-list was not doing any layout, all of the tiles would have the same position.
+    // So our smoke test simply checks that any two tiles are in different positions.
+    expect(tiles.first().getLocation()).not.toEqual(tiles.last().getLocation());
+  });
+});

modules/examples/e2e_test/material/input_spec.es6

@@ -0,0 +1,17 @@
+var testUtil = require('angular2/src/test_lib/e2e_util');
+
+describe('md-input', function () {
+  var url = 'examples/src/material/input/index.html';
+
+  beforeEach(() => { browser.get(url); });
+  afterEach(testUtil.verifyNoBrowserErrors);
+
+  it('should enter a value to the input', () => {
+    var input = element.all(by.css('md-input-container input')).first();
+
+    input.sendKeys('Hello');
+
+    expect(input.getAttribute('value')).toBe('Hello');
+  });
+});
+

modules/examples/e2e_test/material/radio_spec.es6

@@ -6,5 +6,16 @@ describe('md-radio-button', function () {
   beforeEach(() => { browser.get(url); });
   afterEach(testUtil.verifyNoBrowserErrors);
 
-  // Radio buttons are broken right now, see https://github.com/angular/angular/issues/1643
+  it('should check one radio button and then check another', () => {
+    var standaloneRadios = element.all(by.css('[name="element"]'));
+    var firstRadio = standaloneRadios.first();
+    var lastRadio = standaloneRadios.last();
+
+    firstRadio.click();
+    expect(firstRadio.getAttribute('aria-checked')).toBe('true');
+
+    lastRadio.click();
+    expect(firstRadio.getAttribute('aria-checked')).toBe('false');
+    expect(lastRadio.getAttribute('aria-checked')).toBe('true');
+  });
 });

modules/examples/src/material/grid_list/demo_app.html

@@ -12,7 +12,7 @@
 
   <h2>grid-list demo</h2>
 
-  <md-grid-list cols="4" row-height="50px" gutter-size="2em">
+  <md-grid-list cols="4" row-height="50px" gutter-size="2em" id="complex">
 
     <md-grid-tile rowspan="1" colspan="2"> Tile #1 </md-grid-tile>
     <md-grid-tile rowspan="1" colspan="1"> Tile #2 </md-grid-tile>
@@ -26,7 +26,7 @@ <h2>grid-list demo</h2>
 
 
 
-  <md-grid-list cols="4" row-height="50px" gutter-size="2em">
+  <md-grid-list cols="4" row-height="50px" gutter-size="2em" id="simple">
 
     <md-grid-tile rowspan="1" colspan="1"> Tile #1 </md-grid-tile>
     <md-grid-tile rowspan="1" colspan="1"> Tile #2 </md-grid-tile>

modules/examples/src/material/radio/demo_app.html

@@ -1,3 +1,9 @@
+<style>
+  md-radio-button {
+    max-width: 200px;
+  }
+</style>
+
 <div>
   <h2>Radio buttons</h2>
   <h3>Inside of a radiogroup</h3>
@@ -17,8 +23,8 @@ <h3>Standalone</h3>
 
   <md-radio-button name="element" (^click)="onIndividualClick()">Earth</md-radio-button>
   <md-radio-button name="element" (^click)="onIndividualClick()">Fire</md-radio-button>
-  <md-radio-button name="element" (^click)="onIndividualClick()">Wind</md-radio-button>
-  <md-radio-button name="element" (^click)="onIndividualClick()" disabled>Heart (disabled)</md-radio-button>
+  <md-radio-button name="element" (^click)="onIndividualClick()" disabled>Wind (disabled)</md-radio-button>
+  <md-radio-button name="element" (^click)="onIndividualClick()">Heart</md-radio-button>
 
   <p>individual radio value change count: {{individualValueChanges}}</p>