modules/documentCanvas/tests/canvas.test.js

   1 define([
   2 'libs/jquery-1.9.1.min',
   3 'libs/chai',
   4 './utils.js',
   5 'modules/documentCanvas/canvas',
   6 'modules/documentCanvas/canvasNode'
   7 ], function($, chai, utils, canvas, canvasNode) {
   8
   9     'use strict';
  10
  11     var assert = chai.assert;
  12     var assertDomEqual = utils.assertDomEqual;
  13
  14
  15     suite('Quering nodes', function() {
  16         test('getting preceding node', function() {
  17             var c = canvas.create('<div wlxml-tag="section"><div wlxml-tag="p">a</div><div wlxml-tag="p">b</div></div>');
  18             var secondP = c.findNodes({tag: 'p'})[1];
  19             var firstP = c.getPrecedingNode({node: secondP});
  20             assert.equal(firstP.getContent(), 'a');
  21         });
  22
  23        test('pervious node of node without "previous siblings" is its parent', function() {
  24             var c = canvas.create('<div wlxml-tag="section"><div wlxml-tag="p">a</div></div>');
  25             var paragraph = c.findNodes({tag: 'p'})[0];
  26             assert.equal(c.getPrecedingNode({node: paragraph}).getTag(), 'section');
  27         });
  28
  29     });
  30
  31
  32     suite('Inserting nodes', function() {
  33         test('append node to root', function() {
  34             var c = canvas.create();
  35             var node = canvasNode.create({tag: 'header', klass: 'some-class'});
  36             c.nodeAppend({node: node, to: 'root'});
  37             assertDomEqual(c.getContent(), '<div wlxml-tag="header" wlxml-class="some-class">');
  38         });
  39
  40         test('append node to another node', function() {
  41             var c = canvas.create('<div wlxml-tag="section"></div>');
  42             var node = canvasNode.create({tag: 'header', klass: 'some-class'});
  43             var to = c.findNodes('div')[0];
  44             c.nodeAppend({node: node, to: to});
  45             assertDomEqual(c.getContent(), '<div wlxml-tag="section"><div wlxml-tag="header" wlxml-class="some-class"></div></div>');
  46         });
  47
  48         test('insert node after another node', function() {
  49             var c = canvas.create('<div wlxml-tag="section"></div>');
  50             var node = canvasNode.create({tag: 'header', klass: 'some-class'});
  51             var after = c.findNodes('div')[0];
  52             c.nodeInsertAfter({node: node, after: after});
  53             assertDomEqual(c.getContent(), '<div wlxml-tag="section"></div><div wlxml-tag="header" wlxml-class="some-class"></div>');
  54         });
  55
  56         test('wrap text in node', function() {
  57             var c = canvas.create('<div wlxml-tag="section"><div wlxml-tag="header">Header 1</div></div>');
  58             var header = c.findNodes({tag: 'header'})[0];
  59             var wrapper = canvasNode.create({tag: 'aside'});
  60             c.nodeWrap({inside: header, _with: wrapper, offsetStart: 1, offsetEnd: 6});
  61             assertDomEqual(c.getContent(), '<div wlxml-tag="section"><div wlxml-tag="header">H<span wlxml-tag="aside">eader</span> 1</div></div>');
  62         });
  63
  64         test('wrap text in node - text not a first node', function() {
  65             var c = canvas.create('<div wlxml-tag="header">Alice <span wlxml-tag="span">has a</span> cat</div>');
  66             var header = c.findNodes({tag: 'header'})[0];
  67             var wrapper = canvasNode.create({tag: 'aside'});
  68             c.nodeWrap({inside: header, _with: wrapper, offsetStart: 1, offsetEnd: 4, textNodeIdx: 2});
  69             assertDomEqual(c.getContent(), '<div wlxml-tag="header">Alice <span wlxml-tag="span">has a</span> <span wlxml-tag="aside">cat</span></div>');
  70         });
  71
  72         test('wrap text with nodes inside', function() {
  73             var c = canvas.create('<div wlxml-tag="header">Alice has a <span wlxml-tag="span">small</span> cat</div>');
  74             var header = c.findNodes({tag: 'header'})[0];
  75             var wrapper = canvasNode.create({tag: 'aside'});
  76             c.nodeWrap({inside: header, _with: wrapper, offsetStart: 6, offsetEnd: 4, textNodeIdx: [0,2]});
  77             assertDomEqual(c.getContent(), '<div wlxml-tag="header">Alice <span wlxml-tag="aside">has a <span wlxml-tag="span">small</span> cat</span></div>');
  78         });
  79
  80         test('unwrap text', function() {
  81             var c = canvas.create('<div wlxml-tag="div">Alice <span wlxml-tag="span">has</span> a cat</div>');
  82             var span = c.findNodes({tag:'span'})[0];
  83             c.nodeUnwrap({node: span});
  84             assertDomEqual(c.getContent(), '<div wlxml-tag="div">Alice has a cat</div>');
  85         });
  86
  87         test('unwrap text - first text node', function() {
  88             var c = canvas.create('<div wlxml-tag="div"><span wlxml-tag="span">Alice</span> has a cat</div>');
  89             var span = c.findNodes({tag:'span'})[0];
  90             c.nodeUnwrap({node: span});
  91             assertDomEqual(c.getContent(), '<div wlxml-tag="div">Alice has a cat</div>');
  92         });
  93
  94         test('unwrap text - only text node', function() {
  95             var c = canvas.create('<div wlxml-tag="div"><span wlxml-tag="span">Alice</span></div>');
  96             var span = c.findNodes({tag:'span'})[0];
  97             c.nodeUnwrap({node: span});
  98             assertDomEqual(c.getContent(), '<div wlxml-tag="div">Alice</div>');
  99         });
 100
 101
 102         test('unwrap text - non text neighbours', function() {
 103             var c = canvas.create('<div wlxml-tag="div"><div wlxml-tag"div">a</div><span wlxml-tag="span">Alice</span><div wlxml-tag"div">b</div></div>');
 104             var span = c.findNodes({tag:'span'})[0];
 105             c.nodeUnwrap({node: span});
 106             assertDomEqual(c.getContent(), '<div wlxml-tag="div"><div wlxml-tag"div">a</div>Alice<div wlxml-tag"div">b</div></div>');
 107         });
 108
 109         test('split node', function() {
 110             var c = canvas.create('<div wlxml-tag="section"><div wlxml-tag="header">Header 1</div></div>');
 111             var header = c.findNodes({tag: 'header'})[0];
 112             var newNode = c.nodeSplit({node: header, offset: 4});
 113             assertDomEqual(c.getContent(), utils.cleanUp('\
 114                 <div wlxml-tag="section">\
 115                     <div wlxml-tag="header">Head</div>\
 116                     <div wlxml-tag="header">er 1</div>\
 117                 </div>'));
 118             assert.ok(newNode.isSame(c.findNodes({tag: 'header'})[1]));
 119         });
 120
 121         test('split root node', function() {
 122             var c = canvas.create('<div wlxml-tag="header">cat</div>');
 123             var header = c.findNodes({tag: 'header'})[0];
 124             var newNode = c.nodeSplit({node: header, offset: 1});
 125             assertDomEqual(c.getContent(), utils.cleanUp('\
 126                     <div wlxml-tag="header">c</div>\
 127                     <div wlxml-tag="header">at</div>'));
 128             assert.ok(newNode.isSame(c.findNodes({tag: 'header'})[1]));
 129         });
 130
 131         test('split node with subnodes', function() {
 132             var c = canvas.create(utils.cleanUp('\
 133                 <div wlxml-tag="section">\
 134                     <div wlxml-tag="header">Fancy and nice<span wlxml-tag="aside">header</span> 1</div>\
 135                  </div>'));
 136             var header = c.findNodes({tag: 'header'})[0];
 137             var newNode = c.nodeSplit({node: header, offset: 5});
 138             assertDomEqual(c.getContent(), utils.cleanUp('\
 139                 <div wlxml-tag="section">\
 140                     <div wlxml-tag="header">Fancy</div>\
 141                     <div wlxml-tag="header">and nice<span wlxml-tag="aside">header</span> 1</div>\
 142                 </div>'));
 143         });
 144
 145         test('remove node', function() {
 146             var c = canvas.create('<div wlxml-tag="section"><span wlxml-tag="span">some text</span></div>');
 147             var span = c.findNodes({tag: 'span'})[0];
 148             c.nodeRemove({node: span});
 149             assertDomEqual(c.getContent(), '<div wlxml-tag="section"></div>');
 150         });
 151     });
 152
 153
 154     suite('Lists', function() {
 155         test('create from existing nodes', function() {
 156             var c = canvas.create(utils.cleanUp('\
 157                 <div wlxml-tag="section">\
 158                     <div wlxml-tag="div">alice</div>\
 159                     has\
 160                     <div wlxml-tag="div">a</div>\
 161                     <div wlxml-tag="div">cat</div>\
 162                     <div wlxml-tag="div">or not</div>\
 163                 </div>'
 164             ));
 165
 166             var div_alice = c.findNodes({tag: 'div'})[0];
 167             var div_cat = c.findNodes({tag:'div'})[2];
 168
 169             c.listCreate({start: div_alice, end: div_cat});
 170
 171             assertDomEqual(c.getContent(), utils.cleanUp('\
 172                 <div wlxml-tag="section">\
 173                     <div wlxml-tag="div" wlxml-class="list-items">\
 174                         <div wlxml-tag="div" wlxml-class="item">alice</div>\
 175                         <div wlxml-tag="div" wlxml-class="item">has</div>\
 176                         <div wlxml-tag="div" wlxml-class="item">a</div>\
 177                         <div wlxml-tag="div" wlxml-class="item">cat</div>\
 178                     </div>\
 179                     <div wlxml-tag="div">or not</div>\
 180                 </div>'));
 181         });
 182
 183         test('create from existing nodes - start/end order doesn\'t matter', function() {
 184             var html = utils.cleanUp('\
 185                     <div wlxml-tag="div">alice</div>\
 186                     <div wlxml-tag="div">cat</div>');
 187             var expected = utils.cleanUp('\
 188                     <div wlxml-tag="div" wlxml-class="list-items">\
 189                         <div wlxml-tag="div" wlxml-class="item">alice</div>\
 190                         <div wlxml-tag="div" wlxml-class="item">cat</div>\
 191                     </div>');
 192
 193             var c = canvas.create(html);
 194             var div_alice = c.findNodes({tag: 'div'})[0];
 195             var div_cat = c.findNodes({tag:'div'})[1];
 196             c.listCreate({start: div_cat, end: div_alice});
 197             assertDomEqual(c.getContent(), expected);
 198
 199             c = canvas.create(html);
 200             div_alice = c.findNodes({tag: 'div'})[0];
 201             div_cat = c.findNodes({tag:'div'})[1];
 202             c.listCreate({start: div_alice, end: div_cat});
 203             assertDomEqual(c.getContent(), expected);
 204         });
 205
 206         test('remove', function() {
 207             var c = canvas.create(utils.cleanUp('\
 208                 <div wlxml-tag="section">\
 209                     <div wlxml-tag="div" wlxml-class="list-items">\
 210                         <div wlxml-tag="div" wlxml-class="item">alice</div>\
 211                         <div wlxml-tag="div" wlxml-class="item">cat</div>\
 212                     </div>\
 213                 </div>'));
 214             var item = c.findNodes({klass: 'item'})[1];
 215             c.listRemove({pointer: item});
 216             assertDomEqual(c.getContent(), utils.cleanUp('\
 217                 <div wlxml-tag="section">\
 218                     <div wlxml-tag="div">alice</div>\
 219                     <div wlxml-tag="div">cat</div>\
 220                 </div>'));
 221         });
 222
 223         test('checking if node is inside a list', function() {
 224             var c = canvas.create(utils.cleanUp('\
 225                 <div wlxml-tag="section">\
 226                     <div wlxml-tag="div" wlxml-class="list-items-enum">\
 227                         <div wlxml-tag="div" wlxml-class="item">alice <span wlxml-tag="span"></span</div>\
 228                         <div wlxml-tag="div" wlxml-class="item">cat</div>\
 229                     </div>\
 230                 </div>'));
 231             assert.ok(c.nodeInsideList({node: c.findNodes({klass: 'item'})[1]}), 'item is inside a list');
 232             assert.ok(c.nodeInsideList({node: c.findNodes({tag: 'span'})[0]}), 'things nested in item are inside a list');
 233         });
 234
 235         test('moving items to nested list', function() {
 236             var listHTML = utils.cleanUp('\
 237                     <div wlxml-tag="div" wlxml-class="list-items">\
 238                         <div wlxml-tag="div" wlxml-class="item">alice</div>\
 239                         <div wlxml-tag="div" wlxml-class="item">cat</div>\
 240                         <div wlxml-tag="div" wlxml-class="item">dog</div>\
 241                         <div wlxml-tag="div" wlxml-class="item">bee</div>\
 242                     </div>');
 243             var c = canvas.create(listHTML);
 244             var items = c.findNodes({klass: 'item'});
 245             var cat_item = items[1];
 246             var dog_item = items[2];
 247
 248             c.listCreate({start: cat_item, end: dog_item});
 249
 250             assertDomEqual(c.getContent(), utils.cleanUp('\
 251                     <div wlxml-tag="div" wlxml-class="list-items">\
 252                         <div wlxml-tag="div" wlxml-class="item">alice</div>\
 253                         <div wlxml-tag="div" wlxml-class="item" class="canvas-silent-item">\
 254                             <div wlxml-tag="div" wlxml-class="list-items">\
 255                                 <div wlxml-tag="div" wlxml-class="item">cat</div>\
 256                                 <div wlxml-tag="div" wlxml-class="item">dog</div>\
 257                             </div>\
 258                         </div>\
 259                         <div wlxml-tag="div" wlxml-class="item">bee</div>\
 260                     </div>'
 261             ));
 262         });
 263
 264         test('removing nested list', function() {
 265             var nestedList = utils.cleanUp('\
 266                     <div wlxml-tag="div" wlxml-class="list-items">\
 267                         <div wlxml-tag="div" wlxml-class="item">alice</div>\
 268                         <div wlxml-tag="div" wlxml-class="item">\
 269                             <div wlxml-tag="div" wlxml-class="list-items">\
 270                                 <div wlxml-tag="div" wlxml-class="item">cat</div>\
 271                                 <div wlxml-tag="div" wlxml-class="item">dog</div>\
 272                             </div>\
 273                         </div>\
 274                         <div wlxml-tag="div" wlxml-class="item">bee</div>\
 275                     </div>');
 276
 277             var c = canvas.create(nestedList);
 278             var dog_item = c.findNodes('[wlxml-class=list-items] [wlxml-class=list-items] > div')[1];
 279             assert.equal(dog_item.getContent(), 'dog');
 280
 281             c.listRemove({pointer: dog_item});
 282
 283             assertDomEqual(c.getContent(), utils.cleanUp('\
 284                     <div wlxml-tag="div" wlxml-class="list-items">\
 285                         <div wlxml-tag="div" wlxml-class="item">alice</div>\
 286                         <div wlxml-tag="div" wlxml-class="item">cat</div>\
 287                         <div wlxml-tag="div" wlxml-class="item">dog</div>\
 288                         <div wlxml-tag="div" wlxml-class="item">bee</div>\
 289                     </div>'));
 290
 291
 292         });
 293
 294         test('removing list containing nested list', function() {
 295             var nestedList = utils.cleanUp('\
 296                 <div wlxml-tag="section">\
 297                     <div wlxml-tag="div" wlxml-class="list-items">\
 298                         <div wlxml-tag="div" wlxml-class="item">alice</div>\
 299                         <div wlxml-tag="div" wlxml-class="item">\
 300                             <div wlxml-tag="div" wlxml-class="list-items">\
 301                                 <div wlxml-tag="div" wlxml-class="item">cat</div>\
 302                                 <div wlxml-tag="div" wlxml-class="item">dog</div>\
 303                             </div>\
 304                         </div>\
 305                         <div wlxml-tag="div" wlxml-class="item">bee</div>\
 306                     </div>\
 307                 </div>');
 308
 309             var c = canvas.create(nestedList);
 310             var alice_item = c.findNodes('[wlxml-class=list-items] > div')[0];
 311             assert.equal(alice_item.getContent(), 'alice');
 312
 313             c.listRemove({pointer: alice_item});
 314
 315             assertDomEqual(c.getContent(), utils.cleanUp('\
 316                     <div wlxml-tag="section">\
 317                         <div wlxml-tag="div">alice</div>\
 318                         <div wlxml-tag="div">cat</div>\
 319                         <div wlxml-tag="div">dog</div>\
 320                         <div wlxml-tag="div">bee</div>\
 321                     </div>'));
 322
 323
 324         });
 325     });
 326 });