chore(uiStateActive): refactor & add test coverage

Author: nateabele

src/common.js

@@ -44,6 +44,24 @@ function ancestors(first, second) {
   return path;
 }
 
+/**
+ * IE8-safe wrapper for `Object.keys()`.
+ *
+ * @param {Object} object A JavaScript object.
+ * @return {Array} Returns the keys of the object as an array.
+ */
+function keys(object) {
+  if (Object.keys) {
+    return Object.keys(object);
+  }
+  var result = [];
+
+  angular.forEach(object, function(val, key) {
+    result.push(key);
+  });
+  return result;
+}
+
 /**
  * IE8-safe wrapper for `Array.prototype.indexOf()`.
  *
@@ -91,6 +109,61 @@ function inheritParams(currentParams, newParams, $current, $to) {
   return extend({}, inherited, newParams);
 }
 
+/**
+ * Normalizes a set of values to string or `null`, filtering them by a list of keys.
+ *
+ * @param {Array} keys The list of keys to normalize/return.
+ * @param {Object} values An object hash of values to normalize.
+ * @return {Object} Returns an object hash of normalized string values.
+ */
+function normalize(keys, values) {
+  var normalized = {};
+
+  forEach(keys, function (name) {
+    var value = values[name];
+    normalized[name] = (value != null) ? String(value) : null;
+  });
+  return normalized;
+}
+
+/**
+ * Performs a non-strict comparison of the subset of two objects, defined by a list of keys.
+ *
+ * @param {Object} a The first object.
+ * @param {Object} b The second object.
+ * @param {Array} keys The list of keys within each object to compare. If the list is empty or not specified,
+ *                     it defaults to the list of keys in `a`.
+ * @return {Boolean} Returns `true` if the keys match, otherwise `false`.
+ */
+function equalForKeys(a, b, keys) {
+  if (!keys) {
+    keys = [];
+    for (var n in a) keys.push(n); // Used instead of Object.keys() for IE8 compatibility
+  }
+
+  for (var i=0; i<keys.length; i++) {
+    var k = keys[i];
+    if (a[k] != b[k]) return false; // Not '===', values aren't necessarily normalized
+  }
+  return true;
+}
+
+/**
+ * Returns the subset of an object, based on a list of keys.
+ *
+ * @param {Array} keys
+ * @param {Object} values
+ * @return {Boolean} Returns a subset of `values`.
+ */
+function filterByKeys(keys, values) {
+  var filtered = {};
+
+  forEach(keys, function (name) {
+    filtered[name] = values[name];
+  });
+  return filtered;
+}
+
 angular.module('ui.router.util', ['ng']);
 angular.module('ui.router.router', ['ui.router.util']);
 angular.module('ui.router.state', ['ui.router.router', 'ui.router.util']);

src/state.js

@@ -488,13 +488,13 @@ function $StateProvider(   $urlRouterProvider,   $urlMatcherFactory,           $
       return url;
     };
 
