Add web-ui based on previous code

3 files changed, 241 insertions, 0 deletions

diff --git a/web-ui/test/spec/mail_view/ui/recipients/recipients.spec.js b/web-ui/test/spec/mail_view/ui/recipients/recipients.spec.js
new file mode 100644
index 00000000..692bf0eb
--- /dev/null
+++ b/web-ui/test/spec/mail_view/ui/recipients/recipients.spec.js
@@ -0,0 +1,36 @@
+/* global Smail */
+
+describeComponent('mail_view/ui/recipients/recipients',function () {
+  'use strict';
+  var recipientsUpdatedEvent;
+
+  describe('initialization', function() {
+    it('adds recipients', function() {
+      setupComponent({name: 'to', addresses: ['foobar@gmail.com'] });
+      expect(this.component.attr.recipients.length).toBe(1);
+    });
+
+    it('does not trigger recipients updated events on initialization', function() {
+      recipientsUpdatedEvent = spyOnEvent(document, Smail.events.ui.recipients.updated);
+
+      setupComponent({name: 'to', addresses: ['foobar@gmail.com'] });
+      expect(recipientsUpdatedEvent).not.toHaveBeenTriggeredOn(document);
+    });
+  });
+
+  describe('adding recipients from the ui', function() {
+    beforeEach(function () {
+      setupComponent();
+      recipientsUpdatedEvent  = spyOnEvent(document, Smail.events.ui.recipients.updated);
+      this.component.trigger(Smail.events.ui.recipients.entered, {name: 'to', addresses: ['foobar@gmail.com'] });
+    });
+
+    it('triggers recipients updated', function() {
+      expect(recipientsUpdatedEvent).toHaveBeenTriggeredOn(document);
+    });
+
+    it('adds recipients', function() {
+      expect(this.component.attr.recipients.length).toBe(1);
+    });
+  });
+});
diff --git a/web-ui/test/spec/mail_view/ui/recipients/recipients_input.spec.js b/web-ui/test/spec/mail_view/ui/recipients/recipients_input.spec.js
new file mode 100644
index 00000000..0f98d007
--- /dev/null
+++ b/web-ui/test/spec/mail_view/ui/recipients/recipients_input.spec.js
@@ -0,0 +1,104 @@
+/* global Smail */
+
+describeComponent('mail_view/ui/recipients/recipients_input',function () {
+  'use strict';
+
+  beforeEach(function () {
+    setupComponent({name: 'to'});
+  });
+
+  describe('keys that finish address input', function () {
+
+    _.each([
+      [186, 'semicolon'],
+      [188, 'comma'],
+      [32, 'space']
+
+    ], function (keycode) {
+
+      it(': ' + keycode[1], function () {
+        var addressEnteredEvent = spyOnEvent(this.$node, Smail.events.ui.recipients.entered);
+
+        var enterAddressKeyPressEvent = $.Event('keydown', { which: keycode[0] });
+        this.$node.val('a@b.c');
+        this.$node.trigger(enterAddressKeyPressEvent);
+
+        expect(addressEnteredEvent).toHaveBeenTriggeredOnAndWith(this, { name: 'to', address: 'a@b.c' });
+      });
+
+      it('wont add address if val is empty: ' + keycode[1], function () {
+        var addressEnteredEvent = spyOnEvent(this.$node, Smail.events.ui.recipients.entered);
+
+        var enterAddressKeyPressEvent = $.Event('keydown', { which: keycode[0] });
+        this.$node.val('');
+        this.$node.trigger(enterAddressKeyPressEvent);
+
+        expect(addressEnteredEvent).not.toHaveBeenTriggeredOnAndWith(this, { name: 'to', address: '' });
+      });
+
+      it('prevents event default regardless on input val when key is ' + keycode[1], function () {
+        var enterAddressKeyPressEvent = $.Event('keydown', { which: keycode[0] });
+        spyOn(enterAddressKeyPressEvent, 'preventDefault');
+
+        this.$node.val('')
+        this.$node.trigger(enterAddressKeyPressEvent);
+        expect(enterAddressKeyPressEvent.preventDefault).toHaveBeenCalled();
+
+        enterAddressKeyPressEvent.preventDefault.reset();
+        this.$node.val('anything')
+        this.$node.trigger(enterAddressKeyPressEvent);
+        expect(enterAddressKeyPressEvent.preventDefault).toHaveBeenCalled();
+      });
+
+    });
+
+    describe('when tab is pressed', function () {
+      it('enters an address and prevents event default if there is an input val', function () {
+        var addressEnteredEvent = spyOnEvent(this.$node, Smail.events.ui.recipients.entered);
+
+        var tabKeyPressEvent = $.Event('keydown', { which: 9});
+        spyOn(tabKeyPressEvent, 'preventDefault');
+
+        this.$node.val('a@b.c');
+        this.$node.trigger(tabKeyPressEvent);
+
+        expect(tabKeyPressEvent.preventDefault).toHaveBeenCalled();
+        expect(addressEnteredEvent).toHaveBeenTriggeredOnAndWith(this, { name: 'to', address: 'a@b.c'});
+      });
+
+      it('doesnt enter an address and doesnt prevent event default if input val is empty (so tab moves it to the next input)', function () {
+        var addressEnteredEvent = spyOnEvent(this.$node, Smail.events.ui.recipients.entered);
+
+        var tabKeyPressEvent = $.Event('keydown', { which: 9});
+        spyOn(tabKeyPressEvent, 'preventDefault');
+
+        this.$node.val('');
+        this.$node.trigger(tabKeyPressEvent);
+
+        expect(tabKeyPressEvent.preventDefault).not.toHaveBeenCalled();
+        expect(addressEnteredEvent).not.toHaveBeenTriggeredOnAndWith(this, { name: 'to', address: ''});
+      });
+    });
+  });
+
+  describe('on keyup', function () {
+    it('triggers inputHasNoMail if input is empty', function () {
+      var inputHasNoMailEvent = spyOnEvent(document, Smail.events.ui.recipients.inputHasNoMail);
+      this.$node.val('');
+
+      this.$node.trigger('keyup');
+
+      expect(inputHasNoMailEvent).toHaveBeenTriggeredOn(document);
+    });
+
+    it('triggers inputHasMail if input is not empty', function () {
+      var inputHasMailEvent = spyOnEvent(document, Smail.events.ui.recipients.inputHasMail);
+      this.$node.val('lalala');
+
+      this.$node.trigger('keyup');
+
+      expect(inputHasMailEvent).toHaveBeenTriggeredOn(document, { name: 'to' });
+    });
+  });
+
+});
diff --git a/web-ui/test/spec/mail_view/ui/recipients/recipients_iterator.spec.js b/web-ui/test/spec/mail_view/ui/recipients/recipients_iterator.spec.js
new file mode 100644
index 00000000..480ea256
--- /dev/null
+++ b/web-ui/test/spec/mail_view/ui/recipients/recipients_iterator.spec.js
@@ -0,0 +1,101 @@
+/* global Smail */
+
+define(['mail_view/ui/recipients/recipients_iterator'], function (RecipientsIterator) {
+  'use strict';
+
+  function createRecipient() {
+    return jasmine.createSpyObj('recipient', ['select', 'unselect', 'destroy']);
+  }
+
+  var recipientsIterator,
+    exitInput;
+
+  function createIterator(elements) {
+    return recipientsIterator = new RecipientsIterator({ elements: elements, exitInput: exitInput });
+  }
+
+  function resetMock(m) {
+    m.destroy.reset();m.select.reset();m.unselect.reset();
+  }
+
+  beforeEach(function () {
+    exitInput = $('<input>');
+  });
+
+  describe('moving left', function () {
+    it('unselects the current element and selects the element in the left if there is one', function () {
+      var elements = _.times(2, createRecipient);
+
+      recipientsIterator = createIterator(elements);
+      recipientsIterator.moveLeft();
+
+      expect(elements[0].select).toHaveBeenCalled();
+      expect(elements[1].unselect).toHaveBeenCalled();
+    });
+
+    it('doesnt do anything if there are no elements in the left', function () {
+      var elements = _.times(2, createRecipient);
+      recipientsIterator = createIterator(elements);
+      recipientsIterator.moveLeft();
+      _.each(elements, resetMock);
+
+      recipientsIterator.moveLeft();
+
+      expect(elements[0].select).not.toHaveBeenCalled();
+      expect(elements[0].unselect).not.toHaveBeenCalled();
+      expect(elements[1].select).not.toHaveBeenCalled();
+      expect(elements[1].unselect).not.toHaveBeenCalled();
+    });
+
+  });
+
+  describe('moving right', function () {
+    it('unselects the current element and selects the one in the right if there is one', function () {
+      var elements = _.times(2, createRecipient);
+      recipientsIterator = createIterator(elements);
+      recipientsIterator.moveLeft();
+      _.each(elements, resetMock);
+
+      recipientsIterator.moveRight();
+
+      expect(elements[0].unselect).toHaveBeenCalled();
+      expect(elements[1].select).toHaveBeenCalled();
+    });
+
+    it('unselects current element and focus on exit input if there are no elements on the right', function () {
+      var elements = _.times(2, createRecipient);
+      spyOn(exitInput, 'focus');
+
+      recipientsIterator = createIterator(elements);
+      recipientsIterator.moveRight();
+
+      expect(elements[1].unselect).toHaveBeenCalled();
+      expect(exitInput.focus).toHaveBeenCalled();
+    });
+  });
+
+  describe('delete current', function () {
+    it('selects what is left in the right after deleting the current element', function () {
+      var elements = _.times(2, createRecipient);
+      var toBeDeleted = elements[0];
+      recipientsIterator = createIterator(elements);
+      recipientsIterator.moveLeft();
+
+      recipientsIterator.deleteCurrent();
+
+      expect(toBeDeleted.destroy).toHaveBeenCalled();
+      expect(elements[0].select).toHaveBeenCalled();
+    });
+
+    it('focus on the input if there are no more elements', function () {
+      recipientsIterator = createIterator([createRecipient()]);
+      spyOn(exitInput, 'focus');
+
+      recipientsIterator.deleteCurrent();
+
+      expect(exitInput.focus).toHaveBeenCalled();
+    });
+  });
+
+
+});
\ No newline at end of file