-
Notifications
You must be signed in to change notification settings - Fork 180
/
caret.test.ts
137 lines (111 loc) · 4.81 KB
/
caret.test.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
/* eslint-disable @typescript-eslint/no-magic-numbers */
import Caret from './caret';
describe('Caret', () => {
let target: HTMLElement;
let caret: Caret;
beforeEach(() => {
target = document.createElement('div');
target.innerHTML = 'target = document.createElement(textarea)';
target.style.font = '12px/14px Arial';
target.contentEditable = 'true';
document.body.appendChild(target);
caret = new Caret(target);
});
afterEach(() => {
window.getSelection()?.removeAllRanges();
// document.body.removeChild(target);
});
describe('getPosition', () => {
it('Default position should be 0', () => {
window.getSelection()?.removeAllRanges();
caret.getPosition().should.equal(0);
});
it('Should get correct positions', () => {
window.getSelection()?.collapse(target.firstChild, 10);
caret.getPosition().should.equal(10);
});
it('Should focus on get by default', () => {
sandbox.spy(target, 'focus');
caret.getPosition();
target.focus.should.have.been.called;
});
it('Shouldn\'t focus on get when prohibited', () => {
caret.getPosition({avoidFocus: true});
target.should.not.equal(document.activeElement);
});
it('Should get correct position with simple deep markup', () => {
target.innerHTML = '<span>foo<span>test<span>hello</span></span><span>123</span></span>';
window.getSelection()?.collapse(target.children[0].children[0].children[0].firstChild,
2);
caret.getPosition().should.equal(9);
});
it('Should get correct position with difficult deep markup 2', () => {
target.innerHTML = '<span>span1<span>span11</span></span><span>span2<span>span21</span>' +
'</span><span>span3</span>';
window.getSelection()?.collapse(target.children[1].children[0].firstChild, 4);
caret.getPosition().should.equal(20);
});
it('Should get correct positions for the same node selection - second node', () => {
target.innerHTML = '<span>span1<span>span11</span></span><span>span2<span>span21</span>' +
'</span><span>span3</span>';
const range = new Range();
const node = target.children[1].children[0].firstChild;
if (node != null) {
range.setStart(node, 1);
range.setEnd(node, 4);
}
window.getSelection()?.removeAllRanges();
window.getSelection()?.addRange(range);
caret.getPosition().should.deep.equal({startOffset: 17, endOffset: 20, position: 20});
});
it('Should get correct positions for the same node selection - first node', () => {
target.innerHTML = '<span>span1<span>span11</span></span><span>span2<span>span21</span>' +
'</span><span>span3</span>';
const range = new Range();
range.setStart(target.children[0].childNodes[0], 0);
range.setEnd(target.children[0].childNodes[0], 5);
window.getSelection()?.removeAllRanges();
window.getSelection()?.addRange(range);
caret.getPosition().should.deep.equal({startOffset: 0, endOffset: 5, position: 5});
});
it('Should get correct positions for different nodes selection', () => {
target.innerHTML = '<span>span1<span>span11</span></span><span>span2<span>span21</span>' +
'</span><span>span3</span>';
const range = new Range();
const startNode = target.children[0].children[0].firstChild;
startNode && range.setStart(startNode, 1);
const endNode = target.children[1].children[0].firstChild;
endNode && range.setEnd(endNode, 4);
window.getSelection()?.removeAllRanges();
window.getSelection()?.addRange(range);
caret.getPosition().should.deep.equal({startOffset: 6, endOffset: 20, position: 20});
});
it('Should get correct positions for different nodes selection - whole text', () => {
target.innerHTML = '<span>span1<span>span11</span></span><span>span2<span>span21</span>' +
'</span><span>span3</span>';
const range = new Range();
range.setStart(target.children[0].childNodes[0], 0);
const endNode = target.children[2].firstChild;
endNode && range.setEnd(endNode, 5);
window.getSelection()?.removeAllRanges();
window.getSelection()?.addRange(range);
caret.getPosition().should.deep.equal({startOffset: 0, endOffset: 27, position: 27});
});
});
describe('setPosition', () => {
it('Shouldn\'t change caret position if we don\'t position', () => {
should.not.exist(caret.setPosition());
caret.getPosition().should.equal(0);
});
it('Should change caret position if we position', () => {
caret.setPosition(15);
caret.getPosition().should.equal(15);
});
});
describe('getOffset', () => {
it('Should get correct zero offset', () => {
window.getSelection()?.collapse(target.firstChild, 0);
caret.getOffset().should.equal(0);
});
});
});