3 files changed, 261 insertions, 0 deletions
diff --git a/web-ui/test/spec/tags/ui/tag.spec.js b/web-ui/test/spec/tags/ui/tag.spec.js
new file mode 100644
index 00000000..12f16330
--- /dev/null
+++ b/web-ui/test/spec/tags/ui/tag.spec.js
@@ -0,0 +1,151 @@
+/*global Smail */
+/*global _ */
+
+describeComponent('tags/ui/tag', function () {
+  'use strict';
+
+  describe('inbox tag', function() {
+    beforeEach(function () {
+      setupComponent('<li></li>', {
+        tag: {
+          name: 'inbox',
+          ident: '1',
+          counts: {
+            total: 100,
+            read: 0
+          }
+        }
+      });
+    });
+
+    it('selects the tag on click', function () {
+      var tagSelectEvent = spyOnEvent(document, Smail.events.ui.tag.select);
+      var cleanSelectedEvent = spyOnEvent(document, Smail.events.ui.mails.cleanSelected);
+
+      this.component.$node.click();
+
+      expect(this.component.attr.selected).toBeTruthy();
+      expect(this.$node.attr('class')).toMatch('selected');
+      expect(tagSelectEvent).toHaveBeenTriggeredOnAndWith(document, { tag: 'inbox' });
+      expect(cleanSelectedEvent).toHaveBeenTriggeredOn(document);
+    });
+
+    it('should remove selected class when selecting a different tag', function () {
+      this.$node.click();
+
+      $(document).trigger(Smail.events.ui.tag.select, {tag: 'drafts'});
+
+      expect(this.$node).not.toHaveClass('selected');
+    });
+
+    it('triggers tag selected on tag select', function () {
+      var tagSelectedEvent = spyOnEvent(document, Smail.events.ui.tag.select);
+
+      $(document).trigger(Smail.events.ui.tag.select, { tag: 'drafts'});
+
+      expect(tagSelectedEvent).toHaveBeenTriggeredOnAndWith(document, { tag: 'drafts'});
+    });
+
+    it('increases the read count when there is an email read and the email has that tag', function () {
+      $(document).trigger(Smail.events.mail.read, { tags: ['inbox'] });
+
+      expect(this.component.attr.tag.counts.read).toEqual(1);
+      expect(this.$node.html()).toMatch('<span class="unread-count">99</span>');
+    });
+
+    it('doesnt increase the read count when the read email doesnt have the tag', function () {
+      $(document).trigger(Smail.events.mail.read, { tags: ['amazing']});
+
+      expect(this.component.attr.tag.counts.read).toEqual(0);
+      expect(this.$node.html()).not.toMatch('<span class="unread-count">99</span>');
+    });
+
+    it('doesnt display the unread count when there are no unreads', function () {
+      this.component.attr.tag.counts.read = 100;
+      $(document).trigger(Smail.events.mail.read, { tags: ['inbox']});
+      expect(this.$node.html()).not.toMatch('"unread-count"');
+    });
+  });
+
+  describe('drafts tag', function () {
+    var containerFordrafts;
+    beforeEach(function () {
+      setupComponent('<li></li>', {
+        tag: {
+          name: 'drafts',
+          ident: '42',
+          counts: {
+            total: 100,
+            read: 50
+          }
+        }
+      });
+    });
+
+    it('shows the total count instead of the unread count', function () {
+      $(document).trigger(Smail.events.mail.read, { tags: ['drafts']});
+      expect(this.$node.html()).toMatch('<span class="total-count">100</span>');
+      expect(this.$node.html()).not.toMatch('"unread-count"');
+    });
+  });
+
+  describe('all tag', function(){
+    beforeEach(function () {
+      setupComponent('<li></li>', {
+        tag: {
+          name: 'all',
+          ident: '45',
+          counts: {
+            total: 100,
+            read: 50
+          }
+        }
+      });
+    });
+
+    it('adds searching class when user is doing a search', function(){
+      $(document).trigger(Smail.events.search.perform, {});
+      expect(this.$node.attr('class')).toMatch('searching');
+    });
+
+    it('removes searching class when user searches for empty string', function(){
+      $(document).trigger(Smail.events.search.perform, {});
+      $(document).trigger(Smail.events.search.empty);
+      expect(this.$node.attr('class')).not.toMatch('searching');
+    });
+
+    it('removes searching class when user clicks in any tag', function(){
+      $(document).trigger(Smail.events.search.perform, {});
+      this.$node.click();
+      expect(this.$node.attr('class')).not.toMatch('searching');
+    });
+
+  });
+
+  _.each(['sent', 'trash'], function(tag_name) {
+    describe(tag_name + ' tag', function() {
+      beforeEach(function () {
+        setupComponent('<li></li>', {
+          tag: {
+            name: tag_name,
+            ident: '42',
+            counts: {
+              total: 100,
+              read: 50
+            }
+          }
+        });
+      });
+
+      it('doesn\'t display unread count for special folder', function () {
+        $(document).trigger(Smail.events.mail.read, { tags: [tag_name]});
+        expect(this.$node.html()).not.toMatch('unread-count');
+      });
+
+      it('doesn\'t display read count for special folder', function () {
+        $(document).trigger(Smail.events.mail.read, { tags: [tag_name]});
+        expect(this.$node.html()).not.toMatch('total-count');
+      });
+    });
+  });
+});
diff --git a/web-ui/test/spec/tags/ui/tag_list.spec.js b/web-ui/test/spec/tags/ui/tag_list.spec.js
new file mode 100644
index 00000000..af3ddd3a
--- /dev/null
+++ b/web-ui/test/spec/tags/ui/tag_list.spec.js
@@ -0,0 +1,75 @@
+describeComponent('tags/ui/tag_list', function () {
+  'use strict';
+
+  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() {
+    beforeEach(function () {
+      setupComponent();
+    });
+
+    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(Smail.events.ui.tagList.load, {tags: tagList});
+
+      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() {
+      var tagList = [tag('tag1', 1, false), tag('tag2', 2, true), tag('tag3', 3, true)];
+
+      $(document).trigger(Smail.events.ui.tagList.load, {tags: tagList});
+
+      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() {
+      var tagList = [tag('tag1', 1, false), tag('tag2', 2, true), tag('tag3', 3, true)];
+
+      $(document).trigger(Smail.events.ui.tagList.load, {tags: tagList});
+
+      var items = _.map(this.component.select('customTagList').find('li'), function(el) {
+        return $(el).attr('id');
+      });
+
+      expect(items).toEqual(['tag-1']);
+    });
+
+    it('should trigger event to tell that tags were loaded sending the current tag', function () {
+      this.component.attr.currentTag = 'Drafts';
+      var tagsLoadedEvent = spyOnEvent(document, Smail.events.ui.tags.loaded);
+
+      $(document).trigger(Smail.events.ui.tagList.load, {tags: [] });
+
+      expect(tagsLoadedEvent).toHaveBeenTriggeredOnAndWith(document, { tag: 'Drafts'});
+    });
+
+    it('should send tag as undefined when tags are loaded and no tag was selected yet', function () {
+      var tagsLoadedEvent = spyOnEvent(document, Smail.events.ui.tags.loaded);
+
+      $(document).trigger(Smail.events.ui.tagList.load, {tags: [] });
+
+      expect(tagsLoadedEvent).toHaveBeenTriggeredOnAndWith(document, { tag: undefined });
+    });
+
+    it('should save the current tag when a tag is selected', function () {
+      $(document).trigger(Smail.events.ui.tag.selected, { tag: 'amazing'});
+
+      expect(this.component.attr.currentTag).toEqual('amazing');
+    });
+  });
+});
diff --git a/web-ui/test/spec/tags/ui/tag_shortcut.spec.js b/web-ui/test/spec/tags/ui/tag_shortcut.spec.js
new file mode 100644
index 00000000..7df35631
--- /dev/null
+++ b/web-ui/test/spec/tags/ui/tag_shortcut.spec.js
@@ -0,0 +1,35 @@
+describeComponent("tags/ui/tag_shortcut", function () {
+
+  var parent, shortcut, component, TagShortcut;
+
+  beforeEach(function () {
+    TagShortcut = require('tags/ui/tag_shortcut');
+
+    component = jasmine.createSpyObj('tagComponent', ['triggerSelect']);
+    parent = $("<ul>");
+    shortcut = TagShortcut.appendedTo(parent, { linkTo: { name: 'inbox', counts: { total: 15 }}, trigger: component });
+  });
+
+  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>');
+    expect(parent.html()).toMatch('<div class="shortcut-label">inbox</div>');
+  });
+
+  it('selects and unselect on tag.select', function () {
+    $(document).trigger(Smail.events.ui.tag.select, { tag: 'inbox'});
+
+    expect(shortcut.$node).toHaveClass("selected");
+
+    $(document).trigger(Smail.events.ui.tag.select, { tag: 'sent'});
+
+    expect(shortcut.$node).not.toHaveClass("selected");
+  });
+
+  it('delegates the click to linked tag', function (){
+    shortcut.$node.click();
+
+    expect(component.triggerSelect).toHaveBeenCalled();
+  });
+
+});