fix(fabToolbar): fail gracefully if no icon used in trigger

the component previously assumed the user would have an icon
inside the trigger and was throwing an error upon animation
which caused the entire component to break

also fix a potential issue with the animation not properly
firing the `done()` callback when finished

Closes #3223. Closes #3601.

Author: topherfangio

src/components/fabToolbar/fabToolbar.js

@@ -2,13 +2,21 @@
   'use strict';
 
   angular
+    // Declare our module
     .module('material.components.fabToolbar', [
       'material.core',
       'material.components.fabTrigger',
       'material.components.fabActions'
     ])
+
+    // Register our directive
     .directive('mdFabToolbar', MdFabToolbarDirective)
-    .animation('.md-fab-toolbar', MdFabToolbarAnimation);
+
+    // Register our custom animations
+    .animation('.md-fab-toolbar', MdFabToolbarAnimation)
+
+    // Register a service for the animation so that we can easily inject it into unit tests
+    .service('mdFabToolbarAnimation', MdFabToolbarAnimation);
 
   /**
    * @ngdoc directive
@@ -157,7 +165,7 @@
 
           // Set the next close animation to have the proper delays
           backgroundElement.style.transitionDelay = '0ms';
-          iconElement.style.transitionDelay = '.3s';
+          iconElement && (iconElement.style.transitionDelay = '.3s');
 
           // Apply a transition delay to actions
           angular.forEach(actions, function(action, index) {
@@ -183,7 +191,7 @@
 
           // Set the next open animation to have the proper delays
           backgroundElement.style.transitionDelay = '200ms';
-          iconElement.style.transitionDelay = '0ms';
+          iconElement && (iconElement.style.transitionDelay = '0ms');
 
           // Apply a transition delay to actions
           angular.forEach(actions, function(action, index) {
@@ -196,10 +204,12 @@
     return {
       addClass: function(element, className, done) {
         runAnimation(element, className, done);
+        done();
       },
 
       removeClass: function(element, className, done) {
         runAnimation(element, className, done);
+        done();
       }
     }
   }

src/components/fabToolbar/fabToolbar.spec.js

@@ -62,4 +62,22 @@ describe('<md-fab-toolbar> directive', function() {
     expect(controller.isOpen).toBe(false);
   }));
 
+  it('properly finishes the animation', inject(function(mdFabToolbarAnimation) {
+    compileAndLink(
+      '<md-fab-toolbar md-open="isOpen">' +
+      '  <md-fab-trigger><button></button></md-fab-trigger>' +
+      '  <md-fab-actions><button></button></md-fab-actions>' +
+      '</md-fab-toolbar>'
+    );
+
+    var addDone = jasmine.createSpy('addDone');
+    var removeDone = jasmine.createSpy('removeDone');
+
+    mdFabToolbarAnimation.addClass(element, 'md-is-open', addDone);
+    expect(addDone).toHaveBeenCalled();
+
+    mdFabToolbarAnimation.removeClass(element, 'md-is-open', removeDone);
+    expect(removeDone).toHaveBeenCalled();
+  }));
+
 });