'libs/chai',
'libs/sinon',
'modules/documentCanvas/canvas/canvas',
-'modules/documentCanvas/canvas/documentElement'
-], function(chai, sinon, canvas, documentElement) {
+'modules/documentCanvas/canvas/documentElement',
+'modules/documentCanvas/canvas/utils'
+], function(chai, sinon, canvas, documentElement, utils) {
'use strict';
describe('Canvas', function() {
- describe('Internal HTML representation of a sample document', function() {
- it('works', function() {
- var c = canvas.fromXML('\
- <section>\
- This is some text without its own wrapping tag.\
- <div class="p.subclass">\
- This is a paragraph.\
- </div>\
- <div>\
- This is text in a div <span>with some inline text</span>.\
- </div>\
- This is some text without its own wrapping tag.\
- </section>\
- ');
- var expected = '<div wlxml-tag="section">'
- + '<div wlxml-text>This is some text without its own wrapping tag.</div>'
- + '<div wlxml-tag="div" wlxml-class="p-subclass">'
- + '<div wlxml-text>This is a paragraph.</div>'
- + '</div>'
- + '<div wlxml-tag="div">'
- + '<div wlxml-text>This is text in a div </div>'
- + '<div wlxml-tag="span">'
- + '<div wlxml-text>with some inline text</div>'
- + '</div>'
- + '<div wlxml-text>.</div>'
- + '</div>'
- + '<div wlxml-text>This is some text without its own wrapping tag.</div>'
- + '</div>';
- expect(c.doc().dom()[0].isEqualNode($(expected)[0])).to.be.true;
- });
- });
-
describe('Internal HTML representation of a DocumentNodeElement', function() {
it('is always a div tag', function() {
['section', 'header', 'span', 'aside', 'figure'].forEach(function(tagName) {
expect(dom.prop('tagName')).to.equal('DIV', tagName + ' is represented as div');
});
});
- it('has wlxml tag put into wlxml-tag attribute', function() {
+ it('has wlxml tag put into wlxml-tag attribute of its internal container', function() {
var dom = canvas.fromXML('<section></section>').doc().dom();
- expect(dom.attr('wlxml-tag')).to.equal('section');
+ expect(dom.children('[document-element-content]').attr('wlxml-tag')).to.equal('section');
});
- it('has wlxml class put into wlxml-class, dots replaced with dashes', function() {
+ it('has wlxml class put into wlxml-class attribute of its internal containr, dots replaced with dashes', function() {
var dom = canvas.fromXML('<section class="some.class"></section>').doc().dom();
- expect(dom.attr('wlxml-class')).to.equal('some-class');
+ expect(dom.children('[document-element-content]').attr('wlxml-class')).to.equal('some-class');
});
});
describe('Internal HTML representation of a DocumentTextElement', function() {
- it('is text node wrapped in a div with wlxml-text attribute set', function() {
+ it('is text node wrapped in a div with document-text-element attribute set', function() {
var dom = canvas.fromXML('<section>Alice</section>').doc().children()[0].dom();
expect(dom.prop('tagName')).to.equal('DIV');
- expect(dom.attr('wlxml-text')).to.equal('');
+ expect(dom.attr('document-text-element')).to.equal('');
expect(dom.contents().length).to.equal(1);
expect(dom.contents()[0].nodeType).to.equal(Node.TEXT_NODE);
expect($(dom.contents()[0]).text()).to.equal('Alice');
});
it('knows WLXML class of a WLXML tag it renders', function(){
- var c = canvas.fromXML('<section class="some.class"></section>'),
+ var c = canvas.fromXML('<section class="some.class.A"></section>'),
section = c.doc();
- expect(section.getWlxmlClass()).to.equal('some.class');
- section.setWlxmlClass('some.other.class');
- expect(section.getWlxmlClass()).to.equal('some.other.class');
+ expect(section.getWlxmlClass()).to.equal('some.class.A');
+ section.setWlxmlClass('some.class.B');
+ expect(section.getWlxmlClass()).to.equal('some.class.B');
section.setWlxmlClass(null);
expect(section.getWlxmlClass()).to.be.undefined;
});
+
+
+
+ describe('element has meta attributes', function() {
+ it('can change its meta attributes', function() {
+ var c = canvas.fromXML('<section><span class="uri" meta-uri="someuri"></span></section>'),
+ span = c.doc().children()[0];
+
+ expect(span.getWlxmlMetaAttr('uri')).to.equal('someuri');
+ span.setWlxmlMetaAttr('uri', 'otheruri');
+ expect(span.getWlxmlMetaAttr('uri')).to.equal('otheruri');
+ });
+
+ it('changes its meta attributes with class change', function() {
+ var c = canvas.fromXML('<section><span class="uri" meta-uri="someuri"></span></section>'),
+ span = c.doc().children()[0];
+
+ expect(span.getWlxmlMetaAttr('uri')).to.equal('someuri');
+ span.setWlxmlClass('author');
+ expect(span.getWlxmlMetaAttr('uri')).to.be.undefined;
+ });
+
+ it('keeps meta attribute value on class change if a new class has this attribute', function() {
+ var c = canvas.fromXML('<section><span class="uri" meta-uri="someuri"></span></section>'),
+ span = c.doc().children()[0];
+ span.setWlxmlClass('uri.some.subclass');
+ expect(span.getWlxmlMetaAttr('uri')).to.equal('someuri');
+ });
+ });
});
it('returns DocumentNodeElement instance from HTMLElement', function() {
});
});
+ describe('accessing sibling parents of two elements', function() {
+ it('returns elements themself if they have direct common parent', function() {
+ var c = canvas.fromXML('<section>\
+ <div>\
+ <div>A</div>\
+ <div>B</div>\
+ </div>\
+ </section>'),
+ section = c.doc(),
+ wrappingDiv = c.doc().children()[0],
+ divA = wrappingDiv.children()[0],
+ divB = wrappingDiv.children()[1];
+
+ var siblingParents = c.getSiblingParents({element1: divA, element2: divB});
+
+ expect(siblingParents.element1.sameNode(divA)).to.equal(true, 'divA');
+ expect(siblingParents.element2.sameNode(divB)).to.equal(true, 'divB');
+ });
+
+ it('returns sibling parents - example 1', function() {
+ var c = canvas.fromXML('<section>Alice <span>has a cat</span></section>'),
+ section = c.doc(),
+ aliceText = section.children()[0],
+ span = section.children()[1],
+ spanText = span.children()[0];
+
+ var siblingParents = c.getSiblingParents({element1: aliceText, element2: spanText});
+
+ expect(siblingParents.element1.sameNode(aliceText)).to.equal(true, 'aliceText');
+ expect(siblingParents.element2.sameNode(span)).to.equal(true, 'span');
+ });
+ })
+
describe('free text handling', function() {
it('sees free text', function() {
var c = canvas.fromXML('<section>Alice <span>has</span> a cat</section>'),
children = c.doc().children();
expect(children.length).to.equal(1);
- expect(children[0].sameNode(appended));
+ expect(children[0].sameNode(appended)).to.be.true;
});
it('can put new TextElement at the end', function() {
children = c.doc().children();
expect(children.length).to.equal(1);
- expect(children[0].sameNode(appended));
+ expect(children[0].sameNode(appended)).to.be.true;
+ expect(children[0].getText()).to.equal('Alice');
+ });
+
+ it('can put new NodeElement at the beginning', function() {
+ var c = canvas.fromXML('<section><div></div></section>'),
+ prepended = c.doc().prepend({tag: 'header', klass: 'some.class'}),
+ children = c.doc().children();
+
+ expect(children).to.have.length(2);
+ expect(children[0].sameNode(prepended)).to.be.true;
+ });
+
+ it('can put new TextElement at the beginning', function() {
+ var c = canvas.fromXML('<section><div></div></section>'),
+ prepended = c.doc().prepend({text: 'Alice'}),
+ children = c.doc().children();
+
+ expect(children).to.have.length(2)
+ expect(children[0].sameNode(prepended)).to.be.true;
expect(children[0].getText()).to.equal('Alice');
});
added = div.after({tag: 'header', klass: 'some.class'}),
children = c.doc().children();
expect(children.length).to.equal(2);
- expect(children[1].sameNode(added));
+ expect(children[1].sameNode(added)).to.be.true;
});
it('can put new Nodeelement before another element', function() {
added = div.before({tag: 'header', klass: 'some.class'}),
children = c.doc().children();
expect(children.length).to.equal(2);
- expect(children[0].sameNode(added));
+ expect(children[0].sameNode(added)).to.be.true;
});
it('can put new DocumentNodeElement after DocumentTextElement', function() {
expect(children[1]).to.be.instanceOf(documentElement.DocumentTextElement);
expect(children[1].getText()).to.equal('Alice');
});
+
+ it('can divide DocumentTextElement with a new DocumentNodeElement', function() {
+ var c = canvas.fromXML('<section>Alice has a cat</section>'),
+ section = c.doc(),
+ text = section.children()[0];
+
+ var returned = text.divide({tag: 'aside', klass: 'footnote', offset: 5}),
+ sectionChildren = section.children(),
+ lhsText = sectionChildren[0],
+ rhsText = sectionChildren[2];
+
+ expect(lhsText.getText()).to.equal('Alice');
+ expect(returned.sameNode(sectionChildren[1]));
+ expect(rhsText.getText()).to.equal(' has a cat');
+ });
+
+ it('treats dividing DocumentTextElement at the very end as appending after it', function() {
+ var c = canvas.fromXML('<section>Alice has a cat</section>'),
+ section = c.doc(),
+ text = section.children()[0];
+
+ var returned = text.divide({tag: 'aside', klass: 'footnote', offset: 15}),
+ sectionChildren = section.children(),
+ textElement = sectionChildren[0],
+ nodeElement = sectionChildren[1];
+
+ expect(sectionChildren.length).to.equal(2);
+ expect(textElement.getText()).to.equal('Alice has a cat');
+ expect(returned.sameNode(nodeElement)).to.be.true;
+ expect(nodeElement.getWlxmlTag()).to.equal('aside');
+ });
+
+ it('treats dividing DocumentTextElement at the very beginning as appending before it', function() {
+ var c = canvas.fromXML('<section>Alice has a cat</section>'),
+ section = c.doc(),
+ text = section.children()[0];
+
+ var returned = text.divide({tag: 'aside', klass: 'footnote', offset: 0}),
+ sectionChildren = section.children(),
+ nodeElement = sectionChildren[0],
+ textElement = sectionChildren[1];
+
+ expect(sectionChildren.length).to.equal(2);
+ expect(textElement.getText()).to.equal('Alice has a cat');
+ expect(returned.sameNode(nodeElement)).to.be.true;
+ expect(nodeElement.getWlxmlTag()).to.equal('aside');
+ });
+ });
+
+ describe('Removing elements', function() {
+ it('merges left and right DocumentTextElement sibling of a detached DocumentNodeElement', function() {
+ var c = canvas.fromXML('<section>Alice<div>has</div>a cat</section>'),
+ section = c.doc(),
+ div = section.children()[1];
+
+ div.detach();
+
+ var sectionChildren = section.children(),
+ textElement = sectionChildren[0];
+
+ expect(sectionChildren).to.have.length(1);
+ expect(textElement.getText()).to.equal('Alicea cat');
+ });
});
describe('Splitting text', function() {
expect(wrapperChildren[2].getText()).to.equal(' cat');
});
+
+ it('wraps multiple sibling Elements', function() {
+ var c = canvas.fromXML('<section>Alice<div>has</div><div>a cat</div></section>'),
+ section = c.doc(),
+ aliceText = section.children()[0],
+ firstDiv = section.children()[1],
+ lastDiv = section.children()[section.children().length -1];
+
+ var returned = c.wrapElements({
+ element1: aliceText,
+ element2: lastDiv,
+ _with: {tag: 'header'}
+ });
+
+ var sectionChildren = section.children(),
+ header = sectionChildren[0],
+ headerChildren = header.children();
+
+ expect(sectionChildren).to.have.length(1);
+ expect(header.sameNode(returned)).to.equal(true, 'wrapper returned');
+ expect(headerChildren).to.have.length(3);
+ expect(headerChildren[0].sameNode(aliceText)).to.equal(true, 'first node wrapped');
+ expect(headerChildren[1].sameNode(firstDiv)).to.equal(true, 'second node wrapped');
+ expect(headerChildren[2].sameNode(lastDiv)).to.equal(true, 'third node wrapped');
+ });
+ it('wraps multiple sibling Elements - middle case', function() {
+ var c = canvas.fromXML('<section><div></div>div></div><div></div><div></div></section>'),
+ section = c.doc(),
+ div1 = section.children()[0],
+ div2 = section.children()[1],
+ div3 = section.children()[2],
+ div4 = section.children()[3];
+
+ var returned = c.wrapElements({
+ element1: div2,
+ element2: div3,
+ _with: {tag: 'header'}
+ });
+
+ var sectionChildren = section.children(),
+ header = sectionChildren[1],
+ headerChildren = header.children();
+
+ expect(sectionChildren).to.have.length(3);
+ expect(headerChildren).to.have.length(2);
+ expect(headerChildren[0].sameNode(div2)).to.equal(true, 'first node wrapped');
+ expect(headerChildren[1].sameNode(div3)).to.equal(true, 'second node wrapped');
+ });
});
- describe('unwrapping', function() {
- it('unwraps DocumentTextElement from its parent DocumentNodeElement if it\'s its only child', function() {
+ describe('unwrapping DocumentTextElement from its parent DocumentNodeElement if it\'s its only child', function() {
+ it('unwraps text element from its parent and stays between its old parent siblings', function() {
+ var c = canvas.fromXML('<section><div>Alice</div><div>has</div><div>a cat</div></section>'),
+ section = c.doc(),
+ sectionChildren = section.children(),
+ divAlice = sectionChildren[0],
+ divHas = sectionChildren[1],
+ textHas = divHas.children()[0],
+ divCat = sectionChildren[2];
+
+ var newTextContainer = textHas.unwrap(),
+ sectionChildren = section.children();
+
+ expect(sectionChildren[0].sameNode(divAlice)).to.equal(true, 'divAlice ok');
+ expect(newTextContainer.sameNode(section)).to.equal(true, 'unwrap returns new text parent DocumentNodeElement');
+ expect(sectionChildren[1].getText()).to.equal('has');
+ expect(sectionChildren[2].sameNode(divCat)).to.equal(true, 'divCat ok');
+
+ });
+ it('unwraps and join with its old parent adjacent text elements ', function() {
var c = canvas.fromXML('<section>Alice <span>has a</span> cat</section>'),
section = c.doc(),
text = section.children()[1].children()[0];
- text.unwrap();
+ var newTextContainer = text.unwrap();
expect(section.children().length).to.equal(1, 'section has one child');
expect(section.children()[0].getText()).to.equal('Alice has a cat');
- })
+ expect(newTextContainer.sameNode(c.doc())).to.equal(true, 'unwrap returns new text parent DocumentNodeElement');
+ });
});
});
var getSelection;
+ var findTextNode = function(inside, text) {
+ var nodes = inside.find(':not(iframe)').addBack().contents().filter(function() {
+ return this.nodeType === Node.TEXT_NODE && this.data === text;
+ });
+ if(nodes.length)
+ return nodes[0];
+ return null;
+ }
+
beforeEach(function() {
getSelection = sinon.stub(window, 'getSelection');
});
it('returns position when browser selection collapsed', function() {
var c = canvas.fromXML('<section>Alice has a cat</section>'),
dom = c.doc().dom(),
- text = $(dom.contents()[0]).contents()[0];
+ text = findTextNode(dom, 'Alice has a cat');
expect(text.nodeType).to.equal(Node.TEXT_NODE, 'correct node selected');
expect($(text).text()).to.equal('Alice has a cat');
expect(cursor.isSelecting()).to.equal(false, 'cursor is not selecting anything');
expect(position.element.getText()).to.equal('Alice has a cat');
expect(position.offset).to.equal(5);
+ expect(position.offsetAtEnd).to.equal(false, 'offset is not at end');
+
+ getSelection.returns({
+ anchorNode: text,
+ focusNode: text,
+ anchorOffset: 15,
+ focusOffset: 15,
+ isCollapsed: true
+ });
+
+ expect(cursor.getPosition().offsetAtEnd).to.equal(true, 'offset at end');
});
it('returns boundries of selection when browser selection not collapsed', function() {
var c = canvas.fromXML('<section>Alice <span>has</span> a <span>big</span> cat</section>'),
dom = c.doc().dom(),
text = {
- alice: dom.contents()[0],
- has: $(dom.contents()[1]).contents()[0],
- cat: dom.contents()[4]
+ alice: findTextNode(dom, 'Alice '),
+ has: findTextNode(dom, 'has'),
+ cat: findTextNode(dom, ' cat')
},
cursor = c.getCursor(),
aliceElement = c.getDocumentElement(text.alice),
var c = canvas.fromXML('<section>Alice <span>has</span> a <span>big</span> cat</section>'),
dom = c.doc().dom(),
text = {
- alice: dom.contents()[0],
- has: $(dom.contents()[1]).contents()[0],
- a: dom.contents()[2],
- big: $(dom.contents()[3]).contents()[0],
- cat: dom.contents()[4]
+ alice: findTextNode(dom, 'Alice '),
+ has: findTextNode(dom, 'has'),
+ a: findTextNode(dom, ' a '),
+ big: findTextNode(dom, 'big'),
+ cat: findTextNode(dom, ' cat'),
},
cursor = c.getCursor();
expect(cursor.isSelectingSiblings()).to.equal(false, '"has" and "big" are not children');
})
+
+ describe('zero width space handling', function() {
+ it('position range includes ZWS at the boundries of text in case when native selection api doesn\'t', function() {
+ var c = canvas.fromXML("<section>Alice</section>"),
+ dom = c.doc().dom(),
+ textNode = findTextNode(dom, 'Alice'),
+ cursor = c.getCursor();
+
+ textNode.data = utils.unicode.ZWS + 'Alice';
+ getSelection.returns({anchorNode: textNode, anchorOffset: 1, focusNode: textNode, focusOffset: 1});
+ expect(cursor.getPosition().offset).to.equal(0);
+ expect(cursor.getPosition().offsetAtBeginning).to.equal(true, 'offset at beginning');
+
+ textNode.data = 'Alice' + utils.unicode.ZWS;
+ getSelection.returns({anchorNode: textNode, anchorOffset: 5, focusNode: textNode, focusOffset: 5});
+ expect(cursor.getPosition().offset).to.equal(6);
+ expect(cursor.getPosition().offsetAtEnd).to.equal(true, 'offset at end');
+ });
+ });
});
+
+ describe('Serializing document to WLXML', function() {
+ it('keeps document intact when no changes have been made', function() {
+ var xmlIn = '<section>Alice<div>has</div>a <span class="uri" meta-uri="http://cat.com">cat</span>!</section>',
+ c = canvas.fromXML(xmlIn),
+ xmlOut = c.toXML();
+
+ var parser = new DOMParser(),
+ input = parser.parseFromString(xmlIn, "application/xml").childNodes[0],
+ output = parser.parseFromString(xmlOut, "application/xml").childNodes[0];
+
+ expect(input.isEqualNode(output)).to.be.true;
+ });
+
+ it('keeps arbitrary node attributes intact', function() {
+ var xmlIn = '<section a="1" xmlns:dcterms="http://purl.org/dc/terms/"></section>',
+ $xmlOut = $(canvas.fromXML(xmlIn).toXML());
+
+ expect($xmlOut.attr('a')).to.equal('1');
+ expect($xmlOut.attr('xmlns:dcterms')).to.equal('http://purl.org/dc/terms/');
+ });
+
+ it('doesn\' serialize meta attribute if its empty', function() {
+ var c;
+
+ c = canvas.fromXML('<section class="uri" meta-uri="some.uri"></section>');
+ c.doc().setWlxmlMetaAttr('uri', '');
+ expect($(c.toXML()).attr('meta-uri')).to.equal(undefined, 'overriding attribute with zero length string');
+
+ c = canvas.fromXML('<section class="uri"></section>');
+ c.doc().setWlxmlMetaAttr('uri', '');
+ expect($(c.toXML()).attr('meta-uri')).to.equal(undefined, 'setting attribute to zero length string');
+ });
+
+ describe('output xml', function() {
+ it('keeps entities intact', function() {
+ var xmlIn = '<section>< ></section>',
+ c = canvas.fromXML(xmlIn),
+ xmlOut = c.toXML();
+ expect(xmlOut).to.equal(xmlIn);
+ });
+ it('keeps entities intact when they form html/xml', function() {
+ var xmlIn = '<section><abc></section>',
+ c = canvas.fromXML(xmlIn),
+ xmlOut = c.toXML();
+ expect(xmlOut).to.equal(xmlIn);
+ });
+ });
+
+ describe('formatting output xml', function() {
+ /*it('keeps white spaces at the edges of input xml', function() {
+ var xmlIn = ' <section></section> ',
+ c = canvas.fromXML(xmlIn),
+ xmlOut = c.toXML();
+
+ expect(xmlOut.substr(4)).to.equal(' <', 'start');
+ expect(xmlOut.substr(-2)).to.equal('> ', 'end');
+ });*/
+ it('keeps white space between XML nodes', function() {
+ var xmlIn = '<section>\n\n\n<div></div>\n\n\n<div></div>\n\n\n</section>',
+ c = canvas.fromXML(xmlIn),
+ xmlOut = c.toXML();
+
+ var partsIn = xmlIn.split('\n\n\n'),
+ partsOut = xmlOut.split('\n\n\n');
+
+ expect(partsIn).to.deep.equal(partsOut);
+ });
+
+ it('keeps white space between XML nodes - inline case', function() {
+ var xmlIn = '<section>\n\n\n<span></span>\n\n\n<span></span>\n\n\n</section>',
+ c = canvas.fromXML(xmlIn),
+ xmlOut = c.toXML();
+
+ var partsIn = xmlIn.split('\n\n\n'),
+ partsOut = xmlOut.split('\n\n\n');
+
+ expect(partsIn).to.deep.equal(partsOut);
+ });
+
+ it('keeps white space at the beginning of text', function() {
+ var xmlIn = '<section> abc<div>some div</div> abc</section>',
+ c = canvas.fromXML(xmlIn),
+ xmlOut = c.toXML();
+
+ expect(xmlOut).to.equal(xmlIn);
+ });
+
+ it('nests new children block elements', function() {
+ var c = canvas.fromXML('<section></section>');
+
+ c.doc().append({tag: 'header'});
+
+ var xmlOut = c.toXML();
+ expect(xmlOut.split('\n ')[0]).to.equal('<section>', 'nesting start ok');
+ expect(xmlOut.split('\n').slice(-1)[0]).to.equal('</section>', 'nesting end ok');
+
+ });
+
+ it('doesn\'t nest new children inline elements', function() {
+ var c = canvas.fromXML('<section></section>');
+
+ c.doc().append({tag: 'span'});
+
+ var xmlOut = c.toXML();
+ expect(xmlOut).to.equal('<section><span></span></section>');
+ });
+
+ it('keeps original white space at the end of text', function() {
+
+ var xmlIn = '<header> Some text ended with white space \
+ \
+ <span class="uri">Some text</span> some text\
+ \
+ </header>',
+ c = canvas.fromXML(xmlIn);
+
+ var xmlOut = c.toXML();
+ console.log(xmlOut);
+ expect(xmlOut).to.equal(xmlIn);
+ });
+
+ it('keeps white space around text node', function() {
+ var xmlIn = '<section>\
+ <header>header1</header>\
+ Some text surrounded by white space\
+ <header>header2</header>\
+ </section>',
+ c = canvas.fromXML(xmlIn);
+
+ var xmlOut = c.toXML();
+ expect(xmlOut).to.equal(xmlIn);
+ });
+
+ it('keeps white space around text node - last node case', function() {
+ var xmlIn = '<section>\
+ <header>header</header>\
+ \
+ Some text surrounded by white space\
+ \
+ </section>',
+ c = canvas.fromXML(xmlIn);
+
+ var xmlOut = c.toXML();
+ expect(xmlOut).to.equal(xmlIn);
+ });
+
+ it('keeps white space after detaching text element', function() {
+ var xmlIn = '<section><header>header</header>\n\
+ \n\
+ text1\n\
+ \n\
+ </section>',
+ expectedXmlOut = '<section><header>header</header>\n\
+ \n\
+ \n\
+ \n\
+ </section>',
+ c = canvas.fromXML(xmlIn),
+ children = c.doc().children(),
+ text = children[children.length-1];
+
+ expect(text.getText()).to.equal('text1');
+
+ text.detach();
+
+ var xmlOut = c.toXML();
+ expect(xmlOut).to.equal(expectedXmlOut);
+ });
+
+ })
+ })
});
fnp / fnpeditor.git / blobdiff