5e44dd97d8f2f98ed765bf0bdb0fffc9b2b9cc14
[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('split node', function() {\r
73             var c = canvas.create('<div wlxml-tag="section"><div wlxml-tag="header">Header 1</div></div>');\r
74             var header = c.findNodes({tag: 'header'})[0];\r
75             var newNode = c.nodeSplit({node: header, offset: 4});\r
76             assertDomEqual(c.getContent(), utils.cleanUp('\\r
77                 <div wlxml-tag="section">\\r
78                     <div wlxml-tag="header">Head</div>\\r
79                     <div wlxml-tag="header">er 1</div>\\r
80                 </div>'));\r
81             assert.ok(newNode.isSame(c.findNodes({tag: 'header'})[1]));\r
82         });\r
83         \r
84         test('split root node', function() {\r
85             var c = canvas.create('<div wlxml-tag="header">cat</div>');\r
86             var header = c.findNodes({tag: 'header'})[0];\r
87             var newNode = c.nodeSplit({node: header, offset: 1});\r
88             assertDomEqual(c.getContent(), utils.cleanUp('\\r
89                     <div wlxml-tag="header">c</div>\\r
90                     <div wlxml-tag="header">at</div>'));\r
91             assert.ok(newNode.isSame(c.findNodes({tag: 'header'})[1]));\r
92         });\r
93         \r
94         test('split node with subnodes', function() {\r
95             var c = canvas.create(utils.cleanUp('\\r
96                 <div wlxml-tag="section">\\r
97                     <div wlxml-tag="header">Fancy and nice<span wlxml-tag="aside">header</span> 1</div>\\r
98                  </div>'));\r
99             var header = c.findNodes({tag: 'header'})[0];\r
100             var newNode = c.nodeSplit({node: header, offset: 5});\r
101             assertDomEqual(c.getContent(), utils.cleanUp('\\r
102                 <div wlxml-tag="section">\\r
103                     <div wlxml-tag="header">Fancy</div>\\r
104                     <div wlxml-tag="header">and nice<span wlxml-tag="aside">header</span> 1</div>\\r
105                 </div>'));\r
106         });\r
107         \r
108         test('remove node', function() {\r
109             var c = canvas.create('<div wlxml-tag="section"><span wlxml-tag="span">some text</span></div>');\r
110             var span = c.findNodes({tag: 'span'})[0];\r
111             c.nodeRemove({node: span});\r
112             assertDomEqual(c.getContent(), '<div wlxml-tag="section"></div>');\r
113         });\r
114     });\r
115     \r
116     \r
117     suite('Lists', function() {\r
118         test('create from existing nodes', function() {\r
119             var c = canvas.create(utils.cleanUp('\\r
120                 <div wlxml-tag="section">\\r
121                     <div wlxml-tag="div">alice</div>\\r
122                     has\\r
123                     <div wlxml-tag="div">a</div>\\r
124                     <div wlxml-tag="div">cat</div>\\r
125                     <div wlxml-tag="div">or not</div>\\r
126                 </div>'\r
127             ));\r
128             \r
129             var div_alice = c.findNodes({tag: 'div'})[0];\r
130             var div_cat = c.findNodes({tag:'div'})[2];\r
131             \r
132             c.listCreate({start: div_alice, end: div_cat});\r
133             \r
134             assertDomEqual(c.getContent(), utils.cleanUp('\\r
135                 <div wlxml-tag="section">\\r
136                     <div wlxml-tag="div" wlxml-class="list-items">\\r
137                         <div wlxml-tag="div" wlxml-class="item">alice</div>\\r
138                         <div wlxml-tag="div" wlxml-class="item">has</div>\\r
139                         <div wlxml-tag="div" wlxml-class="item">a</div>\\r
140                         <div wlxml-tag="div" wlxml-class="item">cat</div>\\r
141                     </div>\\r
142                     <div wlxml-tag="div">or not</div>\\r
143                 </div>'));\r
144         });\r
145         \r
146         test('create from existing nodes - start/end order doesn\'t matter', function() {\r
147             var html = utils.cleanUp('\\r
148                     <div wlxml-tag="div">alice</div>\\r
149                     <div wlxml-tag="div">cat</div>');\r
150             var expected = utils.cleanUp('\\r
151                     <div wlxml-tag="div" wlxml-class="list-items">\\r
152                         <div wlxml-tag="div" wlxml-class="item">alice</div>\\r
153                         <div wlxml-tag="div" wlxml-class="item">cat</div>\\r
154                     </div>');\r
155                     \r
156             var c = canvas.create(html);\r
157             var div_alice = c.findNodes({tag: 'div'})[0];\r
158             var div_cat = c.findNodes({tag:'div'})[1];\r
159             c.listCreate({start: div_cat, end: div_alice});\r
160             assertDomEqual(c.getContent(), expected);\r
161             \r
162             c = canvas.create(html);\r
163             div_alice = c.findNodes({tag: 'div'})[0];\r
164             div_cat = c.findNodes({tag:'div'})[1];\r
165             c.listCreate({start: div_alice, end: div_cat});\r
166             assertDomEqual(c.getContent(), expected);\r
167         });\r
168         \r
169         test('remove', function() {\r
170             var c = canvas.create(utils.cleanUp('\\r
171                 <div wlxml-tag="section">\\r
172                     <div wlxml-tag="div" wlxml-class="list-items">\\r
173                         <div wlxml-tag="div" wlxml-class="item">alice</div>\\r
174                         <div wlxml-tag="div" wlxml-class="item">cat</div>\\r
175                     </div>\\r
176                 </div>'));\r
177             var item = c.findNodes({klass: 'item'})[1];\r
178             c.listRemove({pointer: item});\r
179             assertDomEqual(c.getContent(), utils.cleanUp('\\r
180                 <div wlxml-tag="section">\\r
181                     <div wlxml-tag="div">alice</div>\\r
182                     <div wlxml-tag="div">cat</div>\\r
183                 </div>'));\r
184         });\r
185         \r
186         test('checking if node is inside a list', function() {\r
187             var c = canvas.create(utils.cleanUp('\\r
188                 <div wlxml-tag="section">\\r
189                     <div wlxml-tag="div" wlxml-class="list-items-enum">\\r
190                         <div wlxml-tag="div" wlxml-class="item">alice <span wlxml-tag="span"></span</div>\\r
191                         <div wlxml-tag="div" wlxml-class="item">cat</div>\\r
192                     </div>\\r
193                 </div>'));\r
194             assert.ok(c.nodeInsideList({node: c.findNodes({klass: 'item'})[1]}), 'item is inside a list');\r
195             assert.ok(c.nodeInsideList({node: c.findNodes({tag: 'span'})[0]}), 'things nested in item are inside a list');\r
196         });\r
197         \r
198         test('moving items to nested list', function() {\r
199             var listHTML = utils.cleanUp('\\r
200                     <div wlxml-tag="div" wlxml-class="list-items">\\r
201                         <div wlxml-tag="div" wlxml-class="item">alice</div>\\r
202                         <div wlxml-tag="div" wlxml-class="item">cat</div>\\r
203                         <div wlxml-tag="div" wlxml-class="item">dog</div>\\r
204                         <div wlxml-tag="div" wlxml-class="item">bee</div>\\r
205                     </div>');\r
206             var c = canvas.create(listHTML);\r
207             var items = c.findNodes({klass: 'item'});\r
208             var cat_item = items[1];\r
209             var dog_item = items[2];\r
210             \r
211             c.listCreate({start: cat_item, end: dog_item});\r
212             \r
213             assertDomEqual(c.getContent(), utils.cleanUp('\\r
214                     <div wlxml-tag="div" wlxml-class="list-items">\\r
215                         <div wlxml-tag="div" wlxml-class="item">alice</div>\\r
216                         <div wlxml-tag="div" wlxml-class="item" class="canvas-silent-item">\\r
217                             <div wlxml-tag="div" wlxml-class="list-items">\\r
218                                 <div wlxml-tag="div" wlxml-class="item">cat</div>\\r
219                                 <div wlxml-tag="div" wlxml-class="item">dog</div>\\r
220                             </div>\\r
221                         </div>\\r
222                         <div wlxml-tag="div" wlxml-class="item">bee</div>\\r
223                     </div>'\r
224             ));\r
225         });\r
226         \r
227         test('removing nested list', function() {\r
228             var nestedList = utils.cleanUp('\\r
229                     <div wlxml-tag="div" wlxml-class="list-items">\\r
230                         <div wlxml-tag="div" wlxml-class="item">alice</div>\\r
231                         <div wlxml-tag="div" wlxml-class="item">\\r
232                             <div wlxml-tag="div" wlxml-class="list-items">\\r
233                                 <div wlxml-tag="div" wlxml-class="item">cat</div>\\r
234                                 <div wlxml-tag="div" wlxml-class="item">dog</div>\\r
235                             </div>\\r
236                         </div>\\r
237                         <div wlxml-tag="div" wlxml-class="item">bee</div>\\r
238                     </div>');\r
239                     \r
240             var c = canvas.create(nestedList);\r
241             var dog_item = c.findNodes('[wlxml-class=list-items] [wlxml-class=list-items] > div')[1];\r
242             assert.equal(dog_item.getContent(), 'dog');\r
243             \r
244             c.listRemove({pointer: dog_item});\r
245             \r
246             assertDomEqual(c.getContent(), utils.cleanUp('\\r
247                     <div wlxml-tag="div" wlxml-class="list-items">\\r
248                         <div wlxml-tag="div" wlxml-class="item">alice</div>\\r
249                         <div wlxml-tag="div" wlxml-class="item">cat</div>\\r
250                         <div wlxml-tag="div" wlxml-class="item">dog</div>\\r
251                         <div wlxml-tag="div" wlxml-class="item">bee</div>\\r
252                     </div>'));\r
253             \r
254             \r
255         });\r
256     });\r
257 });