3b33751d7616554d5720875efe0c718b44b89061
[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/documentElement',
7 'modules/documentCanvas/canvas/utils',
8 'wlxml/wlxml'
9 ], function($, chai, sinon, canvas, documentElement, utils, wlxml) {
10     
11 'use strict';
12 /* global describe, it, beforeEach, afterEach */
13
14 var expect = chai.expect;
15
16 var getCanvasFromXML = function(xml) {
17     return canvas.fromXMLDocument(getDocumentFromXML(xml));
18 };
19
20 var getDocumentFromXML = function(xml) {
21     return wlxml.WLXMLDocumentFromXML(xml);
22 };
23
24 var wait = function(callback, timeout) {
25     /* globals window */
26     return window.setTimeout(callback, timeout || 0.5);
27 };
28
29
30 describe('new Canvas', function() {
31     it('abc', function() {
32         var doc = wlxml.WLXMLDocumentFromXML('<section>Alice <span>has</span> a cat!</div>'),
33             c = canvas.fromXMLDocument(doc);
34
35         expect(c.doc().children()).to.have.length(3);
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
93 describe('Cursor', function() {
94     /* globals Node */
95     var getSelection;
96
97     var findTextNode = function(inside, text) {
98         var nodes = inside.find(':not(iframe)').addBack().contents().filter(function() {
99             return this.nodeType === Node.TEXT_NODE && this.data === text;
100         });
101         if(nodes.length) {
102             return nodes[0];
103         }
104         return null;
105     };
106
107     beforeEach(function() {
108         /* globals window */
109         getSelection = sinon.stub(window, 'getSelection');
110     });
111
112     afterEach(function() {
113         getSelection.restore();
114     });
115
116     it('returns position when browser selection collapsed', function() {
117         var c = getCanvasFromXML('<section>Alice has a cat</section>'),
118             dom = c.doc().dom(),
119             text = findTextNode(dom, 'Alice has a cat');
120
121         expect(text.nodeType).to.equal(Node.TEXT_NODE, 'correct node selected');
122         expect($(text).text()).to.equal('Alice has a cat');
123
124         getSelection.returns({
125             anchorNode: text,
126             focusNode: text,
127             anchorOffset: 5,
128             focusOffset: 5,
129             isCollapsed: true
130         });
131         var cursor = c.getCursor(),
132             position = cursor.getPosition();
133
134         expect(cursor.isSelecting()).to.equal(false, 'cursor is not selecting anything');
135         expect(position.element.getText()).to.equal('Alice has a cat');
136         expect(position.offset).to.equal(5);
137         expect(position.offsetAtEnd).to.equal(false, 'offset is not at end');
138
139         getSelection.returns({
140             anchorNode: text,
141             focusNode: text,
142             anchorOffset: 15,
143             focusOffset: 15,
144             isCollapsed: true
145         });
146
147         expect(cursor.getPosition().offsetAtEnd).to.equal(true, 'offset at end');
148     });
149
150     it('returns boundries of selection when browser selection not collapsed', function() {
151         var c = getCanvasFromXML('<section>Alice <span>has</span> a <span>big</span> cat</section>'),
152             dom = c.doc().dom(),
153             text = {
154                 alice: findTextNode(dom, 'Alice '),
155                 has: findTextNode(dom, 'has'),
156                 cat: findTextNode(dom, ' cat')
157             },
158             cursor = c.getCursor(),
159             aliceElement = c.getDocumentElement(text.alice),
160             catElement = c.getDocumentElement(text.cat);
161
162         [
163             {focus: text.alice, focusOffset: 1, anchor: text.cat,   anchorOffset: 2, selectionAnchor: catElement},
164             {focus: text.cat,   focusOffset: 2, anchor: text.alice, anchorOffset: 1, selectionAnchor: aliceElement}
165         ].forEach(function(s, idx) {
166             getSelection.returns({isColapsed: false, anchorNode: s.anchor, anchorOffset: s.anchorOffset, focusNode: s.focus, focusOffset: s.focusOffset});
167
168             var selectionStart = cursor.getSelectionStart(),
169                 selectionEnd = cursor.getSelectionEnd(),
170                 selectionAnchor = cursor.getSelectionAnchor();
171
172             expect(cursor.isSelecting()).to.equal(true, 'cursor is selecting');
173             expect(selectionStart.element.sameNode(aliceElement)).to.equal(true, '"Alice" is the start of the selection ' + idx);
174             expect(selectionStart.offset).to.equal(1, '"Alice" offset ok' + idx);
175             expect(selectionEnd.element.sameNode(catElement)).to.equal(true, '"Cat" is the start of the selection ' + idx);
176             expect(selectionEnd.offset).to.equal(2, '"Cat" offset ok' + idx);
177             expect(selectionAnchor.element.sameNode(s.selectionAnchor)).to.equal(true, 'anchor ok');
178             expect(selectionAnchor.offset).to.equal(s.anchorOffset, 'anchor offset ok');
179         });
180     });
181
182     it('recognizes when browser selection boundries lies in sibling DocumentTextElements', function() {
183         var c = getCanvasFromXML('<section>Alice <span>has</span> a <span>big</span> cat</section>'),
184             dom = c.doc().dom(),
185             text = {
186                 alice: findTextNode(dom, 'Alice '),
187                 has: findTextNode(dom, 'has'),
188                 a: findTextNode(dom, ' a '),
189                 big: findTextNode(dom, 'big'),
190                 cat: findTextNode(dom, ' cat'),
191             },
192             cursor = c.getCursor();
193
194         expect($(text.alice).text()).to.equal('Alice ');
195         expect($(text.has).text()).to.equal('has');
196         expect($(text.a).text()).to.equal(' a ');
197         expect($(text.big).text()).to.equal('big');
198         expect($(text.cat).text()).to.equal(' cat');
199
200         getSelection.returns({anchorNode: text.alice, focusNode: text.a});
201         expect(cursor.isSelectingSiblings()).to.equal(true, '"Alice" and "a" are children');
202
203         getSelection.returns({anchorNode: text.alice, focusNode: text.cat});
204         expect(cursor.isSelectingSiblings()).to.equal(true, '"Alice" and "cat" are children');
205
206         getSelection.returns({anchorNode: text.alice, focusNode: text.has});
207         expect(cursor.isSelectingSiblings()).to.equal(false, '"Alice" and "has" are not children');
208
209         getSelection.returns({anchorNode: text.has, focusNode: text.big});
210         expect(cursor.isSelectingSiblings()).to.equal(false, '"has" and "big" are not children');
211     });
212 });
213
214 });