fix(md-nav-bar): clear the selected nav-item if it is null

* toggle the class md-button if there is no a new value for the selected tab
* refactor _updateTabs function and add test to navBar.spec
* change display property and extend tests

Closes #8703

src/components/navBar/navBar.js

@@ -207,41 +207,44 @@ MdNavBarController.prototype._initTabs = function() {
  * @private
  */
 MdNavBarController.prototype._updateTabs = function(newValue, oldValue) {
+  var self = this;
   var tabs = this._getTabs();
-
-  var oldIndex;
-  if (oldValue) {
-    var oldTab = this._getTabByName(oldValue);
-    if (oldTab) {
-      oldTab.setSelected(false);
-      oldIndex = tabs.indexOf(oldTab);
-    }
+  var oldIndex = -1;
+  var newIndex = -1;
+  var newTab = this._getTabByName(newValue);
+  var oldTab = this._getTabByName(oldValue);
+
+  if (oldTab) {
+    oldTab.setSelected(false);
+    oldIndex = tabs.indexOf(oldTab);
   }
 
-  if (newValue) {
-    var tab = this._getTabByName(newValue);
-    if (tab) {
-      tab.setSelected(true);
-      var newIndex = tabs.indexOf(tab);
-      var self = this;
-      this._$timeout(function() {
-        self._updateInkBarStyles(tab, newIndex, oldIndex);
-      });
-    }
+  if (newTab) {
+    newTab.setSelected(true);
+    newIndex = tabs.indexOf(newTab);
   }
+
+  this._$timeout(function() {
+    self._updateInkBarStyles(newTab, newIndex, oldIndex);
+  });
 };
 
 /**
  * Repositions the ink bar to the selected tab.
  * @private
  */
 MdNavBarController.prototype._updateInkBarStyles = function(tab, newIndex, oldIndex) {
-  var tabEl = tab.getButtonEl();
-  var left = tabEl.offsetLeft;
-
   this._inkbar.toggleClass('_md-left', newIndex < oldIndex)
       .toggleClass('_md-right', newIndex > oldIndex);
-  this._inkbar.css({left: left + 'px', width: tabEl.offsetWidth + 'px'});
+
+  this._inkbar.css({display: newIndex < 0 ? 'none' : ''});
+
+  if(tab){
+    var tabEl = tab.getButtonEl();
+    var left = tabEl.offsetLeft;
+
+    this._inkbar.css({left: left + 'px', width: tabEl.offsetWidth + 'px'});
+  }
 };
 
 /**

src/components/navBar/navBar.spec.js

@@ -77,6 +77,34 @@ describe('mdNavBar', function() {
       expect(getTab('tab1')).not.toHaveClass('md-primary');
     });
 
+    it('does not select tabs when selectedTabRoute is empty', function() {
+      $scope.selectedTabRoute = 'tab1';
+      createTabs();
+
+      updateSelectedTabRoute('');
+
+      expect(getTab('tab3')).not.toHaveClass('md-active');
+      expect(getTab('tab3')).not.toHaveClass('md-primary');
+      expect(getTab('tab2')).not.toHaveClass('md-active');
+      expect(getTab('tab2')).not.toHaveClass('md-primary');
+      expect(getTab('tab1')).not.toHaveClass('md-active');
+      expect(getTab('tab1')).not.toHaveClass('md-primary');
+
+      expect(getInkbarEl().style.display).toBe('none');
+
+      updateSelectedTabRoute('tab1');
+
+      expect(getTab('tab3')).not.toHaveClass('md-active');
+      expect(getTab('tab3')).not.toHaveClass('md-primary');
+      expect(getTab('tab2')).not.toHaveClass('md-active');
+      expect(getTab('tab2')).not.toHaveClass('md-primary');
+      expect(getTab('tab1')).toHaveClass('md-active');
+      expect(getTab('tab1')).toHaveClass('md-primary');
+
+      expect(getInkbarEl().style.display).toBe('');
+
+    });
+
     it('requires navigation attribute to be present', function() {
       expect(function() {
         create('<md-nav-item name="fooo">footab</md-nav-item>');