afe777ace5bb9870cab3855888aac5385f4695f6
[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('split node', function() {\r
65             var c = canvas.create('<div wlxml-tag="section"><div wlxml-tag="header">Header 1</div></div>');\r
66             var header = c.findNodes({tag: 'header'})[0];\r
67             var newNode = c.nodeSplit({node: header, offset: 4});\r
68             assertDomEqual(c.getContent(), utils.cleanUp('\\r
69                 <div wlxml-tag="section">\\r
70                     <div wlxml-tag="header">Head</div>\\r
71                     <div wlxml-tag="header">er 1</div>\\r
72                 </div>'));\r
73             assert.ok(newNode.isSame(c.findNodes({tag: 'header'})[1]));\r
74         });\r
75         \r
76         test('split root node', function() {\r
77             var c = canvas.create('<div wlxml-tag="header">cat</div>');\r
78             var header = c.findNodes({tag: 'header'})[0];\r
79             var newNode = c.nodeSplit({node: header, offset: 1});\r
80             assertDomEqual(c.getContent(), utils.cleanUp('\\r
81                     <div wlxml-tag="header">c</div>\\r
82                     <div wlxml-tag="header">at</div>'));\r
83             assert.ok(newNode.isSame(c.findNodes({tag: 'header'})[1]));\r
84         });\r
85         \r
86         test('split node with subnodes', function() {\r
87             var c = canvas.create(utils.cleanUp('\\r
88                 <div wlxml-tag="section">\\r
89                     <div wlxml-tag="header">Fancy and nice<span wlxml-tag="aside">header</span> 1</div>\\r
90                  </div>'));\r
91             var header = c.findNodes({tag: 'header'})[0];\r
92             var newNode = c.nodeSplit({node: header, offset: 5});\r
93             assertDomEqual(c.getContent(), utils.cleanUp('\\r
94                 <div wlxml-tag="section">\\r
95                     <div wlxml-tag="header">Fancy</div>\\r
96                     <div wlxml-tag="header">and nice<span wlxml-tag="aside">header</span> 1</div>\\r
97                 </div>'));\r
98         });\r
99         \r
100         test('remove node', function() {\r
101             var c = canvas.create('<div wlxml-tag="section"><span wlxml-tag="span">some text</span></div>');\r
102             var span = c.findNodes({tag: 'span'})[0];\r
103             c.nodeRemove({node: span});\r
104             assertDomEqual(c.getContent(), '<div wlxml-tag="section"></div>');\r
105         });\r
106     });\r
107     \r
108     \r
109     suite('Lists', function() {\r
110         test('create from existing nodes', function() {\r
111             var c = canvas.create(utils.cleanUp('\\r
112                 <div wlxml-tag="section">\\r
113                     <div wlxml-tag="div">alice</div>\\r
114                     has\\r
115                     <div wlxml-tag="div">a</div>\\r
116                     <div wlxml-tag="div">cat</div>\\r
117                     <div wlxml-tag="div">or not</div>\\r
118                 </div>'\r
119             ));\r
120             \r
121             var div_alice = c.findNodes({tag: 'div'})[0];\r
122             var div_cat = c.findNodes({tag:'div'})[2];\r
123             \r
124             c.listCreate({start: div_alice, end: div_cat});\r
125             \r
126             assertDomEqual(c.getContent(), utils.cleanUp('\\r
127                 <div wlxml-tag="section">\\r
128                     <div wlxml-tag="div" wlxml-class="list-items">\\r
129                         <div wlxml-tag="div" wlxml-class="item">alice</div>\\r
130                         <div wlxml-tag="div" wlxml-class="item">has</div>\\r
131                         <div wlxml-tag="div" wlxml-class="item">a</div>\\r
132                         <div wlxml-tag="div" wlxml-class="item">cat</div>\\r
133                     </div>\\r
134                     <div wlxml-tag="div">or not</div>\\r
135                 </div>'));\r
136         });\r
137         \r
138         test('create from existing nodes - start/end order doesn\'t matter', function() {\r
139             var html = utils.cleanUp('\\r
140                     <div wlxml-tag="div">alice</div>\\r
141                     <div wlxml-tag="div">cat</div>');\r
142             var expected = utils.cleanUp('\\r
143                     <div wlxml-tag="div" wlxml-class="list-items">\\r
144                         <div wlxml-tag="div" wlxml-class="item">alice</div>\\r
145                         <div wlxml-tag="div" wlxml-class="item">cat</div>\\r
146                     </div>');\r
147                     \r
148             var c = canvas.create(html);\r
149             var div_alice = c.findNodes({tag: 'div'})[0];\r
150             var div_cat = c.findNodes({tag:'div'})[1];\r
151             c.listCreate({start: div_cat, end: div_alice});\r
152             assertDomEqual(c.getContent(), expected);\r
153             \r
154             c = canvas.create(html);\r
155             div_alice = c.findNodes({tag: 'div'})[0];\r
156             div_cat = c.findNodes({tag:'div'})[1];\r
157             c.listCreate({start: div_alice, end: div_cat});\r
158             assertDomEqual(c.getContent(), expected);\r
159         });\r
160         \r
161         test('remove', function() {\r
162             var c = canvas.create(utils.cleanUp('\\r
163                 <div wlxml-tag="section">\\r
164                     <div wlxml-tag="div" wlxml-class="list-items">\\r
165                         <div wlxml-tag="div" wlxml-class="item">alice</div>\\r
166                         <div wlxml-tag="div" wlxml-class="item">cat</div>\\r
167                     </div>\\r
168                 </div>'));\r
169             var item = c.findNodes({klass: 'item'})[1];\r
170             c.listRemove({pointer: item});\r
171             assertDomEqual(c.getContent(), utils.cleanUp('\\r
172                 <div wlxml-tag="section">\\r
173                     <div wlxml-tag="div">alice</div>\\r
174                     <div wlxml-tag="div">cat</div>\\r
175                 </div>'));\r
176         });\r
177         \r
178         test('checking if node is inside a list', function() {\r
179             var c = canvas.create(utils.cleanUp('\\r
180                 <div wlxml-tag="section">\\r
181                     <div wlxml-tag="div" wlxml-class="list-items-enum">\\r
182                         <div wlxml-tag="div" wlxml-class="item">alice</div>\\r
183                         <div wlxml-tag="div" wlxml-class="item">cat</div>\\r
184                     </div>\\r
185                 </div>'));\r
186             var item = c.findNodes({klass: 'item'})[1];\r
187             assert.ok(c.nodeInsideList({node: item}));\r
188         });\r
189     });\r
190 });