diff options
Diffstat (limited to 'web-ui')
-rw-r--r-- | web-ui/app/js/page/events.js | 5 | ||||
-rw-r--r-- | web-ui/app/js/tags/ui/tag_list.js | 7 | ||||
-rw-r--r-- | web-ui/app/js/tags/ui/tag_shortcut.js | 13 | ||||
-rw-r--r-- | web-ui/test/spec/tags/ui/tag_list.spec.js | 67 | ||||
-rw-r--r-- | web-ui/test/spec/tags/ui/tag_shortcut.spec.js | 19 |
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(); + }); }); + |