diff --git a/test/squire.spec.ts b/test/squire.spec.ts index 1463742..ad978cf 100644 --- a/test/squire.spec.ts +++ b/test/squire.spec.ts @@ -5,13 +5,13 @@ import { afterEach, beforeEach, describe, expect, it } from '@jest/globals'; import { Squire } from '../source/Editor'; -function selectAll(editor: Squire) { +function selectAll(editor: Squire, root: HTMLElement) { document.getSelection()!.removeAllRanges(); const range = document.createRange(); - range.setStart(editor._root.childNodes.item(0), 0); + range.setStart(root.childNodes.item(0), 0); range.setEnd( - editor._root.childNodes.item(0), - editor._root.childNodes.item(0).childNodes.length, + root.childNodes.item(0), + root.childNodes.item(0).childNodes.length, ); editor.setSelection(range); } @@ -19,8 +19,9 @@ function selectAll(editor: Squire) { describe('Squire RTE', () => { document.body.innerHTML = `
`; let editor: Squire; + let squireContainer: HTMLElement; beforeEach(() => { - const squireContainer = document.getElementById('squire')!; + squireContainer = document.getElementById('squire')!; editor = new Squire(squireContainer, { sanitizeToDOMFragment(html) { const doc = new DOMParser().parseFromString(html, 'text/html'); @@ -43,8 +44,8 @@ describe('Squire RTE', () => { it('returns false when range not touching format', () => { const range = document.createRange(); - range.setStart(editor._root.childNodes.item(0), 0); - range.setEnd(editor._root.childNodes.item(0), 1); + range.setStart(squireContainer.childNodes.item(0), 0); + range.setEnd(squireContainer.childNodes.item(0), 1); editor.setSelection(range); expect(editor.hasFormat('b')).toBe(false); }); @@ -122,10 +123,10 @@ describe('Squire RTE', () => { const startHTML = '
one two three four five
'; editor.setHTML(startHTML); - expect(editor._root.innerHTML).toBe(startHTML); - selectAll(editor); + expect(editor.getHTML()).toBe(startHTML); + selectAll(editor, squireContainer); editor.removeAllFormatting(); - expect(editor._root.innerHTML).toBe( + expect(editor.getHTML()).toBe( '
one two three four five
', ); }); @@ -133,12 +134,12 @@ describe('Squire RTE', () => { const startHTML = '
one
  1. three
four
five
'; editor.setHTML(startHTML); - expect(editor._root.innerHTML).toBe(startHTML); - selectAll(editor); + expect(editor.getHTML()).toBe(startHTML); + selectAll(editor, squireContainer); editor.removeAllFormatting(); const expectedHTML = '
one
two
three
four
five
'; - expect(editor._root.innerHTML).toBe(expectedHTML); + expect(editor.getHTML()).toBe(expectedHTML); }); // Potential bugs @@ -146,24 +147,24 @@ describe('Squire RTE', () => { it('removes styles that begin inside the range', () => { const startHTML = '
one two three four five
'; editor.setHTML(startHTML); - expect(editor._root.innerHTML).toBe(startHTML); + expect(editor.getHTML()).toBe(startHTML); const range = document.createRange(); range.setStart( - editor._root + squireContainer .getElementsByTagName('i') .item(0)! .childNodes.item(0), 3, ); range.setEnd( - editor._root + squireContainer .getElementsByTagName('i') .item(0)! .childNodes.item(0), 8, ); editor.removeAllFormatting(range); - expect(editor._root.innerHTML).toBe( + expect(editor.getHTML()).toBe( '
one two three four five
', ); }); @@ -171,18 +172,18 @@ describe('Squire RTE', () => { it('removes styles that end inside the range', () => { const startHTML = '
one two three four five
'; editor.setHTML(startHTML); - expect(editor._root.innerHTML).toBe(startHTML); + expect(editor.getHTML()).toBe(startHTML); const range = document.createRange(); range.setStart( document.getElementsByTagName('i').item(0)!.childNodes.item(0), 13, ); range.setEnd( - editor._root.childNodes.item(0), - editor._root.childNodes.item(0).childNodes.length, + squireContainer.childNodes.item(0), + squireContainer.childNodes.item(0).childNodes.length, ); editor.removeAllFormatting(range); - expect(editor._root.innerHTML).toBe( + expect(editor.getHTML()).toBe( '
one two three four five
', ); }); @@ -190,15 +191,15 @@ describe('Squire RTE', () => { it('removes styles enclosed by the range', () => { const startHTML = '
one two three four five
'; editor.setHTML(startHTML); - expect(editor._root.innerHTML).toBe(startHTML); + expect(editor.getHTML()).toBe(startHTML); const range = document.createRange(); - range.setStart(editor._root.childNodes.item(0), 0); + range.setStart(squireContainer.childNodes.item(0), 0); range.setEnd( - editor._root.childNodes.item(0), - editor._root.childNodes.item(0).childNodes.length, + squireContainer.childNodes.item(0), + squireContainer.childNodes.item(0).childNodes.length, ); editor.removeAllFormatting(range); - expect(editor._root.innerHTML).toBe( + expect(editor.getHTML()).toBe( '
one two three four five
', ); }); @@ -206,7 +207,7 @@ describe('Squire RTE', () => { it('removes styles enclosing the range', () => { const startHTML = '
one two three four five
'; editor.setHTML(startHTML); - expect(editor._root.innerHTML).toBe(startHTML); + expect(editor.getHTML()).toBe(startHTML); const range = document.createRange(); range.setStart( document.getElementsByTagName('i').item(0)!.childNodes.item(0), @@ -217,7 +218,7 @@ describe('Squire RTE', () => { 18, ); editor.removeAllFormatting(range); - expect(editor._root.innerHTML).toBe( + expect(editor.getHTML()).toBe( '
one two three four five
', ); }); @@ -226,7 +227,7 @@ describe('Squire RTE', () => { const startHTML = '
one
two
three
four
five
'; editor.setHTML(startHTML); - expect(editor._root.innerHTML).toBe(startHTML); + expect(editor.getHTML()).toBe(startHTML); const range = document.createRange(); range.setStart(document.getElementsByTagName('td').item(1)!, 0); range.setEnd( @@ -234,7 +235,7 @@ describe('Squire RTE', () => { document.getElementsByTagName('td').item(2)!.childNodes.length, ); editor.removeAllFormatting(range); - expect(editor._root.innerHTML).toBe( + expect(editor.getHTML()).toBe( '
one
two
three
four
five
', ); }); @@ -247,22 +248,22 @@ describe('Squire RTE', () => { editor.setHTML(startHTML); const range = document.createRange(); - range.setStart(editor._root.childNodes.item(0), 0); - range.setEnd(editor._root.childNodes.item(0), 1); + range.setStart(squireContainer.childNodes.item(0), 0); + range.setEnd(squireContainer.childNodes.item(0), 1); editor.setSelection(range); }); it('returns the path to the selection', () => { + editor.focus(); const range = document.createRange(); range.setStart( - editor._root.childNodes.item(0).childNodes.item(1), + squireContainer.childNodes.item(0).childNodes.item(1), 0, ); - range.setEnd(editor._root.childNodes.item(0).childNodes.item(1), 0); + range.setEnd(squireContainer.childNodes.item(0).childNodes.item(1), 0); editor.setSelection(range); + editor.fireEvent('selectionchange'); - //Manually tell it to update the path - editor._updatePath(range); expect(editor.getPath()).toBe('DIV>B'); }); @@ -319,19 +320,18 @@ describe('Squire RTE', () => { }); it('is (selection) when the selection is a range', () => { + editor.focus(); const range = document.createRange(); range.setStart( - editor._root.childNodes.item(0).childNodes.item(0) as Node, + squireContainer.childNodes.item(0).childNodes.item(0) as Node, 0, ); range.setEnd( - editor._root.childNodes.item(0).childNodes.item(3) as Node, + squireContainer.childNodes.item(0).childNodes.item(3) as Node, 0, ); editor.setSelection(range); - - //Manually tell it to update the path - editor._updatePath(range); + editor.fireEvent('selectionchange') expect(editor.getPath()).toBe('(selection)'); }); @@ -342,7 +342,7 @@ describe('Squire RTE', () => { const startHTML = ''; editor.setHTML(startHTML); - expect(editor._root.innerHTML).toBe(startHTML); + expect(editor.getHTML()).toBe(startHTML); const range = document.createRange(); const textNode = document.getElementsByTagName('li').item(1)! @@ -352,7 +352,7 @@ describe('Squire RTE', () => { editor.setSelection(range); editor.increaseListLevel(); - expect(editor._root.innerHTML).toBe( + expect(editor.getHTML()).toBe( '', ); }); @@ -361,7 +361,7 @@ describe('Squire RTE', () => { const startHTML = ''; editor.setHTML(startHTML); - expect(editor._root.innerHTML).toBe(startHTML); + expect(editor.getHTML()).toBe(startHTML); const range = document.createRange(); const textNode = document.getElementsByTagName('li').item(1)! @@ -372,7 +372,7 @@ describe('Squire RTE', () => { editor.increaseListLevel(); editor.increaseListLevel(); - expect(editor._root.innerHTML).toBe( + expect(editor.getHTML()).toBe( '', ); }); @@ -381,7 +381,7 @@ describe('Squire RTE', () => { const startHTML = ''; editor.setHTML(startHTML); - expect(editor._root.innerHTML).toBe(startHTML); + expect(editor.getHTML()).toBe(startHTML); const range = document.createRange(); const textNode = document.getElementsByTagName('li').item(1)! @@ -391,7 +391,7 @@ describe('Squire RTE', () => { editor.setSelection(range); editor.decreaseListLevel(); - expect(editor._root.innerHTML).toBe( + expect(editor.getHTML()).toBe( '', ); }); @@ -400,7 +400,7 @@ describe('Squire RTE', () => { const startHTML = ''; editor.setHTML(startHTML); - expect(editor._root.innerHTML).toBe(startHTML); + expect(editor.getHTML()).toBe(startHTML); const range = document.createRange(); const textNode = document.getElementsByTagName('li').item(1)! @@ -412,7 +412,7 @@ describe('Squire RTE', () => { editor.decreaseListLevel(); editor.decreaseListLevel(); - expect(editor._root.innerHTML).toBe( + expect(editor.getHTML()).toBe( '', ); }); @@ -421,7 +421,7 @@ describe('Squire RTE', () => { const startHTML = ''; editor.setHTML(startHTML); - expect(editor._root.innerHTML).toBe(startHTML); + expect(editor.getHTML()).toBe(startHTML); const range = document.createRange(); const textNode = document.getElementsByTagName('li').item(1)! @@ -431,7 +431,7 @@ describe('Squire RTE', () => { editor.setSelection(range); editor.removeList(); - expect(editor._root.innerHTML).toBe( + expect(editor.getHTML()).toBe( '
bar
', ); });