Changeset View
Changeset View
Standalone View
Standalone View
externals/javelin/src/lib/__tests__/DOM.js
- This file was added.
| /** | |||||
| * @requires javelin-uri javelin-php-serializer | |||||
| */ | |||||
| describe('JX.DOM', function() { | |||||
| describe('uniqID', function() { | |||||
| it('must expect the unexpected', function() { | |||||
| // Form with an in <input /> named "id", which collides with the "id" | |||||
| // attribute. | |||||
| var form_id = JX.$N('form', {}, JX.$N('input', {name : 'id'})); | |||||
| var form_ok = JX.$N('form', {}, JX.$N('input', {name : 'ok'})); | |||||
| // Test that we avoid issues when "form.id" is actually the node named | |||||
| // "id". | |||||
| var id = JX.DOM.uniqID(form_id); | |||||
| expect(typeof id).toBe('string'); | |||||
| expect(!!id).toBe(true); | |||||
| var ok = JX.DOM.uniqID(form_ok); | |||||
| expect(typeof ok).toBe('string'); | |||||
| expect(!!ok).toBe(true); | |||||
| expect(id).toNotEqual(ok); | |||||
| }); | |||||
| }); | |||||
| describe('invoke', function() { | |||||
| it('should invoke custom events', function() { | |||||
| var span = JX.$N('span', 'test'); | |||||
| var div = JX.$N('div', {}, span); | |||||
| var data = { duck: 'quack' }; | |||||
| var invoked = false; | |||||
| var bubbled = false; | |||||
| JX.DOM.listen(span, 'custom', null, function(event) { | |||||
| expect(event.getTarget()).toBe(span); | |||||
| expect(event.getType()).toBe('custom'); | |||||
| expect(event.getData()).toBe(data); | |||||
| invoked = true; | |||||
| }); | |||||
| JX.DOM.listen(div, 'custom', null, function(event) { | |||||
| expect(event.getTarget()).toBe(span); // not div | |||||
| bubbled = true; | |||||
| }); | |||||
| JX.DOM.invoke(span, 'custom', data); | |||||
| expect(invoked).toBe(true); | |||||
| expect(bubbled).toBe(true); | |||||
| }); | |||||
| it('should not allow invoking native events', function() { | |||||
| ensure__DEV__(true, function() { | |||||
| expect(function() { | |||||
| JX.DOM.invoke(JX.$N('div'), 'click'); | |||||
| }).toThrow(); | |||||
| }); | |||||
| }); | |||||
| }); | |||||
| describe('setContent', function() { | |||||
| var node; | |||||
| beforeEach(function() { | |||||
| node = JX.$N('div'); | |||||
| }); | |||||
| it('should insert a node', function() { | |||||
| var content = JX.$N('p'); | |||||
| JX.DOM.setContent(node, content); | |||||
| expect(node.childNodes[0]).toEqual(content); | |||||
| expect(node.childNodes.length).toEqual(1); | |||||
| }); | |||||
| it('should insert two nodes', function() { | |||||
| var content = [JX.$N('p'), JX.$N('div')]; | |||||
| JX.DOM.setContent(node, content); | |||||
| expect(node.childNodes[0]).toEqual(content[0]); | |||||
| expect(node.childNodes[1]).toEqual(content[1]); | |||||
| expect(node.childNodes.length).toEqual(2); | |||||
| }); | |||||
| it('should accept a text node', function() { | |||||
| var content = 'This is not the text you are looking for'; | |||||
| JX.DOM.setContent(node, content); | |||||
| expect(node.innerText || node.textContent).toEqual(content); | |||||
| expect(node.childNodes.length).toEqual(1); | |||||
| }); | |||||
| it('should accept nodes and strings in an array', function() { | |||||
| var content = [ | |||||
| 'This is not the text you are looking for', | |||||
| JX.$N('div') | |||||
| ]; | |||||
| JX.DOM.setContent(node, content); | |||||
| expect(node.childNodes[0].nodeValue).toEqual(content[0]); | |||||
| expect(node.childNodes[1]).toEqual(content[1]); | |||||
| expect(node.childNodes.length).toEqual(2); | |||||
| }); | |||||
| it('should accept a JX.HTML instance', function() { | |||||
| var content = JX.$H('<div />'); | |||||
| JX.DOM.setContent(node, content); | |||||
| // Can not rely on an equals match because JX.HTML creates nodes on | |||||
| // the fly | |||||
| expect(node.childNodes[0].tagName).toEqual('DIV'); | |||||
| expect(node.childNodes.length).toEqual(1); | |||||
| }); | |||||
| it('should accept multiple JX.HTML instances', function() { | |||||
| var content = [JX.$H('<div />'), JX.$H('<a href="#"></a>')]; | |||||
| JX.DOM.setContent(node, content); | |||||
| expect(node.childNodes[0].tagName).toEqual('DIV'); | |||||
| expect(node.childNodes[1].tagName).toEqual('A'); | |||||
| expect(node.childNodes.length).toEqual(2); | |||||
| }); | |||||
| it('should accept nested arrays', function() { | |||||
| var content = [['a', 'b'], 'c']; | |||||
| JX.DOM.setContent(node, content); | |||||
| expect(node.childNodes.length).toEqual(3); | |||||
| }); | |||||
| it('should retain order when prepending', function() { | |||||
| var content = [JX.$N('a'), JX.$N('b')]; | |||||
| JX.DOM.setContent(node, JX.$N('div')); | |||||
| JX.DOM.prependContent(node, content); | |||||
| expect(node.childNodes[0].tagName).toEqual('A'); | |||||
| expect(node.childNodes[1].tagName).toEqual('B'); | |||||
| expect(node.childNodes[2].tagName).toEqual('DIV'); | |||||
| expect(node.childNodes.length).toEqual(3); | |||||
| }); | |||||
| it('should retain order when doing nested prepends', function() { | |||||
| // Note nesting. | |||||
| var content = [[JX.$N('a'), JX.$N('b')]]; | |||||
| JX.DOM.prependContent(node, content); | |||||
| expect(node.childNodes[0].tagName).toEqual('A'); | |||||
| expect(node.childNodes[1].tagName).toEqual('B'); | |||||
| expect(node.childNodes.length).toEqual(2); | |||||
| }); | |||||
| it('should ignore empty elements', function() { | |||||
| var content = [null, undefined, [], JX.$N('p'), 2, JX.$N('div'), false, | |||||
| [false, [0], [[]]], [[undefined], [,,,,,,,]]]; | |||||
| JX.DOM.setContent(node, content); | |||||
| expect(node.childNodes[0].tagName).toEqual('P'); | |||||
| expect(node.childNodes[2].tagName).toEqual('DIV'); | |||||
| expect(node.childNodes.length).toEqual(4); | |||||
| }); | |||||
| it('should fail when given an object with toString', function() { | |||||
| // This test is just documenting the behavior of an edge case, we could | |||||
| // later choose to support these objects. | |||||
| var content = {toString : function() { return 'quack'; }}; | |||||
| var ex; | |||||
| try { | |||||
| // We expect JX.DOM.setContent() to throw an exception when processing | |||||
| // this object, since it will try to append it directly into the DOM | |||||
| // and the browser will reject it, as it isn't a node. | |||||
| JX.DOM.setContent(node, content); | |||||
| } catch (exception) { | |||||
| ex = exception; | |||||
| } | |||||
| expect(!!ex).toBe(true); | |||||
| }); | |||||
| it('should not cause array order side effects', function() { | |||||
| var content = ['a', 'b']; | |||||
| var original = [].concat(content); | |||||
| JX.DOM.prependContent(node, content); | |||||
| expect(content).toEqual(original); | |||||
| }); | |||||
| it('should allow numbers', function() { | |||||
| var content = 3; | |||||
| JX.DOM.setContent(node, content); | |||||
| expect(node.innerText || node.textContent).toEqual('3'); | |||||
| }); | |||||
| it('should work by re-setting a value', function() { | |||||
| JX.DOM.setContent(node, 'text'); | |||||
| JX.DOM.setContent(node, 'another text'); | |||||
| expect(node.innerText || node.textContent).toEqual('another text'); | |||||
| }); | |||||
| }); | |||||
| }); | |||||