Fix toggling active class in links

blikblum · Nov 26, 2016 · 385a150 · 385a150
1 parent d792f5c
commit 385a150
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 6 deletions.
diff --git a/src/routerlink.js b/src/routerlink.js
@@ -25,9 +25,13 @@ export default Marionette.Behavior.extend({
   },
 
   onTransition(transition) {
-    let self = this
+    let view = this.view
     this.$('[route]').each(function () {
-      self.$(this).toggleClass('active', this.getAttribute('href') === transition.path)
+      let $el = view.$(this)
+      let routeName = $el.attr('route')
+      if (!routeName) return;
+      let isActive = routerChannel.request('isActive', routeName, getRouteParams(this))
+      $el.toggleClass('active', isActive)
     })
   },
 

diff --git a/test/link.js b/test/link.js
@@ -16,9 +16,10 @@ let RootRoute, ParentRoute, ChildRoute, GrandChildRoute, LeafRoute;
 let ParentView = Mn.View.extend({
   behaviors: [RouterLink],
   template: function () {
-    return `<div id="div-rootlink" route="root" param-id="1"></div>
+    return `<div id="div-rootlink1" route="root" param-id="1"></div>
       <div id="div-grandchildlink" route="grandchild"></div>
-      <a id="a-rootlink" route="root" param-id="2"></a>
+      <div id="div-parentlink" route="parent"></div>
+      <a id="a-rootlink2" route="root" param-id="2"></a>
       <a id="a-parentlink" route="parent"></a>
       <a id="a-grandchildlink" route="grandchild"></a>
       <div class="child-view"></div>
@@ -80,21 +81,51 @@ describe('RouterLink', () => {
   it('should generate href attributes in anchor tags with route attribute', function () {
     return router.transitionTo('parent').then(function () {
       expect($('#a-parentlink').attr('href')).to.be.equal('#parent')
-      expect($('#a-rootlink').attr('href')).to.be.equal('#root/2')
+      expect($('#a-rootlink2').attr('href')).to.be.equal('#root/2')
       expect($('#a-grandchildlink').attr('href')).to.be.equal('#parent/child/grandchild')
     })
   })
 
   it('should call transitionTo when a non anchor tags with route attribute is clicked', function () {
     return router.transitionTo('parent').then(function () {
       let spy = sinon.spy(router, 'transitionTo')
-      $('#div-rootlink').click()
+      $('#div-rootlink1').click()
       expect(spy).to.be.calledOnce.and.calledWith('root', {'id': '1'})
 
       spy.reset()
       $('#div-grandchildlink').click()
       expect(spy).to.be.calledOnce.and.calledWith('grandchild')
     })
   })
+
+  it('should set active class in tag with route attribute when respective route is active', function () {
+    return router.transitionTo('parent').then(function () {
+      //this handler will be called before middleware one. PostPone actual test
+      return Promise.resolve()
+    }).then(function () {
+      expect($('#a-parentlink').hasClass('active')).to.be.true
+      expect($('#div-parentlink').hasClass('active')).to.be.true
+      expect($('#a-rootlink2').hasClass('active')).to.be.false
+      expect($('#div-rootlink1').hasClass('active')).to.be.false
+      expect($('#a-grandchildlink').hasClass('active')).to.be.false
+      expect($('#div-grandchildlink').hasClass('active')).to.be.false
+      return router.transitionTo('root', {id: '1'})
+    }).then(function () {
+      expect($('#a-parentlink').hasClass('active')).to.be.false
+      expect($('#div-parentlink').hasClass('active')).to.be.false
+      expect($('#a-rootlink2').hasClass('active')).to.be.false
+      expect($('#div-rootlink1').hasClass('active')).to.be.true
+      expect($('#a-grandchildlink').hasClass('active')).to.be.false
+      expect($('#div-grandchildlink').hasClass('active')).to.be.false
+      return router.transitionTo('grandchild')
+    }).then(function () {
+      expect($('#a-parentlink').hasClass('active')).to.be.true
+      expect($('#div-parentlink').hasClass('active')).to.be.true
+      expect($('#a-rootlink2').hasClass('active')).to.be.false
+      expect($('#div-rootlink1').hasClass('active')).to.be.false
+      expect($('#a-grandchildlink').hasClass('active')).to.be.true
+      expect($('#div-grandchildlink').hasClass('active')).to.be.true
+    })
+  })
 });