From 8d6943227d6646ae12ca365dd1bfd7ba1db95ee0 Mon Sep 17 00:00:00 2001
From: Jeremy Elbourn <jelbourn@google.com>
Date: Tue, 12 May 2015 08:54:47 -0700
Subject: [PATCH] chore(material): add e2e smoke tests for a few more
 components.

Closes #1884
---
 .../src/components/radio/radio-button.scss      |  7 ++++++-
 .../src/components/radio/radio_button.html      |  4 ++--
 .../e2e_test/material/grid_list_spec.es6        | 16 ++++++++++++++++
 .../examples/e2e_test/material/input_spec.es6   | 17 +++++++++++++++++
 .../examples/e2e_test/material/radio_spec.es6   | 13 ++++++++++++-
 .../src/material/grid_list/demo_app.html        |  4 ++--
 .../examples/src/material/radio/demo_app.html   | 10 ++++++++--
 7 files changed, 63 insertions(+), 8 deletions(-)
 create mode 100644 modules/examples/e2e_test/material/grid_list_spec.es6
 create mode 100644 modules/examples/e2e_test/material/input_spec.es6

diff --git a/modules/angular2_material/src/components/radio/radio-button.scss b/modules/angular2_material/src/components/radio/radio-button.scss
index cdb8ee6972..c9700c28d0 100644
--- a/modules/angular2_material/src/components/radio/radio-button.scss
+++ b/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
 
diff --git a/modules/angular2_material/src/components/radio/radio_button.html b/modules/angular2_material/src/components/radio/radio_button.html
index 7406388266..f1f4ec488b 100644
--- a/modules/angular2_material/src/components/radio/radio_button.html
+++ b/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>
diff --git a/modules/examples/e2e_test/material/grid_list_spec.es6 b/modules/examples/e2e_test/material/grid_list_spec.es6
new file mode 100644
index 0000000000..d3e2e4e3b3
--- /dev/null
+++ b/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());
+  });
+});
diff --git a/modules/examples/e2e_test/material/input_spec.es6 b/modules/examples/e2e_test/material/input_spec.es6
new file mode 100644
index 0000000000..e18a617b50
--- /dev/null
+++ b/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');
+  });
+});
+
diff --git a/modules/examples/e2e_test/material/radio_spec.es6 b/modules/examples/e2e_test/material/radio_spec.es6
index 88a02c9856..6058a21c9b 100644
--- a/modules/examples/e2e_test/material/radio_spec.es6
+++ b/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');
+  });
 });
diff --git a/modules/examples/src/material/grid_list/demo_app.html b/modules/examples/src/material/grid_list/demo_app.html
index ad56497409..efec964439 100644
--- a/modules/examples/src/material/grid_list/demo_app.html
+++ b/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 @@
 
 
 
-  <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>
diff --git a/modules/examples/src/material/radio/demo_app.html b/modules/examples/src/material/radio/demo_app.html
index 60a53af3d3..ad9117d12c 100644
--- a/modules/examples/src/material/radio/demo_app.html
+++ b/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 @@
 
   <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>