fix(button): fix aria-label async injection and tests

Author: ThomasBurleson

src/components/button/button.js

@@ -61,7 +61,7 @@ angular
  *  </md-button>
  * </hljs>
  */
-function MdButtonDirective($mdButtonInkRipple, $mdTheming, $mdAria, $timeout, $interpolate) {
+function MdButtonDirective($mdButtonInkRipple, $mdTheming, $mdAria, $timeout) {
 
   return {
     restrict: 'EA',

src/components/button/button.spec.js

@@ -1,4 +1,4 @@
-fdescribe('md-button', function() {
+describe('md-button', function() {
 
   beforeEach(module('material.components.button'));
 
@@ -9,47 +9,50 @@ fdescribe('md-button', function() {
     expect(button[0]).toHaveClass('hide-sm');
   }));
 
-  it('should only have one ripple container when a custom ripple color is set', inject(function ($compile, $rootScope, $timeout) {
-    var button = $compile('<md-button md-ink-ripple="#f00">button</md-button>')($rootScope);
+  describe('with ARIA support', function() {
 
-    button.triggerHandler({ type: '$md.pressdown', pointer: { x: 0, y: 0 } });
-    expect(button[0].getElementsByClassName('md-ripple-container').length).toBe(0);
-  }));
+    it('should only have one ripple container when a custom ripple color is set', inject(function ($compile, $rootScope) {
+      var button = $compile('<md-button md-ink-ripple="#f00">button</md-button>')($rootScope);
 
+      button.triggerHandler({ type: '$md.pressdown', pointer: { x: 0, y: 0 } });
+      expect(button[0].getElementsByClassName('md-ripple-container').length).toBe(0);
+    }));
 
-  it('should expect an aria-label if element has no text', inject(function($compile, $rootScope, $log) {
-    spyOn($log, 'warn');
-    var button = $compile('<md-button><md-icon></md-icon></md-button>')($rootScope);
-    $rootScope.$apply();
-    expect($log.warn).toHaveBeenCalled();
 
-    $log.warn.calls.reset();
-    button = $compile('<md-button aria-label="something"><md-icon></md-icon></md-button>')($rootScope);
-    $rootScope.$apply();
-    expect($log.warn).not.toHaveBeenCalled();
-  }));
+    it('should expect an aria-label if element has no text', inject(function($compile, $rootScope, $log) {
+      spyOn($log, 'warn');
+      var button = $compile('<md-button><md-icon></md-icon></md-button>')($rootScope);
+      $rootScope.$apply();
+      expect($log.warn).toHaveBeenCalled();
+
+      $log.warn.calls.reset();
+      button = $compile('<md-button aria-label="something"><md-icon></md-icon></md-button>')($rootScope);
+      $rootScope.$apply();
+      expect($log.warn).not.toHaveBeenCalled();
+    }));
 
-  it('should expect an aria-label if element has text content', inject(function($compile, $rootScope, $log) {
-    spyOn($log, 'warn');
+    it('should expect an aria-label if element has text content', inject(function($compile, $rootScope, $log) {
+      spyOn($log, 'warn');
 
-    var button = $compile('<md-button>Hello</md-button>')($rootScope);
-    expect(button.attr('aria-label')).toBe("Hello");
-    expect($log.warn).not.toHaveBeenCalled();
-  }));
+      var button = $compile('<md-button>Hello</md-button>')($rootScope);
+      expect(button.attr('aria-label')).toBe("Hello");
+      expect($log.warn).not.toHaveBeenCalled();
+    }));
 
-  it('should set an aria-label if the text content using bindings', inject(function($$rAF, $compile, $rootScope, $log) {
-    spyOn($log, 'warn');
+    it('should set an aria-label if the text content using bindings', inject(function($$rAF, $compile, $rootScope, $log, $timeout) {
+      spyOn($log, 'warn');
 
-    var scope = angular.extend($rootScope.$new(),{greetings : "Welcome"});
-    var button = $compile('<md-button>{{greetings}}</md-button>')(scope);
+      var scope = angular.extend($rootScope.$new(),{greetings : "Welcome"});
+      var button = $compile('<md-button>{{greetings}}</md-button>')(scope);
 
-    $rootScope.$apply();
-    $$rAF.flush();    // needed for $mdAria.expectAsync()
+      $rootScope.$apply();
+      $$rAF.flush();    // needed for $mdAria.expectAsync()
 
-    expect(button.attr('aria-label')).toBe("Welcome");
-    expect($log.warn).not.toHaveBeenCalled();
-  }));
+      expect(button.attr('aria-label')).toBe("Welcome");
+      expect($log.warn).not.toHaveBeenCalled();
+    }));
 
+  });
 
   it('should allow attribute directive syntax', inject(function($compile, $rootScope) {
     var button = $compile('<a md-button href="https://google.com">google</a>')($rootScope.$new());

src/components/tooltip/tooltip.spec.js

@@ -41,7 +41,7 @@ describe('<md-tooltip> directive', function() {
         '</md-button>'
       );
 
-      expect(element.attr('aria-label')).toBeUndefined();
+      expect(element.attr('aria-label')).toBe("Hello");
   });
 
   it('should label parent', function(){

src/core/services/aria/aria.js

@@ -5,7 +5,7 @@ angular.module('material.core')
 /*
  * @ngInject
  */
-function AriaService($$rAF, $log, $window) {
+function AriaService($$rAF, $log, $window, $interpolate) {
 
   return {
     expect: expect,
@@ -44,18 +44,25 @@ function AriaService($$rAF, $log, $window) {
     // the text may not be defined yet in the case of a binding.
     // There is a higher chance that a binding will be defined if we wait one frame.
     $$rAF(function() {
-      expect(element, attrName, defaultValueGetter());
+        expect(element, attrName, defaultValueGetter());
     });
   }
 
   function expectWithText(element, attrName) {
-    expectAsync(element, attrName, function() {
-      return getText(element);
-    });
+    var content = getText(element) || "";
+    var hasBinding = content.indexOf($interpolate.startSymbol())>-1;
+
+    if ( hasBinding ) {
+      expectAsync(element, attrName, function() {
+        return getText(element);
+      });
+    } else {
+      expect(element, attrName, content);
+    }
   }
 
   function getText(element) {
-    return element.text().trim();
+    return (element.text() || "").trim();
   }
 
   function childHasAttribute(node, attrName) {

test/angular-material-mocks.js

@@ -63,18 +63,6 @@ angular.module('ngMaterial-mock', [
       */
      $provide.constant('$MD_THEME_CSS', '/**/');
 
-    /**
-     * Intercept to make .expectWithText() to be synchronous
-     */
-    $provide.decorator('$mdAria', function($delegate){
-
-      $delegate.expectWithText = function(element, attrName){
-        $delegate.expect(element, attrName, element.text().trim());
-      };
-
-      return $delegate;
-    });
-
     /**
      * Add throttle() and wrap .flush() to catch `no callbacks present`
      * errors