From 04cf441c5ae18400c6b4865b0b37a71718dc9d46 Mon Sep 17 00:00:00 2001 From: Ola Bini Date: Thu, 31 Jul 2014 19:29:33 -0300 Subject: Add web-ui based on previous code --- .../mail_view/ui/recipients/recipients.spec.js | 36 +++++++ .../ui/recipients/recipients_input.spec.js | 104 +++++++++++++++++++++ .../ui/recipients/recipients_iterator.spec.js | 101 ++++++++++++++++++++ 3 files changed, 241 insertions(+) create mode 100644 web-ui/test/spec/mail_view/ui/recipients/recipients.spec.js create mode 100644 web-ui/test/spec/mail_view/ui/recipients/recipients_input.spec.js create mode 100644 web-ui/test/spec/mail_view/ui/recipients/recipients_iterator.spec.js (limited to 'web-ui/test/spec/mail_view/ui/recipients') 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 = $(''); + }); + + 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 -- cgit v1.2.3