/bower_components/bootstrap-tokenfield/test/test.tokenfield.1.unit.js |
@@ -0,0 +1,431 @@ |
describe('1. Unit tests:', function() { |
|
describe('initializing tokenfield', function() { |
describe('with an empty input', function() { |
|
it('must wrap the original input with the wrapper element', function() { |
this.$field.parents('.tokenfield').hasClass('form-control').must.be.true(); |
}); |
|
it('must create a new input element for token input', function() { |
this.$field.parents('.tokenfield').find('.token-input').length.must.equal(1); |
}); |
|
it('must move the original input out of the way', function() { |
this.$field.css('position').must.equal('absolute'); |
this.$field.css('left').must.equal('-10000px'); |
}); |
|
it('must not create any tokens', function() { |
this.$wrapper.find('.token').length.must.equal(0); |
}); |
|
}); |
|
describe('with an input with comma-separated values', function() { |
|
before(function() { |
TFT.template = '<input type="text" class="tokenize" value="red,green, blue" />'; |
}); |
|
after(function() { |
TFT.template = null; |
}); |
|
it('must create tokens for each comma-separated value', function() { |
this.$wrapper.find('.token').length.must.equal(3); |
}); |
|
}); |
|
describe('with an input with data-tokens values', function() { |
|
before(function() { |
TFT.template = '<input type="text" class="tokenize" data-tokens="red, green, blue" />'; |
}); |
|
after(function() { |
TFT.template = null; |
}); |
|
it('must create tokens for each comma-separated token', function() { |
this.$wrapper.find('.token').length.must.equal(3); |
}); |
|
}); |
|
describe('with RTL', function() { |
before(function() { |
TFT.template = '<input type="text" class="tokenize" style="direction:rtl" value="red,green, blue" />'; |
}); |
|
after(function() { |
TFT.template = null; |
}); |
|
it('must set rtl class on tokenfield', function() { |
this.$wrapper.hasClass('rtl').must.equal(true); |
}); |
}) |
|
}); |
|
describe('destroying tokenfield', function() { |
before(function() { |
TFT.template = '<div id="destroy-test-container"><label for="destroy-test"></label><input type="text" id="destroy-test" class="tokenize" value="red,green, blue" /></div>'; |
}); |
|
after(function() { |
TFT.template = null; |
}); |
|
it('must reset the original input to previous state', function() { |
var $field = this.$field.tokenfield('destroy'); |
$field.must.be.an.object(); |
$field.data().must.not.have.property('bs.tokenfield'); |
$field.parent().prop('id').must.equal('destroy-test-container'); |
$field.val().must.equal('red, green, blue'); |
}); |
}); |
|
describe('Tokenfield public methods', function() { |
|
describe('.createToken()', function() { |
|
describe('using an empty input', function() { |
|
beforeEach(function() { |
this.$field.tokenfield('createToken', 'awesome'); |
}); |
|
it('must create a new token', function() { |
this.$wrapper.find('.token').must.have.length(1); |
}); |
|
it('add the new token value to original input', function() { |
this.$field.val().must.equal('awesome'); |
}); |
|
}); |
|
describe('using a non-empty input', function() { |
|
before(function() { |
TFT.template = '<input type="text" class="tokenize" value="red,green, blue" />'; |
}); |
|
beforeEach(function() { |
this.$field.tokenfield('createToken', 'awesome'); |
}); |
|
after(function() { |
TFT.template = null; |
}); |
|
it('must append a new token to the end of existing tokens', function() { |
this.$field.val().must.equal('red, green, blue, awesome'); |
}); |
|
}); |
|
describe('given an object', function() { |
|
beforeEach(function() { |
this.$field.tokenfield('createToken', { value: 'purple', label: 'Violet' }); |
}); |
|
it('must create a new token', function() { |
this.$wrapper.find('.token').must.have.length(1); |
}); |
|
it('add the new token value to original input', function() { |
this.$field.val().must.equal('purple'); |
}); |
|
}); |
|
}); |
|
describe('.getTokens()', function() { |
|
describe('given no arguments', function() { |
before(function() { |
TFT.template = '<input type="text" class="tokenize" value="red,green, blue" />'; |
}); |
|
after(function() { |
TFT.template = null; |
}); |
|
it('must return an array of token key-value pairs', function() { |
var tokens = this.$field.tokenfield('getTokens'); |
tokens.must.be.an.array(); |
tokens.must.have.length(3); |
tokens[0].must.have.keys(['label', 'value']); |
tokens[0].label.must.equal('red'); |
tokens[0].value.must.equal('red'); |
}); |
}); |
|
describe('given arguments active = true', function() { |
before(function() { |
TFT.template = '<input type="text" class="tokenize" value="red,green,blue" />'; |
}); |
|
after(function() { |
TFT.template = null; |
}); |
|
it('must return an array of only active token key-value pairs', function() { |
// Mark green as active |
this.$wrapper.find('.token') |
.filter(':has(.token-label:contains(green))').addClass('active'); |
|
var tokens = this.$field.tokenfield('getTokens', true); |
tokens.must.be.an.array(); |
tokens.must.have.length(1); |
tokens[0].must.have.keys(['label', 'value']); |
tokens[0].label.must.equal('green'); |
tokens[0].value.must.equal('green'); |
}); |
}); |
|
|
}); |
|
describe('getTokensList()', function() { |
|
describe('given no arguments', function() { |
before(function() { |
TFT.template = '<input type="text" class="tokenize" value="red,green, blue" />'; |
}); |
|
after(function() { |
TFT.template = null; |
}); |
|
it('must return a string with comma-separated token values', function() { |
var tokens = this.$field.tokenfield('getTokensList'); |
tokens.must.be.a.string(); |
tokens.must.equal('red, green, blue'); |
}); |
}); |
|
describe('given an alternative delimiter', function() { |
before(function() { |
TFT.template = '<input type="text" class="tokenize" value="red,green,blue" />'; |
}); |
|
after(function() { |
TFT.template = null; |
}); |
|
it('must return a string with semicolon-separated token values', function() { |
var tokens = this.$field.tokenfield('getTokensList', ';', false); |
tokens.must.be.a.string(); |
tokens.must.equal('red;green;blue'); |
}); |
}); |
|
describe('given an alternative delimiter and active = true', function() { |
before(function() { |
TFT.template = '<input type="text" class="tokenize" value="red,green,blue,yellow" />'; |
}); |
|
after(function() { |
TFT.template = null; |
}); |
|
it('must return a string with semicolon-separated token values', function() { |
// Mark green and yellow as active |
this.$wrapper.find('.token') |
.filter(':has(.token-label:contains(green))').addClass('active'); |
this.$wrapper.find('.token') |
.filter(':has(.token-label:contains(yellow))').addClass('active'); |
|
var tokens = this.$field.tokenfield('getTokensList', ';', false, true); |
tokens.must.be.a.string(); |
tokens.must.equal('green;yellow'); |
}); |
}); |
|
|
}); |
|
describe('setTokens()', function() { |
|
describe('using comma-separated string', function() { |
|
before(function() { |
TFT.template = '<input type="text" class="tokenize" value="red,green, blue" />'; |
}); |
|
beforeEach(function(){ |
this.$field.tokenfield('setTokens', 'black,yellow,white'); |
}); |
|
after(function() { |
TFT.template = null; |
}); |
|
it('must replace any existing tokens with new ones', function() { |
var tokens = this.$field.tokenfield('getTokens') |
, tokensList = this.$field.tokenfield('getTokensList'); |
|
tokens.must.have.length(3); |
tokens[0].must.have.keys(['label', 'value']); |
tokens[0].label.must.equal('black'); |
tokens[0].value.must.equal('black'); |
|
tokensList.must.not.contain('red'); |
|
}); |
|
it('must set the original input value to comma-separated list of token values', function() { |
this.$field.val().must.equal('black, yellow, white'); |
}); |
|
}); |
|
describe('using an array of string values', function() { |
|
before(function() { |
TFT.template = '<input type="text" class="tokenize" value="red,green, blue" />'; |
}); |
|
beforeEach(function(){ |
this.$field.tokenfield('setTokens', 'black,yellow,white'); |
}); |
|
after(function() { |
TFT.template = null; |
}); |
|
it('must replace any existing tokens with new ones', function() { |
var tokens = this.$field.tokenfield('getTokens') |
, tokensList = this.$field.tokenfield('getTokensList'); |
|
tokens.must.have.length(3); |
tokens[0].must.have.keys(['label', 'value']); |
tokens[0].label.must.equal('black'); |
tokens[0].value.must.equal('black'); |
|
tokensList.must.not.contain('red'); |
|
}); |
|
it('must set the original input value to comma-separated list of token values', function() { |
this.$field.val().must.equal('black, yellow, white'); |
}); |
|
}); |
|
describe('using an array of token objects', function() { |
|
before(function() { |
TFT.template = '<input type="text" class="tokenize" value="red,green, blue" />'; |
}); |
|
beforeEach(function(){ |
this.$field.tokenfield('setTokens', [{ value: "black", label: "Schwarz" }, { value: "yellow", label: "Gelb" }]); |
}); |
|
after(function() { |
TFT.template = null; |
}); |
|
it('must replace any existing tokens with new ones', function() { |
this.$field.tokenfield('setTokens', [{ value: "black", label: "Schwarz" }, { value: "yellow", label: "Gelb" }]); |
|
var tokens = this.$field.tokenfield('getTokens') |
, tokensList = this.$field.tokenfield('getTokensList'); |
|
tokens.must.have.length(2); |
tokens[0].must.have.keys(['label', 'value']); |
tokens[0].label.must.equal('Schwarz'); |
tokens[0].value.must.equal('black'); |
|
tokensList.must.not.contain('red'); |
|
}); |
|
it('must set the original input value to comma-separated list of token values', function() { |
this.$field.val().must.equal('black, yellow'); |
}); |
|
}); |
|
}); |
|
describe('disable()', function() { |
|
beforeEach(function() { |
this.$field.tokenfield('disable'); |
}); |
|
it('must disable both original and token input', function() { |
this.$field.prop('disabled').must.be.true(); |
this.$input.prop('disabled').must.be.true(); |
}); |
|
it('must add "disabled" class to tokenfield', function() { |
this.$wrapper.hasClass('disabled').must.be.true(); |
}); |
|
}); |
|
describe('enable()', function() { |
|
beforeEach(function() { |
this.$field.tokenfield('disable'); |
this.$field.tokenfield('enable'); |
}); |
|
it('must enable both original and token input', function() { |
this.$field.prop('disabled').must.be.false(); |
this.$input.prop('disabled').must.be.false(); |
}); |
|
it('must remove "disabled" class from tokenfield', function() { |
this.$wrapper.hasClass('disabled').must.be.false(); |
}); |
|
}); |
|
describe('readonly()', function() { |
|
beforeEach(function() { |
this.$field.tokenfield('readonly'); |
}); |
|
it('must make both original and token input readonly', function() { |
this.$field.prop('readonly').must.be.true(); |
this.$input.prop('readonly').must.be.true(); |
}); |
|
it('must add "readonly" class to tokenfield', function() { |
this.$wrapper.hasClass('readonly').must.be.true(); |
}); |
|
}); |
|
describe('writeable()', function() { |
|
beforeEach(function() { |
this.$field.tokenfield('readonly'); |
this.$field.tokenfield('writeable'); |
}); |
|
it('must make both original and token input writeable', function() { |
this.$field.prop('readonly').must.be.false(); |
this.$input.prop('readonly').must.be.false(); |
}); |
|
it('must remove "readonly" class from tokenfield', function() { |
this.$wrapper.hasClass('readonly').must.be.false(); |
}); |
|
}); |
}); |
|
}); |
/bower_components/bootstrap-tokenfield/test/test.tokenfield.2.integration.js |
@@ -0,0 +1,1028 @@ |
describe('2. Integration tests:', function() { |
|
before(function() { |
require('../node_modules/jquery-simulate-ext/libs/bililiteRange'); |
require('../node_modules/jquery-simulate-ext/libs/jquery.simulate'); |
|
// https://github.com/j-ulrich/jquery-simulate-ext/issues/9 |
// For us, it just saves a littlebit time |
global.$.simulate.ext_disableQuirkDetection = true; |
|
require('../node_modules/jquery-simulate-ext/src/jquery.simulate.ext'); |
require('../node_modules/jquery-simulate-ext/src/jquery.simulate.key-combo'); |
require('../node_modules/jquery-simulate-ext/src/jquery.simulate.key-sequence'); |
}); |
|
describe('Using an alternative delimiter', function() { |
before(function() { |
TFT.template = '<input type="text" class="tokenize" value="red;green;blue;yellow" />' |
TFT.options = { |
delimiter: ';' |
} |
}); |
|
after(function() { |
delete TFT.template; |
delete TFT.options; |
}); |
|
it('must create tokens by splitting the original value with delimiters', function() { |
this.$field.data('bs.tokenfield').$wrapper.find('.token').length.must.equal(4); |
}); |
|
it('must create a token when the delimiting key is pressed and use the first delimiter for setting original input value', function() { |
this.$input.focus().simulate("key-sequence", { sequence: "purple;olive;" }) |
this.$field.data('bs.tokenfield').$wrapper.find('.token').length.must.equal(6); |
this.$field.val().must.equal('red; green; blue; yellow; purple; olive'); |
}); |
}) |
|
describe('with multiple alternative delimiters', function() { |
describe("Delimiters: [' ', '.']", function() { |
before(function() { |
TFT.template = '<input type="text" class="tokenize" value="red green blue.yellow" />' |
TFT.options = { |
delimiter: [' ', '.'] |
} |
}); |
|
after(function() { |
delete TFT.template; |
delete TFT.options; |
}); |
|
it('must create tokens by splitting the original value with delimiters', function() { |
this.$field.data('bs.tokenfield').$wrapper.find('.token').length.must.equal(4); |
}); |
|
it('must create a token when the delimiting key is pressed and use the first delimiter for setting original input value', function() { |
this.$input.focus().simulate("key-sequence", { sequence: "purple olive." }); |
this.$field.data('bs.tokenfield').$wrapper.find('.token').length.must.equal(6); |
this.$field.val().must.equal('red green blue yellow purple olive'); |
}); |
}); |
|
describe("Delimiters: [',', ' ', '-', '_'] (Regression test for #79)", function() { |
before(function() { |
TFT.template = '<input type="text" class="tokenize" value="red,green blue-yellow_123" />' |
TFT.options = { |
delimiter: [',', ' ', '-', '_'] |
} |
}); |
|
after(function() { |
delete TFT.template; |
delete TFT.options; |
}); |
|
it('must create tokens by splitting the original value with delimiters', function() { |
this.$field.data('bs.tokenfield').$wrapper.find('.token').length.must.equal(5); |
}); |
}); |
|
describe("Using regexp special characters as delimiters", function() { |
before(function() { |
TFT.template = '<input type="text" class="tokenize" value="red\\green$blue[yellow{orange^violet.purple|black?white*gray+silver(lime)navy" />' |
TFT.options = { |
delimiter: ['\\', '$', '[', '{', '^', '.', '|', '?', '*', '+', '(', ')'] |
} |
}); |
|
after(function() { |
delete TFT.template; |
delete TFT.options; |
}); |
|
it('must create tokens by splitting the original value with delimiters', function() { |
this.$field.data('bs.tokenfield').$wrapper.find('.token').length.must.equal(13); |
}); |
}); |
}); |
|
describe('Keyboard interaction', function() { |
|
describe("Pressing Ctrl+A", function() { |
before(function() { |
TFT.template = '<input type="text" class="tokenize" value="red,green,blue" />' |
}); |
|
after(function() { |
delete TFT.template; |
}); |
|
it("must select all tokens", function() { |
this.$input.focus().simulate("key-combo", { combo: "ctrl+a" }); |
this.$field.tokenfield('getTokens', true).length.must.equal(3); |
}); |
}); |
|
describe("pressing Cmd+A", function() { |
before(function() { |
TFT.template = '<input type="text" class="tokenize" value="red,green,blue" />' |
}); |
|
after(function() { |
delete TFT.template; |
}); |
|
it("must select all tokens", function() { |
this.$input.focus().simulate("key-combo", { combo: "meta+a" }); |
this.$field.tokenfield('getTokens', true).length.must.equal(3); |
}); |
}); |
|
describe("Pressing delete", function() { |
describe("when a token is selected", function() { |
before(function() { |
TFT.template = '<input type="text" class="tokenize" value="red,green,blue,yellow" />' |
}); |
|
after(function() { |
delete TFT.template; |
}); |
|
describe('and there are more tokens to the right of selected token', function() { |
it("must delete the selected token and move focus to the next token", function() { |
// Mark green as active |
this.$wrapper.find('.token') |
.filter(':has(.token-label:contains(green))').addClass('active'); |
|
this.$copyHelper.simulate("key-sequence", { sequence: "{del}" }); |
this.$field.tokenfield('getTokens').length.must.equal(3); |
this.$field.tokenfield('getTokensList', null, null, true).must.equal('blue'); |
}); |
}) |
|
describe('and there are no more tokens to the right of the selected token', function() { |
it("must delete the selected token and move focus to input", function() { |
// Mark green as active |
this.$wrapper.find('.token') |
.filter(':has(.token-label:contains(yellow))').addClass('active'); |
|
this.$copyHelper.simulate("key-sequence", { sequence: "{del}" }); |
this.$field.tokenfield('getTokens').length.must.equal(3); |
this.$field.tokenfield('getTokensList', null, null, true).must.equal(''); |
this.$input.is(document.activeElement).must.be.true(); |
}); |
}) |
}); |
|
describe("when multiple tokens are selected", function() { |
before(function() { |
TFT.template = '<input type="text" class="tokenize" value="red,green,blue,yellow,purple" />' |
}); |
|
after(function() { |
delete TFT.template; |
}); |
|
describe('and there are more tokens to the right of selected tokens', function() { |
it("must delete the selected tokens and move focus to the next token of the rightmost selected token", function() { |
// Mark green and yellow as active |
this.$wrapper.find('.token') |
.filter(':has(.token-label:contains(green))').addClass('active'); |
this.$wrapper.find('.token') |
.filter(':has(.token-label:contains(yellow))').addClass('active'); |
|
this.$copyHelper.simulate("key-sequence", { sequence: "{del}" }); |
this.$field.tokenfield('getTokens').length.must.equal(3); |
this.$field.tokenfield('getTokensList', null, null, true).must.equal('purple'); |
}); |
}); |
|
describe('and there are no more tokens to the right of selected tokens', function() { |
it("must delete the selected tokens and move focus input", function() { |
// Mark green and yellow as active |
this.$wrapper.find('.token') |
.filter(':has(.token-label:contains(green))').addClass('active'); |
this.$wrapper.find('.token') |
.filter(':has(.token-label:contains(purple))').addClass('active'); |
|
this.$copyHelper.simulate("key-sequence", { sequence: "{del}" }); |
this.$field.tokenfield('getTokens').length.must.equal(3); |
this.$field.tokenfield('getTokensList').must.equal('red, blue, yellow'); |
this.$input.is(document.activeElement).must.be.true(); |
|
}); |
}); |
}); |
}); |
|
describe("Pressing backspace", function() { |
describe("when a token is selected", function() { |
before(function() { |
TFT.template = '<input type="text" class="tokenize" value="red,green,blue,yellow" />' |
}); |
|
after(function() { |
delete TFT.template; |
}); |
|
describe('and there are more tokens to the left of selected token', function() { |
it("must delete the selected token and move focus to the previous token", function() { |
// Mark green as active |
this.$wrapper.find('.token') |
.filter(':has(.token-label:contains(blue))').addClass('active'); |
|
this.$copyHelper.simulate("key-sequence", { sequence: "{backspace}" }); |
this.$field.tokenfield('getTokens').length.must.equal(3); |
this.$field.tokenfield('getTokensList', null, null, true).must.equal('green'); |
}); |
}) |
|
describe('and there are no more tokens to the left of the selected token', function() { |
it("must delete the selected token and move focus to input", function() { |
// Mark green as active |
this.$wrapper.find('.token') |
.filter(':has(.token-label:contains(red))').addClass('active'); |
|
this.$copyHelper.simulate("key-sequence", { sequence: "{backspace}" }); |
this.$field.tokenfield('getTokens').length.must.equal(3); |
this.$field.tokenfield('getTokensList', null, null, true).must.equal(''); |
this.$input.is(document.activeElement).must.be.true(); |
}); |
}) |
}); |
|
describe("when multiple tokens are selected", function() { |
before(function() { |
TFT.template = '<input type="text" class="tokenize" value="red,green,blue,yellow,purple" />' |
}); |
|
after(function() { |
delete TFT.template; |
}); |
|
describe('and there are more tokens to the left of selected tokens', function() { |
it("must delete the selected tokens and move focus to the previous token of the leftmost selected token", function() { |
// Mark green and yellow as active |
this.$wrapper.find('.token') |
.filter(':has(.token-label:contains(green))').addClass('active'); |
this.$wrapper.find('.token') |
.filter(':has(.token-label:contains(yellow))').addClass('active'); |
|
this.$copyHelper.simulate("key-sequence", { sequence: "{backspace}" }); |
this.$field.tokenfield('getTokens').length.must.equal(3); |
this.$field.tokenfield('getTokensList', null, null, true).must.equal('red'); |
}); |
}); |
|
describe('and there are no more tokens to the left of selected tokens', function() { |
it("must delete the selected tokens and move focus input", function() { |
// Mark green and yellow as active |
this.$wrapper.find('.token') |
.filter(':has(.token-label:contains(red))').addClass('active'); |
this.$wrapper.find('.token') |
.filter(':has(.token-label:contains(purple))').addClass('active'); |
|
this.$copyHelper.simulate("key-sequence", { sequence: "{backspace}" }); |
this.$field.tokenfield('getTokens').length.must.equal(3); |
this.$field.tokenfield('getTokensList').must.equal('green, blue, yellow'); |
this.$input.is(document.activeElement).must.be.true(); |
}); |
}); |
}); |
|
describe("when focus is on input", function() { |
before(function() { |
TFT.template = '<input type="text" class="tokenize" value="red,green,blue" />' |
}); |
|
after(function() { |
delete TFT.template; |
}); |
|
it("must move focus to the last token", function() { |
this.$input.simulate("key-sequence", { sequence: "{backspace}" }); |
this.$field.tokenfield('getTokensList', null, null, true ).must.equal('blue'); |
}); |
}); |
}); |
|
describe("Pressing left arrow key", function() { |
describe("when no tokens are selected", function() { |
before(function() { |
TFT.template = '<input type="text" class="tokenize" value="red,green,blue" />' |
}); |
|
after(function() { |
delete TFT.template; |
}); |
|
it("must move focus to the last token", function() { |
this.$input.simulate("key-sequence", { sequence: "{leftarrow}" }); |
this.$field.tokenfield('getTokensList', null, null, true ).must.equal('blue'); |
}); |
}); |
|
describe("when a token is selected", function() { |
before(function() { |
TFT.template = '<input type="text" class="tokenize" value="red,green,blue" />' |
}); |
|
after(function() { |
delete TFT.template; |
}); |
|
it("must move focus to the previous token", function() { |
this.$wrapper.find('.token') |
.filter(':has(.token-label:contains(blue))').addClass('active'); |
|
this.$copyHelper.simulate("key-sequence", { sequence: "{leftarrow}" }); |
this.$field.tokenfield('getTokensList', null, null, true ).must.equal('green'); |
}); |
}); |
|
describe("when multiple tokens are selected", function() { |
before(function() { |
TFT.template = '<input type="text" class="tokenize" value="red,green,blue,yellow" />' |
}); |
|
after(function() { |
delete TFT.template; |
}); |
|
it("must move focus to the previous token of the leftmost selected token", function() { |
this.$wrapper.find('.token') |
.filter(':has(.token-label:contains(green))').addClass('active'); |
this.$wrapper.find('.token') |
.filter(':has(.token-label:contains(yellow))').addClass('active'); |
|
this.$copyHelper.simulate("key-sequence", { sequence: "{leftarrow}" }); |
this.$field.tokenfield('getTokensList', null, null, true ).must.equal('red'); |
}); |
}); |
|
describe("when the first token is selected", function() { |
before(function() { |
TFT.template = '<input type="text" class="tokenize" value="red,green,blue" />' |
}); |
|
after(function() { |
delete TFT.template; |
}); |
|
it("must keep the focus on the first token", function() { |
this.$wrapper.find('.token') |
.filter(':has(.token-label:contains(red))').addClass('active'); |
|
this.$copyHelper.simulate("key-sequence", { sequence: "{leftarrow}" }); |
this.$field.tokenfield('getTokensList', null, null, true ).must.equal('red'); |
}); |
}); |
|
describe("when no tokens are selected and direction is RTL", function() { |
before(function() { |
TFT.template = '<input type="text" class="tokenize" value="red,green,blue" style="direction:rtl" />' |
}); |
|
after(function() { |
delete TFT.template; |
}); |
|
it("must keep the focus on the input", function() { |
this.$input.simulate("key-sequence", { sequence: "{leftarrow}" }); |
this.$field.tokenfield('getTokensList', null, null, true ).must.equal(''); |
this.$input.is(document.activeElement).must.be.true(); |
}); |
}); |
}); |
|
describe("Pressing right arrow key", function() { |
describe("when no tokens are selected", function() { |
before(function() { |
TFT.template = '<input type="text" class="tokenize" value="red,green,blue" />' |
}); |
|
after(function() { |
delete TFT.template; |
}); |
|
it("must keep the focus on the input", function() { |
this.$input.simulate("key-sequence", { sequence: "{rightarrow}" }); |
this.$field.tokenfield('getTokensList', null, null, true ).must.equal(''); |
this.$input.is(document.activeElement).must.be.true(); |
}); |
}); |
|
describe("when a token is selected", function() { |
before(function() { |
TFT.template = '<input type="text" class="tokenize" value="red,green,blue" />' |
}); |
|
after(function() { |
delete TFT.template; |
}); |
|
it("must move focus to the next token", function() { |
this.$wrapper.find('.token') |
.filter(':has(.token-label:contains(red))').addClass('active'); |
|
this.$copyHelper.simulate("key-sequence", { sequence: "{rightarrow}" }); |
this.$field.tokenfield('getTokensList', null, null, true ).must.equal('green'); |
}); |
}); |
|
describe("when multiple tokens are selected", function() { |
before(function() { |
TFT.template = '<input type="text" class="tokenize" value="red,green,blue,yellow" />' |
}); |
|
after(function() { |
delete TFT.template; |
}); |
|
it("must move focus to the next token of the rightmost selected token", function() { |
this.$wrapper.find('.token') |
.filter(':has(.token-label:contains(red))').addClass('active'); |
this.$wrapper.find('.token') |
.filter(':has(.token-label:contains(blue))').addClass('active'); |
|
this.$copyHelper.simulate("key-sequence", { sequence: "{rightarrow}" }); |
this.$field.tokenfield('getTokensList', null, null, true ).must.equal('yellow'); |
}); |
}); |
|
describe("when the last token is selected", function() { |
before(function() { |
TFT.template = '<input type="text" class="tokenize" value="red,green,blue" />' |
}); |
|
after(function() { |
delete TFT.template; |
}); |
|
it("must move the focus to the input", function() { |
this.$wrapper.find('.token') |
.filter(':has(.token-label:contains(blue))').addClass('active'); |
|
this.$copyHelper.simulate("key-sequence", { sequence: "{rightarrow}" }); |
this.$field.tokenfield('getTokensList', null, null, true ).must.equal(''); |
this.$input.is(document.activeElement).must.be.true(); |
}); |
}); |
|
describe("when no tokens are selected and direction is RTL", function() { |
before(function() { |
TFT.template = '<input type="text" class="tokenize" value="red,green,blue" style="direction:rtl" />' |
}); |
|
after(function() { |
delete TFT.template; |
}); |
|
it("must move focus to the last token", function() { |
this.$input.simulate("key-sequence", { sequence: "{rightarrow}" }); |
this.$field.tokenfield('getTokensList', null, null, true ).must.equal('blue'); |
}); |
}); |
}); |
|
describe("Pressing Shift + left arrow key", function() { |
describe("when no tokens are selected", function() { |
before(function() { |
TFT.template = '<input type="text" class="tokenize" value="red,green,blue" />' |
}); |
|
after(function() { |
delete TFT.template; |
}); |
|
it("must move focus to the last token", function() { |
this.$input.focus().simulate("keydown", { keyCode: 37, charCode: 37, shiftKey: true }); |
this.$field.tokenfield('getTokensList', null, null, true ).must.equal('blue'); |
}); |
}); |
|
describe("when a token is selected", function() { |
before(function() { |
TFT.template = '<input type="text" class="tokenize" value="red,green,blue" />' |
}); |
|
after(function() { |
delete TFT.template; |
}); |
|
it("must activate the previous token in addition to the already active token", function() { |
this.$wrapper.find('.token') |
.filter(':has(.token-label:contains(blue))').addClass('active'); |
|
this.$copyHelper.focus() |
.simulate("keydown", { keyCode: 37, shiftKey: true }) |
.simulate("keydown", { keyCode: 37, shiftKey: true }); |
this.$field.tokenfield('getTokensList', null, null, true ).must.equal('red, green, blue'); |
}); |
}); |
|
describe("when multiple, non-adjacent tokens are selected", function() { |
before(function() { |
TFT.template = '<input type="text" class="tokenize" value="red,green,blue,yellow,purple" />' |
}); |
|
after(function() { |
delete TFT.template; |
}); |
|
it("must move select the previous token of the leftmost selected token in addition to the already selected tokens", function() { |
this.$wrapper.find('.token') |
.filter(':has(.token-label:contains(green))').addClass('active'); |
this.$wrapper.find('.token') |
.filter(':has(.token-label:contains(yellow))').addClass('active'); |
|
this.$copyHelper.focus().simulate("keydown", { keyCode: 37, shiftKey: true }); |
this.$field.tokenfield('getTokensList', null, null, true ).must.equal('red, green, yellow'); |
}); |
}); |
}); |
|
describe("Pressing Shift + right arrow key", function() { |
describe("when a token is selected", function() { |
before(function() { |
TFT.template = '<input type="text" class="tokenize" value="red,green,blue" />' |
}); |
|
after(function() { |
delete TFT.template; |
}); |
|
it("must activate the next token in addition to the already active token", function() { |
this.$wrapper.find('.token') |
.filter(':has(.token-label:contains(red))').addClass('active'); |
|
this.$copyHelper.focus() |
.simulate("keydown", { keyCode: 39, shiftKey: true }) |
.simulate("keydown", { keyCode: 39, shiftKey: true }); |
this.$field.tokenfield('getTokensList', null, null, true ).must.equal('red, green, blue'); |
}); |
}); |
|
describe("when multiple, non-adjacent tokens are selected", function() { |
before(function() { |
TFT.template = '<input type="text" class="tokenize" value="red,green,blue,yellow,purple" />' |
}); |
|
after(function() { |
delete TFT.template; |
}); |
|
it("must move select the next token of the rightmost selected token in addition to the already selected tokens", function() { |
this.$wrapper.find('.token') |
.filter(':has(.token-label:contains(green))').addClass('active'); |
this.$wrapper.find('.token') |
.filter(':has(.token-label:contains(yellow))').addClass('active'); |
|
this.$copyHelper.focus().simulate("keydown", { keyCode: 39, shiftKey: true }); |
this.$field.tokenfield('getTokensList', null, null, true ).must.equal('green, yellow, purple'); |
}); |
}); |
}); |
|
describe("Pressing Enter key", function() { |
describe("when a token is selected", function() { |
before(function() { |
TFT.template = '<input type="text" class="tokenize" value="red,green,blue" />' |
}); |
|
after(function() { |
delete TFT.template; |
}); |
|
it("must enter edit mode for the active token", function() { |
this.$wrapper.find('.token') |
.filter(':has(.token-label:contains(green))').addClass('active'); |
|
this.$copyHelper.simulate("key-sequence", { sequence: "{enter}" }); |
this.$input.data('edit').must.be.true(); |
this.$input.prev(':contains(red)').must.have.length(1); |
this.$input.next(':contains(blue)').must.have.length(1); |
}); |
}); |
|
describe("when a token is selected and allowEditing is false", function() { |
before(function() { |
TFT.template = '<input type="text" class="tokenize" value="red,green,blue" />'; |
TFT.options = { allowEditing: false } |
}); |
|
after(function() { |
delete TFT.template; |
delete TFT.options; |
}); |
|
it("must not enter edit mode for the active token [no data('edit') property]", function() { |
this.$wrapper.find('.token') |
.filter(':has(.token-label:contains(green))').addClass('active'); |
|
this.$copyHelper.simulate("key-sequence", { sequence: "{enter}" }); |
this.$input.data().must.not.have.property('edit'); |
}); |
}); |
|
describe("when input has text", function() { |
before(function() { |
TFT.template = '<input type="text" class="tokenize" value="red,green,blue" />' |
}); |
|
after(function() { |
delete TFT.template; |
}); |
|
it("must create a new token from the input", function() { |
|
this.$input.simulate("key-sequence", { sequence: "purple{enter}" }); |
this.$field.tokenfield('getTokens').must.have.length(4); |
}); |
}); |
}); |
|
describe("Pressing Tab key", function() { |
describe("when input has text", function() { |
before(function() { |
TFT.template = '<input type="text" class="tokenize" value="red,green,blue" />' |
}); |
|
after(function() { |
delete TFT.template; |
}); |
|
it("must create a new token from the input", function() { |
|
this.$input.focus().simulate("key-sequence", { sequence: "purple" }); |
this.$input.simulate("keydown", { keyCode: 9 }); |
this.$field.tokenfield('getTokens').must.have.length(4); |
}); |
}); |
}); |
}); |
|
describe("Mouse interaction", function() { |
|
describe("Clicking on a token", function() { |
before(function() { |
TFT.template = '<input type="text" class="tokenize" value="red,green,blue" />' |
}); |
|
after(function() { |
delete TFT.template; |
}); |
|
it("must select the token and deactivate any other active tokens", function() { |
this.$wrapper.find('.token') |
.filter(':has(.token-label:contains(green))').addClass('active'); |
|
this.$wrapper.find('.token:contains(red)').click(); |
this.$field.tokenfield('getTokensList', null, null, true ).must.equal('red'); |
}); |
}); |
|
describe("Clicking on a token's remove icon", function() { |
before(function() { |
TFT.template = '<input type="text" class="tokenize" value="red,green,blue" />' |
}); |
|
after(function() { |
delete TFT.template; |
}); |
|
it("must remove the token", function() { |
this.$wrapper.find('.token:contains(red)').find('.close').click(); |
this.$field.tokenfield('getTokensList' ).must.equal('green, blue'); |
}); |
}); |
|
describe("Double-clicking on a token", function() { |
before(function() { |
TFT.template = '<input type="text" class="tokenize" value="red,green,blue" />' |
}); |
|
after(function() { |
delete TFT.template; |
}); |
|
it("must enter the edit mode of the token", function() { |
this.$wrapper.find('.token') |
.filter(':has(.token-label:contains(green))').addClass('active'); |
|
this.$wrapper.find('.token:contains(red)').dblclick(); |
this.$input.data('edit').must.be.true(); |
this.$input.next(':contains(green)').must.have.length(1); |
}); |
}); |
|
describe("must not enter the edit mode of the token when allowEditing false", function() { |
before(function() { |
TFT.template = '<input type="text" class="tokenize" value="red,green,blue" />'; |
TFT.options = { allowEditing: false } |
}); |
|
after(function() { |
delete TFT.template; |
delete TFT.options; |
}); |
|
it("must not enter the edit mode of the token", function() { |
this.$wrapper.find('.token:contains(red)').dblclick(); |
this.$input.data().must.not.have.property('edit'); |
}); |
}); |
|
describe("Ctrl-clicking on a token when another token is selected", function() { |
before(function() { |
TFT.template = '<input type="text" class="tokenize" value="red,green,blue" />' |
}); |
|
after(function() { |
delete TFT.template; |
}); |
|
it("must activate the token in addition to the already active token", function() { |
this.$wrapper.find('.token') |
.filter(':has(.token-label:contains(green))').addClass('active'); |
|
this.$wrapper.find('.token:contains(red)').simulate('click', { ctrlKey: true }); |
this.$field.tokenfield('getTokensList', null, null, true ).must.equal('red, green'); |
}); |
}); |
|
describe("Shift-clicking on a token when another token is selected", function() { |
before(function() { |
TFT.template = '<input type="text" class="tokenize" value="red,green,blue" />' |
}); |
|
after(function() { |
delete TFT.template; |
}); |
|
it("must activate the token and all the tokens between the already active token", function() { |
this.$wrapper.find('.token:contains(blue)').simulate('click'); |
this.$wrapper.find('.token:contains(red)').simulate('click', { shiftKey: true }); |
this.$field.tokenfield('getTokensList', null, null, true ).must.equal('red, green, blue'); |
}); |
}); |
|
describe("Pressing enter when there is no input", function() { |
var submitted = false; |
|
before(function() { |
TFT.template = '<form method="post" action=""><input type="text" class="tokenize" value="red,green,blue" /><input type="submit"></form>'; |
}); |
|
after(function() { |
delete TFT.template; |
}); |
|
beforeEach(function() { |
this.$sandbox.find('form').on('submit', function(e) { |
submitted = true; |
e.preventDefault(); |
return false; |
}); |
// key-sequence does not trigger submit event on the form when pressing enter |
// so we need to trigger it manually. Not really a solid test-case, but oh well |
// https://github.com/j-ulrich/jquery-simulate-ext/pull/14 |
this.$input.focus().simulate("key-sequence", { sequence: "{enter}" }).trigger('submit'); |
}); |
|
it("must submit the underlying form", function() { |
submitted.must.equal(true); |
}); |
}); |
}); |
|
describe("Events", function() { |
|
describe("tokenfield:initialize", function() { |
it("must must be triggered when tokenfield is created", function (done) { |
$('<input type="text" />') |
.on('tokenfield:initialize', function() { |
done(); |
}) |
.tokenfield(); |
}); |
}); |
|
describe("tokenfield:createtoken", function() { |
it("must allow changing token label and value", function() { |
this.$field.on('tokenfield:createtoken', function (e) { |
e.attrs.value = 'one'; |
e.attrs.label = 'two'; |
}); |
this.$field.tokenfield('createToken', 'zero'); |
|
var results = this.$field.tokenfield('getTokens'); |
results[0].label.must.equal('two'); |
results[0].value.must.equal('one'); |
}); |
|
it("must allow setting token value to an empty string", function() { |
this.$field.on('tokenfield:createtoken', function (e) { |
e.attrs.value = ''; |
}); |
this.$field.tokenfield('createToken', 'zero'); |
|
var results = this.$field.tokenfield('getTokens'); |
results[0].label.must.equal('zero'); |
results[0].value.must.equal(''); |
}); |
|
it("must allow canceling createtoken by setting token to a falsy value", function() { |
this.$field.on('tokenfield:createtoken', function (e) { |
e.attrs = false; |
}); |
this.$field.tokenfield('createToken', 'yellow'); |
|
var results = this.$field.tokenfield('getTokens'); |
results.must.have.length(0); |
}); |
|
it("must allow canceling createtoken by calling event.preventDefault()", function() { |
this.$field.on('tokenfield:createtoken', function (e) { |
e.preventDefault(); |
}); |
this.$field.tokenfield('createToken', 'yellow'); |
|
var results = this.$field.tokenfield('getTokens'); |
results.must.have.length(0); |
}); |
|
it("must allow canceling createtoken by returning false in the event handler", function() { |
this.$field.on('tokenfield:createtoken', function (e) { |
return false; |
}); |
this.$field.tokenfield('createToken', 'yellow'); |
|
var results = this.$field.tokenfield('getTokens'); |
results.must.have.length(0); |
}); |
}); |
|
describe("tokenfield:createdtoken", function() { |
it("must be triggered when a token is created and in the DOM", function (done) { |
var self = this; |
|
this.$field.on('tokenfield:createdtoken', function (e) { |
e.attrs.must.be.an.object(); |
e.attrs.label.must.eql('red'); |
e.attrs.value.must.eql('red'); |
e.relatedTarget.must.be.an.object(); |
|
self.$wrapper.find(e.relatedTarget).must.have.length(1); |
|
done(); |
}); |
|
this.$field.tokenfield('createToken', 'red'); |
}); |
}); |
|
describe("tokenfield:edittoken", function() { |
before(function() { |
TFT.template = '<input type="text" class="tokenize" value="red,green,blue" />' |
}); |
|
after(function() { |
delete TFT.template; |
}); |
|
it("must be triggered when a token is edited", function (done) { |
this.$field.on('tokenfield:edittoken', function (e) { |
e.attrs.must.be.an.object(); |
e.attrs.label.must.eql('red'); |
e.attrs.value.must.eql('red'); |
e.relatedTarget.must.be.an.object(); |
done(); |
}); |
|
this.$wrapper.find('.token') |
.filter(':has(.token-label:contains(red))').addClass('active'); |
|
this.$copyHelper.simulate("key-sequence", { sequence: "{enter}" }); |
}); |
|
it("must allow canceling the default event handler by calling event.preventDefault()", function() { |
this.$field.on('tokenfield:edittoken', function (e) { |
e.preventDefault(); |
}); |
|
this.$wrapper.find('.token') |
.filter(':has(.token-label:contains(red))').addClass('active'); |
|
this.$copyHelper.simulate("key-sequence", { sequence: "{enter}" }); |
|
this.$input.data().must.not.have.property('edit'); |
}); |
|
it("must allow canceling the default event handler by returning false in the event handler", function() { |
this.$field.on('tokenfield:edittoken', function (e) { |
return false; |
}); |
|
this.$wrapper.find('.token') |
.filter(':has(.token-label:contains(red))').addClass('active'); |
|
this.$copyHelper.simulate("key-sequence", { sequence: "{enter}" }); |
|
this.$input.data().must.not.have.property('edit'); |
}); |
}); |
|
describe("tokenfield:editedtoken", function() { |
before(function() { |
TFT.template = '<input type="text" class="tokenize" value="red,green,blue" />' |
}); |
|
after(function() { |
delete TFT.template; |
}); |
|
it("must be triggered when a token is now being edited (replaced with an input in the DOM)", function (done) { |
var self = this; |
|
this.$field.on('tokenfield:editedtoken', function (e) { |
e.attrs.must.be.an.object(); |
e.attrs.label.must.eql('red'); |
e.attrs.value.must.eql('red'); |
e.relatedTarget.must.be.an.object(); |
|
self.$wrapper.find(e.relatedTarget).must.have.length(0); |
|
done(); |
}); |
|
this.$wrapper.find('.token') |
.filter(':has(.token-label:contains(red))').addClass('active'); |
|
this.$copyHelper.simulate("key-sequence", { sequence: "{enter}" }); |
}); |
}); |
|
describe("tokenfield:removetoken", function() { |
before(function() { |
TFT.template = '<input type="text" class="tokenize" value="red,green,blue" />' |
}); |
|
after(function() { |
delete TFT.template; |
}); |
|
it("must be triggered when a token is about to be removed", function (done) { |
this.$field.on('tokenfield:removetoken', function (e) { |
e.attrs.must.be.an.object(); |
e.attrs.label.must.eql('red'); |
e.attrs.value.must.eql('red'); |
done(); |
}); |
|
this.$wrapper.find('.token:first').find('.close').click(); |
}); |
|
it("must allow canceling the default event handler by calling event.preventDefault()", function() { |
this.$field.on('tokenfield:removetoken', function (e) { |
e.preventDefault(); |
}); |
|
this.$wrapper.find('.token:first').find('.close').click(); |
|
this.$field.tokenfield('getTokens').must.have.length(3); |
}); |
|
it("must allow canceling the default event handler by returning false in the event handler", function() { |
this.$field.on('tokenfield:removetoken', function (e) { |
return false; |
}); |
|
this.$wrapper.find('.token:first').find('.close').click(); |
|
this.$field.tokenfield('getTokens').must.have.length(3); |
}); |
}); |
|
describe("tokenfield:removedtoken", function() { |
before(function() { |
TFT.template = '<input type="text" class="tokenize" value="red,green,blue" />' |
}); |
|
after(function() { |
delete TFT.template; |
}); |
|
it("must be triggered when a token is removed from the DOM", function (done) { |
var self = this; |
|
this.$field.on('tokenfield:removedtoken', function (e) { |
e.attrs.must.be.an.object(); |
e.attrs.label.must.eql('red'); |
e.attrs.value.must.eql('red'); |
|
self.$wrapper.find(e.relatedTarget).length.must.equal(0); |
|
done(); |
}); |
|
this.$wrapper.find('.token:first').find('.close').click(); |
}); |
}); |
|
}); |
|
}); |