1 |
|
2 | var expect = require('chai').expect,
|
3 | formist = require('../'),
|
4 | Tag = require('../lib/tag');
|
5 |
|
6 | describe('formist', function () {
|
7 |
|
8 | describe('has a tag class, which', function () {
|
9 |
|
10 | it('should render a simple opening and closing tag', function () {
|
11 |
|
12 | var tag = new Tag('form');
|
13 | expect(tag.render()).to.equal('<form></form>');
|
14 |
|
15 | });
|
16 |
|
17 | it('should render a simple self closing tag', function () {
|
18 |
|
19 | var tag = new Tag('hr');
|
20 | expect(tag.render()).to.equal('<hr />');
|
21 |
|
22 | });
|
23 |
|
24 | it('should render tag attributes', function () {
|
25 |
|
26 | var tag = new Tag('form', {
|
27 | action: '/save',
|
28 | method: 'post'
|
29 | });
|
30 | expect(tag.render()).to.equal('<form action="/save" method="post"></form>');
|
31 |
|
32 | });
|
33 |
|
34 | it('should render tag attributes in order', function () {
|
35 |
|
36 | var tag = new Tag('form', {
|
37 | method: 'post',
|
38 | action: '/save'
|
39 | });
|
40 | expect(tag.render()).to.equal('<form method="post" action="/save"></form>');
|
41 |
|
42 | });
|
43 |
|
44 | it('should render \'data-\' attributes', function () {
|
45 |
|
46 | var tag = new Tag('form', {
|
47 | method: 'post',
|
48 | action: '/save',
|
49 | 'data-validation': 'true'
|
50 | });
|
51 | expect(tag.render()).to.equal('<form method="post" action="/save" data-validation="true"></form>');
|
52 |
|
53 | });
|
54 |
|
55 | it('should render non-value attributes', function () {
|
56 |
|
57 | var tag = new Tag('input', {
|
58 | type: 'text',
|
59 | disabled: true
|
60 | });
|
61 | expect(tag.render()).to.equal('<input type="text" disabled />');
|
62 |
|
63 | });
|
64 |
|
65 | it('should render style attributes', function () {
|
66 |
|
67 | var tag = new Tag('input', {
|
68 | type: 'text',
|
69 | disabled: true,
|
70 | style: 'text-decoration: underline;'
|
71 | });
|
72 | expect(tag.render()).to.equal('<input type="text" disabled style="text-decoration: underline;" />');
|
73 |
|
74 | });
|
75 |
|
76 | it('should render content within a tag', function () {
|
77 |
|
78 | var tag = new Tag('form', {}, '{{content}}');
|
79 | expect(tag.render()).to.equal('<form>{{content}}</form>');
|
80 |
|
81 | });
|
82 |
|
83 | });
|
84 |
|
85 | describe('should render', function () {
|
86 |
|
87 | it('synchronously', function () {
|
88 |
|
89 | var form = new formist.Form();
|
90 |
|
91 | expect(form.render()).to.equal('<form></form>');
|
92 |
|
93 | });
|
94 |
|
95 | it('asynchronously', function (done) {
|
96 |
|
97 | var form = new formist.Form();
|
98 |
|
99 | form.render(function (html) {
|
100 | expect(html).to.equal('<form></form>');
|
101 | return done()
|
102 | });
|
103 |
|
104 | });
|
105 |
|
106 | it('an empty form', function () {
|
107 |
|
108 | var form = new formist.Form({
|
109 | attributes: {
|
110 | action: '/save',
|
111 | method: 'post'
|
112 | }
|
113 | });
|
114 |
|
115 | expect(form.render()).to.equal('<form action="/save" method="post"></form>');
|
116 |
|
117 | });
|
118 |
|
119 | it('without form tags', function () {
|
120 |
|
121 | var form = new formist.Form({
|
122 | renderTag: false,
|
123 | attributes: {
|
124 | action: '/save',
|
125 | method: 'post'
|
126 | }
|
127 | });
|
128 |
|
129 | form.add(new formist.Field('input', {
|
130 | attributes: {
|
131 | type: 'text'
|
132 | }
|
133 | }));
|
134 |
|
135 | form.add(new formist.Field('input', {
|
136 | attributes: {
|
137 | type: 'text'
|
138 | }
|
139 | }));
|
140 |
|
141 | expect(form.render()).to.equal('<div class="field"><input type="text" /></div><div class="field"><input type="text" /></div>');
|
142 |
|
143 | });
|
144 |
|
145 | it('a form with only fields', function () {
|
146 |
|
147 | var form = new formist.Form();
|
148 |
|
149 | form.add(new formist.Field('input', {
|
150 | attributes: {
|
151 | type: 'text'
|
152 | }
|
153 | }));
|
154 |
|
155 | form.add(new formist.Field('input', {
|
156 | attributes: {
|
157 | type: 'email'
|
158 | }
|
159 | }));
|
160 |
|
161 | form.add(new formist.Field('select'));
|
162 |
|
163 | expect(form.render()).to.equal('<form><div class="field"><input type="text" /></div><div class="field"><input type="email" /></div><div class="field"><select></select></div></form>');
|
164 |
|
165 | })
|
166 |
|
167 | describe('fieldsets', function () {
|
168 |
|
169 | it('with a default legend', function () {
|
170 |
|
171 | var form = new formist.Form({
|
172 | attributes: {
|
173 | action: '/save',
|
174 | method: 'post'
|
175 | }
|
176 | });
|
177 |
|
178 | form.add(new formist.Fieldset({
|
179 | legend: 'Personal information',
|
180 | attributes: {
|
181 | 'class': 'personalInformation'
|
182 | }
|
183 | }));
|
184 |
|
185 | expect(form.render()).to.equal('<form action="/save" method="post"><fieldset class="personalInformation"><legend>Personal information</legend></fieldset></form>');
|
186 |
|
187 | });
|
188 |
|
189 | it('with a customised legend', function () {
|
190 |
|
191 | var form = new formist.Form({
|
192 | attributes: {
|
193 | action: '/save',
|
194 | method: 'post'
|
195 | }
|
196 | });
|
197 |
|
198 | form.add(new formist.Fieldset({
|
199 | legend: {
|
200 | label: 'Personal information',
|
201 | attributes: {
|
202 | 'class': 'personal'
|
203 | }
|
204 | },
|
205 | attributes: {
|
206 | 'class': 'personalInformation'
|
207 | }
|
208 | }));
|
209 |
|
210 | expect(form.render()).to.equal('<form action="/save" method="post"><fieldset class="personalInformation"><legend class="personal">Personal information</legend></fieldset></form>');
|
211 |
|
212 | });
|
213 |
|
214 | describe("with help text", function () {
|
215 |
|
216 | it("without attributes", function () {
|
217 |
|
218 | var form = new formist.Form();
|
219 |
|
220 | form.add(new formist.Fieldgroup({
|
221 | label: 'A group of fields',
|
222 | helpText: 'Help text for the group of fields.'
|
223 | }, [
|
224 |
|
225 | new formist.Field('input')
|
226 |
|
227 | ]));
|
228 |
|
229 | expect(form.render()).to.equal('<form><div class="field"><label>A group of fields</label><div class="fields"><input type="text" /></div><small class="help-text">Help text for the group of fields.</small></div></form>');
|
230 |
|
231 | });
|
232 |
|
233 | it("with attributes", function () {
|
234 |
|
235 | var form = new formist.Form();
|
236 |
|
237 | form.add(new formist.Fieldgroup({
|
238 | label: 'A group of fields',
|
239 | helpText: {
|
240 | text: 'Help text for the group of fields.',
|
241 | attributes: {
|
242 | 'class': 'help'
|
243 | }
|
244 | }
|
245 | }, [
|
246 |
|
247 | new formist.Field('input')
|
248 |
|
249 | ]));
|
250 |
|
251 | expect(form.render()).to.equal('<form><div class="field"><label>A group of fields</label><div class="fields"><input type="text" /></div><small class="help">Help text for the group of fields.</small></div></form>');
|
252 |
|
253 | });
|
254 |
|
255 | it("with an alternative tag", function () {
|
256 |
|
257 | var form = new formist.Form();
|
258 |
|
259 | form.add(new formist.Fieldgroup({
|
260 | label: 'A group of fields',
|
261 | helpText: {
|
262 | text: 'Help text for the group of fields.',
|
263 | tag: 'p'
|
264 | }
|
265 | }, [
|
266 |
|
267 | new formist.Field('input')
|
268 |
|
269 | ]));
|
270 |
|
271 | expect(form.render()).to.equal('<form><div class="field"><label>A group of fields</label><div class="fields"><input type="text" /></div><p class="help-text">Help text for the group of fields.</p></div></form>');
|
272 |
|
273 | });
|
274 |
|
275 | });
|
276 |
|
277 | });
|
278 |
|
279 |
|
280 | it('a form with a fieldset, and nested fields', function () {
|
281 |
|
282 | var form = new formist.Form({
|
283 | attributes: {
|
284 | action: '/save',
|
285 | method: 'post'
|
286 | }
|
287 | });
|
288 |
|
289 | var fieldset = form.add(new formist.Fieldset({
|
290 | legend: 'Personal information',
|
291 | attributes: {
|
292 | 'class': 'personalInformation'
|
293 | }
|
294 | }));
|
295 |
|
296 | fieldset.add(new formist.Field('input', {
|
297 | attributes: {
|
298 | type: 'datetime'
|
299 | }
|
300 | }));
|
301 |
|
302 | fieldset.add(new formist.Field('button', {
|
303 | attributes: {
|
304 | value: 'Save'
|
305 | }
|
306 | }));
|
307 |
|
308 | expect(form.render()).to.equal('<form action="/save" method="post"><fieldset class="personalInformation"><legend>Personal information</legend><div class="field"><input type="datetime" /></div><div class="field"><button>Save</button></div></fieldset></form>');
|
309 |
|
310 | });
|
311 |
|
312 | describe('field groups', function () {
|
313 |
|
314 | var form,
|
315 | fieldset;
|
316 |
|
317 | beforeEach(function () {
|
318 | form = new formist.Form();
|
319 | });
|
320 |
|
321 | it("multiple text inputs", function () {
|
322 |
|
323 | form.add(new formist.Fieldgroup({
|
324 | label: 'Fields'
|
325 | }, [
|
326 |
|
327 | new formist.Field('input', {
|
328 | attributes: {
|
329 | type: 'text'
|
330 | }
|
331 | }),
|
332 | new formist.Field('input', {
|
333 | attributes: {
|
334 | type: 'text'
|
335 | }
|
336 | })
|
337 |
|
338 | ]));
|
339 |
|
340 | expect(form.render()).to.equal('<form><div class="field"><label>Fields</label><div class="fields"><input type="text" /><input type="text" /></div></div></form>');
|
341 | });
|
342 |
|
343 | it("multiple radio buttons", function () {
|
344 |
|
345 | form.add(new formist.Fieldgroup({
|
346 | label: 'Fields'
|
347 | }, [
|
348 |
|
349 | new formist.Field('input', {
|
350 | label: 'Yes',
|
351 | attributes: {
|
352 | name: 'f',
|
353 | value: 'yes',
|
354 | type: 'radio'
|
355 | }
|
356 | }),
|
357 | new formist.Field('input', {
|
358 | label: 'No',
|
359 | attributes: {
|
360 | name: 'f',
|
361 | value: 'no',
|
362 | type: 'radio'
|
363 | }
|
364 | })
|
365 |
|
366 | ]));
|
367 |
|
368 | expect(form.render()).to.equal('<form><div class="field"><label>Fields</label><div class="fields"><label><input name="f" value="yes" type="radio" /> Yes</label><label><input name="f" value="no" type="radio" /> No</label></div></div></form>');
|
369 |
|
370 | });
|
371 |
|
372 | it("multiple checkboxes", function () {
|
373 |
|
374 | form.add(new formist.Fieldgroup({
|
375 | label: 'Fields'
|
376 | }, [
|
377 |
|
378 | new formist.Field('input', {
|
379 | label: 'Saturday',
|
380 | attributes: {
|
381 | name: 'day[]',
|
382 | value: 'saturday',
|
383 | type: 'checkbox'
|
384 | }
|
385 | }),
|
386 | new formist.Field('input', {
|
387 | label: 'Sunday',
|
388 | attributes: {
|
389 | name: 'day[]',
|
390 | value: 'sunday',
|
391 | type: 'checkbox'
|
392 | }
|
393 | })
|
394 |
|
395 | ]));
|
396 |
|
397 | expect(form.render()).to.equal('<form><div class="field"><label>Fields</label><div class="fields"><label><input name="day[]" value="saturday" type="checkbox" /> Saturday</label><label><input name="day[]" value="sunday" type="checkbox" /> Sunday</label></div></div></form>');
|
398 |
|
399 | });
|
400 |
|
401 | it("multiple selects", function () {
|
402 |
|
403 | form.add(new formist.Fieldgroup({
|
404 | label: 'Fields'
|
405 | }, [
|
406 |
|
407 | new formist.Field('select', {
|
408 | attributes: {
|
409 | name: 'month'
|
410 | }
|
411 | }),
|
412 | new formist.Field('select', {
|
413 | attributes: {
|
414 | name: 'year'
|
415 | }
|
416 | })
|
417 |
|
418 | ]));
|
419 |
|
420 | expect(form.render()).to.equal('<form><div class="field"><label>Fields</label><div class="fields"><select name="month"></select><select name="year"></select></div></div></form>');
|
421 | });
|
422 |
|
423 | });
|
424 |
|
425 | describe('fields', function () {
|
426 |
|
427 | var form,
|
428 | fieldset;
|
429 |
|
430 | beforeEach(function () {
|
431 | form = new formist.Form();
|
432 | });
|
433 |
|
434 | describe("input:text", function () {
|
435 |
|
436 | it("without attributes", function () {
|
437 |
|
438 | form.add(new formist.Field('input'));
|
439 | expect(form.render()).to.equal('<form><div class="field"><input type="text" /></div></form>');
|
440 |
|
441 | });
|
442 |
|
443 | it("with any attributes", function () {
|
444 |
|
445 | form.add(new formist.Field('input', {
|
446 | attributes: {
|
447 | 'class': 'input',
|
448 | 'data-validation': 'required'
|
449 | }
|
450 | }));
|
451 | expect(form.render()).to.equal('<form><div class="field"><input class="input" data-validation="required" type="text" /></div></form>');
|
452 |
|
453 | });
|
454 |
|
455 | });
|
456 |
|
457 | describe("select", function () {
|
458 |
|
459 | it("without options or attributes", function () {
|
460 |
|
461 | form.add(new formist.Field('select'));
|
462 | expect(form.render()).to.equal('<form><div class="field"><select></select></div></form>');
|
463 |
|
464 | });
|
465 |
|
466 | it("without options, but any attributes", function () {
|
467 |
|
468 | form.add(new formist.Field('select', {
|
469 | attributes: {
|
470 | 'class': 'select',
|
471 | 'data-validation': 'required'
|
472 | }
|
473 | }));
|
474 | expect(form.render()).to.equal('<form><div class="field"><select class="select" data-validation="required"></select></div></form>');
|
475 |
|
476 | });
|
477 |
|
478 | describe("with options", function () {
|
479 |
|
480 | it("as an array of strings", function () {
|
481 |
|
482 | form.add(new formist.Field('select', {
|
483 | options: ['Australia','UK','US']
|
484 | }));
|
485 | expect(form.render()).to.equal('<form><div class="field"><select><option>Australia</option><option>UK</option><option>US</option></select></div></form>');
|
486 |
|
487 | });
|
488 |
|
489 | it("as an array of objects (label only)", function () {
|
490 |
|
491 | form.add(new formist.Field('select', {
|
492 | options: [{label:'Australia'},{label:'UK'},{label:'US'}]
|
493 | }));
|
494 | expect(form.render()).to.equal('<form><div class="field"><select><option>Australia</option><option>UK</option><option>US</option></select></div></form>');
|
495 |
|
496 | });
|
497 |
|
498 | it("as an array of objects (label and value)", function () {
|
499 |
|
500 | form.add(new formist.Field('select', {
|
501 | options: [{label:'Australia',value:'a'},{label:'UK',value:'uk'},{label:'US',value:'us'}]
|
502 | }));
|
503 | expect(form.render()).to.equal('<form><div class="field"><select><option value="a">Australia</option><option value="uk">UK</option><option value="us">US</option></select></div></form>');
|
504 |
|
505 | });
|
506 |
|
507 | it("as an array of objects with attributes", function () {
|
508 |
|
509 | form.add(new formist.Field('select', {
|
510 | options: [{label:'Australia',value:'a',attributes:{selected:true}},{label:'UK',value:'uk'},{label:'US',value:'us',attributes:{disabled:true}}]
|
511 | }));
|
512 | expect(form.render()).to.equal('<form><div class="field"><select><option selected value="a">Australia</option><option value="uk">UK</option><option disabled value="us">US</option></select></div></form>');
|
513 |
|
514 | });
|
515 |
|
516 | });
|
517 |
|
518 | });
|
519 |
|
520 | describe("labels", function () {
|
521 |
|
522 | beforeEach(function () {
|
523 | form = new formist.Form();
|
524 | });
|
525 |
|
526 | it("without a label", function () {
|
527 |
|
528 | form.add(new formist.Field('input', {
|
529 | attributes: {
|
530 | type: 'text'
|
531 | }
|
532 | }));
|
533 |
|
534 | expect(form.render()).to.equal('<form><div class="field"><input type="text" /></div></form>');
|
535 |
|
536 | });
|
537 |
|
538 | it("with a basic label", function () {
|
539 |
|
540 | form.add(new formist.Field('input', {
|
541 | label: 'Label',
|
542 | attributes: {
|
543 | type: 'text'
|
544 | }
|
545 | }));
|
546 |
|
547 | expect(form.render()).to.equal('<form><div class="field"><label>Label</label><input type="text" /></div></form>');
|
548 |
|
549 | });
|
550 |
|
551 | it("with a customised label", function () {
|
552 |
|
553 | form.add(new formist.Field('input', {
|
554 | label: {
|
555 | label: 'Label',
|
556 | attributes: {
|
557 | 'class': 'field-label'
|
558 | }
|
559 | },
|
560 | attributes: {
|
561 | type: 'text'
|
562 | }
|
563 | }));
|
564 |
|
565 | expect(form.render()).to.equal('<form><div class="field"><label class="field-label">Label</label><input type="text" /></div></form>');
|
566 |
|
567 | });
|
568 |
|
569 | });
|
570 |
|
571 | describe("with help text", function () {
|
572 |
|
573 | it("without attributes", function () {
|
574 |
|
575 | var form = new formist.Form();
|
576 |
|
577 | form.add(new formist.Field('input', {
|
578 | label: 'Label',
|
579 | helpText: 'This is a hint, for a particular field.',
|
580 | attributes: {
|
581 | type: 'text'
|
582 | }
|
583 | }));
|
584 |
|
585 | expect(form.render()).to.equal('<form><div class="field"><label>Label</label><input type="text" /><small class="help-text">This is a hint, for a particular field.</small></div></form>');
|
586 |
|
587 | });
|
588 |
|
589 | it("with attributes", function () {
|
590 |
|
591 | var form = new formist.Form();
|
592 |
|
593 | form.add(new formist.Field('input', {
|
594 | label: 'Label',
|
595 | helpText: {
|
596 | text: 'This is a hint, for a particular field.',
|
597 | attributes: {
|
598 | 'class': 'help'
|
599 | }
|
600 | },
|
601 | attributes: {
|
602 | type: 'text'
|
603 | }
|
604 | }));
|
605 |
|
606 | expect(form.render()).to.equal('<form><div class="field"><label>Label</label><input type="text" /><small class="help">This is a hint, for a particular field.</small></div></form>');
|
607 |
|
608 | });
|
609 |
|
610 | it("with attributes and an alternative tag", function () {
|
611 |
|
612 | var form = new formist.Form();
|
613 |
|
614 | form.add(new formist.Field('input', {
|
615 | label: 'Label',
|
616 | helpText: {
|
617 | text: 'This is a hint, for a particular field.',
|
618 | tag: 'p',
|
619 | attributes: {
|
620 | 'class': 'help'
|
621 | }
|
622 | },
|
623 | attributes: {
|
624 | type: 'text'
|
625 | }
|
626 | }));
|
627 |
|
628 | expect(form.render()).to.equal('<form><div class="field"><label>Label</label><input type="text" /><p class="help">This is a hint, for a particular field.</p></div></form>');
|
629 |
|
630 | });
|
631 |
|
632 | });
|
633 |
|
634 | });
|
635 |
|
636 | describe("with a theme", function () {
|
637 |
|
638 | it("form wrapper", function () {
|
639 |
|
640 | var form = new formist.Form({
|
641 | theme: {
|
642 | form: function (content) {
|
643 | return '<div class="myform">' + content + '</div>';
|
644 | }
|
645 | }
|
646 | });
|
647 |
|
648 | expect(form.render()).to.equal('<div class="myform"><form></form></div>');
|
649 |
|
650 | });
|
651 |
|
652 | it("fieldset wrapper", function () {
|
653 |
|
654 | var form = new formist.Form({
|
655 | theme: {
|
656 | fieldset: function (content, fieldset) {
|
657 | return '<div class="fieldset">' + content + '</div>';
|
658 | }
|
659 | }
|
660 | });
|
661 |
|
662 | form.add(new formist.Fieldset({
|
663 | legend: 'My fieldset'
|
664 | }));
|
665 |
|
666 | expect(form.render()).to.equal('<form><div class="fieldset"><fieldset><legend>My fieldset</legend></fieldset></div></form>');
|
667 |
|
668 | });
|
669 |
|
670 | describe("field wrapper", function () {
|
671 |
|
672 | it("without label", function () {
|
673 |
|
674 | var form = new formist.Form({
|
675 | theme: {
|
676 | field: function (label, content, field) {
|
677 | return '<div class="form-group">' + label + content + '</div>';
|
678 | }
|
679 | }
|
680 | });
|
681 |
|
682 | form.add(new formist.Field('input', {
|
683 | attributes: {
|
684 | type: 'email'
|
685 | }
|
686 | }));
|
687 |
|
688 | expect(form.render()).to.equal('<form><div class="form-group"><input type="email" /></div></form>');
|
689 |
|
690 | });
|
691 |
|
692 | it("with label", function () {
|
693 |
|
694 | var form = new formist.Form({
|
695 | theme: {
|
696 | field: function (label, content, field) {
|
697 | return '<div class="form-group">' + label + content + '</div>';
|
698 | }
|
699 | }
|
700 | });
|
701 |
|
702 | form.add(new formist.Field('input', {
|
703 | label: 'Email',
|
704 | attributes: {
|
705 | type: 'email'
|
706 | }
|
707 | }));
|
708 |
|
709 | expect(form.render()).to.equal('<form><div class="form-group"><label>Email</label><input type="email" /></div></form>');
|
710 |
|
711 | });
|
712 |
|
713 | });
|
714 |
|
715 | it("control wrapper", function () {
|
716 |
|
717 | var form = new formist.Form({
|
718 | theme: {
|
719 | control: function (content, field) {
|
720 | return '<div class="col-sm-8">' + content + '</div>';
|
721 | }
|
722 | }
|
723 | });
|
724 |
|
725 | form.add(new formist.Field('input', {
|
726 | label: 'Email',
|
727 | attributes: {
|
728 | type: 'email'
|
729 | }
|
730 | }));
|
731 |
|
732 | expect(form.render()).to.equal('<form><div class="field"><label>Email</label><div class="col-sm-8"><input type="email" /></div></div></form>');
|
733 |
|
734 | });
|
735 |
|
736 | describe("field group wrapper", function () {
|
737 |
|
738 | it("without label", function () {
|
739 |
|
740 | var form = new formist.Form();
|
741 |
|
742 | form.add(new formist.Fieldgroup({}, [
|
743 |
|
744 | new formist.Field('input', {
|
745 | label: 'Email',
|
746 | attributes: {
|
747 | type: 'email'
|
748 | }
|
749 | }),
|
750 | new formist.Field('input', {
|
751 | label: 'Text',
|
752 | attributes: {
|
753 | type: 'text'
|
754 | }
|
755 | })
|
756 |
|
757 | ]));
|
758 |
|
759 | expect(form.render()).to.equal('<form><div class="field"><div class="fields"><input type="email" /><input type="text" /></div></div></form>');
|
760 |
|
761 | });
|
762 |
|
763 | it("with label", function () {
|
764 |
|
765 | var form = new formist.Form();
|
766 |
|
767 | form.add(new formist.Fieldgroup({
|
768 | label: 'Field group'
|
769 | }, [
|
770 |
|
771 | new formist.Field('input', {
|
772 | label: 'Email',
|
773 | attributes: {
|
774 | type: 'email'
|
775 | }
|
776 | }),
|
777 | new formist.Field('input', {
|
778 | label: 'Text',
|
779 | attributes: {
|
780 | type: 'text'
|
781 | }
|
782 | })
|
783 |
|
784 | ]));
|
785 |
|
786 | expect(form.render()).to.equal('<form><div class="field"><label>Field group</label><div class="fields"><input type="email" /><input type="text" /></div></div></form>');
|
787 |
|
788 | });
|
789 |
|
790 | });
|
791 |
|
792 | it("field group > field wrapper", function () {
|
793 |
|
794 | var form = new formist.Form();
|
795 |
|
796 | form.add(new formist.Fieldgroup({
|
797 | label: 'Field group',
|
798 | theme: {
|
799 | fields: function (content) {
|
800 | return '<ul>' + content + '</ul>';
|
801 | },
|
802 | field: function (label, content, field) {
|
803 | return '<li>' + label + content + '</li>';
|
804 | }
|
805 | }
|
806 | }, [
|
807 |
|
808 | new formist.Field('input', {
|
809 | label: 'Email',
|
810 | attributes: {
|
811 | id: 'e',
|
812 | type: 'email'
|
813 | }
|
814 | }),
|
815 | new formist.Field('input', {
|
816 | label: 'Text',
|
817 | attributes: {
|
818 | id: 't',
|
819 | type: 'text'
|
820 | }
|
821 | })
|
822 |
|
823 | ]));
|
824 |
|
825 | expect(form.render()).to.equal('<form><div class="field"><label>Field group</label><ul><li><label for="e">Email</label><input id="e" type="email" /></li><li><label for="t">Text</label><input id="t" type="text" /></li></ul></div></form>');
|
826 |
|
827 | });
|
828 |
|
829 | describe("wrapper overrides", function () {
|
830 |
|
831 | it("specific to fieldset", function () {
|
832 |
|
833 | var form = new formist.Form({
|
834 | theme: {
|
835 | fieldset: function (content) {
|
836 | return '<div class="fieldset-wrapper">' + content + '</div>';
|
837 | }
|
838 | }
|
839 | });
|
840 |
|
841 | form.add(new formist.Fieldset({
|
842 | legend: 'First fieldset'
|
843 | }));
|
844 |
|
845 | form.add(new formist.Fieldset({
|
846 | legend: 'Second fieldset',
|
847 | theme: {
|
848 | fieldset: function (content) {
|
849 | return '<div class="my-specific-fieldset">' + content + '</div>';
|
850 | }
|
851 | }
|
852 | }));
|
853 |
|
854 | form.add(new formist.Fieldset({
|
855 | legend: 'Third fieldset'
|
856 | }));
|
857 |
|
858 | expect(form.render()).to.equal('<form><div class="fieldset-wrapper"><fieldset><legend>First fieldset</legend></fieldset></div><div class="my-specific-fieldset"><fieldset><legend>Second fieldset</legend></fieldset></div><div class="fieldset-wrapper"><fieldset><legend>Third fieldset</legend></fieldset></div></form>');
|
859 |
|
860 | });
|
861 |
|
862 | describe("specific to fieldgroup", function () {
|
863 |
|
864 | it("group", function () {
|
865 |
|
866 | var form = new formist.Form({
|
867 | theme: {
|
868 | fieldgroup: {
|
869 | group: function (label, content, elements) {
|
870 | return '<div class="inline-field-group">' + label + content + '</div>';
|
871 | }
|
872 | }
|
873 | }
|
874 | });
|
875 |
|
876 | form.add(new formist.Fieldgroup({
|
877 | label: 'First fieldgroup'
|
878 | }, [
|
879 |
|
880 | new formist.Field('input', {
|
881 | attributes: {
|
882 | type: 'text'
|
883 | }
|
884 | }),
|
885 | new formist.Field('input', {
|
886 | attributes: {
|
887 | type: 'text'
|
888 | }
|
889 | })
|
890 |
|
891 | ]));
|
892 |
|
893 | form.add(new formist.Fieldgroup({
|
894 | label: 'Second fieldgroup',
|
895 | theme: {
|
896 | group: function (label, content, elements) {
|
897 | return '<div class="inline-fields">' + content + '</div>';
|
898 | }
|
899 | }
|
900 | }, [
|
901 |
|
902 | new formist.Field('input', {
|
903 | attributes: {
|
904 | type: 'text'
|
905 | }
|
906 | }),
|
907 | new formist.Field('input', {
|
908 | attributes: {
|
909 | type: 'text'
|
910 | }
|
911 | })
|
912 |
|
913 | ]));
|
914 |
|
915 | form.add(new formist.Fieldgroup({
|
916 | label: 'Third fieldgroup',
|
917 | }, [
|
918 |
|
919 | new formist.Field('input', {
|
920 | attributes: {
|
921 | type: 'text'
|
922 | }
|
923 | }),
|
924 | new formist.Field('input', {
|
925 | attributes: {
|
926 | type: 'text'
|
927 | }
|
928 | })
|
929 |
|
930 | ]));
|
931 |
|
932 | expect(form.render()).to.equal('<form><div class="inline-field-group"><label>First fieldgroup</label><div class="fields"><input type="text" /><input type="text" /></div></div><div class="inline-fields"><div class="fields"><input type="text" /><input type="text" /></div></div><div class="inline-field-group"><label>Third fieldgroup</label><div class="fields"><input type="text" /><input type="text" /></div></div></form>');
|
933 |
|
934 | });
|
935 |
|
936 | it("fields", function () {
|
937 |
|
938 | var form = new formist.Form({
|
939 | theme: {
|
940 | fieldgroup: {
|
941 | fields: function (content, elements) {
|
942 | return '<div class="inline-field-group">' + content + '</div>';
|
943 | }
|
944 | }
|
945 | }
|
946 | });
|
947 |
|
948 | form.add(new formist.Fieldgroup({
|
949 | label: 'First fieldgroup'
|
950 | }, [
|
951 |
|
952 | new formist.Field('input', {
|
953 | attributes: {
|
954 | type: 'text'
|
955 | }
|
956 | }),
|
957 | new formist.Field('input', {
|
958 | attributes: {
|
959 | type: 'text'
|
960 | }
|
961 | })
|
962 |
|
963 | ]));
|
964 |
|
965 | form.add(new formist.Fieldgroup({
|
966 | label: 'Second fieldgroup',
|
967 | theme: {
|
968 | fields: function (content, elements) {
|
969 | return '<div class="hide"></div>';
|
970 | }
|
971 | }
|
972 | }, [
|
973 |
|
974 | new formist.Field('input', {
|
975 | attributes: {
|
976 | type: 'text'
|
977 | }
|
978 | }),
|
979 | new formist.Field('input', {
|
980 | attributes: {
|
981 | type: 'text'
|
982 | }
|
983 | })
|
984 |
|
985 | ]));
|
986 |
|
987 | form.add(new formist.Fieldgroup({
|
988 | label: 'Third fieldgroup',
|
989 | }, [
|
990 |
|
991 | new formist.Field('input', {
|
992 | attributes: {
|
993 | type: 'text'
|
994 | }
|
995 | }),
|
996 | new formist.Field('input', {
|
997 | attributes: {
|
998 | type: 'text'
|
999 | }
|
1000 | })
|
1001 |
|
1002 | ]));
|
1003 |
|
1004 | expect(form.render()).to.equal('<form><div class="field"><label>First fieldgroup</label><div class="inline-field-group"><input type="text" /><input type="text" /></div></div><div class="field"><label>Second fieldgroup</label><div class="hide"></div></div><div class="field"><label>Third fieldgroup</label><div class="inline-field-group"><input type="text" /><input type="text" /></div></div></form>');
|
1005 |
|
1006 | });
|
1007 |
|
1008 | it("field", function () {
|
1009 |
|
1010 | var form = new formist.Form({
|
1011 | theme: {
|
1012 | fieldgroup: {
|
1013 | field: function (label, content, field) {
|
1014 | return '<div class="inline-field">' + content + '</div>';
|
1015 | }
|
1016 | }
|
1017 | }
|
1018 | });
|
1019 |
|
1020 | form.add(new formist.Fieldgroup({
|
1021 | label: 'First fieldgroup'
|
1022 | }, [
|
1023 |
|
1024 | new formist.Field('input', {
|
1025 | label: 'First fieldgroup, first field',
|
1026 | attributes: {
|
1027 | type: 'text'
|
1028 | }
|
1029 | }),
|
1030 | new formist.Field('input', {
|
1031 | label: 'First fieldgorup, second field',
|
1032 | attributes: {
|
1033 | type: 'text'
|
1034 | }
|
1035 | })
|
1036 |
|
1037 | ]));
|
1038 |
|
1039 | form.add(new formist.Fieldgroup({
|
1040 | label: 'Second fieldgroup',
|
1041 | theme: {
|
1042 | field: function (label, content, field) {
|
1043 | return '<div class="inline-field with-label">' + label + content + '</div>';
|
1044 | }
|
1045 | }
|
1046 | }, [
|
1047 |
|
1048 | new formist.Field('input', {
|
1049 | label: 'Second fieldgroup, first field',
|
1050 | attributes: {
|
1051 | type: 'text'
|
1052 | }
|
1053 | }),
|
1054 | new formist.Field('input', {
|
1055 | label: 'Second fieldgroup, second field',
|
1056 | attributes: {
|
1057 | type: 'text'
|
1058 | }
|
1059 | })
|
1060 |
|
1061 | ]));
|
1062 |
|
1063 | form.add(new formist.Fieldgroup({
|
1064 | label: 'Third fieldgroup',
|
1065 | }, [
|
1066 |
|
1067 | new formist.Field('input', {
|
1068 | label: 'Third fieldgroup, first field',
|
1069 | attributes: {
|
1070 | type: 'text'
|
1071 | }
|
1072 | }),
|
1073 | new formist.Field('input', {
|
1074 | label: 'Third fieldgroup, second field',
|
1075 | attributes: {
|
1076 | type: 'text'
|
1077 | }
|
1078 | })
|
1079 |
|
1080 | ]));
|
1081 |
|
1082 | expect(form.render()).to.equal('<form><div class="field"><label>First fieldgroup</label><div class="fields"><div class="inline-field"><input type="text" /></div><div class="inline-field"><input type="text" /></div></div></div><div class="field"><label>Second fieldgroup</label><div class="fields"><div class="inline-field with-label"><label>Second fieldgroup, first field</label><input type="text" /></div><div class="inline-field with-label"><label>Second fieldgroup, second field</label><input type="text" /></div></div></div><div class="field"><label>Third fieldgroup</label><div class="fields"><div class="inline-field"><input type="text" /></div><div class="inline-field"><input type="text" /></div></div></div></form>');
|
1083 |
|
1084 | });
|
1085 |
|
1086 | });
|
1087 |
|
1088 | it("specific to field", function () {
|
1089 |
|
1090 | var form = new formist.Form({
|
1091 | theme: {
|
1092 | field: function (label, content) {
|
1093 | return '<div class="field-wrapper">' + label + content + '</div>';
|
1094 | }
|
1095 | }
|
1096 | });
|
1097 |
|
1098 | form.add(new formist.Field('input', {
|
1099 | label: 'First field',
|
1100 | attributes: {
|
1101 | type: 'text'
|
1102 | }
|
1103 | }));
|
1104 |
|
1105 | form.add(new formist.Field('input', {
|
1106 | label: 'Second field',
|
1107 | attributes: {
|
1108 | type: 'text'
|
1109 | },
|
1110 | theme: {
|
1111 | field: function (label, content) {
|
1112 | return '<div class="field-wrapper field-without-label">' + content + '</div>';
|
1113 | }
|
1114 | }
|
1115 | }));
|
1116 |
|
1117 | form.add(new formist.Field('input', {
|
1118 | label: 'Third field',
|
1119 | attributes: {
|
1120 | type: 'text'
|
1121 | }
|
1122 | }));
|
1123 |
|
1124 | expect(form.render()).to.equal('<form><div class="field-wrapper"><label>First field</label><input type="text" /></div><div class="field-wrapper field-without-label"><input type="text" /></div><div class="field-wrapper"><label>Third field</label><input type="text" /></div></form>');
|
1125 |
|
1126 | });
|
1127 |
|
1128 | it("specific to control", function () {
|
1129 |
|
1130 | var form = new formist.Form();
|
1131 |
|
1132 | form.add(new formist.Field('input', {
|
1133 | label: 'Email',
|
1134 | attributes: {
|
1135 | type: 'email'
|
1136 | }
|
1137 | }));
|
1138 |
|
1139 | form.add(new formist.Field('button', {
|
1140 | attributes: {
|
1141 | 'class': 'btn',
|
1142 | value: 'Save'
|
1143 | },
|
1144 | theme: {
|
1145 | control: function (content, field) {
|
1146 | return '<div class="col-sm-offset-2 col-sm-8">' + content + '</div>';
|
1147 | }
|
1148 | }
|
1149 | }));
|
1150 |
|
1151 | expect(form.render()).to.equal('<form><div class="field"><label>Email</label><input type="email" /></div><div class="field"><div class="col-sm-offset-2 col-sm-8"><button class="btn">Save</button></div></div></form>');
|
1152 |
|
1153 | });
|
1154 |
|
1155 | });
|
1156 |
|
1157 | });
|
1158 |
|
1159 | });
|
1160 |
|
1161 | describe("has an API", function () {
|
1162 |
|
1163 | describe("on the Form class, should allow you to", function () {
|
1164 |
|
1165 | it("set an attribute key", function () {
|
1166 |
|
1167 | var form = new formist.Form();
|
1168 |
|
1169 | form.attribute('action', '/save');
|
1170 | form.attribute('method', 'post');
|
1171 |
|
1172 | expect(form.render()).to.equal('<form action="/save" method="post"></form>');
|
1173 |
|
1174 | });
|
1175 |
|
1176 | it("get an attribute key", function () {
|
1177 |
|
1178 | var form = new formist.Form({
|
1179 | attributes: {
|
1180 | action: '/save'
|
1181 | }
|
1182 | });
|
1183 |
|
1184 | form.attribute('method', 'post');
|
1185 |
|
1186 | expect(form.attribute('method')).to.equal('post');
|
1187 | expect(form.attribute('action')).to.equal('/save');
|
1188 |
|
1189 | });
|
1190 |
|
1191 | it("override an attribute key", function () {
|
1192 |
|
1193 | var form = new formist.Form({
|
1194 | action: '/save'
|
1195 | });
|
1196 |
|
1197 | form.attribute('action', '/save/id');
|
1198 |
|
1199 | expect(form.render()).to.equal('<form action="/save/id"></form>');
|
1200 |
|
1201 | });
|
1202 |
|
1203 | });
|
1204 |
|
1205 | describe("on the Fieldset class, should allow you to", function () {
|
1206 |
|
1207 | it("set an attribute key", function () {
|
1208 |
|
1209 | var form = new formist.Form(),
|
1210 | fieldset = form.add(new formist.Fieldset());
|
1211 |
|
1212 | fieldset.attribute('class', 'my-class');
|
1213 |
|
1214 | expect(form.render()).to.equal('<form><fieldset class="my-class"></fieldset></form>');
|
1215 |
|
1216 | });
|
1217 |
|
1218 | it("get an attribute key", function () {
|
1219 |
|
1220 | var form = new formist.Form(),
|
1221 | fieldset = form.add(new formist.Fieldset({
|
1222 | attributes: {
|
1223 | 'class': 'my-class'
|
1224 | }
|
1225 | }));
|
1226 |
|
1227 | expect(fieldset.attribute('class')).to.equal('my-class');
|
1228 |
|
1229 | });
|
1230 |
|
1231 | it("override an attribute key", function () {
|
1232 |
|
1233 | var form = new formist.Form(),
|
1234 | fieldset = form.add(new formist.Fieldset({
|
1235 | attribute: {
|
1236 | 'class': 'first-class'
|
1237 | }
|
1238 | }));
|
1239 |
|
1240 | fieldset.attribute('class', 'my-class');
|
1241 |
|
1242 | expect(form.render()).to.equal('<form><fieldset class="my-class"></fieldset></form>');
|
1243 |
|
1244 | });
|
1245 |
|
1246 | });
|
1247 |
|
1248 | describe("on the Field class, should allow you to", function () {
|
1249 |
|
1250 | it("set an attribute key", function () {
|
1251 |
|
1252 | var form = new formist.Form(),
|
1253 | field = form.add(new formist.Field('input', {
|
1254 | attributes: {
|
1255 | type: 'text'
|
1256 | }
|
1257 | }));
|
1258 |
|
1259 | field.attribute('class', 'my-class');
|
1260 |
|
1261 | expect(form.render()).to.equal('<form><div class="field"><input type="text" class="my-class" /></div></form>');
|
1262 |
|
1263 | });
|
1264 |
|
1265 | it("get an attribute key", function () {
|
1266 |
|
1267 | var form = new formist.Form(),
|
1268 | field = form.add(new formist.Field('input', {
|
1269 | attributes: {
|
1270 | 'type': 'text',
|
1271 | 'class': 'my-class'
|
1272 | }
|
1273 | }));
|
1274 |
|
1275 | expect(field.attribute('class')).to.equal('my-class');
|
1276 |
|
1277 | });
|
1278 |
|
1279 | it("override an attribute key", function () {
|
1280 |
|
1281 | var form = new formist.Form(),
|
1282 | field = form.add(new formist.Field('input', {
|
1283 | attributes: {
|
1284 | 'type': 'text',
|
1285 | 'class': 'first-class'
|
1286 | }
|
1287 | }));
|
1288 |
|
1289 | field.attribute('class', 'my-class');
|
1290 |
|
1291 | expect(form.render()).to.equal('<form><div class="field"><input type="text" class="my-class" /></div></form>');
|
1292 |
|
1293 | });
|
1294 |
|
1295 | });
|
1296 |
|
1297 | });
|
1298 |
|
1299 | }); |
\ | No newline at end of file |