WIP: Refactoring canvas api - canvas, canvasNode + tests

todo: integration into the rest of the documentCanvas module
and its helper modules

diff --git a/modules/documentCanvas/canvas.js b/modules/documentCanvas/canvas.js
index 0d4ad75..c2f6c85 100644 (file)
--- a/modules/documentCanvas/canvas.js
+++ b/modules/documentCanvas/canvas.js
@@ -2,88 +2,79 @@ define([
 'libs/jquery-1.9.1.min',\r
 'libs/underscore-min',\r
 'modules/documentCanvas/transformations',\r
-'modules/documentCanvas/wlxmlNode',\r
+'modules/documentCanvas/canvasNode',\r
 'libs/text!./template.html'\r
-], function($, _, transformations, wlxmlNode, template) {\r
+], function($, _, transformations, canvasNode, template) {\r
 \r
 'use strict';\r
 \r
-var Canvas = function(xml) {\r
+var Canvas = function(html) {\r
     this.dom = $(template);\r
     this.content = this.dom.find('#rng-module-documentCanvas-content');\r
-    this.setXML(xml);\r
-}\r
-\r
-Canvas.prototype.setXML = function(xml) {\r
-    this.xml = $.trim(xml);\r
-    this.content.html(transformations.fromXML.getHTMLTree(this.xml));  \r
-}\r
+    if(html) {\r
+        this.content.html(html);\r
+    }\r
+};\r
 \r
-Canvas.prototype.toXML = function() {\r
-    return transformations.toXML.getXML(this.content.html());\r
-}\r
+Canvas.prototype.getContent = function() {\r
+    return this.content.contents();\r
+};\r
 \r
-Canvas.prototype.getNode = function(desc) {\r
+Canvas.prototype.findNodes = function(desc) {\r
     var selector = '';\r
-    if(desc.klass)\r
-        selector += '[wlxml-class=' + desc.klass + ']';\r
-    if(desc.tag)\r
-        selector += '[wlxml-tag=' + desc.tag + ']';\r
+    if(typeof desc === 'string') {\r
+        selector = desc;\r
+    }\r
+    else {\r
+        if(desc.klass)\r
+            selector += '[wlxml-class=' + desc.klass + ']';\r
+        if(desc.tag)\r
+            selector += '[wlxml-tag=' + desc.tag + ']';\r
+    }\r
     var toret = [];\r
     this.content.find(selector).each(function() {\r
-        toret.push(new wlxmlNode.Node($(this)));\r
+        toret.push(canvasNode.create($(this)));\r
     });\r
     return toret;\r
-}\r
-\r
-Canvas.prototype.getPreviousNode = function(options) {\r
-    var element = $(this.content.find('#' + options.node.id).get(0));\r
-    var prev = element.prev()\r
-    if(prev.length === 0)\r
-        prev = element.parent();\r
-    return new wlxmlNode.Node(prev);\r
-}\r
-\r
-Canvas.prototype._createNode = function(wlxmlTag, wlxmlClass) {\r
-            var toBlock = ['div', 'document', 'section', 'header'];\r
-            var htmlTag = _.contains(toBlock, wlxmlTag) ? 'div' : 'span';\r
-            var toret = $('<' + htmlTag + '>');\r
-            toret.attr('wlxml-tag', wlxmlTag);\r
-            if(wlxmlClass)\r
-                toret.attr('wlxml-class', wlxmlClass);\r
-            toret.attr('id', 'xxxxxxxx-xxxx-xxxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {var r = Math.random()*16|0,v=c=='x'?r:r&0x3|0x8;return v.toString(16);}));\r
-            return toret;\r
-        };\r
-\r
-Canvas.prototype.insertNode = function(options) {\r
-    var element = $(this.content.find('#' + options.context.id).get(0));\r
-    if(options.place == 'after') {\r
-        var node = this._createNode(options.tag, options.klass);\r
-        element[options.place](node);\r
-        return node;\r
-    }\r
-    else if(options.place == 'wrapText') {\r
-        var elementContents = element.contents();\r
-        if(elementContents.length !== 1 || elementContents.get(0).nodeType != 3)\r
-            return false;\r
-        var textElement = elementContents.get(0);\r
-\r
-        var prefix = textElement.data.substr(0, options.offsetStart);\r
-        var suffix = textElement.data.substr(options.offsetEnd);\r
-        var core = textElement.data.substr(options.offsetStart, options.offsetEnd - options.offsetStart);\r
-        var newNode = this._createNode(options.tag, options.klass);\r
-        newNode.text(core);\r
-        $(textElement).replaceWith(newNode);\r
-        newNode.before(prefix);\r
-        newNode.after(suffix);\r
-        return newNode;\r
+};\r
+\r
+Canvas.prototype.nodeAppend = function(options) {\r
+    var element; // = $(this.content.find('#' + options.context.id).get(0));\r
+    if(options.to === 'root') {\r
+        element = this.content;\r
+    } else {\r
+        element = $(this.content.find('#' + options.to.getId()).get(0));\r
     }\r
-}\r
+    element.append(options.node.dom);\r
+};\r
+\r
+Canvas.prototype.nodeInsertAfter = function(options) {\r
+    var element = $(this.content.find('#' + options.after.getId()).get(0));\r
+    element.after(options.node.dom);\r
+};\r
+\r
+Canvas.prototype.nodeWrap = function(options) {\r
+    var element = $(this.content.find('#' + options.inside.getId()).get(0));\r
 \r
-Canvas.prototype.splitNode = function(options) {\r
+    var elementContents = element.contents();\r
+    if(elementContents.length !== 1 || elementContents.get(0).nodeType != 3)\r
+        return false;\r
+    var textElement = elementContents.get(0);\r
+\r
+    var prefix = textElement.data.substr(0, options.offsetStart);\r
+    var suffix = textElement.data.substr(options.offsetEnd);\r
+    var core = textElement.data.substr(options.offsetStart, options.offsetEnd - options.offsetStart);\r
+    options._with.setContent(core);\r
+\r
+    $(textElement).replaceWith(options._with.dom);\r
+    options._with.dom.before(prefix);\r
+    options._with.dom.after(suffix);\r
+};\r
+\r
+Canvas.prototype.nodeSplit = function(options) {\r
     options = _.extend({textNodeIdx: 0}, options);\r
     \r
-    var nodeToSplit = $(this.content.find('#' + options.node.id).get(0));\r
+    var nodeToSplit = $(this.content.find('#' + options.node.getId()).get(0));\r
     \r
     var nodeContents = nodeToSplit.contents();\r
     if(nodeContents.length === 0 || \r
@@ -103,30 +94,29 @@ Canvas.prototype.splitNode = function(options) {
             passed = true;\r
     });\r
     \r
-    var prefix = textNode.text().substr(0, options.offset);\r
-    var suffix = textNode.text().substr(options.offset);\r
+    var prefix = $.trim(textNode.text().substr(0, options.offset));\r
+    var suffix = $.trim(textNode.text().substr(options.offset));\r
     \r
     textNode.before(prefix);\r
     textNode.remove();\r
     \r
-    var newNode = this._createNode(nodeToSplit.attr('wlxml-tag'), nodeToSplit.attr('wlxml-class'));\r
-    newNode.append(suffix);\r
+    var newNode = canvasNode.create({tag: nodeToSplit.attr('wlxml-tag'), klass: nodeToSplit.attr('wlxml-class')});\r
+    newNode.dom.append(suffix);\r
     succeedingNodes.forEach(function(node) {\r
-        newNode.append(node)\r
+        newNode.dom.append(node)\r
     });\r
-    nodeToSplit.after(newNode);\r
+    nodeToSplit.after(newNode.dom);\r
     return newNode;\r
-}\r
+};\r
 \r
-Canvas.prototype.removeNode = function(options) {\r
-    var toRemove = $(this.content.find('#' + options.node.id).get(0));\r
+Canvas.prototype.nodeRemove = function(options) {\r
+    var toRemove = $(this.content.find('#' + options.node.getId()).get(0));\r
     toRemove.remove();\r
+};\r
 \r
-}\r
-\r
-Canvas.prototype.createList = function(options) {\r
-    var element1 = $(this.content.find('#' + options.start.id).get(0));\r
-    var element2 = $(this.content.find('#' + options.end.id).get(0));\r
+Canvas.prototype.listCreate = function(options) {\r
+    var element1 = $(this.content.find('#' + options.start.getId()).get(0));\r
+    var element2 = $(this.content.find('#' + options.end.getId()).get(0));\r
     if(!element1.parent().get(0).isSameNode(element2.parent().get(0)))\r
         return false;\r
         \r
@@ -137,7 +127,6 @@ Canvas.prototype.createList = function(options) {
         element1 = element2;\r
         element2 = tmp;\r
     }\r
-        \r
     \r
     var nodesToWrap = [];\r
     \r
@@ -150,7 +139,7 @@ Canvas.prototype.createList = function(options) {
         if(place === 'inside') {\r
             var $node;\r
             if(node.nodeType === 3) {\r
-                $node = canvas._createNode('div').text(node.data);\r
+                $node = canvasNode.create({tag: 'div', content: $.trim(node.data)}).dom; //canvas._createNode('div').text(node.data);\r
                 $(node).remove();\r
             }\r
             else {\r
@@ -163,38 +152,47 @@ Canvas.prototype.createList = function(options) {
             return false;\r
     });\r
     \r
-    var list = this._createNode('div', 'list-items');\r
+    var list = canvasNode.create({tag: 'div', klass: 'list-items'}).dom; //this._createNode('div', 'list-items');\r
     element1.before(list);\r
     \r
     nodesToWrap.forEach(function(node) {\r
         node.remove();\r
         list.append(node);\r
     });\r
-}\r
+};\r
 \r
-Canvas.prototype.removeList = function(options) {\r
-    var pointerElement = $(this.content.find('#' + options.pointer.id));\r
-    var listElement = options.pointer.klass === 'list-items' ? pointerElement : \r
+Canvas.prototype.listRemove = function(options) {\r
+    var pointerElement = $(this.content.find('#' + options.pointer.getId()));\r
+    var listElement = options.pointer.getClass() === 'list-items' ? pointerElement : \r
         pointerElement.parent('[wlxml-class="list-items"][wlxml-tag]');\r
     \r
     listElement.find('[wlxml-class=item]').each(function() {\r
-        $(this).attr('wlxml-class', '');\r
-    });;\r
+        $(this).removeAttr('wlxml-class');\r
+    });\r
     listElement.children().unwrap();\r
-    \r
-}\r
+};\r
+\r
+Canvas.prototype.getPrecedingNode = function(options) {\r
+    var element = $(this.content.find('#' + options.node.getId()).get(0));\r
+    var prev = element.prev()\r
+    if(prev.length === 0)\r
+        prev = element.parent();\r
+    return canvasNode.create(prev);\r
+};\r
 \r
-Canvas.prototype.insideList = function(options) {\r
+Canvas.prototype.nodeInsideList = function(options) {\r
     if(options.pointer) {\r
-        if(options.pointer.klass === 'list-items' || options.pointer.klass === 'item')\r
+        if(options.pointer.getClass() === 'list-items' || options.pointer.getClass() === 'item')\r
             return true;\r
-        var pointerElement = $(this.content.find('#' + options.pointer.id));\r
-        return pointerElement.parents('list-items').length > 0;\r
+        var pointerElement = $(this.content.find('#' + options.pointer.getId()));\r
+        return pointerElement.parents('list-items, item').length > 0;\r
     }\r
     return false;\r
-}\r
+};\r
 \r
 \r
-return {Canvas: Canvas, Node: Node};\r
+return {\r
+    create: function(desc) { return new Canvas(desc); }\r
+};\r
 \r
 });
\ No newline at end of file

diff --git a/modules/documentCanvas/canvasNode.js b/modules/documentCanvas/canvasNode.js
new file mode 100644 (file)
index 0000000..0bfd358
--- /dev/null
+++ b/modules/documentCanvas/canvasNode.js
@@ -0,0 +1,56 @@
+define(['libs/jquery-1.9.1.min'], function($) {\r
+\r
+'use strict';\r
+\r
+var CanvasNode = function(desc) {\r
+    if(desc instanceof $) {\r
+        this.dom = desc;\r
+        if(!this.dom.attr('id')) {\r
+            this.dom.attr('id', 'xxxxxxxx-xxxx-xxxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {var r = Math.random()*16|0,v=c=='x'?r:r&0x3|0x8;return v.toString(16);}));\r
+        }\r
+    } else {\r
+        var toBlock = ['div', 'document', 'section', 'header'];\r
+        var htmlTag = _.contains(toBlock, desc.tag) ? 'div' : 'span';\r
+        this.dom = $('<' + htmlTag + '>');\r
+        this.dom.attr('wlxml-tag', desc.tag);\r
+        if(desc.klass)\r
+            this.dom.attr('wlxml-class', desc.klass);\r
+        if(desc.content)\r
+            this.dom.text(desc.content);\r
+        this.dom.attr('id', 'xxxxxxxx-xxxx-xxxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {var r = Math.random()*16|0,v=c=='x'?r:r&0x3|0x8;return v.toString(16);}));\r
+    }\r
+};\r
+\r
+CanvasNode.prototype.getTag = function() {\r
+    return this.dom.attr('wlxml-tag');\r
+}\r
+\r
+CanvasNode.prototype.getClass = function() {\r
+    return this.dom.attr('wlxml-class');\r
+}\r
+\r
+CanvasNode.prototype.getId = function() {\r
+    return this.dom.attr('id');\r
+}\r
+\r
+CanvasNode.prototype.getContent = function() {\r
+    return this.dom.text();\r
+}\r
+\r
+CanvasNode.prototype.setContent = function(content) {\r
+    this.dom.text(content);\r
+}\r
+\r
+CanvasNode.prototype.isSame = function(other) {\r
+    return this.dom.get(0).isSameNode(other.dom.get(0));\r
+}\r
+\r
+return {\r
+    create: function(desc) {\r
+        return new CanvasNode(desc);\r
+    }\r
+\r
+}\r
+    \r
+\r
+});
\ No newline at end of file

diff --git a/modules/documentCanvas/template.html b/modules/documentCanvas/template.html
index b4d7dd7..c973f1b 100644 (file)
--- a/modules/documentCanvas/template.html
+++ b/modules/documentCanvas/template.html
@@ -1,8 +1,7 @@
 <div id="rng-module-documentCanvas">\r
     <div id="rng-module-documentCanvas-mainArea">\r
         <div id="rng-module-documentCanvas-contentWrapper">\r
-            <div id="rng-module-documentCanvas-content" contenteditable="true">\r
-            </div>\r
+            <div id="rng-module-documentCanvas-content" contenteditable="true"></div>\r
         </div>\r
     </div>\r
 </div>
\ No newline at end of file

diff --git a/modules/documentCanvas/tests/canvas.test.js b/modules/documentCanvas/tests/canvas.test.js
index 53bd35d..0589c11 100644 (file)
--- a/modules/documentCanvas/tests/canvas.test.js
+++ b/modules/documentCanvas/tests/canvas.test.js
@@ -2,181 +2,177 @@ define([
 'libs/jquery-1.9.1.min',\r
 'libs/chai', \r
 './utils.js',\r
-'modules/documentCanvas/canvas'\r
-], function($, chai, utils, canvas) {\r
+'modules/documentCanvas/canvas',\r
+'modules/documentCanvas/canvasNode'\r
+], function($, chai, utils, canvas, canvasNode) {\r
 \r
     'use strict';\r
 \r
     var assert = chai.assert;\r
+    var assertDomEqual = utils.assertDomEqual;\r
     \r
-    assert.xmlEqual = function(lhsText, rhsText) {\r
-        var cleanLhs = utils.cleanUp(lhsText);\r
-        var cleanRhs = utils.cleanUp(rhsText);\r
-        \r
-        var lhs = $(cleanLhs);\r
-        var rhs = $(cleanRhs);\r
-        \r
-        this.equal(lhs.length, 1);\r
-        this.equal(rhs.length, 1);\r
-        \r
-        lhs = lhs.get(0);\r
-        rhs = rhs.get(0);\r
-        \r
-        var test = lhs.isEqualNode(rhs);\r
-        if(!test) {\r
-            console.log(cleanLhs);\r
-            console.log(cleanRhs);    \r
-        }\r
-        return this.ok(test, 'xmls are equal');\r
-    };\r
     \r
-    var retrievingTest = function(title, xml) {\r
-        test(title, function() {\r
-            var c = new canvas.Canvas(xml);\r
-            assert.xmlEqual(c.toXML(), xml);    \r
+    suite('Quering nodes', function() {\r
+        test('getting preceding node', function() {\r
+            var c = canvas.create('<div wlxml-tag="section"><div wlxml-tag="p">a</div><div wlxml-tag="p">b</div></div>');\r
+            var secondP = c.findNodes({tag: 'p'})[1];\r
+            var firstP = c.getPrecedingNode({node: secondP});\r
+            assert.equal(firstP.getContent(), 'a');\r
         });\r
-    };\r
-    \r
-    suite('Basic document retrieving', function() {\r
-        test('empty document', function() {\r
-            var c = new canvas.Canvas('');\r
-            assert.equal(c.toXML(), '');\r
+        \r
+       test('pervious node of node without "previous siblings" is its parent', function() {\r
+            var c = canvas.create('<div wlxml-tag="section"><div wlxml-tag="p">a</div></div>');\r
+            var paragraph = c.findNodes({tag: 'p'})[0];\r
+            assert.equal(c.getPrecedingNode({node: paragraph}).getTag(), 'section');\r
         });\r
-        retrievingTest('empty tag', '<section></section>');\r
-        retrievingTest('tag with content', '<section>Some text</section>');\r
-        retrievingTest('tag with class', '<section class="some.class"></section>');\r
+    \r
     });\r
     \r
-    suite('Nodes', function() {\r
-        test('getting nodes via selector', function() {\r
-            var c = new canvas.Canvas('<section><header class="some.class">Header 1</header></section>');\r
-            var header = c.getNode({tag: 'header'})[0];\r
-            assert.equal(header.tag, 'header');\r
-            assert.equal(header.klass, 'some-class');\r
-        });\r
+    \r
+    suite('Inserting nodes', function() {\r
+        test('append node to root', function() {\r
+            var c = canvas.create();\r
+            var node = canvasNode.create({tag: 'header', klass: 'some-class'});\r
+            c.nodeAppend({node: node, to: 'root'});\r
+            assertDomEqual(c.getContent(), '<div wlxml-tag="header" wlxml-class="some-class">');\r
+        }); \r
         \r
-        test('getting previous node', function() {\r
-            var c = new canvas.Canvas('<section><div class="some.class">Div 1</div><div class="some.other.class">Div 2</div></section>');\r
-            var secondDiv = c.getNode({tag: 'div'})[1];\r
-            var firstDiv = c.getPreviousNode({node: secondDiv});\r
-            assert.equal(firstDiv.klass, 'some-class');\r
-        })\r
+        test('append node to another node', function() {\r
+            var c = canvas.create('<div wlxml-tag="section"></div>');\r
+            var node = canvasNode.create({tag: 'header', klass: 'some-class'});\r
+            var to = c.findNodes('div')[0];\r
+            c.nodeAppend({node: node, to: to});\r
+            assertDomEqual(c.getContent(), '<div wlxml-tag="section"><div wlxml-tag="header" wlxml-class="some-class"></div></div>');\r
+        });\r
         \r
-        test('pervious node of node without "previous siblings" is its parent', function() {\r
-            var c = new canvas.Canvas('<section><div class="some.class">Div 1</div></section>');\r
-            var div = c.getNode({tag: 'div'})[0];\r
-            var section = c.getPreviousNode({node: div});\r
-            assert.equal(section.tag, 'section');\r
-        })\r
-    \r
-        test('inserting after', function() {\r
-            var c = new canvas.Canvas('<section><header>Header 1</header></section>');\r
-            var header = c.getNode({tag: 'header'})[0];\r
-            c.insertNode({place: 'after', context: header, tag: 'div', klass: 'some.class'});\r
-            assert.xmlEqual(c.toXML(), '<section><header>Header 1</header><div class="some.class"></div></section>');\r
+        test('insert node after another node', function() {\r
+            var c = canvas.create('<div wlxml-tag="section"></div>');\r
+            var node = canvasNode.create({tag: 'header', klass: 'some-class'});\r
+            var after = c.findNodes('div')[0];\r
+            c.nodeInsertAfter({node: node, after: after});\r
+            assertDomEqual(c.getContent(), '<div wlxml-tag="section"></div><div wlxml-tag="header" wlxml-class="some-class"></div>');        \r
         });\r
         \r
         test('wrap text in node', function() {\r
-            var c = new canvas.Canvas('<section><header>Header 1</header></section>');\r
-            var header = c.getNode({tag: 'header'})[0];\r
-            c.insertNode({place: 'wrapText', context: header, tag: 'span', klass: 'url', offsetStart: 1, offsetEnd: 6});\r
-            assert.xmlEqual(c.toXML(), '<section><header>H<span class="url">eader</span> 1</header></section>');\r
+            var c = canvas.create('<div wlxml-tag="section"><div wlxml-tag="header">Header 1</div></div>');\r
+            var header = c.findNodes({tag: 'header'})[0];\r
+            var wrapper = canvasNode.create({tag: 'aside'});\r
+            c.nodeWrap({inside: header, _with: wrapper, offsetStart: 1, offsetEnd: 6})\r
+            assertDomEqual(c.getContent(), '<div wlxml-tag="section"><div wlxml-tag="header">H<span wlxml-tag="aside">eader</span> 1</div></div>');\r
         });\r
         \r
         test('split node', function() {\r
-            var c = new canvas.Canvas('<section><header class="some.class">Header 1</header></section>');\r
-            var header = c.getNode({tag: 'header'})[0];\r
-            c.splitNode({node: header, offset: 4});\r
-            assert.xmlEqual(c.toXML(), '\\r
-                <section> \\r
-                    <header class="some.class">Head</header>\\r
-                    <header class="some.class">er 1</header>\\r
-                </section>'\r
-            );\r
+            var c = canvas.create('<div wlxml-tag="section"><div wlxml-tag="header">Header 1</div></div>');\r
+            var header = c.findNodes({tag: 'header'})[0];\r
+            var newNode = c.nodeSplit({node: header, offset: 4});\r
+            assertDomEqual(c.getContent(), utils.cleanUp('\\r
+                <div wlxml-tag="section">\\r
+                    <div wlxml-tag="header">Head</div>\\r
+                    <div wlxml-tag="header">er 1</div>\\r
+                </div>'));\r
+            assert.ok(newNode.isSame(c.findNodes({tag: 'header'})[1]));\r
+        });\r
+        \r
+        test('split root node', function() {\r
+            var c = canvas.create('<div wlxml-tag="header">cat</div>');\r
+            var header = c.findNodes({tag: 'header'})[0];\r
+            var newNode = c.nodeSplit({node: header, offset: 1});\r
+            assertDomEqual(c.getContent(), utils.cleanUp('\\r
+                    <div wlxml-tag="header">c</div>\\r
+                    <div wlxml-tag="header">at</div>'));\r
+            assert.ok(newNode.isSame(c.findNodes({tag: 'header'})[1]));\r
         });\r
         \r
         test('split node with subnodes', function() {\r
-            var c = new canvas.Canvas('<section><header class="some.class">Fancy and nice <span>header</span> 1</header></section>');\r
-            var header = c.getNode({tag: 'header'})[0];\r
-            c.splitNode({node: header, textNodeIdx: 0, offset: 5});\r
-            assert.xmlEqual(c.toXML(), '\\r
-                <section> \\r
-                    <header class="some.class">Fancy</header>\\r
-                    <header class="some.class"> and nice <span>header</span> 1</header>\\r
-                </section>'\r
-            );\r
+            var c = canvas.create(utils.cleanUp('\\r
+                <div wlxml-tag="section">\\r
+                    <div wlxml-tag="header">Fancy and nice<span wlxml-tag="aside">header</span> 1</div>\\r
+                 </div>'));\r
+            var header = c.findNodes({tag: 'header'})[0];\r
+            var newNode = c.nodeSplit({node: header, offset: 5});\r
+            assertDomEqual(c.getContent(), utils.cleanUp('\\r
+                <div wlxml-tag="section">\\r
+                    <div wlxml-tag="header">Fancy</div>\\r
+                    <div wlxml-tag="header">and nice<span wlxml-tag="aside">header</span> 1</div>\\r
+                </div>'));\r
         });\r
         \r
         test('remove node', function() {\r
-            var c = new canvas.Canvas('<section><header class="some.class">Fancy and nice <span>header</span> 1</header></section>');\r
-            var span = c.getNode({tag: 'span'})[0];\r
-            var siblings = c.removeNode({node:span});\r
-            assert.xmlEqual(c.toXML(), '\\r
-                <section>\\r
-                    <header class="some.class">Fancy and nice  1</header>\\r
-                </section>'\r
-            );\r
+            var c = canvas.create('<div wlxml-tag="section"><span wlxml-tag="span">some text</span></div>');\r
+            var span = c.findNodes({tag: 'span'})[0];\r
+            c.nodeRemove({node: span});\r
+            assertDomEqual(c.getContent(), '<div wlxml-tag="section"></div>');\r
         });\r
-        \r
-        test('create list from existing nodes', function() {\r
-            var c = new canvas.Canvas('<section><div>Alice</div>has<div>a cat</div><div>some text</div></section>');\r
-            var div1 = c.getNode({tag:'div'})[0];\r
-            var div2 = c.getNode({tag:'div'})[1];\r
+    });\r
+    \r
+    \r
+    suite('Lists', function() {\r
+        test('create from existing nodes', function() {\r
+            var c = canvas.create(utils.cleanUp('\\r
+                <div wlxml-tag="section">\\r
+                    <div wlxml-tag="div">alice</div>\\r
+                    has\\r
+                    <div wlxml-tag="div">a</div>\\r
+                    <div wlxml-tag="div">cat</div>\\r
+                    <div wlxml-tag="div">or not</div>\\r
+                </div>'\r
+            ));\r
+            \r
+            var div_alice = c.findNodes({tag: 'div'})[0];\r
+            var div_cat = c.findNodes({tag:'div'})[2];\r
             \r
-            c.createList({start: div1, end: div2});\r
+            c.listCreate({start: div_alice, end: div_cat});\r
             \r
-            assert.xmlEqual(c.toXML(), '\\r
-                <section>\\r
-                    <div class="list.items">\\r
-                        <div class="item">Alice</div>\\r
-                        <div class="item">has</div>\\r
-                        <div class="item">a cat</div>\\r
+            assertDomEqual(c.getContent(), utils.cleanUp('\\r
+                <div wlxml-tag="section">\\r
+                    <div wlxml-tag="div" wlxml-class="list-items">\\r
+                        <div wlxml-tag="div" wlxml-class="item">alice</div>\\r
+                        <div wlxml-tag="div" wlxml-class="item">has</div>\\r
+                        <div wlxml-tag="div" wlxml-class="item">a</div>\\r
+                        <div wlxml-tag="div" wlxml-class="item">cat</div>\\r
                     </div>\\r
-                    <div>some text</div>\\r
-                </section>');\r
-\r
+                    <div wlxml-tag="div">or not</div>\\r
+                </div>'));\r
         });\r
         \r
-        test('create list from existing nodes reverse', function() {\r
-            var c = new canvas.Canvas('<section><div>Alice</div>has<div>a cat</div><div>some text</div></section>');\r
-            var div1 = c.getNode({tag:'div'})[0];\r
-            var div2 = c.getNode({tag:'div'})[1];\r
-            \r
-            c.createList({start: div2, end: div1});\r
+        test('create from existing nodes - start/end order doesn\'t matter', function() {\r
+            var html = utils.cleanUp('\\r
+                    <div wlxml-tag="div">alice</div>\\r
+                    <div wlxml-tag="div">cat</div>');\r
+            var expected = utils.cleanUp('\\r
+                    <div wlxml-tag="div" wlxml-class="list-items">\\r
+                        <div wlxml-tag="div" wlxml-class="item">alice</div>\\r
+                        <div wlxml-tag="div" wlxml-class="item">cat</div>\\r
+                    </div>');\r
+                    \r
+            var c = canvas.create(html);\r
+            var div_alice = c.findNodes({tag: 'div'})[0];\r
+            var div_cat = c.findNodes({tag:'div'})[1];\r
+            c.listCreate({start: div_cat, end: div_alice});\r
+            assertDomEqual(c.getContent(), expected);\r
             \r
-            assert.xmlEqual(c.toXML(), '\\r
-                <section>\\r
-                    <div class="list.items">\\r
-                        <div class="item">Alice</div>\\r
-                        <div class="item">has</div>\\r
-                        <div class="item">a cat</div>\\r
-                    </div>\\r
-                    <div>some text</div>\\r
-                </section>');\r
-\r
+            c = canvas.create(html);\r
+            div_alice = c.findNodes({tag: 'div'})[0];\r
+            div_cat = c.findNodes({tag:'div'})[1];\r
+            c.listCreate({start: div_alice, end: div_cat});\r
+            assertDomEqual(c.getContent(), expected);\r
         });\r
         \r
-        test('remove list', function() {\r
-            var xml = '\\r
-                <section>\\r
-                    <div class="list.items">\\r
-                        <div class="item">Alice</div>\\r
-                        <div class="item">has</div>\\r
-                        <div class="item">a cat</div>\\r
+        test('remove', function() {\r
+            var c = canvas.create(utils.cleanUp('\\r
+                <div wlxml-tag="section">\\r
+                    <div wlxml-tag="div" wlxml-class="list-items">\\r
+                        <div wlxml-tag="div" wlxml-class="item">alice</div>\\r
+                        <div wlxml-tag="div" wlxml-class="item">cat</div>\\r
                     </div>\\r
-                    <div>some text</div>\\r
-                </section>';\r
-           var c = new canvas.Canvas(xml);\r
-           var item = c.getNode({klass: 'item'})[1];\r
-           c.removeList({pointer: item});\r
-           assert.xmlEqual(c.toXML(), '\\r
-                <section>\\r
-                    <div>Alice</div>\\r
-                    <div>has</div>\\r
-                    <div>a cat</div>\\r
-                    <div>some text</div>\\r
-                </section>');\r
+                </div>'));\r
+            var item = c.findNodes({klass: 'item'})[1];\r
+            c.listRemove({pointer: item});\r
+            assertDomEqual(c.getContent(), utils.cleanUp('\\r
+                <div wlxml-tag="section">\\r
+                    <div wlxml-tag="div">alice</div>\\r
+                    <div wlxml-tag="div">cat</div>\\r
+                </div>'));\r
         });\r
     });\r
-\r
 });
\ No newline at end of file

diff --git a/modules/documentCanvas/tests/canvasNode.test.js b/modules/documentCanvas/tests/canvasNode.test.js
new file mode 100644 (file)
index 0000000..bc11a80
--- /dev/null
+++ b/modules/documentCanvas/tests/canvasNode.test.js
@@ -0,0 +1,47 @@
+define([\r
+'libs/jquery-1.9.1.min',\r
+'libs/chai', \r
+'./utils.js',\r
+'modules/documentCanvas/canvasNode'\r
+], function($, chai, utils, canvasNode) {\r
+\r
+'use strict';\r
+\r
+var assert = chai.assert;\r
+\r
+var assertDomEqual = function(lhs, rhs) {\r
+   lhs.attr('id', '');\r
+   rhs.attr('id', '');\r
+   return assert.ok(lhs[0].isEqualNode(rhs[0]), 'nodes are equal');\r
+\r
+}\r
+\r
+suite('Create canvas node', function() {  \r
+    test('from description', function() {\r
+        var node = canvasNode.create({tag: 'header', klass: 'some-class', content: 'some text content'});\r
+        assert.equal(node.getTag(), 'header');\r
+        assert.equal(node.getClass(), 'some-class');\r
+        assert.equal(node.getContent(), 'some text content');\r
+        assertDomEqual($('<div wlxml-tag="header" wlxml-class="some-class">some text content</div>'), node.dom);\r
+    });\r
+    \r
+    test('from dom object', function() {\r
+        var node = canvasNode.create($('<div wlxml-tag="header" wlxml-class="some-class" id="1">'));\r
+        assert.equal(node.getTag(), 'header');\r
+        assert.equal(node.getClass(), 'some-class');\r
+        //assertDomEqual($('<div wlxml-tag="header" wlxml-class="some-class">'), node.dom);\r
+    });\r
+});\r
+\r
+suite('comparing nodes', function() {\r
+    test('isSame', function() {\r
+        var html = '<div wlxml-class="some-class" wlxml-tag="some-tag">';\r
+        var dom1 = $(html);\r
+        var dom2 = $(html);\r
+        assert.ok(canvasNode.create(dom1).isSame(canvasNode.create(dom1)));\r
+        assert.notOk(canvasNode.create(dom1).isSame(canvasNode.create(dom2)));\r
+    });\r
+});\r
+\r
+\r
+});
\ No newline at end of file

diff --git a/modules/documentCanvas/tests/utils.js b/modules/documentCanvas/tests/utils.js
index e23808c..cf1f7c2 100644 (file)
--- a/modules/documentCanvas/tests/utils.js
+++ b/modules/documentCanvas/tests/utils.js
@@ -1,7 +1,6 @@
-define(['libs/jquery-1.9.1.min'], function($) {\r
+define(['libs/jquery-1.9.1.min', 'libs/chai'], function($, chai) {\r
     return {\r
         cleanUp: function(xml) {\r
-            \r
             var rmws = function(node) {\r
                 if(node.nodeType === 3) {\r
                     node.data = $.trim(node.data);\r
@@ -24,6 +23,27 @@ define(['libs/jquery-1.9.1.min'], function($) {
                 .replace(/(<\/.*>)\s*(<.*>)/gm, '$1$2');\r
             return $.trim(toret);*/\r
             return $('<div>').append(xml).html();\r
+        },\r
+        \r
+        assertDomEqual: function(lhs, rhs) {\r
+            lhs = lhs.clone();\r
+            var rhsArr = $.parseHTML(rhs);\r
+            if(rhsArr.length === 1) {\r
+                rhs = $(rhsArr[0]);\r
+            } else {\r
+                rhs = $('<div>');\r
+                $.each(rhsArr, function(i, el) {\r
+                    rhs.append(el);\r
+                });            \r
+            }\r
+            if(lhs.length > 1) {\r
+                lhs = $('<div>').append(lhs);\r
+            }\r
+            lhs.attr('id', '');\r
+            rhs.attr('id', '');\r
+            lhs.find('*').each(function() {$(this).attr('id', '');});\r
+            rhs.find('*').each(function() {$(this).attr('id', '');});\r
+            return chai.assert.ok(lhs[0].isEqualNode(rhs[0]), 'nodes are equal');\r
         }\r
     }\r
 });
\ No newline at end of file