test(button): add e2e test for button

e2e/components/button/button.e2e.js

@@ -0,0 +1,17 @@
+describe('button', function () {
+  describe('disabling behavior', function () {
+    beforeEach(function() {
+      browser.get('/button');
+    });
+    it('should prevent click handlers from executing when disabled', function () {
+      element(by.id('testButton')).click();
+      expect(element(by.id('clickCounter')).getText()).toEqual('1');
+
+      element(by.id('disableToggle')).click();
+      element(by.id('testButton')).click();
+      expect(element(by.id('clickCounter')).getText()).toEqual('1');
+    });
+  });
+});
+
+

src/demo-app/button/button-demo.html

@@ -1,17 +1,4 @@
 <div class="demo-button">
-  <section>
-    Link
-    <a href="http://www.google.com" md-button color="primary">link</a>
-    Button
-    <button md-button>flat</button>
-  </section>
-  <section>
-    Link
-    <a href="http://www.google.com" md-raised-button color="primary">link</a>
-    Button
-    <button md-raised-button>button</button>
-  </section>
-
   <section>
     <button md-button>flat</button>
     <button md-raised-button>raised</button>
@@ -74,10 +61,10 @@
 
   <section>
     <div>
-      <span>isDisabled: {{isDisabled}}</span>
-      <button md-raised-button (click)="isDisabled=!isDisabled">Disable buttons</button>
+      <p>isDisabled: {{isDisabled}}, clickCounter: <span id="clickCounter">{{clickCounter}}</span></p>
+      <button md-raised-button (click)="isDisabled=!isDisabled" id="disableToggle">Disable buttons</button>
     </div>
-    <button md-button [disabled]="isDisabled">off</button>
+    <button md-button [disabled]="isDisabled" (click)="clickCounter=clickCounter+1" id="testButton">off</button>
     <button md-button color="primary" [disabled]="isDisabled">off</button>
     <a href="http://www.google.com" md-button color="accent" [disabled]="isDisabled">off</a>
     <button md-raised-button color="primary" [disabled]="isDisabled">off</button>
@@ -89,4 +76,16 @@
       <i class="material-icons md-24">favorite</i>
     </button>
   </section>
+  <section>
+    Link
+    <a href="http://www.google.com" md-button color="primary">link</a>
+    Button
+    <button md-button>flat</button>
+  </section>
+  <section>
+    Link
+    <a href="http://www.google.com" md-raised-button color="primary">link</a>
+    Button
+    <button md-raised-button>button</button>
+  </section>
 </div>

src/demo-app/button/button-demo.scss

@@ -9,5 +9,9 @@
     background-color: #f7f7f7;
     margin: 8px;
   }
+
+  p {
+    padding:5px 15px;
+  }
 }
 

src/demo-app/button/button-demo.ts

@@ -9,5 +9,5 @@ import {MdButton, MdAnchor} from '../../components/button/button';
 })
 export class ButtonDemo {
   isDisabled: boolean = false;
-
+  clickCounter: number = 0;
 }