scratch – Blame information for rev 134

Subversion Repositories:
Rev:
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 });