modules/documentCanvas/canvas/canvas.test3.js

   1 define([
   2 'libs/chai',
   3 'modules/documentCanvas/canvas/canvas',
   4 'modules/documentCanvas/canvas/documentElement'
   5 ], function(chai, canvas, documentElement) {
   6
   7 'use strict';
   8
   9 var expect = chai.expect;
  10
  11
  12 describe('Canvas', function() {
  13     describe('basic properties', function() {
  14         it('renders empty document when canvas created from empty XML', function() {
  15             var c = canvas.fromXML('');
  16             expect(c.doc()).to.equal(null);
  17         });
  18
  19         it('gives access to its document root node', function() {
  20             var c = canvas.fromXML('<section></section>');
  21             expect(c.doc().wlxmlTag).to.equal('section');
  22         });
  23
  24         describe('DocumentElement', function() {
  25             it('knows index of its child', function() {
  26                 var c = canvas.fromXML('<section><div></div><header></header><span></span></section>'),
  27                     root = c.doc(),
  28                     child = root.children()[1];
  29                 expect(root.childIndex(child)).to.equal(1);
  30             });
  31
  32             describe('DocumentTextElement can have its content set', function() {
  33                 var c = canvas.fromXML('<section>Alice</section>'),
  34                     root = c.doc(),
  35                     text = root.children()[0];
  36
  37                 text.setText('a cat');
  38                 expect(root.children()[0].getText()).to.equal('a cat');
  39             });
  40         });
  41     });
  42
  43     describe('document representation api', function() {
  44         describe('document root element', function() {
  45             var c = canvas.fromXML('<section></section>');
  46             it('exists', function() {
  47                 expect(c.doc()).to.be.instanceOf(documentElement.DocumentElement);
  48             });
  49             it('is of type DocumentNodeElement', function() {
  50                 expect(c.doc()).to.be.instanceOf(documentElement.DocumentNodeElement);
  51             });
  52         });
  53
  54         describe('DocumentElements comparison', function() {
  55             it('reports dwo DocumentElements to be the same when they represent the same wlxml document element', function() {
  56                 var c = canvas.fromXML('<section><div></div><div></div></section>'),
  57                     first_div1 = c.doc().children()[0],
  58                     first_div2 = c.doc().children()[0],
  59                     second_div = c.doc().children()[1];
  60                 expect(first_div1.sameNode(first_div1)).to.be.true;
  61                 expect(first_div1.sameNode(first_div2)).to.be.true;
  62                 expect(first_div1.sameNode(second_div)).to.be.false;
  63             });
  64         });
  65
  66         describe('traversing', function() {
  67             it('reports element nodes', function() {
  68                 var c = canvas.fromXML('<section><div></div></section>'),
  69                     children = c.doc().children();
  70                 expect(children.length).to.equal(1);
  71                 expect(children[0]).to.be.instanceOf(documentElement.DocumentNodeElement);
  72
  73                 c = canvas.fromXML('<section><div></div><div></div></section>'),
  74                     children = c.doc().children();
  75                 expect(children.length).to.equal(2);
  76                 expect(children[0]).to.be.instanceOf(documentElement.DocumentNodeElement);
  77                 expect(children[1]).to.be.instanceOf(documentElement.DocumentNodeElement);
  78             });
  79
  80             it('reports text nodes', function() {
  81                 var c = canvas.fromXML('<section>Alice</section>'),
  82                     children = c.doc().children();
  83                 expect(children.length).to.equal(1);
  84                 expect(children[0]).to.be.instanceOf(documentElement.DocumentTextElement);
  85             });
  86
  87             describe('accessing parents', function() {
  88                 it('returns DocumentNodeElement representing parent in wlxml document as DocumentNodeElement parent', function() {
  89                     var c = canvas.fromXML('<section><div></div></section>'),
  90                         div = c.doc().children()[0];
  91                     expect(div.parent().sameNode(c.doc())).to.be.true;
  92                 });
  93                 it('returns DocumentNodeElement representing parent in wlxml document as DocumentTextElement parent', function() {
  94                     var c = canvas.fromXML('<section>Alice</section>'),
  95                         text = c.doc().children()[0];
  96                     expect(text.parent().sameNode(c.doc())).to.be.true;
  97                 });
  98             });
  99
 100             describe('free text handling', function() {
 101                     it('sees free text', function() {
 102                         var c = canvas.fromXML('<section>Alice <span>has</span> a cat</section>'),
 103                             children = c.doc().children();
 104                         expect(children.length).to.equal(3);
 105                         expect(children[0]).to.be.instanceOf(documentElement.DocumentTextElement);
 106                         expect(children[1]).to.be.instanceOf(documentElement.DocumentNodeElement);
 107                         expect(children[2]).to.be.instanceOf(documentElement.DocumentTextElement);
 108                     });
 109             });
 110
 111             describe('white characters handling', function() {
 112                 it('says empty element node has no children', function() {
 113                     var c = canvas.fromXML('<section></section>');
 114                     expect(c.doc().children().length).to.equal(0);
 115                 });
 116                 it('says element node with one space has one DocumentTextElement', function() {
 117                     var c = canvas.fromXML('<section> </section>');
 118                     expect(c.doc().children().length).to.equal(1);
 119                     expect(c.doc().children()[0]).to.be.instanceOf(documentElement.DocumentTextElement);
 120                 });
 121                 it('ignores white space surrounding block elements', function() {
 122                     var c = canvas.fromXML('<section> <div></div> </section>');
 123                     var children = c.doc().children();
 124                     expect(children.length).to.equal(1);
 125                     expect(children[0]).to.be.instanceOf(documentElement.DocumentNodeElement);
 126                 });
 127                 it('ignores white space between block elements', function() {
 128                     var c = canvas.fromXML('<section><div></div> <div></div></section>');
 129                     var children = c.doc().children();
 130                     expect(children.length === 2);
 131                     [0,1].forEach(function(idx) {
 132                         expect(children[idx]).to.be.instanceOf(documentElement.DocumentNodeElement);
 133                     });
 134                 });
 135             });
 136         });
 137
 138         describe('manipulation api', function() {
 139
 140             describe('Basic Element inserting', function() {
 141                 it('can put new NodeElement at the end', function() {
 142                     var c = canvas.fromXML('<section></section>'),
 143                         appended = c.doc().append({tag: 'header', klass: 'some.class'}),
 144                         children = c.doc().children();
 145
 146                     expect(children.length).to.equal(1);
 147                     expect(children[0].sameNode(appended));
 148                 });
 149
 150                 it('can put new TextElement at the end', function() {
 151                     var c = canvas.fromXML('<section></section>'),
 152                         appended = c.doc().append({text: 'Alice'}),
 153                         children = c.doc().children();
 154
 155                     expect(children.length).to.equal(1);
 156                     expect(children[0].sameNode(appended));
 157                     expect(children[0].getText()).to.equal('Alice');
 158                 });
 159
 160                 it('can put new NodeElement after another NodeElement', function() {
 161                     var c = canvas.fromXML('<section><div></div></section>'),
 162                         div = c.doc().children()[0],
 163                         added = div.after({tag: 'header', klass: 'some.class'}),
 164                         children = c.doc().children();
 165                     expect(children.length).to.equal(2);
 166                     expect(children[1].sameNode(added));
 167                 });
 168
 169                 it('can put new Nodeelement before another element', function() {
 170                     var c = canvas.fromXML('<section><div></div></section>'),
 171                         div = c.doc().children()[0],
 172                         added = div.before({tag: 'header', klass: 'some.class'}),
 173                         children = c.doc().children();
 174                     expect(children.length).to.equal(2);
 175                     expect(children[0].sameNode(added));
 176                 });
 177
 178                 it('can put new DocumentNodeElement after DocumentTextElement', function() {
 179                     var c = canvas.fromXML('<section>Alice</section>'),
 180                         text = c.doc().children()[0],
 181                         added = text.after({tag: 'p'}),
 182                         children = c.doc().children();
 183
 184                     expect(children.length).to.equal(2);
 185                     expect(children[0]).to.be.instanceOf(documentElement.DocumentTextElement);
 186                     expect(children[0].getText()).to.equal('Alice');
 187                     expect(children[1]).to.be.instanceOf(documentElement.DocumentNodeElement);
 188                     expect(children[1].sameNode(added)).to.be.true;
 189                 });
 190             });
 191
 192             describe('wrapping', function() {
 193                 it('wraps DocumentNodeElement', function() {
 194                     var c = canvas.fromXML('<section><div></div></section>'),
 195                         div = c.doc().children()[0];
 196
 197                     var returned = div.wrapWithNodeElement({tag: 'header', klass: 'some.class'}),
 198                         parent = div.parent(),
 199                         parent2 = c.doc().children()[0];
 200
 201                     expect(returned.sameNode(parent)).to.be.true;
 202                     expect(returned.sameNode(parent2)).to.be.true;
 203                 });
 204                 it('wraps DocumentTextElement', function() {
 205                     var c = canvas.fromXML('<section>Alice</section>'),
 206                         text = c.doc().children()[0];
 207
 208                     var returned = text.wrapWithNodeElement({tag: 'header', klass: 'some.class'}),
 209                         parent = text.parent(),
 210                         parent2 = c.doc().children()[0];
 211
 212                     expect(returned.sameNode(parent)).to.be.true;
 213                     expect(returned.sameNode(parent2)).to.be.true;
 214                 });
 215
 216                 it('wraps part of DocumentTextElement', function() {
 217                     var c = canvas.fromXML('<section>Alice has a cat</section>'),
 218                         text = c.doc().children()[0];
 219
 220                     var returned = text.wrapWithNodeElement({tag: 'header', klass: 'some.class', start: 5, end: 12}),
 221                         children = c.doc().children();
 222
 223                     expect(children.length).to.equal(3);
 224
 225                     expect(children[0]).to.be.instanceOf(documentElement.DocumentTextElement);
 226                     expect(children[0].getText()).to.equal('Alice');
 227
 228                     expect(children[1].sameNode(returned)).to.be.true;
 229                     expect(children[1].children().length).to.equal(1);
 230                     expect(children[1].children()[0].getText()).to.equal(' has a ');
 231
 232                     expect(children[2]).to.be.instanceOf(documentElement.DocumentTextElement);
 233                     expect(children[2].getText()).to.equal('cat');
 234                 });
 235
 236                 it('wraps text spanning multiple sibling DocumentTextNodes', function() {
 237                     var c = canvas.fromXML('<section>Alice has a <span>small</span> cat</section>'),
 238                         section = c.doc(),
 239                         wrapper = c.wrapText({
 240                             inside: section,
 241                             _with: {tag: 'span', klass: 'some.class'},
 242                             offsetStart: 6,
 243                             offsetEnd: 4,
 244                             textNodeIdx: [0,2]
 245                         });
 246
 247                     expect(section.children().length).to.equal(2);
 248                     expect(section.children()[0]).to.be.instanceOf(documentElement.DocumentTextElement);
 249                     expect(section.children()[0].getText()).to.equal('Alice ');
 250
 251                     var wrapper2 = section.children()[1];
 252                     expect(wrapper2.sameNode(wrapper)).to.be.true;
 253
 254                     var wrapperChildren = wrapper.children();
 255                     expect(wrapperChildren.length).to.equal(3);
 256                     expect(wrapperChildren[0].getText()).to.equal('has a ');
 257
 258                     expect(wrapperChildren[1]).to.be.instanceOf(documentElement.DocumentNodeElement);
 259                     expect(wrapperChildren[1].children().length).to.equal(1);
 260                     expect(wrapperChildren[1].children()[0].getText()).to.equal('small');
 261
 262                     expect(wrapperChildren[2].getText()).to.equal(' cat');
 263                 });
 264             });
 265         });
 266
 267     });
 268 });
 269
 270
 271 });