scratch – Blame information for rev 134
?pathlinks?
Rev | Author | Line No. | Line |
---|---|---|---|
134 | office | 1 | describe('1. Unit tests:', function() { |
2 | |||
3 | describe('initializing tokenfield', function() { |
||
4 | describe('with an empty input', function() { |
||
5 | |||
6 | it('must wrap the original input with the wrapper element', function() { |
||
7 | this.$field.parents('.tokenfield').hasClass('form-control').must.be.true(); |
||
8 | }); |
||
9 | |||
10 | it('must create a new input element for token input', function() { |
||
11 | this.$field.parents('.tokenfield').find('.token-input').length.must.equal(1); |
||
12 | }); |
||
13 | |||
14 | it('must move the original input out of the way', function() { |
||
15 | this.$field.css('position').must.equal('absolute'); |
||
16 | this.$field.css('left').must.equal('-10000px'); |
||
17 | }); |
||
18 | |||
19 | it('must not create any tokens', function() { |
||
20 | this.$wrapper.find('.token').length.must.equal(0); |
||
21 | }); |
||
22 | |||
23 | }); |
||
24 | |||
25 | describe('with an input with comma-separated values', function() { |
||
26 | |||
27 | before(function() { |
||
28 | TFT.template = '<input type="text" class="tokenize" value="red,green, blue" />'; |
||
29 | }); |
||
30 | |||
31 | after(function() { |
||
32 | TFT.template = null; |
||
33 | }); |
||
34 | |||
35 | it('must create tokens for each comma-separated value', function() { |
||
36 | this.$wrapper.find('.token').length.must.equal(3); |
||
37 | }); |
||
38 | |||
39 | }); |
||
40 | |||
41 | describe('with an input with data-tokens values', function() { |
||
42 | |||
43 | before(function() { |
||
44 | TFT.template = '<input type="text" class="tokenize" data-tokens="red, green, blue" />'; |
||
45 | }); |
||
46 | |||
47 | after(function() { |
||
48 | TFT.template = null; |
||
49 | }); |
||
50 | |||
51 | it('must create tokens for each comma-separated token', function() { |
||
52 | this.$wrapper.find('.token').length.must.equal(3); |
||
53 | }); |
||
54 | |||
55 | }); |
||
56 | |||
57 | describe('with RTL', function() { |
||
58 | before(function() { |
||
59 | TFT.template = '<input type="text" class="tokenize" style="direction:rtl" value="red,green, blue" />'; |
||
60 | }); |
||
61 | |||
62 | after(function() { |
||
63 | TFT.template = null; |
||
64 | }); |
||
65 | |||
66 | it('must set rtl class on tokenfield', function() { |
||
67 | this.$wrapper.hasClass('rtl').must.equal(true); |
||
68 | }); |
||
69 | }) |
||
70 | |||
71 | }); |
||
72 | |||
73 | describe('destroying tokenfield', function() { |
||
74 | before(function() { |
||
75 | 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>'; |
||
76 | }); |
||
77 | |||
78 | after(function() { |
||
79 | TFT.template = null; |
||
80 | }); |
||
81 | |||
82 | it('must reset the original input to previous state', function() { |
||
83 | var $field = this.$field.tokenfield('destroy'); |
||
84 | $field.must.be.an.object(); |
||
85 | $field.data().must.not.have.property('bs.tokenfield'); |
||
86 | $field.parent().prop('id').must.equal('destroy-test-container'); |
||
87 | $field.val().must.equal('red, green, blue'); |
||
88 | }); |
||
89 | }); |
||
90 | |||
91 | describe('Tokenfield public methods', function() { |
||
92 | |||
93 | describe('.createToken()', function() { |
||
94 | |||
95 | describe('using an empty input', function() { |
||
96 | |||
97 | beforeEach(function() { |
||
98 | this.$field.tokenfield('createToken', 'awesome'); |
||
99 | }); |
||
100 | |||
101 | it('must create a new token', function() { |
||
102 | this.$wrapper.find('.token').must.have.length(1); |
||
103 | }); |
||
104 | |||
105 | it('add the new token value to original input', function() { |
||
106 | this.$field.val().must.equal('awesome'); |
||
107 | }); |
||
108 | |||
109 | }); |
||
110 | |||
111 | describe('using a non-empty input', function() { |
||
112 | |||
113 | before(function() { |
||
114 | TFT.template = '<input type="text" class="tokenize" value="red,green, blue" />'; |
||
115 | }); |
||
116 | |||
117 | beforeEach(function() { |
||
118 | this.$field.tokenfield('createToken', 'awesome'); |
||
119 | }); |
||
120 | |||
121 | after(function() { |
||
122 | TFT.template = null; |
||
123 | }); |
||
124 | |||
125 | it('must append a new token to the end of existing tokens', function() { |
||
126 | this.$field.val().must.equal('red, green, blue, awesome'); |
||
127 | }); |
||
128 | |||
129 | }); |
||
130 | |||
131 | describe('given an object', function() { |
||
132 | |||
133 | beforeEach(function() { |
||
134 | this.$field.tokenfield('createToken', { value: 'purple', label: 'Violet' }); |
||
135 | }); |
||
136 | |||
137 | it('must create a new token', function() { |
||
138 | this.$wrapper.find('.token').must.have.length(1); |
||
139 | }); |
||
140 | |||
141 | it('add the new token value to original input', function() { |
||
142 | this.$field.val().must.equal('purple'); |
||
143 | }); |
||
144 | |||
145 | }); |
||
146 | |||
147 | }); |
||
148 | |||
149 | describe('.getTokens()', function() { |
||
150 | |||
151 | describe('given no arguments', function() { |
||
152 | before(function() { |
||
153 | TFT.template = '<input type="text" class="tokenize" value="red,green, blue" />'; |
||
154 | }); |
||
155 | |||
156 | after(function() { |
||
157 | TFT.template = null; |
||
158 | }); |
||
159 | |||
160 | it('must return an array of token key-value pairs', function() { |
||
161 | var tokens = this.$field.tokenfield('getTokens'); |
||
162 | tokens.must.be.an.array(); |
||
163 | tokens.must.have.length(3); |
||
164 | tokens[0].must.have.keys(['label', 'value']); |
||
165 | tokens[0].label.must.equal('red'); |
||
166 | tokens[0].value.must.equal('red'); |
||
167 | }); |
||
168 | }); |
||
169 | |||
170 | describe('given arguments active = true', function() { |
||
171 | before(function() { |
||
172 | TFT.template = '<input type="text" class="tokenize" value="red,green,blue" />'; |
||
173 | }); |
||
174 | |||
175 | after(function() { |
||
176 | TFT.template = null; |
||
177 | }); |
||
178 | |||
179 | it('must return an array of only active token key-value pairs', function() { |
||
180 | // Mark green as active |
||
181 | this.$wrapper.find('.token') |
||
182 | .filter(':has(.token-label:contains(green))').addClass('active'); |
||
183 | |||
184 | var tokens = this.$field.tokenfield('getTokens', true); |
||
185 | tokens.must.be.an.array(); |
||
186 | tokens.must.have.length(1); |
||
187 | tokens[0].must.have.keys(['label', 'value']); |
||
188 | tokens[0].label.must.equal('green'); |
||
189 | tokens[0].value.must.equal('green'); |
||
190 | }); |
||
191 | }); |
||
192 | |||
193 | |||
194 | }); |
||
195 | |||
196 | describe('getTokensList()', function() { |
||
197 | |||
198 | describe('given no arguments', function() { |
||
199 | before(function() { |
||
200 | TFT.template = '<input type="text" class="tokenize" value="red,green, blue" />'; |
||
201 | }); |
||
202 | |||
203 | after(function() { |
||
204 | TFT.template = null; |
||
205 | }); |
||
206 | |||
207 | it('must return a string with comma-separated token values', function() { |
||
208 | var tokens = this.$field.tokenfield('getTokensList'); |
||
209 | tokens.must.be.a.string(); |
||
210 | tokens.must.equal('red, green, blue'); |
||
211 | }); |
||
212 | }); |
||
213 | |||
214 | describe('given an alternative delimiter', function() { |
||
215 | before(function() { |
||
216 | TFT.template = '<input type="text" class="tokenize" value="red,green,blue" />'; |
||
217 | }); |
||
218 | |||
219 | after(function() { |
||
220 | TFT.template = null; |
||
221 | }); |
||
222 | |||
223 | it('must return a string with semicolon-separated token values', function() { |
||
224 | var tokens = this.$field.tokenfield('getTokensList', ';', false); |
||
225 | tokens.must.be.a.string(); |
||
226 | tokens.must.equal('red;green;blue'); |
||
227 | }); |
||
228 | }); |
||
229 | |||
230 | describe('given an alternative delimiter and active = true', function() { |
||
231 | before(function() { |
||
232 | TFT.template = '<input type="text" class="tokenize" value="red,green,blue,yellow" />'; |
||
233 | }); |
||
234 | |||
235 | after(function() { |
||
236 | TFT.template = null; |
||
237 | }); |
||
238 | |||
239 | it('must return a string with semicolon-separated token values', function() { |
||
240 | // Mark green and yellow as active |
||
241 | this.$wrapper.find('.token') |
||
242 | .filter(':has(.token-label:contains(green))').addClass('active'); |
||
243 | this.$wrapper.find('.token') |
||
244 | .filter(':has(.token-label:contains(yellow))').addClass('active'); |
||
245 | |||
246 | var tokens = this.$field.tokenfield('getTokensList', ';', false, true); |
||
247 | tokens.must.be.a.string(); |
||
248 | tokens.must.equal('green;yellow'); |
||
249 | }); |
||
250 | }); |
||
251 | |||
252 | |||
253 | }); |
||
254 | |||
255 | describe('setTokens()', function() { |
||
256 | |||
257 | describe('using comma-separated string', function() { |
||
258 | |||
259 | before(function() { |
||
260 | TFT.template = '<input type="text" class="tokenize" value="red,green, blue" />'; |
||
261 | }); |
||
262 | |||
263 | beforeEach(function(){ |
||
264 | this.$field.tokenfield('setTokens', 'black,yellow,white'); |
||
265 | }); |
||
266 | |||
267 | after(function() { |
||
268 | TFT.template = null; |
||
269 | }); |
||
270 | |||
271 | it('must replace any existing tokens with new ones', function() { |
||
272 | var tokens = this.$field.tokenfield('getTokens') |
||
273 | , tokensList = this.$field.tokenfield('getTokensList'); |
||
274 | |||
275 | tokens.must.have.length(3); |
||
276 | tokens[0].must.have.keys(['label', 'value']); |
||
277 | tokens[0].label.must.equal('black'); |
||
278 | tokens[0].value.must.equal('black'); |
||
279 | |||
280 | tokensList.must.not.contain('red'); |
||
281 | |||
282 | }); |
||
283 | |||
284 | it('must set the original input value to comma-separated list of token values', function() { |
||
285 | this.$field.val().must.equal('black, yellow, white'); |
||
286 | }); |
||
287 | |||
288 | }); |
||
289 | |||
290 | describe('using an array of string values', function() { |
||
291 | |||
292 | before(function() { |
||
293 | TFT.template = '<input type="text" class="tokenize" value="red,green, blue" />'; |
||
294 | }); |
||
295 | |||
296 | beforeEach(function(){ |
||
297 | this.$field.tokenfield('setTokens', 'black,yellow,white'); |
||
298 | }); |
||
299 | |||
300 | after(function() { |
||
301 | TFT.template = null; |
||
302 | }); |
||
303 | |||
304 | it('must replace any existing tokens with new ones', function() { |
||
305 | var tokens = this.$field.tokenfield('getTokens') |
||
306 | , tokensList = this.$field.tokenfield('getTokensList'); |
||
307 | |||
308 | tokens.must.have.length(3); |
||
309 | tokens[0].must.have.keys(['label', 'value']); |
||
310 | tokens[0].label.must.equal('black'); |
||
311 | tokens[0].value.must.equal('black'); |
||
312 | |||
313 | tokensList.must.not.contain('red'); |
||
314 | |||
315 | }); |
||
316 | |||
317 | it('must set the original input value to comma-separated list of token values', function() { |
||
318 | this.$field.val().must.equal('black, yellow, white'); |
||
319 | }); |
||
320 | |||
321 | }); |
||
322 | |||
323 | describe('using an array of token objects', function() { |
||
324 | |||
325 | before(function() { |
||
326 | TFT.template = '<input type="text" class="tokenize" value="red,green, blue" />'; |
||
327 | }); |
||
328 | |||
329 | beforeEach(function(){ |
||
330 | this.$field.tokenfield('setTokens', [{ value: "black", label: "Schwarz" }, { value: "yellow", label: "Gelb" }]); |
||
331 | }); |
||
332 | |||
333 | after(function() { |
||
334 | TFT.template = null; |
||
335 | }); |
||
336 | |||
337 | it('must replace any existing tokens with new ones', function() { |
||
338 | this.$field.tokenfield('setTokens', [{ value: "black", label: "Schwarz" }, { value: "yellow", label: "Gelb" }]); |
||
339 | |||
340 | var tokens = this.$field.tokenfield('getTokens') |
||
341 | , tokensList = this.$field.tokenfield('getTokensList'); |
||
342 | |||
343 | tokens.must.have.length(2); |
||
344 | tokens[0].must.have.keys(['label', 'value']); |
||
345 | tokens[0].label.must.equal('Schwarz'); |
||
346 | tokens[0].value.must.equal('black'); |
||
347 | |||
348 | tokensList.must.not.contain('red'); |
||
349 | |||
350 | }); |
||
351 | |||
352 | it('must set the original input value to comma-separated list of token values', function() { |
||
353 | this.$field.val().must.equal('black, yellow'); |
||
354 | }); |
||
355 | |||
356 | }); |
||
357 | |||
358 | }); |
||
359 | |||
360 | describe('disable()', function() { |
||
361 | |||
362 | beforeEach(function() { |
||
363 | this.$field.tokenfield('disable'); |
||
364 | }); |
||
365 | |||
366 | it('must disable both original and token input', function() { |
||
367 | this.$field.prop('disabled').must.be.true(); |
||
368 | this.$input.prop('disabled').must.be.true(); |
||
369 | }); |
||
370 | |||
371 | it('must add "disabled" class to tokenfield', function() { |
||
372 | this.$wrapper.hasClass('disabled').must.be.true(); |
||
373 | }); |
||
374 | |||
375 | }); |
||
376 | |||
377 | describe('enable()', function() { |
||
378 | |||
379 | beforeEach(function() { |
||
380 | this.$field.tokenfield('disable'); |
||
381 | this.$field.tokenfield('enable'); |
||
382 | }); |
||
383 | |||
384 | it('must enable both original and token input', function() { |
||
385 | this.$field.prop('disabled').must.be.false(); |
||
386 | this.$input.prop('disabled').must.be.false(); |
||
387 | }); |
||
388 | |||
389 | it('must remove "disabled" class from tokenfield', function() { |
||
390 | this.$wrapper.hasClass('disabled').must.be.false(); |
||
391 | }); |
||
392 | |||
393 | }); |
||
394 | |||
395 | describe('readonly()', function() { |
||
396 | |||
397 | beforeEach(function() { |
||
398 | this.$field.tokenfield('readonly'); |
||
399 | }); |
||
400 | |||
401 | it('must make both original and token input readonly', function() { |
||
402 | this.$field.prop('readonly').must.be.true(); |
||
403 | this.$input.prop('readonly').must.be.true(); |
||
404 | }); |
||
405 | |||
406 | it('must add "readonly" class to tokenfield', function() { |
||
407 | this.$wrapper.hasClass('readonly').must.be.true(); |
||
408 | }); |
||
409 | |||
410 | }); |
||
411 | |||
412 | describe('writeable()', function() { |
||
413 | |||
414 | beforeEach(function() { |
||
415 | this.$field.tokenfield('readonly'); |
||
416 | this.$field.tokenfield('writeable'); |
||
417 | }); |
||
418 | |||
419 | it('must make both original and token input writeable', function() { |
||
420 | this.$field.prop('readonly').must.be.false(); |
||
421 | this.$input.prop('readonly').must.be.false(); |
||
422 | }); |
||
423 | |||
424 | it('must remove "readonly" class from tokenfield', function() { |
||
425 | this.$wrapper.hasClass('readonly').must.be.false(); |
||
426 | }); |
||
427 | |||
428 | }); |
||
429 | }); |
||
430 | |||
431 | }); |