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