Korbs/Squire
0
Fork 0
mirror of https://github.com/fastmail/Squire.git synced 2025-01-18 04:32:28 -05:00
Code Issues Activity

Remove usage of private fields/methods in spec

Browse source
This commit is contained in:
Callum Skeet 2023-08-01 12:41:48 +10:00
parent e9ffde9a65
commit 8ee145ede6
1 changed files with 51 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

102
test/squire.spec.ts
View file

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