1 files changed, 151 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');
+      });
+    });
+  });
+});