test: Add test case for inserting elements

dom-renderers/test/DOMRenderer.js

@@ -28,15 +28,15 @@ var test = require('tape');
 var DOMRenderer = require('../DOMRenderer');
 
 /**
- * Helpers method used for creating a mock compostior that fails on received
+ * Helpers method used for creating a mock compositor that fails on received
  * events. Used for ensuring that certain DOMRenderer methods don't (directly
  * or indirectly) trigger DOM events.
  *
  * @method createUnidirectionalCompositor
  * @private
  *
  * @param  {tape} t tape-test object
- * @return {Object} mock compostior
+ * @return {Object} mock compositor
  */
 function createUnidirectionalCompositor(t) {
     return {
@@ -47,7 +47,7 @@ function createUnidirectionalCompositor(t) {
 }
 
 test('DOMRenderer', function(t) {
-    t.test('basic DOM insertions', function(t) {
+    t.test('basic insertEl', function(t) {
         var element = document.createElement('div');
         var selector = 'selector';
         element.classList.add(selector);
@@ -96,6 +96,27 @@ test('DOMRenderer', function(t) {
         t.end();
     });
 
+    t.test('insertEl with content', function(t) {
+        var element = document.createElement('div');
+        var selector = 'selector';
+        var compositor = createUnidirectionalCompositor();
+        var domRenderer = new DOMRenderer(element, selector, compositor);
+
+        domRenderer.loadPath('selector/0/0/1');
+        domRenderer.findTarget();
+        domRenderer.insertEl('div');
+
+        t.equal(element.children.length, 1, 'domRenderer.insertEl should create a single DIV when no content is being set');
+        t.equal(element.children[0].children.length, 0, 'domRenderer.insertEl should not create a separate content DIV by default');
+
+        var content001 = 'hello world 1';
+        domRenderer.setContent(content001);
+        t.equal(element.children[0].children.length, 1, 'domRenderer.insertEl should wrap content in DIV');
+        t.equal(element.children[0].children[0].innerHTML, 'hello world 1', 'domRenderer.insertEl should wrap content in DIV');
+
+        t.end();
+    });
+
     t.test('setProperty method', function(t) {
         var element = document.createElement('div');
         var selector = 'selector';
@@ -266,4 +287,44 @@ test('DOMRenderer', function(t) {
 
         t.end();
     });
+
+    t.test('Man in the middle insertion', function(t) {
+        var element = document.createElement('div');
+        var selector = 'selector';
+        var compositor = createUnidirectionalCompositor();
+        var domRenderer = new DOMRenderer(element, selector, compositor);
+
+        domRenderer.loadPath('selector/0/0/1');
+        domRenderer.findTarget();
+        domRenderer.insertEl('div');
+
+        t.equal(element.children.length, 1, 'domRenderer.insertEl should create a single DIV when no content is being set');
+        t.equal(element.children[0].children.length, 0, 'domRenderer.insertEl should not create a separate content DIV by default');
+
+        domRenderer.loadPath('selector/0');
+        domRenderer.findTarget();
+        domRenderer.insertEl('section');
+
+        t.equal(element.children.length, 1, 'domRenderer.insertEl should insert second element in between root element and leaf node');
+        t.equal(element.children[0].tagName.toUpperCase(), 'SECTION', 'domRenderer.insertEl should insert using correct tagName');
+
+        t.equal(element.children[0].children.length, 1, 'domRenderer.insertEl should insert new element in between that has the previous leaf node as a child');
+        t.equal(element.children[0].children[0].tagName.toUpperCase(), 'DIV', 'domRenderer.insertEl should preserve tagName of previously inserted leaf node');
+
+        domRenderer.loadPath('selector/0/1');
+        domRenderer.findTarget();
+        domRenderer.insertEl('span');
+
+        t.equal(element.children[0].children.length, 2, 'domRenderer.insertEl should insert sibling');
+        t.equal(element.children[0].children[1].tagName.toUpperCase(), 'SPAN', 'domRenderer.insertEl should insert sibling using correct tagName');
+        t.equal(element.children[0].children[1].children.length, 0, 'domRenderer.insertEl should insert sibling as leaf node');
+
+        domRenderer.loadPath('selector/0');
+        domRenderer.findTarget();
+        domRenderer.setContent('hello world');
+
+        t.equal(element.children[0].children.length, 3, 'domRenderer.insertEl should preserve correct DOM nesting when wrapping content');
+
+        t.end();
+    });
 });