Specs/1.4client/Element/Element.js

   1 /*
   2 ---
   3 name: Element Specs
   4 description: n/a
   5 requires: [Core/Element.Event]
   6 provides: [Element.Event.Specs]
   7 ...
   8 */
   9 describe('Element', function(){
  10
  11         describe('Element.getProperty', function(){
  12
  13                 it('should remove the onunload method', function(){
  14                         var text;
  15                         var handler = function(){ text = 'nope'; };
  16                         window.addEvent('unload', handler);
  17                         window.removeEvent('unload', handler);
  18                         window.fireEvent('unload');
  19                         expect(text).toBe(undefined);
  20                 });
  21
  22                 it('should get the attrubte of a form when the form has an input with as ID the attribute name', function(){
  23                         var div = new Element('div');
  24                         div.innerHTML = '<form action="s"><input id="action"></form>';
  25                         expect($(div.firstChild).getProperty('action')).toEqual('s');
  26                 });
  27
  28                 it('should ignore expandos', function(){
  29                         var div = new Element('div');
  30                         expect(div.getProperty('inject')).toBeNull();
  31                 });
  32
  33                 it('should work in collaboration with setProperty', function(){
  34                         var div = new Element('div', {random: 'attribute'});
  35                         expect(div.getProperty('random')).toEqual('attribute');
  36                 });
  37
  38                 it('should get custom attributes in html', function(){
  39                         var div = new Element('div', {html: '<div data-load="typical"></div>'}).getFirst();
  40                         expect(div.get('data-load')).toEqual('typical');
  41
  42                         div = new Element('div', {html: '<div data-custom></div>'}).getFirst();
  43                         expect(div.get('data-custom')).toEqual('');
  44
  45                         div = new Element('div', {html: '<div data-custom="nested"><a data-custom="other"></a></div>'}).getFirst();
  46                         expect(div.get('data-custom')).toEqual('nested');
  47
  48                         div = new Element('div', {html: '<div><a data-custom="other"></a></div>'}).getFirst();
  49                         expect(div.get('data-custom')).toEqual(null);
  50
  51                         div = new Element('div', {html: '<a data-custom="singular" href="#">href</a>'}).getFirst();
  52                         expect(div.get('data-custom')).toEqual('singular');
  53
  54                         div = new Element('div', {html: '<div class="><" data-custom="evil attribute values"></div>'}).getFirst();
  55                         expect(div.get('data-custom')).toEqual('evil attribute values');
  56
  57                         div = new Element('div', {html: '<div class="> . <" data-custom="aggrevated evil attribute values"></div>'}).getFirst();
  58                         expect(div.get('data-custom')).toEqual('aggrevated evil attribute values');
  59
  60                         div = new Element('div', {html: '<a href="#"> data-custom="singular"</a>'}).getFirst();
  61                         expect(div.get('data-custom')).toEqual(null);
  62                 });
  63
  64
  65         });
  66
  67         describe('Element.set', function(){
  68
  69                 describe('value', function(){
  70
  71                         it('should return `null` when the value of a input element is set to `undefined`', function(){
  72                                 var value;
  73                                 expect(new Element('input', {value: value}).get('value')).toEqual('');
  74                         });
  75
  76                         it('should set a falsey value and not an empty string', function(){
  77                                 expect(new Element('input', {value: false}).get('value')).toEqual('false');
  78                                 expect(new Element('input', {value: 0}).get('value')).toEqual('0');
  79                         });
  80
  81                         it('should set the selected option for a select element to matching string w/o falsy matches', function(){
  82                                 var form = new Element('form');
  83                                 form.set('html', '<select>\
  84                                         <option value="">no value</option>\
  85                                         <option value="0">value 0</option>\
  86                                         <option value="1">value 1</option>\
  87                                         </select>');
  88                                 expect(form.getElement('select').set('value', 0).get('value')).toEqual('0');
  89                         });
  90
  91                 });
  92
  93                 describe('type', function(){
  94
  95                         it('should set the type of a button', function(){
  96                                 expect(new Element('button', {type: 'button'}).get('type')).toEqual('button');
  97                         });
  98
  99                 });
 100
 101                 describe('value as object with toString()', function(){
 102
 103                         it('should call the toString() method of a passed object', function(){
 104                                 var a = new Element('a').set('href', {toString: function(){ return '1'; }});
 105                                 expect(a.get('href')).toEqual('1');
 106                         });
 107
 108                 });
 109
 110         });
 111
 112         describe("Element.setProperty('type')", function(){
 113
 114                 it('should keep the input value after setting a input field to another type (submit button)', function(){
 115                         var input = new Element('input', {value: 'myValue', type: 'text'});
 116                         input.setProperty('type', 'submit');
 117                         expect(input.getProperty('value')).toEqual('myValue');
 118                 });
 119
 120                 it('should set the right type and value of input fields when a input field is created with CSS selectors', function(){
 121                         var input = new Element('input[type="submit"]', {value: 'myValue'});
 122                         expect(input.getProperty('value')).toEqual('myValue');
 123                 });
 124
 125         });
 126
 127         describe('Element.get', function(){
 128
 129                 describe('value', function(){
 130
 131                         it('should get the value of a option element when it does not have the value attribute', function(){
 132                                 var select = new Element('select').set('html', '<option>s</option>');
 133                                 expect(select.getElement('option').get('value')).toEqual('s');
 134                         });
 135
 136                         it('should return the text of the selected option for a select element', function(){
 137                                 var form = new Element('form');
 138                                 form.set('html', '<select>\
 139                                         <option>value 1</option>\
 140                                         <option>value 2</option>\
 141                                         <option selected>value 3</option>\
 142                                         <option>value 4</option>\
 143                                         </select>');
 144                                 expect(form.getElement('select').get('value')).toEqual('value 3');
 145                         });
 146
 147                         it('should return the text of the selected option for a multiple select element', function(){
 148                                 var form = new Element('form');
 149                                 form.set('html', '<select multiple>\
 150                                         <option>value 1</option>\
 151                                         <option selected>value 2</option>\
 152                                         <option selected>value 3</option>\
 153                                         <option>value 4</option>\
 154                                         </select>');
 155                                 expect(form.getElement('select').get('value')).toEqual('value 2');
 156                         });
 157
 158                         it('should return the text of the first option of aselect element', function(){
 159                                 var form = new Element('form');
 160                                 form.set('html', '<select>\
 161                                         <option>value 1</option>\
 162                                         <option>value 2</option>\
 163                                         </select>');
 164                                 expect(form.getElement('select').get('value')).toEqual('value 1');
 165                         });
 166
 167                         it('should return value of a select element', function(){
 168                                 var form = new Element('form');
 169                                 form.set('html', '<select multiple>\
 170                                         <option value="one">value 1</option>\
 171                                         <option selected value="two">value 2</option>\
 172                                         </select>');
 173                                 expect(form.getElement('select').get('value')).toEqual('two');
 174                         });
 175
 176                 });
 177
 178                 describe('text', function(){
 179
 180                         it('should return the original text with `text-transform: uppercase`', function(){
 181                                 var div = new Element('div', {html: '<div style="text-transform: uppercase">text</div>'});
 182                                 div.inject(document.body);
 183                                 expect($(div.firstChild).get('text')).toEqual('text');
 184                                 div.destroy();
 185                         });
 186
 187                 });
 188
 189         });
 190
 191         describe('tabIndex', function(){
 192
 193                 it('should get and set the correct tabIndex', function(){
 194                         var div = document.createElement('div');
 195                         div.innerHTML = '<input tabindex="2">';
 196                         expect($(div.firstChild).get('tabindex')).toEqual(2);
 197                         expect($(div.firstChild).set('tabindex', 3).get('tabindex')).toEqual(3);
 198                 });
 199
 200         });
 201
 202         if (document.createElement('video').canPlayType){
 203                 describe('Video/Audio loop, controls, and autoplay set/get attributes', function(){
 204
 205                         it('should set/get the boolean value of loop, controls, and autoplay', function(){
 206                                 var div = new Element('div', {html: '<video loop controls autoplay>'}),
 207                                         video = div.getElement('video');
 208
 209                                 if ('loop' in video){
 210                                         expect(video.getProperty('loop')).toBe(true);
 211                                         expect(video.setProperty('loop', false).getProperty('loop')).toBe(false);
 212                                 }
 213                                 expect(video.getProperty('controls')).toBe(true);
 214                                 expect(video.setProperty('controls', false).getProperty('controls')).toBe(false);
 215                                 expect(video.getProperty('autoplay')).toBe(true);
 216                                 expect(video.setProperty('autoplay', false).getProperty('autoplay')).toBe(false);
 217                         });
 218
 219                 });
 220         }
 221
 222         describe("Element.set('html')", function(){
 223
 224                 describe('HTML5 tags', function(){
 225
 226                         it('should create childNodes for html5 tags', function(){
 227                                 expect(new Element('div', {html: '<nav>Muu</nav><p>Tuuls</p><section>!</section>'}).childNodes.length).toEqual(3);
 228                         });
 229
 230                 });
 231
 232                 describe('Numbers', function(){
 233
 234                         it('should set a number (so no string) as html', function(){
 235                                 expect(new Element('div', {html: 20}).innerHTML).toEqual('20');
 236                         });
 237
 238                 });
 239
 240                 describe('Arrays', function(){
 241
 242                         it('should allow an Array as input, the text is concatenated', function(){
 243                                 expect(new Element('div', {html: ['moo', 'rocks', 'your', 'socks', 1]}).innerHTML).toEqual('moorocksyoursocks1');
 244                         });
 245
 246                 });
 247
 248         });
 249
 250         describe("Element.erase('html')", function(){
 251
 252                 it('should empty the html inside an element', function(){
 253                         expect(new Element('div', {html: '<p>foo bar</p>'}).erase('html').innerHTML).toEqual('');
 254                 });
 255
 256         });
 257
 258         describe('Element.clone', function(){
 259
 260                 it('should not crash IE for multiple clones', function(){
 261                         new Element('div', {
 262                                 html: '<ul id="testContainer"><li id="template"></li></ul>'
 263                         }).inject(document.body);
 264
 265                         var container = $('testContainer'),
 266                         template = container.getElement('li#template').dispose();
 267
 268                         template.clone().set('html', 'Clone #1').inject('testContainer');
 269                         template.clone().set('html', 'Clone #2').inject('testContainer');
 270
 271                         container.destroy();
 272                 });
 273
 274         });
 275
 276         describe('Element.erase', function(){
 277
 278                 var elements, subject, image, textarea;
 279
 280                 beforeEach(function(){
 281                         elements = [
 282                                 subject = new Element('div'),
 283                                 image = new Element('img'),
 284                                 textarea = new Element('div', {html: '<textarea id="t1">hello</textarea>'}).getFirst()
 285                         ].invoke('inject', document.body);
 286                 });
 287
 288                 afterEach(function(){
 289                         elements.invoke('destroy');
 290                 });
 291
 292                 it('should erase the class of an Element', function(){
 293                         subject.set('class', 'test');
 294                         subject.erase('class');
 295                         expect(subject.get('class')).toEqual(null);
 296                 });
 297
 298                 it('should erase the id of an Element', function(){
 299                         subject.set('id', 'test');
 300                         subject.erase('id');
 301                         expect(subject.get('id')).toEqual(null);
 302                 });
 303
 304                 it('should erase the random attribute of an Element', function(){
 305                         subject.set('random', 'test');
 306                         subject.erase('random');
 307                         expect(subject.get('random')).toEqual(null);
 308                 });
 309
 310                 it('should erase the value attribute of a textarea', function(){
 311                         textarea.erase('value');
 312                         expect(textarea.get('value')).toEqual('');
 313                 });
 314
 315         });
 316
 317 });