fnp / fnpeditor.git / blobdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | inline | side by side
Using === instead of isSameNode (not supported in FF)
[fnpeditor.git] / modules / documentCanvas / tests / canvas.test.js
diff --git a/modules/documentCanvas/tests/canvas.test.js b/modules/documentCanvas/tests/canvas.test.js
index 386e375..57fb308 100644 (file)
--- a/modules/documentCanvas/tests/canvas.test.js
+++ b/modules/documentCanvas/tests/canvas.test.js
@@ -2,102 +2,248 @@ define([
 'libs/jquery-1.9.1.min',\r
 'libs/chai', \r
 './utils.js',\r
 '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
 \r
     'use strict';\r
 \r
     var assert = chai.assert;\r
+    var assertDomEqual = utils.assertDomEqual;\r
     \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
     \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
-    \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
         });\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
     });\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
     \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
+    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('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('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
         });\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
         });\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 = 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
         });\r
         \r
-        test('list', function() {\r
-            var c = new canvas.Canvas('<section><div>Alice</div>has<div>a cat</div></section>');\r
-            var div1 = c.getNode({tag:'div'})[0];\r
-            var div2 = c.getNode({tag:'div'})[1];\r
+        test('remove node', function() {\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
+    \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
             \r
-            c.createList({start: div1, end: div2});\r
+            c.listCreate({start: div_alice, end: div_cat});\r
             \r
             \r
-            assert.xmlEqual(c.toXML(), '\\r
-                <section>\\r
-                    <div class="list">\\r
-                        <div class="list.item">Alice</div>\\r
-                        <div class="list.item">has</div>\\r
-                        <div class="list.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>\\r
-                </section>');\r
+                    <div wlxml-tag="div">or not</div>\\r
+                </div>'));\r
+        });\r
+        \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
+            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', 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>'));\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
+        test('checking if node is inside a list', function() {\r
+            var c = canvas.create(utils.cleanUp('\\r
+                <div wlxml-tag="section">\\r
+                    <div wlxml-tag="div" wlxml-class="list-items-enum">\\r
+                        <div wlxml-tag="div" wlxml-class="item">alice <span wlxml-tag="span"></span</div>\\r
+                        <div wlxml-tag="div" wlxml-class="item">cat</div>\\r
+                    </div>\\r
+                </div>'));\r
+            assert.ok(c.nodeInsideList({node: c.findNodes({klass: 'item'})[1]}), 'item is inside a list');\r
+            assert.ok(c.nodeInsideList({node: c.findNodes({tag: 'span'})[0]}), 'things nested in item are inside a list');\r
+        });\r
+        \r
+        test('moving items to nested list', function() {\r
+            var listHTML = 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 wlxml-tag="div" wlxml-class="item">dog</div>\\r
+                        <div wlxml-tag="div" wlxml-class="item">bee</div>\\r
+                    </div>');\r
+            var c = canvas.create(listHTML);\r
+            var items = c.findNodes({klass: 'item'});\r
+            var cat_item = items[1];\r
+            var dog_item = items[2];\r
+            \r
+            c.listCreate({start: cat_item, end: dog_item});\r
+            \r
+            assertDomEqual(c.getContent(), 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">\\r
+                            <div wlxml-tag="div" wlxml-class="list-items">\\r
+                                <div wlxml-tag="div" wlxml-class="item">cat</div>\\r
+                                <div wlxml-tag="div" wlxml-class="item">dog</div>\\r
+                            </div>\\r
+                        </div>\\r
+                        <div wlxml-tag="div" wlxml-class="item">bee</div>\\r
+                    </div>'\r
+            ));\r
+        });\r
+        \r
+        test('removing nested list', function() {\r
+            var nestedList = 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">\\r
+                            <div wlxml-tag="div" wlxml-class="list-items">\\r
+                                <div wlxml-tag="div" wlxml-class="item">cat</div>\\r
+                                <div wlxml-tag="div" wlxml-class="item">dog</div>\\r
+                            </div>\\r
+                        </div>\\r
+                        <div wlxml-tag="div" wlxml-class="item">bee</div>\\r
+                    </div>');\r
+                    \r
+            var c = canvas.create(nestedList);\r
+            var dog_item = c.findNodes('[wlxml-class=list-items] [wlxml-class=list-items] > div')[1];\r
+            assert.equal(dog_item.getContent(), 'dog');\r
+            \r
+            c.listRemove({pointer: dog_item});\r
+            \r
+            assertDomEqual(c.getContent(), 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 wlxml-tag="div" wlxml-class="item">dog</div>\\r
+                        <div wlxml-tag="div" wlxml-class="item">bee</div>\\r
+                    </div>'));\r
+            \r
             \r
         });\r
     });\r
             \r
         });\r
     });\r
-\r
 });
\ No newline at end of file
 });
\ No newline at end of file