Duda/Patrick #8: reseting tag shortcuts before loading them again

5 files changed, 99 insertions, 12 deletions

diff --git a/web-ui/app/js/page/events.js b/web-ui/app/js/page/events.js
index 6b39096c..c5c239e5 100644
--- a/web-ui/app/js/page/events.js
+++ b/web-ui/app/js/page/events.js
@@ -114,7 +114,10 @@ define(function () {
     tags: {
       want: 'tags:want',
       received: 'tags:received',
-      teardown: 'tags:teardown'
+      teardown: 'tags:teardown',
+      shortcuts: {
+        teardown: 'tags:shortcuts:teardown'
+      }
     },
     route: {
       toUrl: 'route:toUrl'
diff --git a/web-ui/app/js/tags/ui/tag_list.js b/web-ui/app/js/tags/ui/tag_list.js
index 02eee7f8..22b1e77b 100644
--- a/web-ui/app/js/tags/ui/tag_list.js
+++ b/web-ui/app/js/tags/ui/tag_list.js
@@ -56,13 +56,20 @@ define(
           this.trigger(list, events.tags.teardown);
           list.empty();
         }.bind(this));
+
       }
 
+      this.resetShortcuts = function () {
+        $('#tags-shortcuts').empty();
+        this.trigger(document, events.tags.shortcuts.teardown);
+      };
+
       this.renderTagList = function(tags) {
         var defaultList = this.select('defaultTagList');
         var customList = this.select('customTagList');
 
         resetTagList.bind(this, [defaultList, customList]).call();
+        this.resetShortcuts();
 
         tags.forEach(function (tag) {
           renderTag.bind(this, tag, defaultList, customList).call();
diff --git a/web-ui/app/js/tags/ui/tag_shortcut.js b/web-ui/app/js/tags/ui/tag_shortcut.js
index 6e5c6960..59556794 100644
--- a/web-ui/app/js/tags/ui/tag_shortcut.js
+++ b/web-ui/app/js/tags/ui/tag_shortcut.js
@@ -3,10 +3,11 @@ define(
     'flight/lib/component',
     'views/templates',
     'page/events',
-    'tags/ui/tag_base'
+    'tags/ui/tag_base',
+    'flight/lib/utils'
   ],
 
-  function (describeComponent, templates, events, tagBase) {
+  function (describeComponent, templates, events, tagBase, utils) {
 
     var TagShortcut =  describeComponent(tagShortcut, tagBase);
 
@@ -20,7 +21,6 @@ define(
 
     function tagShortcut() {
 
-
       this.renderAndAttach = function (parent, options) {
         var linkTo = options.linkTo;
 
@@ -58,9 +58,16 @@ define(
         this.$node.addClass('selected');
       };
 
+      this.doTeardown = function () {
+        if (!jQuery.contains(document, this.$node[0])) {
+          this.teardown();
+        }
+      };
+
       this.after('initialize', function () {
         this.on('click', function () { this.attr.trigger.triggerSelect(); });
         this.on(document, events.ui.tag.select, this.selectTag);
+        this.on(document, events.tags.shortcuts.teardown, this.doTeardown);
       });
 
     }
diff --git a/web-ui/test/spec/tags/ui/tag_list.spec.js b/web-ui/test/spec/tags/ui/tag_list.spec.js
index f39fbf36..5c33f36e 100644
--- a/web-ui/test/spec/tags/ui/tag_list.spec.js
+++ b/web-ui/test/spec/tags/ui/tag_list.spec.js
@@ -1,48 +1,55 @@
 describeComponent('tags/ui/tag_list', function () {
   'use strict';
+  var tagsShortcutsContainer;
 
-  var tag = function(name, ident, def) {
+  var tag = function (name, ident, def) {
     def = def || false;
     return {name: name, counts: {read: 0, total: 0, replied: 0, starred: 0}, ident: ident, default: def};
   };
 
 
-  describe('post initialization', function() {
+  describe('post initialization', function () {
     beforeEach(function () {
       setupComponent();
+      tagsShortcutsContainer = $('<ul>', { id: "tags-shortcuts" });
+      $('body').append(tagsShortcutsContainer);
     });
 
-    it('should render tags when tagsList:load is received', function() {
+    afterEach(function () {
+      $('body')[0].removeChild(tagsShortcutsContainer[0])
+    });
+
+    it('should render tags when tagsList:load is received', function () {
       this.component.attr.default = false;
       var tagList = [tag('tag1', 1), tag('tag2', 2), tag('tag3', 3)];
 
       $(document).trigger(Pixelated.events.ui.tagList.load, {tags: tagList});
 
-      var items = _.map(this.$node.find('li'), function(el) {
+      var items = _.map(this.$node.find('li'), function (el) {
         return $(el).attr('id');
       });
 
       expect(items).toEqual(['tag-1', 'tag-2', 'tag-3']);
     });
 
-    it('should render the default tags when tagsList:load is received and default attribute is true', function() {
+    it('should render the default tags when tagsList:load is received and default attribute is true', function () {
       var tagList = [tag('tag1', 1, false), tag('tag2', 2, true), tag('tag3', 3, true)];
 
       $(document).trigger(Pixelated.events.ui.tagList.load, {tags: tagList});
 
-      var items = _.map(this.component.select('defaultTagList').find('li'), function(el) {
+      var items = _.map(this.component.select('defaultTagList').find('li'), function (el) {
         return $(el).attr('id');
       });
 
       expect(items).toEqual(['tag-2', 'tag-3']);
     });
 
-    it('should render the custom tags when tagsList:load is received and default attribute is false', function() {
+    it('should render the custom tags when tagsList:load is received and default attribute is false', function () {
       var tagList = [tag('tag1', 1, false), tag('tag2', 2, true), tag('tag3', 3, true)];
 
       $(document).trigger(Pixelated.events.ui.tagList.load, {tags: tagList});
 
-      var items = _.map(this.component.select('customTagList').find('li'), function(el) {
+      var items = _.map(this.component.select('customTagList').find('li'), function (el) {
         return $(el).attr('id');
       });
 
@@ -71,5 +78,49 @@ describeComponent('tags/ui/tag_list', function () {
 
       expect(this.component.attr.currentTag).toEqual('amazing');
     });
+
+    it('resets the tag lists when loading tags', function () {
+      var tagList = [tag('tag1', 1, false), tag('tag2', 2, true), tag('tag3', 3, true)];
+      $(document).trigger(Pixelated.events.ui.tagList.load, {tags: tagList});
+
+      var tagList = [tag('tag1', 1, false), tag('tag2', 2, true)];
+      $(document).trigger(Pixelated.events.ui.tagList.load, {tags: tagList});
+
+      var customTags = _.map(this.component.select('customTagList').find('li'), function (el) {
+        return $(el).attr('id');
+      });
+      var defaultTags = _.map(this.component.select('defaultTagList').find('li'), function (el) {
+        return $(el).attr('id');
+      });
+
+      expect(customTags).toEqual(['tag-1']);
+      expect(defaultTags).toEqual(['tag-2']);
+    });
+
+    it('resets the tag shortcuts when loading tags', function () {
+      var tagList = [tag('inbox', 1, true)];
+      $(document).trigger(Pixelated.events.ui.tagList.load, {tags: tagList});
+
+      var tagList = [tag('sent', 1, true)];
+      $(document).trigger(Pixelated.events.ui.tagList.load, {tags: tagList});
+
+      var shortcuts = _.map($('#tags-shortcuts').find('li'), function (el) {
+        return $(el).text().trim();
+      });
+
+      expect(shortcuts).toEqual(['sent']);
+    });
+
+    it('sends teardown events when loading new tags', function () {
+      var tagsTeardownCustom = spyOnEvent(this.component.select('customTagList'), Pixelated.events.tags.teardown);
+      var tagsTeardownDefault = spyOnEvent(this.component.select('defaultTagList'), Pixelated.events.tags.teardown);
+      var tagsShortcutsTeardown = spyOnEvent(document, Pixelated.events.tags.shortcuts.teardown);
+
+      $(document).trigger(Pixelated.events.ui.tagList.load, {tags: []});
+
+      expect(tagsTeardownCustom).toHaveBeenTriggeredOn(this.component.select('customTagList'));
+      expect(tagsTeardownDefault).toHaveBeenTriggeredOn(this.component.select('defaultTagList'));
+      expect(tagsShortcutsTeardown).toHaveBeenTriggeredOn(document);
+    });
   });
 });
diff --git a/web-ui/test/spec/tags/ui/tag_shortcut.spec.js b/web-ui/test/spec/tags/ui/tag_shortcut.spec.js
index 5e464350..ba44304e 100644
--- a/web-ui/test/spec/tags/ui/tag_shortcut.spec.js
+++ b/web-ui/test/spec/tags/ui/tag_shortcut.spec.js
@@ -7,9 +7,14 @@ describeComponent("tags/ui/tag_shortcut", function () {
 
     component = jasmine.createSpyObj('tagComponent', ['triggerSelect']);
     parent = $("<ul>");
+    $('body').append(parent);
     shortcut = TagShortcut.appendedTo(parent, { linkTo: { name: 'inbox', counts: { total: 15 }}, trigger: component });
   });
 
+  afterEach(function () {
+    $('body')[0].removeChild(parent[0])
+  });
+
   it('renders the shortcut inside the parent', function () {
     expect(parent.html()).toMatch('<a title="inbox">');
     expect(parent.html()).toMatch('<i class="fa fa-inbox"></i>');
@@ -32,4 +37,18 @@ describeComponent("tags/ui/tag_shortcut", function () {
     expect(component.triggerSelect).toHaveBeenCalled();
   });
 
+  it('teardown shortcuts on event but only if they are not in the DOM', function () {
+    parent.empty();
+    var shortcutAddedAfterEmptyingParent = TagShortcut.appendedTo(parent, { linkTo: { name: 'inbox', counts: { total: 15 }}, trigger: component });
+    // by now shorcut is not in the DOM anymore but shortcutAddedAfterEmptyingParent is
+
+    spyOn(shortcut, 'teardown');
+    spyOn(shortcutAddedAfterEmptyingParent, 'teardown');
+
+    $(document).trigger(Pixelated.events.tags.shortcuts.teardown);
+
+    expect(shortcut.teardown).toHaveBeenCalled();
+    expect(shortcutAddedAfterEmptyingParent.teardown).not.toHaveBeenCalled();
+  });
 });
+