Add web-ui based on previous code

3 files changed, 451 insertions, 0 deletions

diff --git a/web-ui/test/spec/mail_list/ui/mail_items/generic_mail_item.spec.js b/web-ui/test/spec/mail_list/ui/mail_items/generic_mail_item.spec.js
new file mode 100644
index 00000000..b49bc7f0
--- /dev/null
+++ b/web-ui/test/spec/mail_list/ui/mail_items/generic_mail_item.spec.js
@@ -0,0 +1,136 @@
+describeComponent('mail_list/ui/mail_items/generic_mail_item', function () {
+  'use strict';
+
+  var mail;
+
+  beforeEach(function () {
+    mail = Smail.testData().parsedMail.simpleTextPlain;
+    mail.tags = ['inbox'];
+
+    setupComponent('<li></li>', {
+      mail: mail,
+      selected: false,
+      tag: 'inbox'
+    });
+  });
+
+  it('should trigger ui:openMail on click', function () {
+    var spyEvent = spyOnEvent(document, Smail.events.ui.mail.open);
+
+    this.component.$node.find('a').click();
+
+    expect(spyEvent).toHaveBeenTriggeredOn(document);
+    expect(spyEvent.mostRecentCall.data).toEqual({ ident: mail.ident });
+  });
+
+  it('should add selected class when selecting', function () {
+    this.$node.find('a').click();
+
+    expect(this.$node).toHaveClass('selected');
+  });
+
+  it('should remove selected class when selecting a different mail', function () {
+    $(document).trigger(Smail.events.ui.mail.updateSelected, { ident: 2 });
+
+    expect(this.$node).not.toHaveClass('selected');
+  });
+
+  it('should remove selected class when enabling compose box', function () {
+    this.$node.find('a').click();
+
+    $(document).trigger(Smail.events.ui.composeBox.newMessage);
+
+    expect(this.$node).not.toHaveClass('selected');
+  });
+
+  it('should have the href link with mail ident and tag name', function () {
+    expect(this.$node.find('a')[0].href).toMatch('inbox/mail/' + mail.ident);
+  });
+
+  describe('clicking on a mail', function () {
+
+    function createClickEvent(options) {
+      var clickEvent = $.Event('click');
+      _.merge(clickEvent, options);
+      spyOn(clickEvent, 'preventDefault');
+      return clickEvent;
+    }
+
+    it('triggers mail open and pushes the state', function () {
+      var clickEvent = createClickEvent();
+      var mailOpenEvent = spyOnEvent(document, Smail.events.ui.mail.open);
+      var pushStateEvent = spyOnEvent(document, Smail.events.router.pushState);
+
+      $(this.$node.find('a')).trigger(clickEvent);
+
+      expect(mailOpenEvent).toHaveBeenTriggeredOnAndWith(document, { ident: mail.ident });
+      expect(pushStateEvent).toHaveBeenTriggeredOnAndWith(document, { mailIdent: mail.ident });
+      expect(clickEvent.preventDefault).toHaveBeenCalled();
+    });
+
+    describe('when opening on a new tab', function () {
+
+      _.each([
+        {metaKey: true},
+        {which: 2},
+        {ctrlKey: true}
+      ], function (specialKey) {
+        it('doesnt trigger mail open and nor pushes the state', function () {
+          var clickEvent = createClickEvent(specialKey);
+          var mailOpenEvent = spyOnEvent(document, Smail.events.ui.mail.open);
+          var pushStateEvent = spyOnEvent(document, Smail.events.router.pushState);
+
+          $(this.$node.find('a')).trigger(clickEvent);
+
+          expect(mailOpenEvent).not.toHaveBeenTriggeredOnAndWith(document, { ident: mail.ident });
+          expect(pushStateEvent).not.toHaveBeenTriggeredOnAndWith(document, { mailIdent: mail.ident });
+          expect(clickEvent.preventDefault).not.toHaveBeenCalled();
+        });
+
+        it('marks the email as read', function () {
+          debugger;
+          var mailReadEvent = spyOnEvent(document, Smail.events.mail.read);
+          var clickEvent = createClickEvent(specialKey);
+
+          $(this.$node.find('a')).trigger(clickEvent);
+
+          expect(this.component.attr.mail.status).toContain(this.component.status.READ);
+          expect(this.$node.attr('class')).toMatch('status-read');
+          expect(mailReadEvent).toHaveBeenTriggeredOnAndWith(document, { ident: mail.ident, tags: ['inbox'] });
+        });
+
+      });
+
+    });
+
+  });
+
+  describe('marking emails as read', function () {
+    it('should trigger mail:read event when unread is clicked', function () {
+      var mailReadEvent = spyOnEvent(document, Smail.events.mail.read);
+
+      this.$node.find('a').click();
+
+      expect(mailReadEvent).toHaveBeenTriggeredOnAndWith(document, jasmine.objectContaining({ident: mail.ident}));
+    });
+
+    it('should not trigger mail:read event when clicking mail that is already read', function () {
+      var mailReadEvent = spyOnEvent(document, Smail.events.mail.read);
+      this.component.attr.mail.status.push(this.component.status.READ);
+
+      this.$node.find('a').click();
+
+      expect(mailReadEvent).not.toHaveBeenTriggeredOnAndWith(document, {ident: mail.ident});
+    });
+
+    it('should add status-read class to email when clicking an unread email', function () {
+      this.$node.find('a').click();
+
+      expect(this.$node).toHaveClass('status-read');
+    });
+
+    it('should not have status-read class when initializing email without read status', function () {
+      expect(this.$node).not.toHaveClass('status-read');
+    });
+  });
+});
diff --git a/web-ui/test/spec/mail_list/ui/mail_items/mail_item.spec.js b/web-ui/test/spec/mail_list/ui/mail_items/mail_item.spec.js
new file mode 100644
index 00000000..1b5899a1
--- /dev/null
+++ b/web-ui/test/spec/mail_list/ui/mail_items/mail_item.spec.js
@@ -0,0 +1,40 @@
+/*global Smail */
+
+describeMixin('mail_list/ui/mail_items/mail_item', function () {
+  'use strict';
+
+  beforeEach(function () {
+    var mail = Smail.testData().parsedMail.simpleTextPlain;
+    mail.tags = ['inbox'];
+
+    setupComponent('<li><input type="checkbox"></input></li>', {
+      mail: mail,
+      selected: false,
+      tag: 'inbox'
+    });
+  });
+
+  describe('mail checkbox', function () {
+    var mailCheckedEvent, mailUncheckedEvent, checkbox;
+    beforeEach(function () {
+      mailCheckedEvent = spyOnEvent(document, Smail.events.ui.mail.checked);
+      mailUncheckedEvent = spyOnEvent(document, Smail.events.ui.mail.unchecked);
+      checkbox = this.component.$node.find('input[type=checkbox]');
+    });
+
+    it('checkCheckbox checks it and triggers events.ui.mail.checked', function () {
+      this.component.checkCheckbox();
+
+      expect(checkbox.prop('checked')).toBe(true);
+      expect(mailCheckedEvent).toHaveBeenTriggeredOn(document);
+    });
+
+    it('uncheckCheckbox checks it and triggers events.ui.mail.checked', function () {
+      checkbox.prop('checked', true);
+      this.component.uncheckCheckbox();
+
+      expect(checkbox.prop('checked')).toBe(false);
+      expect(mailUncheckedEvent).toHaveBeenTriggeredOn(document);
+    });
+  });
+});
diff --git a/web-ui/test/spec/mail_list/ui/mail_list.spec.js b/web-ui/test/spec/mail_list/ui/mail_list.spec.js
new file mode 100644
index 00000000..f383d540
--- /dev/null
+++ b/web-ui/test/spec/mail_list/ui/mail_list.spec.js
@@ -0,0 +1,275 @@
+/*global Smail */
+
+describeComponent('mail_list/ui/mail_list', function () {
+  'use strict';
+
+  var mailList;
+
+  beforeEach(function () {
+    setupComponent('<div id="mails"></div>', {
+      urlParams: {
+        hasMailIdent: function () {
+          return false;
+        }
+      }
+    });
+    mailList =
+      [
+        createMail('the mail subject', 'from@mail.com', '1', '2012-12-26T01:38:46-08:00'),
+        createMail('another mail subject', 'from_another@mail.com', '2', '2012-12-28T01:38:46-08:00')
+      ];
+  });
+
+
+  it('should open mail at first mail:available if there is a mailIdent in the url hash', function () {
+    this.component.attr.urlParams = {
+      hasMailIdent: function () {
+        return true;
+      },
+      getMailIdent: function () {
+        return '10';
+      }
+    };
+    var openMailEvent = spyOnEvent(document, Smail.events.ui.mail.open);
+
+    this.$node.trigger(Smail.events.mails.available, { mails: mailList });
+    expect(openMailEvent).toHaveBeenTriggeredOnAndWith(document, { ident: '10' });
+
+    this.$node.trigger(Smail.events.mails.available, { mails: mailList });
+    expect(openMailEvent.calls.length).toEqual(1);
+  });
+
+  it('should push the state if there is a mail ident in the hash url', function () {
+    this.component.attr.urlParams = {
+      hasMailIdent: function () {
+        return true;
+      },
+      getMailIdent: function () {
+        return '10';
+      }
+    };
+    var pushState = spyOnEvent(document, Smail.events.router.pushState);
+    this.component.attr.currentTag = 'inbox';
+
+    this.$node.trigger(Smail.events.mails.available, { mails: mailList });
+
+    expect(pushState).toHaveBeenTriggeredOnAndWith(document, { tag: 'inbox', mailIdent: '10' });
+  });
+
+  describe('checking/unchecking mails in the list', function () {
+
+    it('keeps a list with the currently checked mails', function () {
+      var checkedMails = {};
+
+      this.component.attr.checkedMails = {};
+
+      $(document).trigger(Smail.events.ui.mail.checked, {mail: mailList[0]});
+
+      checkedMails[mailList[0].ident] = mailList[0];
+
+      expect(this.component.attr.checkedMails).toEqual(checkedMails);
+    });
+
+    it('returns the list of checked mails to whomever requests them', function () {
+      var caller = {};
+      this.component.attr.checkedMails = {'1': {}};
+      var mailHereCheckedEvent = spyOnEvent(caller, Smail.events.ui.mail.hereChecked);
+
+      $(document).trigger(Smail.events.ui.mail.wantChecked, caller);
+
+      expect(mailHereCheckedEvent).toHaveBeenTriggeredOnAndWith(caller, { checkedMails: {'1': {} }});
+    });
+
+    it('returns an empty list to whomever requests the checked mails if there are no checked mails', function () {
+      var caller = {};
+      var mailHereCheckedEvent = spyOnEvent(caller, Smail.events.ui.mail.hereChecked);
+
+      $(document).trigger(Smail.events.ui.mail.wantChecked, caller);
+
+      expect(mailHereCheckedEvent).toHaveBeenTriggeredOnAndWith(caller, { checkedMails: {} });
+    });
+
+    it('removes for the checked mails when mail is unchecked', function () {
+      this.component.attr.checkedMails = {
+        '1': {},
+        '2': {},
+        '3': {}
+      };
+
+      $(document).trigger(Smail.events.ui.mail.unchecked, {mail: {ident: '1'}});
+
+      expect(this.component.attr.checkedMails).toEqual({'2': {}, '3': {} });
+    });
+
+    it('checks the check all checkbox if at least one mail is checked', function () {
+      var setCheckAllCheckboxEvent = spyOnEvent(document, Smail.events.ui.mails.hasMailsChecked);
+
+      $(document).trigger(Smail.events.ui.mail.checked, {mail: mailList[0]});
+
+      expect(setCheckAllCheckboxEvent).toHaveBeenTriggeredOnAndWith(document, true);
+    });
+
+    it('unchecks the check all checkbox if no mail is left checked', function () {
+      this.component.attr.checkedMails = {1: {}};
+
+      var setCheckAllCheckboxEvent = spyOnEvent(document, Smail.events.ui.mails.hasMailsChecked);
+
+      $(document).trigger(Smail.events.ui.mail.unchecked, {mail: {ident: '1'}});
+
+      expect(setCheckAllCheckboxEvent).toHaveBeenTriggeredOnAndWith(document, false);
+    });
+  });
+
+  describe('when mails are available', function () {
+    it('should open email if popstate event happened (when mailIdent isnt undefined)', function () {
+      var openMailEvent = spyOnEvent(document, Smail.events.ui.mail.open);
+
+      this.component.$node.trigger(Smail.events.mails.available, { mails: mailList, mailIdent: '30' });
+
+      expect(openMailEvent).toHaveBeenTriggeredOnAndWith(document, { ident: '30'});
+    });
+
+    it('should open draft in popstate event if tag is Drafts', function () {
+      var openDraftEvent = spyOnEvent(document, Smail.events.dispatchers.rightPane.openDraft);
+
+      this.component.$node.trigger(Smail.events.mails.available, { mails: mailList, mailIdent: '30', tag: 'drafts' });
+
+      expect(openDraftEvent).toHaveBeenTriggeredOnAndWith(document, { ident: '30'});
+    });
+  });
+
+  it('should not append emails when another mails:available event is triggered', function () {
+    this.component.$node.trigger(Smail.events.mails.available, { mails: mailList });
+
+    expect(this.component.$node.find('a').length).toEqual(2);
+
+    this.component.$node.trigger(Smail.events.mails.available, { mails: mailList });
+
+    expect(this.component.$node.find('a').length).toEqual(2);
+  });
+
+  it('resets scroll when opening a new tag or choosing a new tag', function () {
+    var eventSpy = spyOnEvent(document, Smail.events.dispatchers.middlePane.resetScroll);
+    this.component.$node.trigger(Smail.events.mails.available, { mails: mailList });
+    expect(eventSpy).toHaveBeenTriggeredOn(document);
+  });
+
+  describe('rendering the mails', function () {
+
+    describe('when mails are available for refreshing', function () {
+      it('renders the new mails', function () {
+        this.component.$node.trigger(Smail.events.mails.availableForRefresh, { mails: mailList });
+
+        matchMail(mailList[0], this.component.$node);
+        matchMail(mailList[1], this.component.$node);
+      });
+
+    });
+
+    it('should render all mails sent in ui:mails:show event', function () {
+      this.component.$node.trigger(Smail.events.mails.available, { mails: mailList });
+
+      matchMail(mailList[0], this.component.$node);
+      matchMail(mailList[1], this.component.$node);
+    });
+
+    it('should select the current email when mails are available', function () {
+      this.component.attr.currentMailIdent = '1';
+
+      this.component.trigger(Smail.events.mails.available, { mails: mailList });
+
+      matchSelectedMail(mailList[0], this.component.$node);
+      matchMail(mailList[1], this.component.$node);
+    });
+
+    it('should keep the mail checked when it was previously checked (so refresh works)', function () {
+      var checkbox, mailIdent;
+
+      mailIdent = mailList[0].ident;
+      this.component.attr.checkedMails[mailIdent] = mailList[0];
+      this.component.$node.trigger(Smail.events.mails.available, { mails: [mailList[0]] });
+      checkbox = this.$node.find('input[type=checkbox]');
+
+      expect(checkbox.prop('checked')).toBe(true);
+    });
+
+    it('should render links for the emails', function () {
+      this.component.$node.trigger(Smail.events.mails.available, { mails: mailList, tag: 'inbox' });
+
+      expect(this.$node.html()).toMatch('href="/#/inbox/mail/1');
+      expect(this.$node.html()).toMatch('href="/#/inbox/mail/2');
+    });
+
+    it('should clean the selected email', function () {
+      this.component.attr.currentMailIdent = '1';
+      this.component.trigger(Smail.events.ui.mails.cleanSelected);
+
+      expect(this.component.attr.currentMailIdent).toEqual('');
+    });
+
+    function matchMail(mail, node) {
+      expect(node.html()).toMatch('id="mail-' + mail.ident + '"');
+      expect(node.html()).toMatch('<div class="subject-and-tags">');
+      expect(node.html()).toMatch('<div class="from">' + mail.header.from + '</div>');
+      expect(node.html()).toMatch('<span class="received-date">' + mail.header.formattedDate + '</span>');
+    }
+
+    function matchSelectedMail(mail, node) {
+      expect(node.html()).toMatch(['id="mail-', mail.ident, '" class="selected"'].join(''));
+    }
+  });
+
+  describe('when saving a draft', function () {
+    it('refreshes the list if the current tag is drafts', function () {
+      this.component.attr.currentTag = 'drafts';
+      var spyRefresh = spyOnEvent(document, Smail.events.ui.mails.refresh);
+      var spyScroll = spyOnEvent(document, Smail.events.dispatchers.middlePane.resetScroll);
+      this.component.trigger(Smail.events.mail.draftSaved, {ident: 1});
+      expect(spyRefresh).toHaveBeenTriggeredOn(document);
+      expect(spyScroll).toHaveBeenTriggeredOn(document);
+    });
+
+    it('does not refresh the list if the current tag is not drafts', function() {
+      this.component.attr.currentTag = 'sent';
+      var spyRefresh = spyOnEvent(document, Smail.events.ui.mails.refresh);
+      var spyScroll = spyOnEvent(document, Smail.events.dispatchers.middlePane.resetScroll);
+      this.component.trigger(Smail.events.mail.draftSaved, {ident: 1});
+      expect(spyRefresh).not.toHaveBeenTriggeredOn(document);
+      expect(spyScroll).not.toHaveBeenTriggeredOn(document);
+    });
+  });
+
+  describe('when sending a mail', function () {
+    it('refreshes the list if the current tag is drafts', function () {
+      this.component.attr.currentTag = 'drafts';
+      var spyRefresh = spyOnEvent(document, Smail.events.ui.mails.refresh);
+      var spyScroll = spyOnEvent(document, Smail.events.dispatchers.middlePane.resetScroll);
+      this.component.trigger(Smail.events.mail.sent);
+      expect(spyRefresh).toHaveBeenTriggeredOn(document);
+      expect(spyScroll).toHaveBeenTriggeredOn(document);
+    });
+
+    it('refreshes the list if the current tag is sent', function() {
+      this.component.attr.currentTag = 'sent';
+      var spyRefresh = spyOnEvent(document, Smail.events.ui.mails.refresh);
+      var spyScroll = spyOnEvent(document, Smail.events.dispatchers.middlePane.resetScroll);
+      this.component.trigger(Smail.events.mail.sent);
+      expect(spyRefresh).toHaveBeenTriggeredOn(document);
+      expect(spyScroll).toHaveBeenTriggeredOn(document);
+    });
+  });
+
+  function createMail(subject, from, ident, date) {
+    var mail = Smail.testData().parsedMail.simpleTextPlain;
+
+    return _.merge(mail, {
+      header: {
+        subject: subject,
+        from: from,
+        date: date
+      },
+      ident: ident,
+      tags: ['inbox']
+    });
+  }
+});