Experimenting with higher level canvas api

[fnpeditor.git] / modules / documentCanvas / tests / canvas.test.js

diff --git a/modules/documentCanvas/tests/canvas.test.js b/modules/documentCanvas/tests/canvas.test.js
new file mode 100644 (file)
index 0000000..386e375
--- /dev/null
+++ b/modules/documentCanvas/tests/canvas.test.js
@@ -0,0 +1,103 @@
+define([\r
+'libs/jquery-1.9.1.min',\r
+'libs/chai', \r
+'./utils.js',\r
+'modules/documentCanvas/canvas'\r
+], function($, chai, utils, canvas) {\r
+\r
+    'use strict';\r
+\r
+    var assert = chai.assert;\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
+        });\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
+        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
+    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
+        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
+        });\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
+        });\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
+        });\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
+            \r
+            c.createList({start: div1, end: div2});\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
+                    </div>\\r
+                </section>');\r
+            \r
+        });\r
+    });\r
+\r
+});
\ No newline at end of file