12fb8a5bfd0c9ca5b2870d1dbeabfbccefcc11d7
[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 'modules/documentCanvas/canvasNode'\r
7 ], function($, chai, utils, canvas, canvasNode) {\r
8 \r
9     'use strict';\r
10 \r
11     var assert = chai.assert;\r
12     var assertDomEqual = utils.assertDomEqual;\r
13     \r
14     \r
15     suite('Quering nodes', function() {\r
16         test('getting preceding node', function() {\r
17             var c = canvas.create('<div wlxml-tag="section"><div wlxml-tag="p">a</div><div wlxml-tag="p">b</div></div>');\r
18             var secondP = c.findNodes({tag: 'p'})[1];\r
19             var firstP = c.getPrecedingNode({node: secondP});\r
20             assert.equal(firstP.getContent(), 'a');\r
21         });\r
22         \r
23        test('pervious node of node without "previous siblings" is its parent', function() {\r
24             var c = canvas.create('<div wlxml-tag="section"><div wlxml-tag="p">a</div></div>');\r
25             var paragraph = c.findNodes({tag: 'p'})[0];\r
26             assert.equal(c.getPrecedingNode({node: paragraph}).getTag(), 'section');\r
27         });\r
28     \r
29     });\r
30     \r
31     \r
32     suite('Inserting nodes', function() {\r
33         test('append node to root', function() {\r
34             var c = canvas.create();\r
35             var node = canvasNode.create({tag: 'header', klass: 'some-class'});\r
36             c.nodeAppend({node: node, to: 'root'});\r
37             assertDomEqual(c.getContent(), '<div wlxml-tag="header" wlxml-class="some-class">');\r
38         }); \r
39         \r
40         test('append node to another node', function() {\r
41             var c = canvas.create('<div wlxml-tag="section"></div>');\r
42             var node = canvasNode.create({tag: 'header', klass: 'some-class'});\r
43             var to = c.findNodes('div')[0];\r
44             c.nodeAppend({node: node, to: to});\r
45             assertDomEqual(c.getContent(), '<div wlxml-tag="section"><div wlxml-tag="header" wlxml-class="some-class"></div></div>');\r
46         });\r
47         \r
48         test('insert node after another node', function() {\r
49             var c = canvas.create('<div wlxml-tag="section"></div>');\r
50             var node = canvasNode.create({tag: 'header', klass: 'some-class'});\r
51             var after = c.findNodes('div')[0];\r
52             c.nodeInsertAfter({node: node, after: after});\r
53             assertDomEqual(c.getContent(), '<div wlxml-tag="section"></div><div wlxml-tag="header" wlxml-class="some-class"></div>');        \r
54         });\r
55         \r
56         test('wrap text in node', function() {\r
57             var c = canvas.create('<div wlxml-tag="section"><div wlxml-tag="header">Header 1</div></div>');\r
58             var header = c.findNodes({tag: 'header'})[0];\r
59             var wrapper = canvasNode.create({tag: 'aside'});\r
60             c.nodeWrap({inside: header, _with: wrapper, offsetStart: 1, offsetEnd: 6})\r
61             assertDomEqual(c.getContent(), '<div wlxml-tag="section"><div wlxml-tag="header">H<span wlxml-tag="aside">eader</span> 1</div></div>');\r
62         });\r
63         \r
64         test('wrap text in node - text not a first node', function() {\r
65             var c = canvas.create('<div wlxml-tag="header">Alice <span wlxml-tag="span">has a</span> cat</div>');\r
66             var header = c.findNodes({tag: 'header'})[0];\r
67             var wrapper = canvasNode.create({tag: 'aside'});\r
68             c.nodeWrap({inside: header, _with: wrapper, offsetStart: 1, offsetEnd: 4, textNodeIdx: 2});\r
69             assertDomEqual(c.getContent(), '<div wlxml-tag="header">Alice <span wlxml-tag="span">has a</span> <span wlxml-tag="aside">cat</span></div>');\r
70         });\r
71         \r
72         test('wrap text with nodes inside', function() {\r
73             var c = canvas.create('<div wlxml-tag="header">Alice has a <span wlxml-tag="span">small</span> cat</div>');\r
74             var header = c.findNodes({tag: 'header'})[0];\r
75             var wrapper = canvasNode.create({tag: 'aside'});\r
76             c.nodeWrap({inside: header, _with: wrapper, offsetStart: 6, offsetEnd: 4, textNodeIdx: [0,2]})\r
77             assertDomEqual(c.getContent(), '<div wlxml-tag="header">Alice <span wlxml-tag="aside">has a <span wlxml-tag="span">small</span> cat</span></div>');            \r
78         });\r
79         \r
80         test('split node', function() {\r
81             var c = canvas.create('<div wlxml-tag="section"><div wlxml-tag="header">Header 1</div></div>');\r
82             var header = c.findNodes({tag: 'header'})[0];\r
83             var newNode = c.nodeSplit({node: header, offset: 4});\r
84             assertDomEqual(c.getContent(), utils.cleanUp('\\r
85                 <div wlxml-tag="section">\\r
86                     <div wlxml-tag="header">Head</div>\\r
87                     <div wlxml-tag="header">er 1</div>\\r
88                 </div>'));\r
89             assert.ok(newNode.isSame(c.findNodes({tag: 'header'})[1]));\r
90         });\r
91         \r
92         test('split root node', function() {\r
93             var c = canvas.create('<div wlxml-tag="header">cat</div>');\r
94             var header = c.findNodes({tag: 'header'})[0];\r
95             var newNode = c.nodeSplit({node: header, offset: 1});\r
96             assertDomEqual(c.getContent(), utils.cleanUp('\\r
97                     <div wlxml-tag="header">c</div>\\r
98                     <div wlxml-tag="header">at</div>'));\r
99             assert.ok(newNode.isSame(c.findNodes({tag: 'header'})[1]));\r
100         });\r
101         \r
102         test('split node with subnodes', function() {\r
103             var c = canvas.create(utils.cleanUp('\\r
104                 <div wlxml-tag="section">\\r
105                     <div wlxml-tag="header">Fancy and nice<span wlxml-tag="aside">header</span> 1</div>\\r
106                  </div>'));\r
107             var header = c.findNodes({tag: 'header'})[0];\r
108             var newNode = c.nodeSplit({node: header, offset: 5});\r
109             assertDomEqual(c.getContent(), utils.cleanUp('\\r
110                 <div wlxml-tag="section">\\r
111                     <div wlxml-tag="header">Fancy</div>\\r
112                     <div wlxml-tag="header">and nice<span wlxml-tag="aside">header</span> 1</div>\\r
113                 </div>'));\r
114         });\r
115         \r
116         test('remove node', function() {\r
117             var c = canvas.create('<div wlxml-tag="section"><span wlxml-tag="span">some text</span></div>');\r
118             var span = c.findNodes({tag: 'span'})[0];\r
119             c.nodeRemove({node: span});\r
120             assertDomEqual(c.getContent(), '<div wlxml-tag="section"></div>');\r
121         });\r
122     });\r
123     \r
124     \r
125     suite('Lists', function() {\r
126         test('create from existing nodes', function() {\r
127             var c = canvas.create(utils.cleanUp('\\r
128                 <div wlxml-tag="section">\\r
129                     <div wlxml-tag="div">alice</div>\\r
130                     has\\r
131                     <div wlxml-tag="div">a</div>\\r
132                     <div wlxml-tag="div">cat</div>\\r
133                     <div wlxml-tag="div">or not</div>\\r
134                 </div>'\r
135             ));\r
136             \r
137             var div_alice = c.findNodes({tag: 'div'})[0];\r
138             var div_cat = c.findNodes({tag:'div'})[2];\r
139             \r
140             c.listCreate({start: div_alice, end: div_cat});\r
141             \r
142             assertDomEqual(c.getContent(), utils.cleanUp('\\r
143                 <div wlxml-tag="section">\\r
144                     <div wlxml-tag="div" wlxml-class="list-items">\\r
145                         <div wlxml-tag="div" wlxml-class="item">alice</div>\\r
146                         <div wlxml-tag="div" wlxml-class="item">has</div>\\r
147                         <div wlxml-tag="div" wlxml-class="item">a</div>\\r
148                         <div wlxml-tag="div" wlxml-class="item">cat</div>\\r
149                     </div>\\r
150                     <div wlxml-tag="div">or not</div>\\r
151                 </div>'));\r
152         });\r
153         \r
154         test('create from existing nodes - start/end order doesn\'t matter', function() {\r
155             var html = utils.cleanUp('\\r
156                     <div wlxml-tag="div">alice</div>\\r
157                     <div wlxml-tag="div">cat</div>');\r
158             var expected = utils.cleanUp('\\r
159                     <div wlxml-tag="div" wlxml-class="list-items">\\r
160                         <div wlxml-tag="div" wlxml-class="item">alice</div>\\r
161                         <div wlxml-tag="div" wlxml-class="item">cat</div>\\r
162                     </div>');\r
163                     \r
164             var c = canvas.create(html);\r
165             var div_alice = c.findNodes({tag: 'div'})[0];\r
166             var div_cat = c.findNodes({tag:'div'})[1];\r
167             c.listCreate({start: div_cat, end: div_alice});\r
168             assertDomEqual(c.getContent(), expected);\r
169             \r
170             c = canvas.create(html);\r
171             div_alice = c.findNodes({tag: 'div'})[0];\r
172             div_cat = c.findNodes({tag:'div'})[1];\r
173             c.listCreate({start: div_alice, end: div_cat});\r
174             assertDomEqual(c.getContent(), expected);\r
175         });\r
176         \r
177         test('remove', function() {\r
178             var c = canvas.create(utils.cleanUp('\\r
179                 <div wlxml-tag="section">\\r
180                     <div wlxml-tag="div" wlxml-class="list-items">\\r
181                         <div wlxml-tag="div" wlxml-class="item">alice</div>\\r
182                         <div wlxml-tag="div" wlxml-class="item">cat</div>\\r
183                     </div>\\r
184                 </div>'));\r
185             var item = c.findNodes({klass: 'item'})[1];\r
186             c.listRemove({pointer: item});\r
187             assertDomEqual(c.getContent(), utils.cleanUp('\\r
188                 <div wlxml-tag="section">\\r
189                     <div wlxml-tag="div">alice</div>\\r
190                     <div wlxml-tag="div">cat</div>\\r
191                 </div>'));\r
192         });\r
193         \r
194         test('checking if node is inside a list', function() {\r
195             var c = canvas.create(utils.cleanUp('\\r
196                 <div wlxml-tag="section">\\r
197                     <div wlxml-tag="div" wlxml-class="list-items-enum">\\r
198                         <div wlxml-tag="div" wlxml-class="item">alice <span wlxml-tag="span"></span</div>\\r
199                         <div wlxml-tag="div" wlxml-class="item">cat</div>\\r
200                     </div>\\r
201                 </div>'));\r
202             assert.ok(c.nodeInsideList({node: c.findNodes({klass: 'item'})[1]}), 'item is inside a list');\r
203             assert.ok(c.nodeInsideList({node: c.findNodes({tag: 'span'})[0]}), 'things nested in item are inside a list');\r
204         });\r
205         \r
206         test('moving items to nested list', function() {\r
207             var listHTML = utils.cleanUp('\\r
208                     <div wlxml-tag="div" wlxml-class="list-items">\\r
209                         <div wlxml-tag="div" wlxml-class="item">alice</div>\\r
210                         <div wlxml-tag="div" wlxml-class="item">cat</div>\\r
211                         <div wlxml-tag="div" wlxml-class="item">dog</div>\\r
212                         <div wlxml-tag="div" wlxml-class="item">bee</div>\\r
213                     </div>');\r
214             var c = canvas.create(listHTML);\r
215             var items = c.findNodes({klass: 'item'});\r
216             var cat_item = items[1];\r
217             var dog_item = items[2];\r
218             \r
219             c.listCreate({start: cat_item, end: dog_item});\r
220             \r
221             assertDomEqual(c.getContent(), utils.cleanUp('\\r
222                     <div wlxml-tag="div" wlxml-class="list-items">\\r
223                         <div wlxml-tag="div" wlxml-class="item">alice</div>\\r
224                         <div wlxml-tag="div" wlxml-class="item" class="canvas-silent-item">\\r
225                             <div wlxml-tag="div" wlxml-class="list-items">\\r
226                                 <div wlxml-tag="div" wlxml-class="item">cat</div>\\r
227                                 <div wlxml-tag="div" wlxml-class="item">dog</div>\\r
228                             </div>\\r
229                         </div>\\r
230                         <div wlxml-tag="div" wlxml-class="item">bee</div>\\r
231                     </div>'\r
232             ));\r
233         });\r
234         \r
235         test('removing nested list', function() {\r
236             var nestedList = utils.cleanUp('\\r
237                     <div wlxml-tag="div" wlxml-class="list-items">\\r
238                         <div wlxml-tag="div" wlxml-class="item">alice</div>\\r
239                         <div wlxml-tag="div" wlxml-class="item">\\r
240                             <div wlxml-tag="div" wlxml-class="list-items">\\r
241                                 <div wlxml-tag="div" wlxml-class="item">cat</div>\\r
242                                 <div wlxml-tag="div" wlxml-class="item">dog</div>\\r
243                             </div>\\r
244                         </div>\\r
245                         <div wlxml-tag="div" wlxml-class="item">bee</div>\\r
246                     </div>');\r
247                     \r
248             var c = canvas.create(nestedList);\r
249             var dog_item = c.findNodes('[wlxml-class=list-items] [wlxml-class=list-items] > div')[1];\r
250             assert.equal(dog_item.getContent(), 'dog');\r
251             \r
252             c.listRemove({pointer: dog_item});\r
253             \r
254             assertDomEqual(c.getContent(), utils.cleanUp('\\r
255                     <div wlxml-tag="div" wlxml-class="list-items">\\r
256                         <div wlxml-tag="div" wlxml-class="item">alice</div>\\r
257                         <div wlxml-tag="div" wlxml-class="item">cat</div>\\r
258                         <div wlxml-tag="div" wlxml-class="item">dog</div>\\r
259                         <div wlxml-tag="div" wlxml-class="item">bee</div>\\r
260                     </div>'));\r
261             \r
262             \r
263         });\r
264     });\r
265 });