Experimenting with higher level canvas api
[fnpeditor.git] / modules / documentCanvas / tests / canvas.test.js
1 define([\r
2 'libs/jquery-1.9.1.min',\r
3 'libs/chai', \r
4 './utils.js',\r
5 'modules/documentCanvas/canvas'\r
6 ], function($, chai, utils, canvas) {\r
7 \r
8     'use strict';\r
9 \r
10     var assert = chai.assert;\r
11     \r
12     assert.xmlEqual = function(lhsText, rhsText) {\r
13         var cleanLhs = utils.cleanUp(lhsText);\r
14         var cleanRhs = utils.cleanUp(rhsText);\r
15         \r
16         var lhs = $(cleanLhs);\r
17         var rhs = $(cleanRhs);\r
18         \r
19         this.equal(lhs.length, 1);\r
20         this.equal(rhs.length, 1);\r
21         \r
22         lhs = lhs.get(0);\r
23         rhs = rhs.get(0);\r
24         \r
25         var test = lhs.isEqualNode(rhs);\r
26         if(!test) {\r
27             console.log(cleanLhs);\r
28             console.log(cleanRhs);    \r
29         }\r
30         return this.ok(test, 'xmls are equal');\r
31     };\r
32     \r
33     var retrievingTest = function(title, xml) {\r
34         test(title, function() {\r
35             var c = new canvas.Canvas(xml);\r
36             assert.xmlEqual(c.toXML(), xml);    \r
37         });\r
38     };\r
39     \r
40     suite('Basic document retrieving', function() {\r
41         test('empty document', function() {\r
42             var c = new canvas.Canvas('');\r
43             assert.equal(c.toXML(), '');\r
44         });\r
45         retrievingTest('empty tag', '<section></section>');\r
46         retrievingTest('tag with content', '<section>Some text</section>');\r
47         retrievingTest('tag with class', '<section class="some.class"></section>');\r
48     });\r
49     \r
50     suite('Nodes', function() {\r
51         test('getting nodes via selector', function() {\r
52             var c = new canvas.Canvas('<section><header class="some.class">Header 1</header></section>');\r
53             var header = c.getNode({tag: 'header'})[0];\r
54             assert.equal(header.tag, 'header');\r
55             assert.equal(header.klass, 'some-class');\r
56         });\r
57     \r
58         test('inserting after', function() {\r
59             var c = new canvas.Canvas('<section><header>Header 1</header></section>');\r
60             var header = c.getNode({tag: 'header'})[0];\r
61             c.insertNode({place: 'after', context: header, tag: 'div', klass: 'some.class'});\r
62             assert.xmlEqual(c.toXML(), '<section><header>Header 1</header><div class="some.class"></div></section>');\r
63         });\r
64         \r
65         test('wrap text in node', function() {\r
66             var c = new canvas.Canvas('<section><header>Header 1</header></section>');\r
67             var header = c.getNode({tag: 'header'})[0];\r
68             c.insertNode({place: 'wrapText', context: header, tag: 'span', klass: 'url', offsetStart: 1, offsetEnd: 6});\r
69             assert.xmlEqual(c.toXML(), '<section><header>H<span class="url">eader</span> 1</header></section>');\r
70         });\r
71         \r
72         test('split node', function() {\r
73             var c = new canvas.Canvas('<section><header class="some.class">Header 1</header></section>');\r
74             var header = c.getNode({tag: 'header'})[0];\r
75             c.splitNode({node: header, offset: 4});\r
76             assert.xmlEqual(c.toXML(), '\\r
77                 <section> \\r
78                     <header class="some.class">Head</header>\\r
79                     <header class="some.class">er 1</header>\\r
80                 </section>'\r
81             );\r
82         });\r
83         \r
84         test('list', function() {\r
85             var c = new canvas.Canvas('<section><div>Alice</div>has<div>a cat</div></section>');\r
86             var div1 = c.getNode({tag:'div'})[0];\r
87             var div2 = c.getNode({tag:'div'})[1];\r
88             \r
89             c.createList({start: div1, end: div2});\r
90             \r
91             assert.xmlEqual(c.toXML(), '\\r
92                 <section>\\r
93                     <div class="list">\\r
94                         <div class="list.item">Alice</div>\\r
95                         <div class="list.item">has</div>\\r
96                         <div class="list.item">a cat</div>\\r
97                     </div>\\r
98                 </section>');\r
99             \r
100         });\r
101     });\r
102 \r
103 });