fix(dropdownToggle): Refactor test and fix initial hiding of dropdown target

Author: jbrowning

src/dropdownToggle/dropdownToggle.js

@@ -1,15 +1,14 @@
 /*
- * dropdownToggle - Provides dropdown menu functionality in place of bootstrap js
+ * dropdownToggle - Provides dropdown menu functionality
  * @restrict class or attribute
  * @example:
-   <li class="dropdown">
-     <a class="dropdown-toggle">My Dropdown Menu</a>
-     <ul class="dropdown-menu">
-       <li ng-repeat="choice in dropChoices">
-         <a ng-href="{{choice.href}}">{{choice.text}}</a>
-       </li>
-     </ul>
-   </li>
+
+   <a dropdown-toggle="#dropdown-menu">My Dropdown Menu</a>
+   <ul id="dropdown-menu" class="f-dropdown">
+     <li ng-repeat="choice in dropChoices">
+       <a ng-href="{{choice.href}}">{{choice.text}}</a>
+     </li>
+   </ul>
  */
 angular.module('mm.foundation.dropdownToggle', [ 'mm.foundation.position' ])
 
@@ -22,10 +21,11 @@ angular.module('mm.foundation.dropdownToggle', [ 'mm.foundation.position' ])
       dropdownToggle: '@'
     },
     link: function(scope, element, attrs) {
+      var dropdown = angular.element($document[0].querySelector(scope.dropdownToggle));
 
       scope.$watch('$location.path', function() { closeMenu(); });
-      element.bind('click', function (event) {
-        var dropdown = angular.element($document[0].querySelector(scope.dropdownToggle));
+      element.bind('click', function (event) { 
+        dropdown = angular.element($document[0].querySelector(scope.dropdownToggle));
         var elementWasOpen = (element === openElement);
 
         event.preventDefault();
@@ -60,6 +60,10 @@ angular.module('mm.foundation.dropdownToggle', [ 'mm.foundation.position' ])
           $document.bind('click', closeMenu);
         }
       });
+
+      if (dropdown) {
+        dropdown.css('display', 'none');
+      }
     }
   };
 }]);

src/dropdownToggle/test/dropdownToggle.spec.js

@@ -1,5 +1,5 @@
 describe('dropdownToggle', function() {
-  var $compile, $rootScope, $document, $location;
+  var $compile, $rootScope, $document, $location, elm, toggleElm, targetElm;
 
   beforeEach(module('mm.foundation.dropdownToggle'));
 
@@ -8,6 +8,7 @@ describe('dropdownToggle', function() {
     $rootScope = _$rootScope_;
     $document = _$document_;
     $location = _$location_;
+    $scope = $rootScope.$new();
 
   }));
 
@@ -19,53 +20,66 @@ describe('dropdownToggle', function() {
       '<div><a dropdown-toggle="#' + id + '">Trigger</a>' +
       '<ul id="' + id + '"><li>Hello</li></ul></div>'
     ).appendTo('body');
-    return $compile(element)($rootScope);
+    return $compile(element)($scope);
   }
 
-  it('should toggle on `a` click', function() {
-    var elm = dropdown();
-    expect(elm.find('ul').css('display')).toBe('none');
-    elm.find('a').click();
-    expect(elm.find('ul').css('display')).toBe('block');
-    elm.find('a').click();
-    expect(elm.find('ul').css('display')).toBe('none');
-    elm.remove();
+  afterEach(function() {
+    if (elm) {
+      elm.remove();
+    }
   });
 
-  it('should close on elm click', function() {
-    var elm = dropdown();
-    elm.find('a').click();
-    elm.click();
-    expect(elm.find('ul').css('display')).toBe('none');
-    elm.remove();
-  });
+  describe('with a single dropdown', function() {
+    beforeEach(function() {
+      elm = dropdown();
+      toggleElm = elm.find('a');
+      targetElm = elm.find('ul');
+    });
 
-  it('should close on document click', function() {
-    var elm = dropdown();
-    elm.find('a').click();
-    $document.click();
-    expect(elm.find('ul').css('display')).toBe('none');
-    elm.remove();
-  });
+    it('should initially hide the target element', function() {
+      expect(targetElm.css('display')).toBe('none');
+    });
+
+    it('should toggle on `a` click', function() {
+      expect(targetElm.css('display')).toBe('none');
+      toggleElm.click();
+      expect(targetElm.css('display')).toBe('block');
+      toggleElm.click();
+      expect(targetElm.css('display')).toBe('none');
+    });
+
+    it('should close on elm click', function() {
+      toggleElm.click();
+      elm.click();
+      expect(targetElm.css('display')).toBe('none');
+    });
+
+    it('should close on document click', function() {
+      toggleElm.click();
+      expect(targetElm.css('display')).toBe('block');
+      $document.click();
+      expect(targetElm.css('display')).toBe('none');
+    });
 
-  it('should close on $location change', function() {
-    var elm = dropdown();
-    elm.find('a').click();
-    $location.path('/foo');
-    $rootScope.$apply();
-    expect(elm.find('ul').css('display')).toBe('none');
-    elm.remove();
+    it('should close on $location change', function() {
+      toggleElm.click();
+      $location.path('/foo');
+      $rootScope.$apply();
+      expect(targetElm.css('display')).toBe('none');
+    });
   });
 
-  it('should only allow one dropdown to be open at once', function() {
-    var elm1 = dropdown('target1');
-    var elm2 = dropdown('target2');
-    elm1.find('a').click();
-    elm2.find('a').click();
-    expect(elm1.find('ul').css('display')).toBe('none');
-    expect(elm2.find('ul').css('display')).toBe('block');
-    elm1.remove();
-    elm2.remove();
+  describe('with multiple dropdowns', function() {
+    it('should only allow one dropdown to be open at once', function() {
+      var elm1 = dropdown('target1');
+      var elm2 = dropdown('target2');
+      elm1.find('a').click();
+      elm2.find('a').click();
+      expect(elm1.find('ul').css('display')).toBe('none');
+      expect(elm2.find('ul').css('display')).toBe('block');
+      elm1.remove();
+      elm2.remove();
+    });
   });
 });