-    $state.get = function (stateOrName) {
+    $state.get = function (stateOrName, context) {
       if (!isDefined(stateOrName)) {
         var list = [];
         forEach(states, function(state) { list.push(state.self); });
         return list;
       }
-      var state = findState(stateOrName);
+      var state = findState(stateOrName, context);
       return (state && state.self) ? state.self : null;
     };
 
@@ -546,39 +546,6 @@ function $StateProvider(   $urlRouterProvider,   $urlMatcherFactory,           $
     return $state;
   }
 
-  function normalize(keys, values) {
-    var normalized = {};
-
-    forEach(keys, function (name) {
-      var value = values[name];
-      normalized[name] = (value != null) ? String(value) : null;
-    });
-    return normalized;
-  }
-
-  function equalForKeys(a, b, keys) {
-    // If keys not provided, assume keys from object 'a'
-    if (!keys) {
-      keys = [];
-      for (var n in a) keys.push(n); // Used instead of Object.keys() for IE8 compatibility
-    }
-
-    for (var i=0; i<keys.length; i++) {
-      var k = keys[i];
-      if (a[k] != b[k]) return false; // Not '===', values aren't necessarily normalized
-    }
-    return true;
-  }
-
-  function filterByKeys(keys, values) {
-    var filtered = {};
-
-    forEach(keys, function (name) {
-      filtered[name] = values[name];
-    });
-    return filtered;
-  }
-
   function shouldTriggerReload(to, from, locals, options) {
     if ( to === from && ((locals === from.locals && !options.reload) || (to.self.reloadOnSearch === false)) ) {
       return true;

src/stateDirectives.js

@@ -4,23 +4,25 @@ function parseStateRef(ref) {
   return { state: parsed[1], paramExpr: parsed[3] || null };
 }
 
+function stateContext(el) {
+  var stateData = el.parent().inheritedData('$uiView');
+
+  if (stateData && stateData.state && stateData.state.name) {
+    return stateData.state;
+  }
+}
+
 $StateRefDirective.$inject = ['$state'];
 function $StateRefDirective($state) {
   return {
     restrict: 'A',
     require: '?^uiStateActive',
     link: function(scope, element, attrs, uiStateActive) {
       var ref = parseStateRef(attrs.uiSref);
-      var params = null, url = null, base = $state.$current;
+      var params = null, url = null, base = stateContext(element) || $state.$current;
       var isForm = element[0].nodeName === "FORM";
       var attr = isForm ? "action" : "href", nav = true;
 
-      var stateData = element.parent().inheritedData('$uiView');
-
-      if (stateData && stateData.state && stateData.state.name) {
-        base = stateData.state;
-      }
-
       var update = function(newVal) {
         if (newVal) params = newVal;
         if (!nav) return;
@@ -69,47 +71,29 @@ function $StateActiveDirective($state, $stateParams, $interpolate) {
       var state, params, paramKeys, activeClass;
 
       // There probably isn't much point in $observing this
-      activeClass = $interpolate($attrs.uiSactive || '', false)($scope);
+      activeClass = $interpolate($attrs.uiStateActive || '', false)($scope);
 
       // Allow uiSref to communicate with uiStateActive
       this.$$setStateInfo = function(newState, newParams) {
-        state = newState;
+        state = $state.get(newState, stateContext($element));
         params = newParams;
-        paramKeys = params && Object.keys(params);
+        paramKeys = params && keys(params);
         update();
       };
 
       $scope.$on('$stateChangeSuccess', update);
-      $scope.$on('$stateChangeError', function() {
-        $attrs.$removeClass(activeClass);
-      });
 
       // Update route state
       function update() {
-        if ($state.current.name === state && matchesParams()) {
-          $attrs.$addClass(activeClass);
+        if ($state.$current.self === state && matchesParams()) {
+          $element.addClass(activeClass);
         } else {
-          $attrs.$removeClass(activeClass);
+          $element.removeClass(activeClass);
         }
       }
 
       function matchesParams() {
-        if (params) {
-          var result = true;
-          // Can't use angular.equals() because it is possible for ui-sref
-          // to not reference each state parameter in $stateParams
-          //
-          // Unfortunately, using angular.forEach, short-circuiting is
-          // impossible --- But it's unlikely that very many parameters are
-          // used, so it is unlikely to hurt badly.
-          angular.forEach(params, function(value, key) {
-            if ($stateParams[key] !== value) {
-              result = false;
-            }
-          });
-          return result;
-        }
-        return true;
+        return !params || equalForKeys(params, $stateParams);
       }
     }
   };

test/stateDirectivesSpec.js

@@ -217,3 +217,79 @@ describe('uiStateRef', function() {
     }));
   });
 });
+
+describe('uiStateActive', function() {
+    var el, template, scope, document;
+
+  beforeEach(module('ui.router'));
+
+  beforeEach(module(function($stateProvider) {
+    $stateProvider.state('index', {
+      url: '',
+    }).state('contacts', {
+      url: '/contacts',
+      views: {
+        '@': {
+          template: '<a ui-sref=".item({ id: 6 })" ui-state-active="active">Contacts</a>'
+        }
+      }
+    }).state('contacts.item', {
+      url: '/:id',
+    }).state('contacts.item.detail', {
+      url: '/detail/:foo'
+    });
+  }));
+
+  beforeEach(inject(function($document) {
+    document = $document[0];
+  }));
+
+  it('should update class for sibling uiSref', inject(function($rootScope, $q, $compile, $state) {
+    el = angular.element('<div><a ui-sref="contacts" ui-state-active="active">Contacts</a></div>');
+    template = $compile(el)($rootScope);
+    $rootScope.$digest();
+
+    expect(angular.element(template[0].querySelector('a')).attr('class')).toBe('');
+    $state.transitionTo('contacts');
+    $q.flush();
+
+    expect(angular.element(template[0].querySelector('a')).attr('class')).toBe('active');
+
+    $state.transitionTo('contacts.item', { id: 5 });
+    $q.flush();
+    expect(angular.element(template[0].querySelector('a')).attr('class')).toBe('');
+  }));
+
+  it('should match state\'s parameters', inject(function($rootScope, $q, $compile, $state) {
+    el = angular.element('<div><a ui-sref="contacts.item.detail({ foo: \'bar\' })" ui-state-active="active">Contacts</a></div>');
+    template = $compile(el)($rootScope);
+    $rootScope.$digest();
+
+    expect(angular.element(template[0].querySelector('a')).attr('class')).toBe('');
+    $state.transitionTo('contacts.item.detail', { id: 5, foo: 'bar' });
+    $q.flush();
+    expect(angular.element(template[0].querySelector('a')).attr('class')).toBe('active');
+
+    $state.transitionTo('contacts.item.detail', { id: 5, foo: 'baz' });
+    $q.flush();
+    expect(angular.element(template[0].querySelector('a')).attr('class')).toBe('');
+  }));
+
+  it('should resolve relative state refs', inject(function($rootScope, $q, $compile, $state) {
+    el = angular.element('<section><div ui-view></div></section>');
+    template = $compile(el)($rootScope);
+    $rootScope.$digest();
+
+    $state.transitionTo('contacts');
+    $q.flush();
+    expect(angular.element(template[0].querySelector('a')).attr('class')).toBe('ng-scope');
+
+    $state.transitionTo('contacts.item', { id: 6 });
+    $q.flush();
+    expect(angular.element(template[0].querySelector('a')).attr('class')).toBe('ng-scope active');
+
+    $state.transitionTo('contacts.item', { id: 5 });
+    $q.flush();
+    expect(angular.element(template[0].querySelector('a')).attr('class')).toBe('ng-scope');
+  }));
+});