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('split node', function() {
  81             var c = canvas.create('<div wlxml-tag="section"><div wlxml-tag="header">Header 1</div></div>');
  82             var header = c.findNodes({tag: 'header'})[0];
  83             var newNode = c.nodeSplit({node: header, offset: 4});
  84             assertDomEqual(c.getContent(), utils.cleanUp('\
  85                 <div wlxml-tag="section">\
  86                     <div wlxml-tag="header">Head</div>\
  87                     <div wlxml-tag="header">er 1</div>\
  88                 </div>'));
  89             assert.ok(newNode.isSame(c.findNodes({tag: 'header'})[1]));
  90         });
  91
  92         test('split root node', function() {
  93             var c = canvas.create('<div wlxml-tag="header">cat</div>');
  94             var header = c.findNodes({tag: 'header'})[0];
  95             var newNode = c.nodeSplit({node: header, offset: 1});
  96             assertDomEqual(c.getContent(), utils.cleanUp('\
  97                     <div wlxml-tag="header">c</div>\
  98                     <div wlxml-tag="header">at</div>'));
  99             assert.ok(newNode.isSame(c.findNodes({tag: 'header'})[1]));
 100         });
 101
 102         test('split node with subnodes', function() {
 103             var c = canvas.create(utils.cleanUp('\
 104                 <div wlxml-tag="section">\
 105                     <div wlxml-tag="header">Fancy and nice<span wlxml-tag="aside">header</span> 1</div>\
 106                  </div>'));
 107             var header = c.findNodes({tag: 'header'})[0];
 108             var newNode = c.nodeSplit({node: header, offset: 5});
 109             assertDomEqual(c.getContent(), utils.cleanUp('\
 110                 <div wlxml-tag="section">\
 111                     <div wlxml-tag="header">Fancy</div>\
 112                     <div wlxml-tag="header">and nice<span wlxml-tag="aside">header</span> 1</div>\
 113                 </div>'));
 114         });
 115
 116         test('remove node', function() {
 117             var c = canvas.create('<div wlxml-tag="section"><span wlxml-tag="span">some text</span></div>');
 118             var span = c.findNodes({tag: 'span'})[0];
 119             c.nodeRemove({node: span});
 120             assertDomEqual(c.getContent(), '<div wlxml-tag="section"></div>');
 121         });
 122     });
 123
 124
 125     suite('Lists', function() {
 126         test('create from existing nodes', function() {
 127             var c = canvas.create(utils.cleanUp('\
 128                 <div wlxml-tag="section">\
 129                     <div wlxml-tag="div">alice</div>\
 130                     has\
 131                     <div wlxml-tag="div">a</div>\
 132                     <div wlxml-tag="div">cat</div>\
 133                     <div wlxml-tag="div">or not</div>\
 134                 </div>'
 135             ));
 136
 137             var div_alice = c.findNodes({tag: 'div'})[0];
 138             var div_cat = c.findNodes({tag:'div'})[2];
 139
 140             c.listCreate({start: div_alice, end: div_cat});
 141
 142             assertDomEqual(c.getContent(), utils.cleanUp('\
 143                 <div wlxml-tag="section">\
 144                     <div wlxml-tag="div" wlxml-class="list-items">\
 145                         <div wlxml-tag="div" wlxml-class="item">alice</div>\
 146                         <div wlxml-tag="div" wlxml-class="item">has</div>\
 147                         <div wlxml-tag="div" wlxml-class="item">a</div>\
 148                         <div wlxml-tag="div" wlxml-class="item">cat</div>\
 149                     </div>\
 150                     <div wlxml-tag="div">or not</div>\
 151                 </div>'));
 152         });
 153
 154         test('create from existing nodes - start/end order doesn\'t matter', function() {
 155             var html = utils.cleanUp('\
 156                     <div wlxml-tag="div">alice</div>\
 157                     <div wlxml-tag="div">cat</div>');
 158             var expected = utils.cleanUp('\
 159                     <div wlxml-tag="div" wlxml-class="list-items">\
 160                         <div wlxml-tag="div" wlxml-class="item">alice</div>\
 161                         <div wlxml-tag="div" wlxml-class="item">cat</div>\
 162                     </div>');
 163
 164             var c = canvas.create(html);
 165             var div_alice = c.findNodes({tag: 'div'})[0];
 166             var div_cat = c.findNodes({tag:'div'})[1];
 167             c.listCreate({start: div_cat, end: div_alice});
 168             assertDomEqual(c.getContent(), expected);
 169
 170             c = canvas.create(html);
 171             div_alice = c.findNodes({tag: 'div'})[0];
 172             div_cat = c.findNodes({tag:'div'})[1];
 173             c.listCreate({start: div_alice, end: div_cat});
 174             assertDomEqual(c.getContent(), expected);
 175         });
 176
 177         test('remove', function() {
 178             var c = canvas.create(utils.cleanUp('\
 179                 <div wlxml-tag="section">\
 180                     <div wlxml-tag="div" wlxml-class="list-items">\
 181                         <div wlxml-tag="div" wlxml-class="item">alice</div>\
 182                         <div wlxml-tag="div" wlxml-class="item">cat</div>\
 183                     </div>\
 184                 </div>'));
 185             var item = c.findNodes({klass: 'item'})[1];
 186             c.listRemove({pointer: item});
 187             assertDomEqual(c.getContent(), utils.cleanUp('\
 188                 <div wlxml-tag="section">\
 189                     <div wlxml-tag="div">alice</div>\
 190                     <div wlxml-tag="div">cat</div>\
 191                 </div>'));
 192         });
 193
 194         test('checking if node is inside a list', function() {
 195             var c = canvas.create(utils.cleanUp('\
 196                 <div wlxml-tag="section">\
 197                     <div wlxml-tag="div" wlxml-class="list-items-enum">\
 198                         <div wlxml-tag="div" wlxml-class="item">alice <span wlxml-tag="span"></span</div>\
 199                         <div wlxml-tag="div" wlxml-class="item">cat</div>\
 200                     </div>\
 201                 </div>'));
 202             assert.ok(c.nodeInsideList({node: c.findNodes({klass: 'item'})[1]}), 'item is inside a list');
 203             assert.ok(c.nodeInsideList({node: c.findNodes({tag: 'span'})[0]}), 'things nested in item are inside a list');
 204         });
 205
 206         test('moving items to nested list', function() {
 207             var listHTML = utils.cleanUp('\
 208                     <div wlxml-tag="div" wlxml-class="list-items">\
 209                         <div wlxml-tag="div" wlxml-class="item">alice</div>\
 210                         <div wlxml-tag="div" wlxml-class="item">cat</div>\
 211                         <div wlxml-tag="div" wlxml-class="item">dog</div>\
 212                         <div wlxml-tag="div" wlxml-class="item">bee</div>\
 213                     </div>');
 214             var c = canvas.create(listHTML);
 215             var items = c.findNodes({klass: 'item'});
 216             var cat_item = items[1];
 217             var dog_item = items[2];
 218
 219             c.listCreate({start: cat_item, end: dog_item});
 220
 221             assertDomEqual(c.getContent(), utils.cleanUp('\
 222                     <div wlxml-tag="div" wlxml-class="list-items">\
 223                         <div wlxml-tag="div" wlxml-class="item">alice</div>\
 224                         <div wlxml-tag="div" wlxml-class="item" class="canvas-silent-item">\
 225                             <div wlxml-tag="div" wlxml-class="list-items">\
 226                                 <div wlxml-tag="div" wlxml-class="item">cat</div>\
 227                                 <div wlxml-tag="div" wlxml-class="item">dog</div>\
 228                             </div>\
 229                         </div>\
 230                         <div wlxml-tag="div" wlxml-class="item">bee</div>\
 231                     </div>'
 232             ));
 233         });
 234
 235         test('removing nested list', function() {
 236             var nestedList = 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">\
 240                             <div wlxml-tag="div" wlxml-class="list-items">\
 241                                 <div wlxml-tag="div" wlxml-class="item">cat</div>\
 242                                 <div wlxml-tag="div" wlxml-class="item">dog</div>\
 243                             </div>\
 244                         </div>\
 245                         <div wlxml-tag="div" wlxml-class="item">bee</div>\
 246                     </div>');
 247
 248             var c = canvas.create(nestedList);
 249             var dog_item = c.findNodes('[wlxml-class=list-items] [wlxml-class=list-items] > div')[1];
 250             assert.equal(dog_item.getContent(), 'dog');
 251
 252             c.listRemove({pointer: dog_item});
 253
 254             assertDomEqual(c.getContent(), utils.cleanUp('\
 255                     <div wlxml-tag="div" wlxml-class="list-items">\
 256                         <div wlxml-tag="div" wlxml-class="item">alice</div>\
 257                         <div wlxml-tag="div" wlxml-class="item">cat</div>\
 258                         <div wlxml-tag="div" wlxml-class="item">dog</div>\
 259                         <div wlxml-tag="div" wlxml-class="item">bee</div>\
 260                     </div>'));
 261
 262
 263         });
 264
 265         test('removing list containing nested list', function() {
 266             var nestedList = utils.cleanUp('\
 267                 <div wlxml-tag="section">\
 268                     <div wlxml-tag="div" wlxml-class="list-items">\
 269                         <div wlxml-tag="div" wlxml-class="item">alice</div>\
 270                         <div wlxml-tag="div" wlxml-class="item">\
 271                             <div wlxml-tag="div" wlxml-class="list-items">\
 272                                 <div wlxml-tag="div" wlxml-class="item">cat</div>\
 273                                 <div wlxml-tag="div" wlxml-class="item">dog</div>\
 274                             </div>\
 275                         </div>\
 276                         <div wlxml-tag="div" wlxml-class="item">bee</div>\
 277                     </div>\
 278                 </div>');
 279
 280             var c = canvas.create(nestedList);
 281             var alice_item = c.findNodes('[wlxml-class=list-items] > div')[0];
 282             assert.equal(alice_item.getContent(), 'alice');
 283
 284             c.listRemove({pointer: alice_item});
 285
 286             assertDomEqual(c.getContent(), utils.cleanUp('\
 287                     <div wlxml-tag="section">\
 288                         <div wlxml-tag="div">alice</div>\
 289                         <div wlxml-tag="div">cat</div>\
 290                         <div wlxml-tag="div">dog</div>\
 291                         <div wlxml-tag="div">bee</div>\
 292                     </div>'));
 293
 294
 295         });
 296     });
 297 });