Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(23)

Side by Side Diff: third_party/pkg/angular/test/directive/ng_form_spec.dart

Issue 257423008: Update all Angular libs (run update_all.sh). (Closed) Base URL: https://dart.googlecode.com/svn/branches/bleeding_edge/dart
Patch Set: Created 6 years, 8 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch | Annotate | Revision Log
OLDNEW
1 library form_spec; 1 library form_spec;
2 2
3 import '../_specs.dart'; 3 import '../_specs.dart';
4 4
5 main() => 5 void main() {
6 describe('form', () { 6 describe('form', () {
7 TestBed _; 7 TestBed _;
8 8
9 it('should set the name of the form and attach it to the scope', inject((Scope scope, TestBed _) { 9 it('should set the name of the form and attach it to the scope', (Scope scop e, TestBed _) {
10 var element = $('<form name="myForm"></form>'); 10 expect(scope.context['myForm']).toBeNull();
11 11
12 expect(scope.context['myForm']).toBeNull(); 12 _.compile('<form name="myForm"></form>');
13
14 _.compile(element);
15 scope.apply();
16
17 expect(scope.context['myForm']).toBeDefined();
18
19 var form = scope.context['myForm'];
20 expect(form.name).toEqual('myForm');
21 }));
22
23 describe('pristine / dirty', () {
24 it('should be set to pristine by default', inject((Scope scope, TestBed _) {
25 var element = $('<form name="myForm"></form>');
26
27 _.compile(element);
28 scope.apply(); 13 scope.apply();
29 14
15 expect(scope.context['myForm']).toBeDefined();
16
30 var form = scope.context['myForm']; 17 var form = scope.context['myForm'];
31 expect(form.pristine).toEqual(true); 18 expect(form.name).toEqual('myForm');
32 expect(form.dirty).toEqual(false); 19 });
33 })); 20
34 21 it('should return the first control with the given name when accessed using map notation',
35 it('should add and remove the correct CSS classes when set to dirty and to p ristine', inject((Scope scope, TestBed _) { 22 (Scope scope, TestBed _) {
36 var element = $('<form name="myForm"></form>'); 23 _.compile('<form name="myForm">'
37 24 ' <input type="text" name="model" ng-model="modelOne" probe="a" />'
38 _.compile(element); 25 ' <input type="text" name="model" ng-model="modelTwo" probe="b" />'
26 '</form>');
39 scope.apply(); 27 scope.apply();
40 28
41 var form = scope.context['myForm']; 29 NgForm form = _.rootScope.context['myForm'];
42 30 NgModel one = _.rootScope.context['a'].directive(NgModel);
43 form.dirty = true; 31 NgModel two = _.rootScope.context['b'].directive(NgModel);
44 expect(form.pristine).toEqual(false); 32
45 expect(form.dirty).toEqual(true); 33 expect(one).not.toBe(two);
46 expect(element.hasClass('ng-pristine')).toBe(false); 34 expect(form['model']).toBe(one);
47 expect(element.hasClass('ng-dirty')).toBe(true); 35 expect(scope.eval("myForm['model']")).toBe(one);
48 36 });
49 form.pristine = true; 37
50 expect(form.pristine).toEqual(true); 38 it('should return the all the controls with the given name', (Scope scope, T estBed _) {
51 expect(form.dirty).toEqual(false); 39 _.compile('<form name="myForm">'
52 expect(element.hasClass('ng-pristine')).toBe(true); 40 ' <input type="text" name="model" ng-model="modelOne" probe="a" />'
53 expect(element.hasClass('ng-dirty')).toBe(false); 41 ' <input type="text" name="model" ng-model="modelTwo" probe="b" />'
54 })); 42 '</form>');
43 scope.apply();
44
45 NgForm form = _.rootScope.context['myForm'];
46 NgModel one = _.rootScope.context['a'].directive(NgModel);
47 NgModel two = _.rootScope.context['b'].directive(NgModel);
48
49 expect(one).not.toBe(two);
50
51 var controls = form.controls['model'];
52 expect(controls[0]).toBe(one);
53 expect(controls[1]).toBe(two);
54
55 expect(scope.eval("myForm.controls['model'][0]")).toBe(one);
56 expect(scope.eval("myForm.controls['model'][1]")).toBe(two);
57 });
58
59
60 describe('pristine / dirty', () {
61 it('should be set to pristine by default', (Scope scope, TestBed _) {
62 _.compile('<form name="myForm"></form>');
63 scope.apply();
64
65 var form = scope.context['myForm'];
66 expect(form).toBePristine();
67 });
68
69 it('should add and remove the correct CSS classes when set to dirty and to pristine', (Scope scope, TestBed _) {
70 var element = e('<form name="myForm"><input ng-model="m" probe="m" /></f orm>');
71
72 _.compile(element);
73 scope.apply();
74
75 Probe probe = _.rootScope.context['m'];
76 var input = probe.directive(NgModel);
77 var form = scope.context['myForm'];
78
79 input.addInfo('ng-dirty');
80 input.validate();
81 scope.apply();
82
83 expect(form).not.toBePristine();
84 expect(element).not.toHaveClass('ng-pristine');
85 expect(element).toHaveClass('ng-dirty');
86
87 input.removeInfo('ng-dirty');
88 input.validate();
89 scope.apply();
90
91 expect(form).toBePristine();
92 expect(element).toHaveClass('ng-pristine');
93 expect(element).not.toHaveClass('ng-dirty');
94 });
95
96 it('should revert back to pristine on the form if the value is reset on th e model',
97 (Scope scope, TestBed _) {
98 _.compile('<form name="myForm">' +
99 ' <input type="text" ng-model="myModel1" probe="m" />' +
100 ' <input type="text" ng-model="myModel2" probe="n" />' +
101 '</form>');
102 scope.apply();
103
104 var form = scope.context['myForm'];
105 var model1 = scope.context['m'].directive(NgModel);
106 var model2 = scope.context['n'].directive(NgModel);
107
108 expect(model1).toBePristine();
109 expect(model2).toBePristine();
110
111 var m1value = model1.viewValue;
112 var m2value = model2.viewValue;
113
114 model1.viewValue = 'some value';
115 expect(model1).not.toBePristine();
116
117 model2.viewValue = 'some value 123';
118
119 model1.viewValue = m1value;
120 expect(model1).toBePristine();
121 expect(form).not.toBePristine();
122
123 model2.viewValue = m2value;
124 expect(model2).toBePristine();
125 expect(form).toBePristine();
126 });
127 });
128
129 describe('valid / invalid', () {
130 it('should be valid when empty', (Scope scope, TestBed _) {
131 _.compile('<form name="myForm"></form>');
132 scope.apply();
133
134 var form = scope.context['myForm'];
135 expect(form).toBeValid();
136 });
137
138 it('should be valid by default', (Scope scope, TestBed _) {
139 _.compile('<form name="myForm"><input type="text" /></form>');
140 scope.apply();
141
142 var form = scope.context['myForm'];
143 expect(form).toBeValid();
144 });
145
146 it('should add and remove the correct flags when set to valid and to inval id',
147 (Scope scope, TestBed _) {
148
149 var element = e('<form name="myForm"><input ng-model="m" probe="m" /></f orm>');
150 _.compile(element);
151 scope.apply();
152
153 Probe probe = _.rootScope.context['m'];
154 var model = probe.directive(NgModel);
155 var form = scope.context['myForm'];
156
157 model.addError('some-error');
158 model.validate();
159 scope.apply();
160
161 expect(form).not.toBeValid();
162
163 expect(element).toHaveClass('ng-invalid');
164 expect(element).not.toHaveClass('ng-valid');
165
166 model.removeError('some-error');
167 model.validate();
168 scope.apply();
169
170 expect(form).toBeValid();
171 expect(element).not.toHaveClass('ng-invalid');
172 //expect(element).toHaveClass('ng-valid');
173 });
174
175 it('should set the validity with respect to all existing validations when error states are set is used', (Scope scope, TestBed _) {
176 _.compile('<form name="myForm">'
177 ' <input type="text" ng-model="one" name="one" />'
178 ' <input type="text" ng-model="two" name="two" />'
179 ' <input type="text" ng-model="three" name="three" />'
180 '</form>');
181 scope.apply();
182
183 var form = scope.context['myForm'];
184 NgModel one = form['one'];
185 NgModel two = form['two'];
186 NgModel three = form['three'];
187
188 one.addError("some error");
189 one.validate();
190 expect(form).not.toBeValid();
191
192 two.addError("some error");
193 two.validate();
194 expect(form).not.toBeValid();
195
196 one.removeError("some error");
197 one.validate();
198 expect(form).not.toBeValid();
199
200 two.removeError("some error");
201 two.validate();
202 expect(form).toBeValid();
203 });
204
205 it('should collect the invalid models upon failed validation', (Scope scop e, TestBed _) {
206 _.compile('<form name="myForm">'
207 ' <input type="text" ng-model="one" name="one" />' +
208 ' <input type="text" ng-model="two" name="two" />' +
209 ' <input type="text" ng-model="three" name="three" />' +
210 '</form>');
211 scope.apply();
212
213 var form = scope.context['myForm'];
214 NgModel one = form['one'];
215 NgModel two = form['two'];
216 NgModel three = form['three'];
217
218 one.addError("email");
219 two.removeError("number");
220 three.addError("format");
221
222 expect(form.errorStates.keys.length).toBe(2);
223 expect(form.errorStates['email'].elementAt(0)).toBe(one);
224 expect(form.errorStates['format'].elementAt(0)).toBe(three);
225 });
226
227
228 it('should not handle the control errorType pair more than once', (Scope s cope, TestBed _) {
229 _.compile('<form name="myForm">'
230 ' <input type="text" ng-model="one" name="one" />'
231 '</form>');
232 scope.apply();
233
234 var form = scope.context['myForm'];
235 NgModel one = form['one'];
236
237 one.addError('validation error');
238 one.validate();
239 expect(form).not.toBeValid();
240
241 one.addError('validation error');
242 one.validate();
243
244 expect(form).not.toBeValid();
245
246 one.removeError('validation error');
247 one.validate();
248 expect(form).toBeValid();
249 });
250
251 it('should update the validity of the parent form when the inner model cha nges', (Scope scope, TestBed _) {
252 _.compile('<form name="myForm">'
253 ' <input type="text" ng-model="one" name="one" />'
254 ' <input type="text" ng-model="two" name="two" />'
255 '</form>');
256 scope.apply();
257
258 var form = scope.context['myForm'];
259 NgModel one = form['one'];
260 NgModel two = form['two'];
261
262 one.addError("required");
263 expect(form).not.toBeValid();
264
265 two.addError("required");
266 expect(form).not.toBeValid();
267
268 one.removeError("required");
269 expect(form).not.toBeValid();
270
271 two.removeError("required");
272 expect(form).toBeValid();
273 });
274
275 it('should register the name of inner forms that contain the ng-form attri bute',
276 (Scope scope, TestBed _) {
277 _.compile('<form name="myForm">'
278 ' <div ng-form="myInnerForm" probe="f">'
279 ' <input type="text" ng-model="one" name="one" probe="m" /> '
280 ' </div>'
281 '</form>');
282 scope.apply(() {
283 scope.context['one'] = 'it works!';
284 });
285
286 var form = scope.context['myForm'];
287 var inner = _.rootScope.context['f'].directive(NgForm);
288
289 expect(inner.name).toEqual('myInnerForm');
290 expect(scope.eval('myForm["myInnerForm"]["one"].viewValue'))
291 .toEqual('it works!');
292 });
293
294 it('should set the validity for the parent form when fieldsets are used', (Scope scope, TestBed _) {
295 _.compile('<form name="myForm">'
296 ' <fieldset probe="f">'
297 ' <input type="text" ng-model="one" name="one" probe="m" /> '
298 ' </fieldset>'
299 '</form>');
300 scope.apply();
301
302 var form = scope.context['myForm'];
303 var fieldset = _.rootScope.context['f'].directive(NgForm);
304 var model = _.rootScope.context['m'].directive(NgModel);
305
306 model.addError("error");
307
308 expect(model).not.toBeValid();
309 expect(fieldset).not.toBeValid();
310 expect(form).not.toBeValid();
311
312 model.removeError("error");
313
314 expect(model).toBeValid();
315 expect(fieldset).toBeValid();
316 expect(form).toBeValid();
317 });
318
319 it('should revalidate itself when an inner model is removed', (Scope scope , TestBed _) {
320 _.compile('<form name="myForm">'
321 ' <input ng-model="m" ng-if="on" required />'
322 '</form>');
323 scope.context['on'] = true;
324 scope.apply();
325
326 var form = scope.context['myForm'];
327
328 expect(form).not.toBeValid();
329
330 scope.context['on'] = false;
331 scope.apply();
332
333 expect(form).toBeValid();
334
335 scope.context['on'] = true;
336 scope.apply();
337
338 expect(form).not.toBeValid();
339 });
340 });
341
342 describe('controls', () {
343 it('should add each contained ng-model as a control upon compile', (Scope scope, TestBed _) {
344 _.compile('<form name="myForm">'
345 ' <input type="text" ng-model="mega_model" name="mega_name" / >'
346 ' <select ng-model="fire_model" name="fire_name">'
347 ' <option>value</option>'
348 ' </select>'
349 '</form>');
350
351 scope.context['mega_model'] = 'mega';
352 scope.context['fire_model'] = 'fire';
353 scope.apply();
354
355 var form = scope.context['myForm'];
356 expect(form['mega_name'].modelValue).toBe('mega');
357 expect(form['fire_name'].modelValue).toBe('fire');
358 });
359
360 it('should properly remove controls directly from the ngForm instance', (S cope scope, TestBed _) {
361 _.compile('<form name="myForm">'
362 ' <input type="text" ng-model="mega_model" name="mega_control " />' +
363 '</form>');
364 scope.apply();
365
366 var form = scope.context['myForm'];
367 var control = form['mega_control'];
368 form.removeControl(control);
369 expect(form['mega_control']).toBeNull();
370 });
371
372 it('should remove all controls when the scope is destroyed', (Scope scope, TestBed _) {
373 Scope childScope = scope.createChild({});
374 _.compile('<form name="myForm">'
375 ' <input type="text" ng-model="one" name="one" />'
376 ' <input type="text" ng-model="two" name="two" />'
377 ' <input type="text" ng-model="three" name="three" />'
378 '</form>', scope: childScope);
379 childScope.apply();
380
381 var form = childScope.context['myForm'];
382 expect(form['one']).toBeDefined();
383 expect(form['two']).toBeDefined();
384 expect(form['three']).toBeDefined();
385
386 childScope.destroy();
387
388 expect(form['one']).toBeNull();
389 expect(form['two']).toBeNull();
390 expect(form['three']).toBeNull();
391 });
392
393 it('should remove from parent when child is removed', (Scope scope, TestBe d _) {
394 _.compile('<form name="myForm">'
395 ' <input type="text" name="mega_name" ng-if="mega_visible" ng -model="value"/>'
396 '</form>');
397
398 scope.context['mega_visible'] = true;
399 scope.apply();
400
401 var form = scope.context['myForm'];
402 expect(form['mega_name']).toBeDefined();
403
404 scope.context['mega_visible'] = false;
405 scope.apply();
406 expect(form['mega_name']).toBeNull();
407 });
408 });
409
410 describe('onSubmit', () {
411 it('should suppress the submission event if no action is provided within t he form', (Scope scope, TestBed _) {
412 var element = e('<form name="myForm"></form>');
413
414 _.compile(element);
415 scope.apply();
416
417 Event submissionEvent = new Event.eventType('CustomEvent', 'submit');
418
419 expect(submissionEvent.defaultPrevented).toBe(false);
420 element.dispatchEvent(submissionEvent);
421 expect(submissionEvent.defaultPrevented).toBe(true);
422
423 Event fakeEvent = new Event.eventType('CustomEvent', 'running');
424
425 expect(fakeEvent.defaultPrevented).toBe(false);
426 element.dispatchEvent(submissionEvent);
427 expect(fakeEvent.defaultPrevented).toBe(false);
428 });
429
430 it('should not prevent the submission event if an action is defined', (Sco pe scope, TestBed _) {
431 var element = e('<form name="myForm" action="..."></form>');
432
433 _.compile(element);
434 scope.apply();
435
436 Event submissionEvent = new Event.eventType('CustomEvent', 'submit');
437
438 expect(submissionEvent.defaultPrevented).toBe(false);
439 element.dispatchEvent(submissionEvent);
440 expect(submissionEvent.defaultPrevented).toBe(false);
441 });
442
443 it('should execute the ng-submit expression if provided upon form submissi on', (Scope scope, TestBed _) {
444 var element = e('<form name="myForm" ng-submit="submitted = true"></form >');
445
446 _.compile(element);
447 scope.apply();
448
449 _.rootScope.context['submitted'] = false;
450
451 Event submissionEvent = new Event.eventType('CustomEvent', 'submit');
452 element.dispatchEvent(submissionEvent);
453
454 expect(_.rootScope.context['submitted']).toBe(true);
455 });
456
457 it('should apply the valid and invalid prefixed submit CSS classes to the element',
458 (TestBed _, Scope scope) {
459
460 _.compile('<form name="superForm">'
461 ' <input type="text" ng-model="myModel" probe="i" required />'
462 '</form>');
463 scope.apply();
464
465 NgForm form = _.rootScope.context['superForm'];
466 Probe probe = _.rootScope.context['i'];
467 var model = probe.directive(NgModel);
468 var formElement = form.element.node;
469
470 expect(form.submitted).toBe(false);
471 expect(form.validSubmit).toBe(false);
472 expect(form.invalidSubmit).toBe(false);
473 expect(formElement).not.toHaveClass('ng-submit-invalid');
474 expect(formElement).not.toHaveClass('ng-submit-valid');
475
476 Event submissionEvent = new Event.eventType('CustomEvent', 'submit');
477
478 formElement.dispatchEvent(submissionEvent);
479 scope.apply();
480
481 expect(form.submitted).toBe(true);
482 expect(form.validSubmit).toBe(false);
483 expect(form.invalidSubmit).toBe(true);
484 expect(formElement).toHaveClass('ng-submit-invalid');
485 expect(formElement).not.toHaveClass('ng-submit-valid');
486
487 _.rootScope.apply('myModel = "man"');
488 formElement.dispatchEvent(submissionEvent);
489 scope.apply();
490
491 expect(form.submitted).toBe(true);
492 expect(form.validSubmit).toBe(true);
493 expect(form.invalidSubmit).toBe(false);
494 expect(formElement).not.toHaveClass('ng-submit-invalid');
495 expect(formElement).toHaveClass('ng-submit-valid');
496 });
497 });
498
499 describe('error handling', () {
500 it('should return true or false depending on if an error exists on a form' ,
501 (Scope scope, TestBed _) {
502 _.compile('<form name="myForm">'
503 ' <input type="text" ng-model="input" name="input" />'
504 '</form>');
505 scope.apply();
506
507 var form = scope.context['myForm'];
508 NgModel input = form['input'];
509
510 expect(form.hasErrorState('big-failure')).toBe(false);
511
512 input.addError('big-failure');
513 input.validate();
514
515 expect(form.hasErrorState('big-failure')).toBe(true);
516
517 input.removeError('big-failure');
518 input.validate();
519
520 expect(form.hasErrorState('big-failure')).toBe(false);
521 });
522 });
523
524 describe('validators', () {
525 it('should display the valid and invalid CSS classes on the element for ea ch validation',
526 (TestBed _, Scope scope) {
527
528 var form = _.compile(
529 '<form name="myForm">' +
530 ' <input type="text" ng-model="myModel" required />' +
531 '</form>'
532 );
533
534 scope.apply();
535
536 expect(form).toHaveClass('ng-required-invalid');
537 expect(form).not.toHaveClass('ng-required-valid');
538
539 scope.apply(() {
540 scope.context['myModel'] = 'value';
541 });
542
543 expect(form).toHaveClass('ng-required-valid');
544 expect(form).not.toHaveClass('ng-required-invalid');
545 });
546
547 it('should re-validate itself when validators are toggled on and off',
548 (TestBed _, Scope scope) {
549
550 scope.context['required'] = true;
551 _.compile('<form name="myForm">'
552 '<input type="text" ng-model="model" ng-required="required" pr obe="i" />'
553 '</form>');
554 scope.apply();
555
556 var form = scope.context['myForm'];
557 var model = scope.context['i'].directive(NgModel);
558
559 expect(form).not.toBeValid();
560 expect(model).not.toBeValid();
561
562 scope.context['required'] = false;
563 scope.apply();
564
565 expect(form).toBeValid();
566 expect(model).toBeValid();
567 });
568
569
570 describe('custom validators', () {
571 beforeEachModule((Module module) {
572 module.type(MyCustomFormValidator);
573 });
574
575 it('should display the valid and invalid CSS classes on the element for custom validations', (TestBed _, Scope scope) {
576 var form = _.compile('<form name="myForm">'
577 ' <input type="text" ng-model="myModel" custom-form-validation />'
578 '</form>');
579
580 scope.apply();
581
582 expect(form).toHaveClass('custom-invalid');
583 expect(form).not.toHaveClass('custom-valid');
584
585 scope.apply(() {
586 scope.context['myModel'] = 'yes';
587 });
588
589 expect(form).not.toHaveClass('custom-invalid');
590 expect(form).toHaveClass('custom-valid');
591 });
592 });
593 });
594
595 describe('reset()', () {
596 it('should reset the model value to its original state', (TestBed _) {
597 _.compile('<form name="superForm">' +
598 ' <input type="text" ng-model="myModel" probe="i" />'
599 '</form>');
600 _.rootScope.apply('myModel = "animal"');
601
602 NgForm form = _.rootScope.context['superForm'];
603
604 Probe probe = _.rootScope.context['i'];
605 var model = probe.directive(NgModel);
606
607 expect(_.rootScope.context['myModel']).toEqual('animal');
608 expect(model.modelValue).toEqual('animal');
609 expect(model.viewValue).toEqual('animal');
610
611 _.rootScope.apply('myModel = "man"');
612
613 expect(_.rootScope.context['myModel']).toEqual('man');
614 expect(model.modelValue).toEqual('man');
615 expect(model.viewValue).toEqual('man');
616
617 form.reset();
618 _.rootScope.apply();
619
620 expect(_.rootScope.context['myModel']).toEqual('animal');
621 expect(model.modelValue).toEqual('animal');
622 expect(model.viewValue).toEqual('animal');
623 });
624
625 // TODO(matias): special-base form_valid
626 it('should set the form control to be untouched when the model is reset',
627 (TestBed _, Scope scope) {
628
629 var form = _.compile('<form name="duperForm">'
630 ' <input type="text" ng-model="myModel" probe="i" / >'
631 '</form>');
632 var model = _.rootScope.context['i'].directive(NgModel);
633 var input = model.element.node;
634
635 NgForm formModel = _.rootScope.context['duperForm'];
636 scope.apply();
637
638 expect(formModel.touched).toBe(false);
639 expect(formModel.untouched).toBe(true);
640 expect(form).not.toHaveClass('ng-touched');
641 expect(form).toHaveClass('ng-untouched');
642
643 _.triggerEvent(input, 'blur');
644 scope.apply();
645
646 expect(formModel.touched).toBe(true);
647 expect(formModel.untouched).toBe(false);
648 expect(form).toHaveClass('ng-touched');
649 expect(form).not.toHaveClass('ng-untouched');
650
651 formModel.reset();
652 scope.apply();
653
654 expect(formModel.touched).toBe(false);
655 expect(formModel.untouched).toBe(true);
656 expect(form).not.toHaveClass('ng-touched');
657 expect(form).toHaveClass('ng-untouched');
658
659 _.triggerEvent(input, 'blur');
660
661 expect(formModel.touched).toBe(true);
662 });
663
664 it('should reset each of the controls to be untouched only when the form h as a valid submission', (Scope scope, TestBed _) {
665 var form = _.compile('<form name="duperForm">'
666 ' <input type="text" ng-model="myModel" probe="i" r equired />'
667 '</form>');
668
669 NgForm formModel = _.rootScope.context['duperForm'];
670 var model = _.rootScope.context['i'].directive(NgModel);
671 var input = model.element.node;
672 _.triggerEvent(input, 'blur');
673
674 expect(formModel.touched).toBe(true);
675 expect(model.touched).toBe(true);
676 expect(formModel.invalid).toBe(true);
677
678 _.triggerEvent(form, 'submit');
679
680 expect(formModel.touched).toBe(true);
681 expect(model.touched).toBe(true);
682 expect(formModel.invalid).toBe(true);
683
684 scope.apply(() {
685 scope.context['myModel'] = 'value';
686 });
687 _.triggerEvent(form, 'submit');
688
689 expect(formModel).toBeValid();
690 expect(model.touched).toBe(false);
691 });
692 });
693
694 it("should use map notation to fetch controls", (TestBed _) {
695 Scope s = _.rootScope;
696 s.context['name'] = 'cool';
697
698 var form = _.compile('<form name="myForm">'
699 ' <input type="text" ng-model="someModel" probe="i" name="name" />'
700 '</form>');
701
702 NgForm formModel = s.context['myForm'];
703 Probe probe = s.context['i'];
704 var model = probe.directive(NgModel);
705
706 expect(s.eval('name')).toEqual('cool');
707 expect(s.eval('myForm.name')).toEqual('myForm');
708 expect(s.eval('myForm["name"]')).toBe(model);
709 expect(s.eval('myForm["name"].name')).toEqual("name");
710 });
711
712 describe('regression tests: form', () {
713 beforeEachModule((Module module) {
714 module.type(NgForm);
715 });
716
717 it('should be resolvable by injector if configured by user.',
718 (Injector injector, Compiler compiler, DirectiveMap directives) {
719 var element = es('<form></form>');
720 expect(() => compiler(element, directives)(injector, element))
721 .not.toThrow();
722 });
723 });
55 }); 724 });
56 725 }
57 describe('valid / invalid', () { 726
58 it('should add and remove the correct flags when set to valid and to invalid ', inject((Scope scope, TestBed _) { 727 @Decorator(
59 var element = $('<form name="myForm"></form>'); 728 selector: '[custom-form-validation]')
60 729 class MyCustomFormValidator extends NgValidator {
61 _.compile(element); 730 final String name = 'custom';
62 scope.apply(); 731
63 732 MyCustomFormValidator(NgModel ngModel) {
64 var form = scope.context['myForm']; 733 ngModel.addValidator(this);
65 734 }
66 form.invalid = true; 735
67 expect(form.valid).toEqual(false); 736 bool isValid(name) => name != null && name == 'yes';
68 expect(form.invalid).toEqual(true); 737 }
69 expect(element.hasClass('ng-valid')).toBe(false);
70 expect(element.hasClass('ng-invalid')).toBe(true);
71
72 form.valid = true;
73 expect(form.valid).toEqual(true);
74 expect(form.invalid).toEqual(false);
75 expect(element.hasClass('ng-invalid')).toBe(false);
76 expect(element.hasClass('ng-valid')).toBe(true);
77 }));
78
79 it('should set the validity with respect to all existing validations when se tValidity() is used', inject((Scope scope, TestBed _) {
80 var element = $('<form name="myForm">'
81 ' <input type="text" ng-model="one" name="one" />' +
82 ' <input type="text" ng-model="two" name="two" />' +
83 ' <input type="text" ng-model="three" name="three" />' +
84 '</form>');
85
86 _.compile(element);
87 scope.apply();
88
89 var form = scope.context['myForm'];
90 NgModel one = form['one'];
91 NgModel two = form['two'];
92 NgModel three = form['three'];
93
94 form.updateControlValidity(one, "some error", false);
95 expect(form.valid).toBe(false);
96 expect(form.invalid).toBe(true);
97
98 form.updateControlValidity(two, "some error", false);
99 expect(form.valid).toBe(false);
100 expect(form.invalid).toBe(true);
101
102 form.updateControlValidity(one, "some error", true);
103 expect(form.valid).toBe(false);
104 expect(form.invalid).toBe(true);
105
106 form.updateControlValidity(two, "some error", true);
107 expect(form.valid).toBe(true);
108 expect(form.invalid).toBe(false);
109 }));
110
111 it('should not handle the control errorType pair more than once', inject((Sc ope scope, TestBed _) {
112 var element = $('<form name="myForm">'
113 ' <input type="text" ng-model="one" name="one" />' +
114 '</form>');
115
116 _.compile(element);
117 scope.apply();
118
119 var form = scope.context['myForm'];
120 NgModel one = form['one'];
121
122 form.updateControlValidity(one, "validation error", false);
123 expect(form.valid).toBe(false);
124 expect(form.invalid).toBe(true);
125
126 form.updateControlValidity(one, "validation error", false);
127 expect(form.valid).toBe(false);
128 expect(form.invalid).toBe(true);
129
130 form.updateControlValidity(one, "validation error", true);
131 expect(form.valid).toBe(true);
132 expect(form.invalid).toBe(false);
133 }));
134
135 it('should update the validity of the parent form when the inner model chang es', inject((Scope scope, TestBed _) {
136 var element = $('<form name="myForm">'
137 ' <input type="text" ng-model="one" name="one" />' +
138 ' <input type="text" ng-model="two" name="two" />' +
139 '</form>');
140
141 _.compile(element);
142 scope.apply();
143
144 var form = scope.context['myForm'];
145 NgModel one = form['one'];
146 NgModel two = form['two'];
147
148 one.setValidity("required", false);
149 expect(form.valid).toBe(false);
150 expect(form.invalid).toBe(true);
151
152 two.setValidity("required", false);
153 expect(form.valid).toBe(false);
154 expect(form.invalid).toBe(true);
155
156 one.setValidity("required", true);
157 expect(form.valid).toBe(false);
158 expect(form.invalid).toBe(true);
159
160 two.setValidity("required", true);
161 expect(form.valid).toBe(true);
162 expect(form.invalid).toBe(false);
163 }));
164
165 it('should set the validity for the parent form when fieldsets are used', in ject((Scope scope, TestBed _) {
166 var element = $('<form name="myForm">'
167 ' <fieldset probe="f">' +
168 ' <input type="text" ng-model="one" name="one" probe="m " />' +
169 ' </fieldset>' +
170 '</form>');
171
172 _.compile(element);
173 scope.apply();
174
175 var form = scope.context['myForm'];
176 var fieldset = _.rootScope.context['f'].directive(NgForm);
177 var model = _.rootScope.context['m'].directive(NgModel);
178
179 model.setValidity("error", false);
180
181 expect(model.valid).toBe(false);
182 expect(fieldset.valid).toBe(false);
183 expect(form.valid).toBe(false);
184
185 model.setValidity("error", true);
186
187 expect(model.valid).toBe(true);
188 expect(fieldset.valid).toBe(true);
189 expect(form.valid).toBe(true);
190
191 form.updateControlValidity(fieldset, "error", false);
192 expect(model.valid).toBe(true);
193 expect(fieldset.valid).toBe(true);
194 expect(form.valid).toBe(false);
195
196 fieldset.updateControlValidity(model, "error", false);
197 expect(model.valid).toBe(true);
198 expect(fieldset.valid).toBe(false);
199 expect(form.valid).toBe(false);
200 }));
201 });
202
203 describe('controls', () {
204 it('should add each contained ng-model as a control upon compile', inject((S cope scope, TestBed _) {
205 var element = $('<form name="myForm">'
206 ' <input type="text" ng-model="mega_model" name="mega_nam e" />' +
207 ' <select ng-model="fire_model" name="fire_name">' +
208 ' <option>value</option>'
209 ' </select>' +
210 '</form>');
211
212 _.compile(element);
213
214 scope.context['mega_model'] = 'mega';
215 scope.context['fire_model'] = 'fire';
216 scope.apply();
217
218 var form = scope.context['myForm'];
219 expect(form['mega_name'].modelValue).toBe('mega');
220 expect(form['fire_name'].modelValue).toBe('fire');
221 }));
222
223 it('should properly remove controls directly from the ngForm instance', inje ct((Scope scope, TestBed _) {
224 var element = $('<form name="myForm">'
225 ' <input type="text" ng-model="mega_model" name="mega_con trol" />' +
226 '</form>');
227
228 _.compile(element);
229 scope.apply();
230
231 var form = scope.context['myForm'];
232 var control = form['mega_control'];
233 form.removeControl(control);
234 expect(form['mega_control']).toBeNull();
235 }));
236
237 it('should remove all controls when the scope is destroyed', inject((Scope s cope, TestBed _) {
238 Scope childScope = scope.createChild({});
239 var element = $('<form name="myForm">' +
240 ' <input type="text" ng-model="one" name="one" />' +
241 ' <input type="text" ng-model="two" name="two" />' +
242 ' <input type="text" ng-model="three" name="three" />' +
243 '</form>');
244
245 _.compile(element, scope: childScope);
246 childScope.apply();
247
248 var form = childScope.context['myForm'];
249 expect(form['one']).toBeDefined();
250 expect(form['two']).toBeDefined();
251 expect(form['three']).toBeDefined();
252
253 childScope.destroy();
254
255 expect(form['one']).toBeNull();
256 expect(form['two']).toBeNull();
257 expect(form['three']).toBeNull();
258 }));
259 });
260
261 describe('onSubmit', () {
262 it('should suppress the submission event if no action is provided within the form', inject((Scope scope, TestBed _) {
263 var element = $('<form name="myForm"></form>');
264
265 _.compile(element);
266 scope.apply();
267
268 Event submissionEvent = new Event.eventType('CustomEvent', 'submit');
269
270 expect(submissionEvent.defaultPrevented).toBe(false);
271 element[0].dispatchEvent(submissionEvent);
272 expect(submissionEvent.defaultPrevented).toBe(true);
273
274 Event fakeEvent = new Event.eventType('CustomEvent', 'running');
275
276 expect(fakeEvent.defaultPrevented).toBe(false);
277 element[0].dispatchEvent(submissionEvent);
278 expect(fakeEvent.defaultPrevented).toBe(false);
279 }));
280
281 it('should not prevent the submission event if an action is defined', inject ((Scope scope, TestBed _) {
282 var element = $('<form name="myForm" action="..."></form>');
283
284 _.compile(element);
285 scope.apply();
286
287 Event submissionEvent = new Event.eventType('CustomEvent', 'submit');
288
289 expect(submissionEvent.defaultPrevented).toBe(false);
290 element[0].dispatchEvent(submissionEvent);
291 expect(submissionEvent.defaultPrevented).toBe(false);
292 }));
293
294 it('should execute the ng-submit expression if provided upon form submission ', inject((Scope scope, TestBed _) {
295 var element = $('<form name="myForm" ng-submit="submitted = true"></form>' );
296
297 _.compile(element);
298 scope.apply();
299
300 _.rootScope.context['submitted'] = false;
301
302 Event submissionEvent = new Event.eventType('CustomEvent', 'submit');
303 element[0].dispatchEvent(submissionEvent);
304
305 expect(_.rootScope.context['submitted']).toBe(true);
306 }));
307
308 it('should apply the valid and invalid prefixed submit CSS classes to the el ement', inject((TestBed _) {
309 _.compile('<form name="superForm">' +
310 ' <input type="text" ng-model="myModel" probe="i" required />' +
311 '</form>');
312
313 NgForm form = _.rootScope.context['superForm'];
314 Probe probe = _.rootScope.context['i'];
315 var model = probe.directive(NgModel);
316
317 expect(form.submitted).toBe(false);
318 expect(form.valid_submit).toBe(false);
319 expect(form.invalid_submit).toBe(false);
320 expect(form.element.classes.contains('ng-submit-invalid')).toBe(false);
321 expect(form.element.classes.contains('ng-submit-valid')).toBe(false);
322
323 Event submissionEvent = new Event.eventType('CustomEvent', 'submit');
324
325 form.element.dispatchEvent(submissionEvent);
326 _.rootScope.apply();
327
328 expect(form.submitted).toBe(true);
329 expect(form.valid_submit).toBe(false);
330 expect(form.invalid_submit).toBe(true);
331 expect(form.element.classes.contains('ng-submit-invalid')).toBe(true);
332 expect(form.element.classes.contains('ng-submit-valid')).toBe(false);
333
334 _.rootScope.apply('myModel = "man"');
335 form.element.dispatchEvent(submissionEvent);
336
337 expect(form.submitted).toBe(true);
338 expect(form.valid_submit).toBe(true);
339 expect(form.invalid_submit).toBe(false);
340 expect(form.element.classes.contains('ng-submit-invalid')).toBe(false);
341 expect(form.element.classes.contains('ng-submit-valid')).toBe(true);
342 }));
343 });
344
345 describe('reset()', () {
346 it('should reset the model value to its original state', inject((TestBed _) {
347 _.compile('<form name="superForm">' +
348 ' <input type="text" ng-model="myModel" probe="i" />' +
349 '</form>');
350 _.rootScope.apply('myModel = "animal"');
351
352 NgForm form = _.rootScope.context['superForm'];
353
354 Probe probe = _.rootScope.context['i'];
355 var model = probe.directive(NgModel);
356
357 expect(_.rootScope.context['myModel']).toEqual('animal');
358 expect(model.modelValue).toEqual('animal');
359 expect(model.viewValue).toEqual('animal');
360
361 _.rootScope.apply('myModel = "man"');
362
363 expect(_.rootScope.context['myModel']).toEqual('man');
364 expect(model.modelValue).toEqual('man');
365 expect(model.viewValue).toEqual('man');
366
367 form.reset();
368 _.rootScope.apply();
369
370 expect(_.rootScope.context['myModel']).toEqual('animal');
371 expect(model.modelValue).toEqual('animal');
372 expect(model.viewValue).toEqual('animal');
373 }));
374
375 it('should set the form control to be untouched when the model is reset or s ubmitted', inject((TestBed _) {
376 var form = _.compile('<form name="duperForm">' +
377 ' <input type="text" ng-model="myModel" probe="i" />' +
378 '</form>');
379 var model = _.rootScope.context['i'].directive(NgModel);
380 var input = model.element;
381
382 NgForm formModel = _.rootScope.context['duperForm'];
383
384 expect(formModel.touched).toBe(false);
385 expect(formModel.untouched).toBe(true);
386 expect(form.classes.contains('ng-touched')).toBe(false);
387 expect(form.classes.contains('ng-untouched')).toBe(true);
388
389 _.triggerEvent(input, 'blur');
390
391 expect(formModel.touched).toBe(true);
392 expect(formModel.untouched).toBe(false);
393 expect(form.classes.contains('ng-touched')).toBe(true);
394 expect(form.classes.contains('ng-untouched')).toBe(false);
395
396 formModel.reset();
397
398 expect(formModel.touched).toBe(false);
399 expect(formModel.untouched).toBe(true);
400 expect(form.classes.contains('ng-touched')).toBe(false);
401 expect(form.classes.contains('ng-untouched')).toBe(true);
402
403 _.triggerEvent(input, 'blur');
404
405 expect(formModel.touched).toBe(true);
406
407 _.triggerEvent(form, 'submit');
408
409 expect(formModel.touched).toBe(false);
410 expect(formModel.untouched).toBe(true);
411 expect(form.classes.contains('ng-touched')).toBe(false);
412 expect(form.classes.contains('ng-untouched')).toBe(true);
413 }));
414 });
415
416 describe('regression tests: form', () {
417 it('should be resolvable by injector if configured by user.', () {
418 module((Module module) {
419 module.type(NgForm);
420 });
421
422 inject((Injector injector, Compiler compiler, DirectiveMap directives) {
423 var element = $('<form></form>');
424 compiler(element, directives)(injector, element);
425 // The only expectation is that this doesn't throw
426 });
427 });
428 });
429 });
OLDNEW
« no previous file with comments | « third_party/pkg/angular/test/directive/ng_events_spec.dart ('k') | third_party/pkg/angular/test/directive/ng_if_spec.dart » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698