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

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