modules/documentCanvas/tests/canvas.test.js

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