/** * dom.spec.js * (c) 2013~ Alan Hong * summernote may be freely distributed under the MIT license./ */ import chai from 'chai'; import chaidom from '../../../chaidom'; import $ from 'jquery'; import dom from '../../../../src/js/base/core/dom'; import func from '../../../../src/js/base/core/func'; let expect = chai.expect; chai.use(chaidom); describe('base:core.dom', () => { describe('ancestor', () => { let $cont, $b, txtB; before(() => { // basic case $cont = $('
busi
'); // busi $b = $cont.find('b'); txtB = $b[0].firstChild; }); it('should find ancestor B', () => { expect(dom.ancestor(txtB, dom.isB)).to.deep.equal($b[0]); }); it('should find ancestor DIV', () => { expect(dom.ancestor(txtB, dom.isDiv)).to.deep.equal($cont[0]); }); it('should return null when finding ancestor U does not exist', () => { expect(dom.ancestor(txtB, dom.isU)).to.be.null; }); it('should return null when finding paragraph ancestor outsider note-editable', () => { expect(dom.ancestor(txtB, dom.isLi)).to.be.null; }); }); describe('listAncestor', () => { let $cont, $b, $u, $s, $i; before(() => { $cont = $('
b
'); // busi $b = $cont.find('b'); $u = $cont.find('u'); $s = $cont.find('s'); $i = $cont.find('i'); }); it('should return [$b, $u, $s, $i] from b to i', () => { let result = dom.listAncestor($b[0], (node) => { return node === $i[0]; }); expect(result).to.deep.equal([$b[0], $u[0], $s[0], $i[0]]); }); it('should return [$u, $s] from u to s', () => { let result = dom.listAncestor($u[0], (node) => { return node === $s[0]; }); expect(result).to.deep.equal([$u[0], $s[0]]); }); }); describe('listDescendant', () => { let $cont, $b, $u, $s, $i; before(() => { $cont = $('
'); // busi $b = $cont.find('b'); $u = $cont.find('u'); $s = $cont.find('s'); $i = $cont.find('i'); }); it('should return an array of descendant elements', () => { expect(dom.listDescendant($cont[0])).to.deep.equal([$b[0], $u[0], $s[0], $i[0]]); }); it('should filter an array of descendant elements', () => { let result = dom.listDescendant($cont[0], (node) => { return node.nodeName === 'B' || node.nodeName === 'S'; }); expect(result).to.deep.equal([$b[0], $s[0]]); }); }); describe('commonAncestor', () => { let $cont, $span, $div, $b, $u, $s; before(() => { $cont = $('
busi
'); $span = $cont.find('span'); $div = $cont.find('div'); $b = $cont.find('b'); $u = $cont.find('u'); $s = $cont.find('s'); }); it('should return a common element in ancestors', () => { expect(dom.commonAncestor($b[0], $u[0])).to.deep.equal($span[0]); }); it('should return a common element in ancestors even if they have same nodeName', () => { expect(dom.commonAncestor($b[0], $s[0])).to.deep.equal($div[0]); }); }); describe('listNext', () => { let $cont, $u, $s, $i; before(() => { $cont = $('
busi
'); // busi $u = $cont.find('u'); $s = $cont.find('s'); $i = $cont.find('i'); }); it('should return an array of next sibling elements including itself', () => { expect(dom.listNext($u[0])).to.deep.equal([$u[0], $s[0], $i[0]]); }); it('should return itself if there are no next sibling', () => { expect(dom.listNext($i[0])).to.deep.equal([$i[0]]); }); it('should return an array of next sibling elements before predicate is true', () => { expect(dom.listNext($s[0], func.eq($i[0]))).to.deep.equal([$s[0]]); }); }); describe('listPrev', () => { let $cont, $b, $u, $s, $i; before(() => { $cont = $('
busi
'); // busi $b = $cont.find('b'); $u = $cont.find('u'); $s = $cont.find('s'); $i = $cont.find('i'); }); it('should return an array of previous sibling elements including itself', () => { expect(dom.listPrev($s[0])).to.deep.equal([$s[0], $u[0], $b[0]]); }); it('should return itself if there are no previous sibling', () => { expect(dom.listPrev($b[0])).to.deep.equal([$b[0]]); }); it('should return an array of previous sibling elements before predicate is true', () => { expect(dom.listPrev($i[0], func.eq($s[0]))).to.deep.equal([$i[0]]); }); }); describe('position', () => { let $cont, $b, $u, $s, $i; before(() => { $cont = $('
busi
'); // busi $b = $cont.find('b'); $u = $cont.find('u'); $s = $cont.find('s'); $i = $cont.find('i'); }); it('should return the position of element', () => { expect(dom.position($b[0])).to.be.equal(0); expect(dom.position($u[0])).to.be.equal(1); expect(dom.position($s[0])).to.be.equal(2); expect(dom.position($i[0])).to.be.equal(3); }); it('should return position 0 for text node in b', () => { expect(dom.position($b[0].firstChild)).to.be.equal(0); }); }); describe('makeOffsetPath', () => { let $cont, $b, $u, $s, $i; before(() => { $cont = $('
busi
'); // busi $b = $cont.find('b'); $u = $cont.find('u'); $s = $cont.find('s'); $i = $cont.find('i'); }); it('should return empty array if two elements are same', () => { expect(dom.makeOffsetPath($cont[0], $cont[0])).to.deep.equal([]); }); it('should return offset path array between two elements #1', () => { expect(dom.makeOffsetPath($cont[0], $b[0])).to.deep.equal([0]); expect(dom.makeOffsetPath($cont[0], $b[0].firstChild)).to.deep.equal([0, 0]); }); it('should return offset path array between two elements #2', () => { expect(dom.makeOffsetPath($cont[0], $u[0])).to.deep.equal([1]); expect(dom.makeOffsetPath($cont[0], $u[0].firstChild)).to.deep.equal([1, 0]); }); it('should return offset path array between two elements #3', () => { expect(dom.makeOffsetPath($cont[0], $s[0])).to.deep.equal([2]); expect(dom.makeOffsetPath($cont[0], $s[0].firstChild)).to.deep.equal([2, 0]); }); it('should return offset path array between two elements #2', () => { expect(dom.makeOffsetPath($cont[0], $i[0])).to.deep.equal([3]); expect(dom.makeOffsetPath($cont[0], $i[0].firstChild)).to.deep.equal([3, 0]); }); }); describe('fromOffsetPath', () => { let $cont, $b, $u, $s, $i; before(() => { $cont = $('
busi
'); // busi $b = $cont.find('b'); $u = $cont.find('u'); $s = $cont.find('s'); $i = $cont.find('i'); }); it('should return the element by offsetPath', () => { let cont = $cont[0]; $.each([$b[0], $u[0], $s[0], $i[0]], (idx, node) => { expect(dom.fromOffsetPath(cont, dom.makeOffsetPath(cont, node))).to.deep.equal(node); let child = node.firstChild; expect(dom.fromOffsetPath(cont, dom.makeOffsetPath(cont, child))).to.deep.equal(child); }); }); }); describe('splitTree', () => { let $para; beforeEach(() => { let $busi = $('

bustrikei

'); // busi $para = $busi.clone().find('p'); }); describe('element pivot case', () => { it('should be split by u tag with offset 0', () => { let $u = $para.find('u'); dom.splitTree($para[0], { node: $u[0], offset: 0 }); expect($para.html()).to.equalsIgnoreCase('b
'); expect($para.next().html()).to.equalsIgnoreCase('ustrikei'); }); it('should be split by u tag with offset 1', () => { let $u = $para.find('u'); dom.splitTree($para[0], { node: $u[0], offset: 1 }); expect($para.html()).to.equalsIgnoreCase('bu'); expect($para.next().html()).to.equalsIgnoreCase('
strikei'); }); it('should be split by b tag with offset 0 (left edge case)', () => { let $b = $para.find('b'); dom.splitTree($para[0], { node: $b[0], offset: 0 }); expect($para.html()).to.equalsIgnoreCase('
'); expect($para.next().html()).to.equalsIgnoreCase('bustrikei'); }); it('should be split by i tag with offset 1 (right edge case)', () => { let $i = $para.find('i'); dom.splitTree($para[0], { node: $i[0], offset: 1 }); expect($para.html()).to.equalsIgnoreCase('bustrikei'); expect($para.next().html()).to.equalsIgnoreCase('
'); }); it('should discard first split if empty and isDiscardEmptySplits=true', () => { var $u = $para.find('u'); dom.splitTree($para[0], { node: $u[0], offset: 0 }, { isDiscardEmptySplits: true }); expect($para.html()).to.equalsIgnoreCase('b'); expect($para.next().html()).to.equalsIgnoreCase('ustrikei'); }); it('should discard second split if empty and isDiscardEmptySplits=true', () => { var $u = $para.find('u'); dom.splitTree($para[0], { node: $u[0], offset: 1 }, { isDiscardEmptySplits: true }); expect($para.html()).to.equalsIgnoreCase('bu'); expect($para.next().html()).to.equalsIgnoreCase('strikei'); }); }); describe('textNode case', () => { it('should be split by s tag with offset 3 (middle case)', () => { let $s = $para.find('s'); dom.splitTree($para[0], { node: $s[0].firstChild, offset: 3 }); expect($para.html()).to.equalsIgnoreCase('bustr'); expect($para.next().html()).to.equalsIgnoreCase('ikei'); }); it('should be split by s tag with offset 0 (left edge case)', () => { let $s = $para.find('s'); dom.splitTree($para[0], { node: $s[0].firstChild, offset: 0 }); expect($para.html()).to.equalsIgnoreCase('bu
'); expect($para.next().html()).to.equalsIgnoreCase('strikei'); }); it('should be split by s tag with offset 6 (right edge case)', () => { let $s = $para.find('s'); dom.splitTree($para[0], { node: $s[0].firstChild, offset: 6 }); expect($para.html()).to.equalsIgnoreCase('bustrike'); expect($para.next().html()).to.equalsIgnoreCase('
i'); }); it('should be split by s tag with offset 3 (2 depth case)', () => { let $s = $para.find('s'); dom.splitTree($s[0], { node: $s[0].firstChild, offset: 3 }); expect($para.html()).to.equalsIgnoreCase('bustrikei'); }); it('should be split by s tag with offset 3 (1 depth and textNode case)', () => { let $s = $para.find('s'); dom.splitTree($s[0].firstChild, { node: $s[0].firstChild, offset: 3 }); expect($para.html()).to.equalsIgnoreCase('bustrikei'); }); it('should be split by span tag with offset 2 (1 depth and element case)', () => { let $cont = $('

busi

'); // busi let $span = $cont.find('span'); dom.splitTree($span[0], { node: $span[0], offset: 2 }); expect($cont.html()).to.equalsIgnoreCase('

busi

'); }); }); }); describe('splitPoint', () => { it('should return rightNode and container for empty paragraph with inline', () => { let $editable = $('


'); let $para = $editable.clone().find('p'); let $br = $para.find('br'); let result = dom.splitPoint({ node: $para[0], offset: 0 }, true); expect(result).to.deep.equal({ rightNode: $br[0], container: $para[0] }); }); }); });