67f59b6668715f6de306a9bc0dc253e0ca9c52f4
[fnpeditor.git] / src / editor / modules / documentCanvas / canvas / canvas.test.js
1 define([
2 'libs/jquery',
3 'libs/chai',
4 'libs/sinon',
5 'modules/documentCanvas/canvas/canvas',
6 'modules/documentCanvas/canvas/utils',
7 'wlxml/wlxml'
8 ], function($, chai, sinon, canvas, utils, wlxml) {
9     
10 'use strict';
11 /* global describe, it, beforeEach, afterEach */
12
13 var expect = chai.expect;
14
15 var getCanvasFromXML = function(xml) {
16     return canvas.fromXMLDocument(getDocumentFromXML(xml));
17 };
18
19 var getDocumentFromXML = function(xml) {
20     return wlxml.WLXMLDocumentFromXML(xml);
21 };
22
23 var wait = function(callback, timeout) {
24     /* globals window */
25     return window.setTimeout(callback, timeout || 0.5);
26 };
27
28
29 describe('new Canvas', function() {
30     it('abc', function() {
31         var doc = wlxml.WLXMLDocumentFromXML('<section>Alice <span>has</span> a cat!</div>'),
32             c = canvas.fromXMLDocument(doc);
33
34         expect(c.doc().children()).to.have.length(3);
35         expect(c.doc().children()[0].canvas).to.equal(c);
36     });
37 });
38
39 describe('Handling empty text nodes', function() {
40     it('puts zero width space into node with about to be remove text', function(done) {
41         var c = getCanvasFromXML('<section>Alice</section>'),
42             textElement = c.doc().children()[0];
43         textElement.setText('');
44
45         /* Wait for MutationObserver to kick in. */
46         wait(function() {
47             expect(textElement.getText({raw:true})).to.equal(utils.unicode.ZWS, 'ZWS in canvas');
48             expect(c.wlxmlDocument.root.contents()[0].getText()).to.equal('', 'empty string in a document');
49             done();
50         });
51     });
52 });
53
54 describe('Handling changes to the document', function() {
55     it('replaces the whole canvas content when document root node replaced', function() {
56         var doc = getDocumentFromXML('<section></section>'),
57             c = canvas.fromXMLDocument(doc);
58
59         var header = doc.root.replaceWith({tagName: 'header'});
60         expect(c.doc().data('wlxmlNode').sameNode(header)).to.equal(true);
61     });
62 });
63
64 describe('Listening to document changes', function() {
65
66     it('Handling element node moved', function() {
67         var doc = getDocumentFromXML('<section><a></a><b></b></section>'),
68             a = doc.root.contents()[0],
69             b = doc.root.contents()[1],
70             c = canvas.fromXMLDocument(doc);
71
72         a.before(b);
73         var sectionChildren = c.doc().children();
74         expect(sectionChildren.length).to.equal(2);
75         expect(sectionChildren[0].getWlxmlTag()).to.equal('b');
76         expect(sectionChildren[1].getWlxmlTag()).to.equal('a');
77     });
78
79     it('Handling text node moved', function() {
80         var doc = getDocumentFromXML('<section><a></a>Alice</section>'),
81             a = doc.root.contents()[0],
82             textNode = doc.root.contents()[1],
83             c = canvas.fromXMLDocument(doc);
84
85         a.before(textNode);
86         var sectionChildren = c.doc().children();
87         expect(sectionChildren.length).to.equal(2);
88         expect(sectionChildren[0].getText()).to.equal('Alice');
89         expect(sectionChildren[1].getWlxmlTag()).to.equal('a');
90     });
91
92     it('Handles nodeTagChange event', function() {
93
94         var doc = wlxml.WLXMLDocumentFromXML('<section><div>Alice</div></section>'),
95             c = canvas.fromXMLDocument(doc);
96
97         doc.root.contents()[0].setTag('header');
98
99         var headerNode = doc.root.contents()[0],
100             headerElement = c.doc().children()[0];
101
102         expect(headerElement.getWlxmlTag()).to.equal('header', 'element ok');
103
104         /* Make sure we handle invalidation of reference to wlxmlNode after changing its tag */
105         expect(headerNode.getData('canvasElement').sameNode(headerElement)).to.equal(true, 'node->element');
106         expect(headerElement.data('wlxmlNode').sameNode(headerNode)).to.equal(true, 'element->node');
107     });
108
109     it('Handles nodeDetached event for an empty text node', function(done) {
110         var doc = wlxml.WLXMLDocumentFromXML('<section><div>A<span>b</span></div></section>'),
111             aTextNode = doc.root.contents()[0].contents()[0],
112             aTextElement;
113
114         canvas.fromXMLDocument(doc);
115         aTextElement = utils.findCanvasElementInParent(aTextNode, aTextNode.parent()); // TODO: This really should be easier...
116
117         aTextElement.setText('');
118
119         wait(function() {
120             var parent = aTextElement.parent();
121             expect(aTextElement.getText({raw:true})).to.equal(utils.unicode.ZWS, 'canvas represents this as empty node');
122             aTextElement.data('wlxmlNode').detach();
123             expect(parent.children().length).to.equal(1);
124             expect(parent.children()[0].getWlxmlTag()).to.equal('span');
125             done();
126         });
127     });
128 });
129
130 describe('Cursor', function() {
131     /* globals Node */
132     var getSelection;
133
134     var findTextNode = function(inside, text) {
135         var nodes = inside.find(':not(iframe)').addBack().contents().filter(function() {
136             return this.nodeType === Node.TEXT_NODE && this.data === text;
137         });
138         if(nodes.length) {
139             return nodes[0];
140         }
141         return null;
142     };
143
144     beforeEach(function() {
145         /* globals window */
146         getSelection = sinon.stub(window, 'getSelection');
147     });
148
149     afterEach(function() {
150         getSelection.restore();
151     });
152
153     it('returns position when browser selection collapsed', function() {
154         var c = getCanvasFromXML('<section>Alice has a cat</section>'),
155             dom = c.doc().dom(),
156             text = findTextNode(dom, 'Alice has a cat');
157
158         expect(text.nodeType).to.equal(Node.TEXT_NODE, 'correct node selected');
159         expect($(text).text()).to.equal('Alice has a cat');
160
161         getSelection.returns({
162             anchorNode: text,
163             focusNode: text,
164             anchorOffset: 5,
165             focusOffset: 5,
166             isCollapsed: true
167         });
168         var cursor = c.getCursor(),
169             position = cursor.getPosition();
170
171         expect(cursor.isSelecting()).to.equal(false, 'cursor is not selecting anything');
172         expect(position.element.getText()).to.equal('Alice has a cat');
173         expect(position.offset).to.equal(5);
174         expect(position.offsetAtEnd).to.equal(false, 'offset is not at end');
175
176         getSelection.returns({
177             anchorNode: text,
178             focusNode: text,
179             anchorOffset: 15,
180             focusOffset: 15,
181             isCollapsed: true
182         });
183
184         expect(cursor.getPosition().offsetAtEnd).to.equal(true, 'offset at end');
185     });
186
187     it('recognizes selection start and end on document order', function() {
188         var c = getCanvasFromXML('<section><span>Alice</span><span>has a cat</span><div>abc<span>...</span>cde</div></section>'),
189             dom = c.doc().dom(),
190             textFirst = findTextNode(dom, 'Alice'),
191             textSecond = findTextNode(dom, 'has a cat'),
192             textAbc = findTextNode(dom, 'abc'),
193             textCde = findTextNode(dom, 'cde');
194
195         var check = function(label, expected) {
196             var cursor = c.getCursor();
197             label = label + ': ';
198             expect(cursor.getSelectionStart().element.getText()).to.equal(expected.start.text, label + 'start element ok');
199             expect(cursor.getSelectionStart().offset).to.equal(expected.start.offset, label + 'start offset ok');
200             expect(cursor.getSelectionEnd().element.getText()).to.equal(expected.end.text, label + 'end element ok');
201             expect(cursor.getSelectionEnd().offset).to.equal(expected.end.offset, label + 'end offset ok');
202         };
203
204         getSelection.returns({
205             anchorNode: textFirst,
206             focusNode: textFirst,
207             anchorOffset: 1,
208             focusOffset: 3,
209             isCollapsed: false
210         });
211
212         check('same element, anchor first', {
213             start: {text: 'Alice', offset: 1},
214             end: {text: 'Alice', offset:3}
215         });
216
217
218         getSelection.returns({
219             anchorNode: textFirst,
220             focusNode: textFirst,
221             anchorOffset: 3,
222             focusOffset: 1,
223             isCollapsed: false
224         });
225
226         check('same element, anchor second', {
227             start: {text: 'Alice', offset: 1},
228             end: {text: 'Alice', offset:3}
229         });
230
231
232         getSelection.returns({
233             anchorNode: textAbc,
234             focusNode: textCde,
235             anchorOffset: 3,
236             focusOffset: 1,
237             isCollapsed: false
238         });
239
240         check('same parent, anchor first', {
241             start: {text: 'abc', offset: 3},
242             end: {text: 'cde', offset:1}
243         });
244
245
246         getSelection.returns({
247             anchorNode: textCde,
248             focusNode: textAbc,
249             anchorOffset: 1,
250             focusOffset: 3,
251             isCollapsed: false
252         });
253
254         check('same parent, anchor second', {
255             start: {text: 'abc', offset: 3},
256             end: {text: 'cde', offset:1}
257         });
258
259
260         getSelection.returns({
261             anchorNode: textFirst,
262             focusNode: textSecond,
263             anchorOffset: 1,
264             focusOffset: 3,
265             isCollapsed: false
266         });
267
268         check('different parents, anchor first', {
269             start: {text: 'Alice', offset: 1},
270             end: {text: 'has a cat', offset:3}
271         });
272
273
274         getSelection.returns({
275             anchorNode: textSecond,
276             focusNode: textFirst,
277             anchorOffset: 3,
278             focusOffset: 1,
279             isCollapsed: false
280         });
281
282         check('different parents, anchor second', {
283             start: {text: 'Alice', offset: 1},
284             end: {text: 'has a cat', offset:3}
285         });
286     });
287
288     it('returns boundries of selection when browser selection not collapsed', function() {
289         var c = getCanvasFromXML('<section>Alice <span>has</span> a <span>big</span> cat</section>'),
290             dom = c.doc().dom(),
291             text = {
292                 alice: findTextNode(dom, 'Alice '),
293                 has: findTextNode(dom, 'has'),
294                 cat: findTextNode(dom, ' cat')
295             },
296             cursor = c.getCursor(),
297             aliceElement = c.getDocumentElement(text.alice),
298             catElement = c.getDocumentElement(text.cat);
299
300         [
301             {focus: text.alice, focusOffset: 1, anchor: text.cat,   anchorOffset: 2, selectionAnchor: catElement},
302             {focus: text.cat,   focusOffset: 2, anchor: text.alice, anchorOffset: 1, selectionAnchor: aliceElement}
303         ].forEach(function(s, idx) {
304             getSelection.returns({isColapsed: false, anchorNode: s.anchor, anchorOffset: s.anchorOffset, focusNode: s.focus, focusOffset: s.focusOffset});
305
306             var selectionStart = cursor.getSelectionStart(),
307                 selectionEnd = cursor.getSelectionEnd(),
308                 selectionAnchor = cursor.getSelectionAnchor();
309
310             expect(cursor.isSelecting()).to.equal(true, 'cursor is selecting');
311             expect(selectionStart.element.sameNode(aliceElement)).to.equal(true, '"Alice" is the start of the selection ' + idx);
312             expect(selectionStart.offset).to.equal(1, '"Alice" offset ok' + idx);
313             expect(selectionEnd.element.sameNode(catElement)).to.equal(true, '"Cat" is the start of the selection ' + idx);
314             expect(selectionEnd.offset).to.equal(2, '"Cat" offset ok' + idx);
315             expect(selectionAnchor.element.sameNode(s.selectionAnchor)).to.equal(true, 'anchor ok');
316             expect(selectionAnchor.offset).to.equal(s.anchorOffset, 'anchor offset ok');
317         });
318     });
319
320     it('recognizes when browser selection boundries lies in sibling DocumentTextElements', function() {
321         var c = getCanvasFromXML('<section>Alice <span>has</span> a <span>big</span> cat</section>'),
322             dom = c.doc().dom(),
323             text = {
324                 alice: findTextNode(dom, 'Alice '),
325                 has: findTextNode(dom, 'has'),
326                 a: findTextNode(dom, ' a '),
327                 big: findTextNode(dom, 'big'),
328                 cat: findTextNode(dom, ' cat'),
329             },
330             cursor = c.getCursor();
331
332         expect($(text.alice).text()).to.equal('Alice ');
333         expect($(text.has).text()).to.equal('has');
334         expect($(text.a).text()).to.equal(' a ');
335         expect($(text.big).text()).to.equal('big');
336         expect($(text.cat).text()).to.equal(' cat');
337
338         getSelection.returns({anchorNode: text.alice, focusNode: text.a});
339         expect(cursor.isSelectingSiblings()).to.equal(true, '"Alice" and "a" are children');
340
341         getSelection.returns({anchorNode: text.alice, focusNode: text.cat});
342         expect(cursor.isSelectingSiblings()).to.equal(true, '"Alice" and "cat" are children');
343
344         getSelection.returns({anchorNode: text.alice, focusNode: text.has});
345         expect(cursor.isSelectingSiblings()).to.equal(false, '"Alice" and "has" are not children');
346
347         getSelection.returns({anchorNode: text.has, focusNode: text.big});
348         expect(cursor.isSelectingSiblings()).to.equal(false, '"has" and "big" are not children');
349     });
350 });
351
352 });