fix(button): complete ripple when button becomes disabled (#4372)

* Do not destroy the ripple when it is disabled

* Update tests

Author: willshowell

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

@@ -101,4 +101,8 @@
     <button md-button>Check<md-icon class="md-24">favorite</md-icon></button>
     <button md-button>Last<md-icon>navigate_before</md-icon></button>
   </section>
+  <section>
+    <button md-raised-button [disabled]="toggleDisable" (click)="toggleDisable = true">Disable</button>
+    <button md-button [disabled]="!toggleDisable" (click)="toggleDisable = false">Disable</button>
+  </section>
 </div>

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

@@ -10,4 +10,5 @@ import {Component} from '@angular/core';
 export class ButtonDemo {
   isDisabled: boolean = false;
   clickCounter: number = 0;
+  toggleDisable: boolean = false;
 }

src/lib/button/button.html

@@ -1,6 +1,7 @@
 <span class="mat-button-wrapper"><ng-content></ng-content></span>
-<div md-ripple *ngIf="!_isRippleDisabled()" class="mat-button-ripple"
+<div md-ripple class="mat-button-ripple"
      [class.mat-button-ripple-round]="_isRoundButton || _isIconButton"
+     [mdRippleDisabled]="_isRippleDisabled()"
      [mdRippleCentered]="_isIconButton"
      [mdRippleTrigger]="_getHostElement()"></div>
 <div class="mat-button-focus-overlay"></div>

src/lib/button/button.spec.ts

@@ -1,9 +1,10 @@
 import {async, ComponentFixture, TestBed} from '@angular/core/testing';
-import {Component} from '@angular/core';
+import {Component, DebugElement} from '@angular/core';
 import {By} from '@angular/platform-browser';
 import {MdButtonModule} from './index';
 import {ViewportRuler} from '../core/overlay/position/viewport-ruler';
 import {FakeViewportRuler} from '../core/overlay/position/fake-viewport-ruler';
+import {MdRipple} from '../core/ripple/index';
 
 
 describe('MdButton', () => {
@@ -156,41 +157,54 @@ describe('MdButton', () => {
   describe('button ripples', () => {
     let fixture: ComponentFixture<TestApp>;
     let testComponent: TestApp;
-    let buttonElement: HTMLButtonElement;
-    let anchorElement: HTMLAnchorElement;
+    let buttonDebugElement: DebugElement;
+    let buttonRippleDebugElement: DebugElement;
+    let buttonRippleInstance: MdRipple;
+    let anchorDebugElement: DebugElement;
+    let anchorRippleDebugElement: DebugElement;
+    let anchorRippleInstance: MdRipple;
 
     beforeEach(() => {
       fixture = TestBed.createComponent(TestApp);
       fixture.detectChanges();
 
       testComponent = fixture.componentInstance;
-      buttonElement = fixture.nativeElement.querySelector('button[md-button]');
-      anchorElement = fixture.nativeElement.querySelector('a[md-button]');
+
+      buttonDebugElement = fixture.debugElement.query(By.css('button[md-button]'));
+      buttonRippleDebugElement = buttonDebugElement.query(By.directive(MdRipple));
+      buttonRippleInstance = buttonRippleDebugElement.injector.get<MdRipple>(MdRipple);
+
+      anchorDebugElement = fixture.debugElement.query(By.css('a[md-button]'));
+      anchorRippleDebugElement = anchorDebugElement.query(By.directive(MdRipple));
+      anchorRippleInstance = anchorRippleDebugElement.injector.get<MdRipple>(MdRipple);
     });
 
-    it('should remove ripple if mdRippleDisabled input is set', () => {
-      expect(buttonElement.querySelectorAll('[md-ripple]').length).toBe(1);
+    it('should disable the ripple if mdRippleDisabled input is set', () => {
+      expect(buttonRippleInstance.disabled).toBeFalsy();
 
       testComponent.rippleDisabled = true;
       fixture.detectChanges();
-      expect(buttonElement.querySelectorAll('[md-ripple]').length).toBe(0);
-    });
 
-    it('should not have a ripple when the button is disabled', () => {
-      let buttonRipple = buttonElement.querySelector('[md-ripple]');
-      let anchorRipple = anchorElement.querySelector('[md-ripple]');
+      expect(buttonRippleInstance.disabled).toBeTruthy();
+    });
 
-      expect(buttonRipple).toBeTruthy('Expected an enabled button[md-button] to have a ripple');
-      expect(anchorRipple).toBeTruthy('Expected an enabled a[md-button] to have a ripple');
+    it('should disable the ripple when the button is disabled', () => {
+      expect(buttonRippleInstance.disabled).toBeFalsy(
+        'Expected an enabled button[md-button] to have an enabled ripple'
+      );
+      expect(anchorRippleInstance.disabled).toBeFalsy(
+        'Expected an enabled a[md-button] to have an enabled ripple'
+      );
 
       testComponent.isDisabled = true;
       fixture.detectChanges();
 
-      buttonRipple = buttonElement.querySelector('button [md-ripple]');
-      anchorRipple = anchorElement.querySelector('a [md-ripple]');
-
-      expect(buttonRipple).toBeFalsy('Expected a disabled button[md-button] not to have a ripple');
-      expect(anchorRipple).toBeFalsy('Expected a disabled a[md-button] not to have a ripple');
+      expect(buttonRippleInstance.disabled).toBeTruthy(
+        'Expected a disabled button[md-button] not to have an enabled ripple'
+      );
+      expect(anchorRippleInstance.disabled).toBeTruthy(
+        'Expected a disabled a[md-button] not to have an enabled ripple'
+      );
     });
   });
 });