[Summary view] [Print] [Text view]

   1  /**
   2   * @requires javelin-uri javelin-php-serializer
   3   */
   4  describe('JX.DOM', function() {
   5  
   6    describe('uniqID', function() {
   7      it('must expect the unexpected', function() {
   8        // Form with an in <input /> named "id", which collides with the "id"
   9        // attribute.
  10        var form_id = JX.$N('form', {}, JX.$N('input', {name : 'id'}));
  11        var form_ok = JX.$N('form', {}, JX.$N('input', {name : 'ok'}));
  12  
  13        // Test that we avoid issues when "form.id" is actually the node named
  14        // "id".
  15        var id = JX.DOM.uniqID(form_id);
  16        expect(typeof id).toBe('string');
  17        expect(!!id).toBe(true);
  18  
  19        var ok = JX.DOM.uniqID(form_ok);
  20        expect(typeof ok).toBe('string');
  21        expect(!!ok).toBe(true);
  22  
  23        expect(id).toNotEqual(ok);
  24      });
  25    });
  26  
  27    describe('invoke', function() {
  28      it('should invoke custom events', function() {
  29        var span = JX.$N('span', 'test');
  30        var div = JX.$N('div', {}, span);
  31        var data = { duck: 'quack' };
  32  
  33        var invoked = false;
  34        var bubbled = false;
  35        JX.DOM.listen(span, 'custom', null, function(event) {
  36          expect(event.getTarget()).toBe(span);
  37          expect(event.getType()).toBe('custom');
  38          expect(event.getData()).toBe(data);
  39          invoked = true;
  40        });
  41        JX.DOM.listen(div, 'custom', null, function(event) {
  42          expect(event.getTarget()).toBe(span); // not div
  43          bubbled = true;
  44        });
  45        JX.DOM.invoke(span, 'custom', data);
  46        expect(invoked).toBe(true);
  47        expect(bubbled).toBe(true);
  48      });
  49  
  50      it('should not allow invoking native events', function() {
  51        ensure__DEV__(true, function() {
  52          expect(function() {
  53            JX.DOM.invoke(JX.$N('div'), 'click');
  54          }).toThrow();
  55        });
  56      });
  57    });
  58  
  59  
  60    describe('setContent', function() {
  61      var node;
  62  
  63      beforeEach(function() {
  64        node = JX.$N('div');
  65      });
  66  
  67      it('should insert a node', function() {
  68        var content = JX.$N('p');
  69  
  70        JX.DOM.setContent(node, content);
  71        expect(node.childNodes[0]).toEqual(content);
  72        expect(node.childNodes.length).toEqual(1);
  73      });
  74  
  75      it('should insert two nodes', function() {
  76        var content = [JX.$N('p'), JX.$N('div')];
  77  
  78        JX.DOM.setContent(node, content);
  79        expect(node.childNodes[0]).toEqual(content[0]);
  80        expect(node.childNodes[1]).toEqual(content[1]);
  81        expect(node.childNodes.length).toEqual(2);
  82      });
  83  
  84      it('should accept a text node', function() {
  85        var content = 'This is not the text you are looking for';
  86  
  87        JX.DOM.setContent(node, content);
  88        expect(node.innerText || node.textContent).toEqual(content);
  89        expect(node.childNodes.length).toEqual(1);
  90      });
  91  
  92      it('should accept nodes and strings in an array', function() {
  93        var content = [
  94          'This is not the text you are looking for',
  95          JX.$N('div')
  96        ];
  97  
  98        JX.DOM.setContent(node, content);
  99        expect(node.childNodes[0].nodeValue).toEqual(content[0]);
 100        expect(node.childNodes[1]).toEqual(content[1]);
 101        expect(node.childNodes.length).toEqual(2);
 102      });
 103  
 104      it('should accept a JX.HTML instance', function() {
 105        var content = JX.$H('<div />');
 106  
 107        JX.DOM.setContent(node, content);
 108        // Can not rely on an equals match because JX.HTML creates nodes on
 109        // the fly
 110        expect(node.childNodes[0].tagName).toEqual('DIV');
 111        expect(node.childNodes.length).toEqual(1);
 112      });
 113  
 114      it('should accept multiple JX.HTML instances', function() {
 115        var content = [JX.$H('<div />'), JX.$H('<a href="#"></a>')];
 116  
 117        JX.DOM.setContent(node, content);
 118        expect(node.childNodes[0].tagName).toEqual('DIV');
 119        expect(node.childNodes[1].tagName).toEqual('A');
 120        expect(node.childNodes.length).toEqual(2);
 121      });
 122  
 123      it('should accept nested arrays', function() {
 124        var content = [['a', 'b'], 'c'];
 125  
 126        JX.DOM.setContent(node, content);
 127        expect(node.childNodes.length).toEqual(3);
 128      });
 129  
 130      it('should retain order when prepending', function() {
 131        var content = [JX.$N('a'), JX.$N('b')];
 132  
 133        JX.DOM.setContent(node, JX.$N('div'));
 134        JX.DOM.prependContent(node, content);
 135  
 136        expect(node.childNodes[0].tagName).toEqual('A');
 137        expect(node.childNodes[1].tagName).toEqual('B');
 138        expect(node.childNodes[2].tagName).toEqual('DIV');
 139        expect(node.childNodes.length).toEqual(3);
 140      });
 141  
 142      it('should retain order when doing nested prepends', function() {
 143        // Note nesting.
 144        var content = [[JX.$N('a'), JX.$N('b')]];
 145  
 146        JX.DOM.prependContent(node, content);
 147  
 148        expect(node.childNodes[0].tagName).toEqual('A');
 149        expect(node.childNodes[1].tagName).toEqual('B');
 150        expect(node.childNodes.length).toEqual(2);
 151      });
 152  
 153      it('should ignore empty elements', function() {
 154        var content = [null, undefined, [], JX.$N('p'), 2, JX.$N('div'), false,
 155          [false, [0], [[]]], [[undefined], [,,,,,,,]]];
 156  
 157        JX.DOM.setContent(node, content);
 158        expect(node.childNodes[0].tagName).toEqual('P');
 159        expect(node.childNodes[2].tagName).toEqual('DIV');
 160        expect(node.childNodes.length).toEqual(4);
 161      });
 162  
 163      it('should fail when given an object with toString', function() {
 164        // This test is just documenting the behavior of an edge case, we could
 165        // later choose to support these objects.
 166  
 167        var content = {toString : function() { return 'quack'; }};
 168  
 169        var ex;
 170        try {
 171          // We expect JX.DOM.setContent() to throw an exception when processing
 172          // this object, since it will try to append it directly into the DOM
 173          // and the browser will reject it, as it isn't a node.
 174          JX.DOM.setContent(node, content);
 175        } catch (exception) {
 176          ex = exception;
 177        }
 178  
 179        expect(!!ex).toBe(true);
 180      });
 181  
 182      it('should not cause array order side effects', function() {
 183        var content = ['a', 'b'];
 184        var original = [].concat(content);
 185  
 186        JX.DOM.prependContent(node, content);
 187  
 188        expect(content).toEqual(original);
 189      });
 190  
 191      it('should allow numbers', function() {
 192        var content = 3;
 193  
 194        JX.DOM.setContent(node, content);
 195        expect(node.innerText || node.textContent).toEqual('3');
 196      });
 197  
 198      it('should work by re-setting a value', function() {
 199        JX.DOM.setContent(node, 'text');
 200        JX.DOM.setContent(node, 'another text');
 201  
 202        expect(node.innerText || node.textContent).toEqual('another text');
 203      });
 204    });
 205  
 206  });