test/unit/widgets/BasicForm.js

   1 /*!
   2  * Ext JS Library 3.2.2
   3  * Copyright(c) 2006-2010 Ext JS, Inc.
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7 /**
   8  * Tests Ext.data.Store functionality
   9  * @author Ed Spencer
  10  */
  11 (function() {
  12     var suite  = Ext.test.session.getSuite('Ext.form.BasicForm'),
  13         assert = Y.Assert;
  14
  15     function buildForm(config) {
  16         config = config || {};
  17
  18         Ext.applyIf(config, {
  19
  20         });
  21
  22         return new Ext.form.BasicForm(null, config);
  23     };
  24
  25     var itemIdCount = 0;
  26     //creates a duck object simulating a form field
  27     function buildFormItem(options) {
  28         itemIdCount ++;
  29
  30         options = options || {};
  31
  32         Ext.applyIf(options, {
  33             valid: true,
  34             dirty: false,
  35             id   : itemIdCount
  36         });
  37
  38         return (function(itemId, config) {
  39             return Ext.apply(config || {}, {
  40                 isFormField: true,
  41                 itemId     : itemId,
  42
  43                 getName: function() {
  44                     return config.name || config.id;
  45                 },
  46
  47                 getItemId: function() {
  48                     return itemId;
  49                 },
  50
  51                 validate: function() {
  52                     return config.valid;
  53                 },
  54
  55                 isDirty: function() {
  56                     return config.dirty;
  57                 },
  58
  59                 setValue: function() {
  60                     return true;
  61                 }
  62             });
  63         })(itemIdCount, options);
  64     };
  65
  66     suite.add(new Y.Test.Case({
  67         name: 'initialization with an element',
  68
  69         setUp: function() {
  70             //create a fake form element to test that initEl is called
  71             this.el = Ext.getBody().createChild({tag: 'form'});
  72         },
  73
  74         tearDown: function() {
  75             Ext.destroy(this.el);
  76         },
  77
  78         testItemsCreated: function() {
  79             var form = buildForm();
  80
  81             assert.isTrue(form.items instanceof Ext.util.MixedCollection);
  82         },
  83
  84         testInitsEl: function() {
  85             var BasicForm = Ext.form.BasicForm,
  86                 proto     = BasicForm.prototype;
  87
  88             var wasCalled = false,
  89                 oldInitEl = proto.initEl;
  90
  91             proto.initEl = function() {
  92                 wasCalled = true;
  93             };
  94
  95             var form = new BasicForm(this.el, {});
  96
  97             assert.isTrue(wasCalled);
  98
  99             //cleanup
 100             proto.initEl = oldInitEl;
 101         },
 102
 103         testGetEL: function() {
 104             var form = new Ext.form.BasicForm(this.el, {});
 105
 106             assert.areEqual(this.el, form.getEl());
 107         },
 108
 109         testGetsFormClass: function() {
 110             var form = new Ext.form.BasicForm(this.el, {});
 111
 112             assert.isTrue(this.el.hasClass('x-form'));
 113         }
 114     }));
 115
 116     suite.add(new Y.Test.Case({
 117         name: 'validations',
 118
 119         setUp: function() {
 120             this.form = buildForm();
 121
 122             this.validItem   = buildFormItem({valid: true});
 123             this.invalidItem = buildFormItem({valid: false});
 124         },
 125
 126         testAllValid: function() {
 127             this.form.add(this.validItem);
 128
 129             assert.isTrue(this.form.isValid());
 130         },
 131
 132         testSomeInvalid: function() {
 133             this.form.add(this.validItem, this.invalidItem);
 134
 135             assert.isFalse(this.form.isValid());
 136         }
 137     }));
 138
 139     suite.add(new Y.Test.Case({
 140         name: 'dirtiness',
 141
 142         setUp: function() {
 143             this.form = buildForm();
 144
 145             this.cleanItem = buildFormItem({dirty: false});
 146             this.dirtyItem = buildFormItem({dirty: true});
 147         },
 148
 149         testAllClean: function() {
 150             this.form.add(this.cleanItem);
 151
 152             assert.isFalse(this.form.isDirty());
 153         },
 154
 155         testSomeDirty: function() {
 156             this.form.add(this.cleanItem, this.dirtyItem);
 157
 158             assert.isTrue(this.form.isDirty());
 159         }
 160     }));
 161
 162     suite.add(new Y.Test.Case({
 163         name: 'performing actions'
 164     }));
 165
 166     suite.add(new Y.Test.Case({
 167         name: 'submission'
 168     }));
 169
 170     suite.add(new Y.Test.Case({
 171         name: 'loading, resetting and updating records',
 172
 173         setUp: function() {
 174             this.form = buildForm();
 175
 176             this.item1 = buildFormItem({id: 'name'});
 177             this.item2 = buildFormItem({id: 'email'});
 178             this.item3 = buildFormItem({id: 'phone'});
 179
 180             this.form.add(this.item1, this.item2, this.item3);
 181         },
 182
 183         testReset: function() {
 184             var resetCount = 0;
 185             var reset = function() {
 186                 resetCount ++;
 187             };
 188
 189             this.item1.reset = reset;
 190             this.item2.reset = reset;
 191             this.item3.reset = reset;
 192
 193             this.form.reset();
 194             assert.areEqual(3, resetCount);
 195         }
 196     }));
 197
 198     suite.add(new Y.Test.Case({
 199         name: 'finding fields',
 200
 201         setUp: function() {
 202             this.form = buildForm();
 203
 204             this.item1 = buildFormItem({id: 'name', dataIndex: 'someDataIndex'});
 205             this.item2 = buildFormItem({id: 'email'});
 206             this.item3 = buildFormItem({id: 'phone', name: 'phone number'});
 207
 208             this.form.add(this.item1, this.item2, this.item3);
 209         },
 210
 211         testfindByItemId: function() {
 212             assert.areEqual(this.item3, this.form.findField(this.item3.itemId));
 213         },
 214
 215         testFindById: function() {
 216             assert.areEqual(this.item2, this.form.findField('email'));
 217         },
 218
 219         testFindByDataIndex: function() {
 220             assert.areEqual(this.item1, this.form.findField('someDataIndex'));
 221         },
 222
 223         testFindByName: function() {
 224             assert.areEqual(this.item3, this.form.findField('phone number'));
 225         }
 226     }));
 227
 228     suite.add(new Y.Test.Case({
 229         name: 'marking invalid',
 230
 231         setUp: function() {
 232             this.form = buildForm();
 233
 234             this.item1 = buildFormItem({id: 'name'});
 235             this.item2 = buildFormItem({id: 'email'});
 236             this.item3 = buildFormItem({id: 'phone'});
 237
 238             this.form.add(this.item1, this.item2, this.item3);
 239         },
 240
 241         testMarkInvalidWithObject: function() {
 242             var wasCalled = false, message;
 243
 244             this.item1.markInvalid = function(msg) {
 245                 wasCalled = true;
 246                 message = msg;
 247             };
 248
 249             this.form.markInvalid({
 250                 name: 'is a bad name'
 251             });
 252
 253             assert.isTrue(wasCalled);
 254             assert.areEqual('is a bad name', message);
 255         },
 256
 257         testMarkInvalidWithArray: function() {
 258             var wasCalled = false, message;
 259
 260             this.item2.markInvalid = function(msg) {
 261                 wasCalled = true;
 262                 message = msg;
 263             };
 264
 265             this.form.markInvalid([{id: 'email', msg: 'is the wrong format'}]);
 266
 267             assert.isTrue(wasCalled);
 268             assert.areEqual('is the wrong format', message);
 269         },
 270
 271         testClearInvalid: function() {
 272             var clearCount = 0;
 273             var clearInvalid = function() {
 274                 clearCount ++;
 275             };
 276
 277             this.item1.clearInvalid = clearInvalid;
 278             this.item2.clearInvalid = clearInvalid;
 279             this.item3.clearInvalid = clearInvalid;
 280
 281             this.form.clearInvalid();
 282             assert.areEqual(3, clearCount);
 283         }
 284     }));
 285
 286     suite.add(new Y.Test.Case({
 287         name: 'setting values',
 288
 289         setUp: function() {
 290             this.form = buildForm({
 291                 trackResetOnLoad: true
 292             });
 293
 294             this.item1 = buildFormItem({name: 'name',  getValue: function() {return 'ed'; }});
 295             this.item2 = buildFormItem({name: 'email'});
 296             this.item3 = buildFormItem({name: 'phone', getValue: function() {return '333';}});
 297
 298             this.form.add(this.item1, this.item2, this.item3);
 299         },
 300
 301         testSetByObject: function() {
 302             var called = false, value;
 303
 304             this.item1.setValue = function(val) {
 305                 wasCalled = true;
 306                 value = val;
 307             };
 308
 309             this.form.setValues({name: 'my name'});
 310
 311             assert.isTrue(wasCalled);
 312             assert.areEqual('my name', value);
 313         },
 314
 315         testSetByArray: function() {
 316             var called = false, value;
 317
 318             this.item1.setValue = function(val) {
 319                 wasCalled = true;
 320                 value = val;
 321             };
 322
 323             this.form.setValues([{id: 'name', value: 'my name'}]);
 324
 325             assert.isTrue(wasCalled);
 326             assert.areEqual('my name', value);
 327         },
 328
 329         testSavesOriginalValue: function() {
 330             this.form.setValues({'phone': '444'});
 331
 332             assert.areEqual('333', this.item3.originalValue);
 333         }
 334     }));
 335
 336     suite.add(new Y.Test.Case({
 337         name: 'getting values',
 338
 339         setUp: function() {
 340             this.form = buildForm();
 341
 342             this.item1 = buildFormItem({name: 'name',  getValue: function() {return 'Edward';}});
 343             this.item2 = buildFormItem({name: 'email', getValue: function() {return 'ed@extjs.com';}});
 344             this.item3 = buildFormItem({name: 'phone', getValue: function() {return '333';}});
 345
 346             this.form.add(this.item1, this.item2, this.item3);
 347         },
 348
 349         testGetFieldValues: function() {
 350             var values = this.form.getFieldValues();
 351
 352             assert.areEqual('Edward', values.name);
 353             assert.areEqual('ed@extjs.com', values.email);
 354             assert.areEqual('333', values.phone);
 355         },
 356
 357         testGetFieldValuesWithArray: function() {
 358             //adding a second item with the same name should result in an array being returned
 359             this.item4 = buildFormItem({
 360                 name    : 'name',
 361                 getValue: function() {return 200;}
 362             });
 363
 364             this.form.add(this.item4);
 365
 366             var values = this.form.getFieldValues();
 367
 368             assert.areEqual(2,        values.name.length);
 369             assert.areEqual('Edward', values.name[0]);
 370             assert.areEqual(200,      values.name[1]);
 371         },
 372
 373         testGetDirtyFieldValues: function() {
 374             this.item1.isDirty = function() {return true;};
 375
 376             var values = this.form.getFieldValues(true);
 377
 378             assert.areEqual('Edward', values.name);
 379             assert.isUndefined(values.email);
 380             assert.isUndefined(values.phone);
 381         },
 382
 383         testGetValuesForSubmission: function() {
 384             //pending
 385         }
 386     }));
 387
 388     suite.add(new Y.Test.Case({
 389         name: 'adding and removing',
 390
 391         setUp: function() {
 392             this.form = buildForm();
 393
 394             this.item1 = buildFormItem({id: 'name'});
 395             this.item2 = buildFormItem({id: 'email'});
 396             this.item3 = buildFormItem({id: 'phone'});
 397
 398             this.form.add(this.item1);
 399         },
 400
 401         testAddField: function() {
 402             var count = this.form.items.getCount();
 403
 404             this.form.add(this.item2);
 405
 406             assert.areEqual(count + 1, this.form.items.getCount());
 407         },
 408
 409         testAddMultipleFields: function() {
 410             var count = this.form.items.getCount();
 411
 412             this.form.add(this.item2, this.item3);
 413
 414             assert.areEqual(count + 2, this.form.items.getCount());
 415         },
 416
 417         testAddReturnsForm: function() {
 418             assert.areEqual(this.form, this.form.add(this.item2));
 419         },
 420
 421         testRemoveField: function() {
 422             var count = this.form.items.getCount();
 423
 424             this.form.remove(this.item1);
 425
 426             assert.areEqual(count - 1, this.form.items.getCount());
 427         },
 428
 429         testRemoveReturnsForm: function() {
 430             assert.areEqual(this.form, this.form.remove(this.item1));
 431         }
 432     }));
 433 })();