@plannotator/web-highlighter 0.8.0

package/test/event.spec.ts

@@ -0,0 +1,284 @@
+import { expect } from 'chai';
+import { readFileSync } from 'fs';
+import { resolve } from 'path';
+import jsdomGlobal from 'jsdom-global';
+import jsdom from 'jsdom';
+import Highlighter from '../src/index';
+import { CreateFrom } from '../src/types/index';
+import HighlightSource from '../src/model/source/index';
+import sources from './fixtures/source.json';
+import sinon from 'sinon';
+
+describe('Event Emit', function () {
+    this.timeout(50000);
+
+    let highlighter: Highlighter;
+    let cleanup;
+
+    beforeEach(() => {
+        const html = readFileSync(resolve(__dirname, 'fixtures', 'index.html'), 'utf-8');
+        cleanup = jsdomGlobal('', {
+            resources: new jsdom.ResourceLoader({
+                userAgent: 'Mellblomenator/9000'
+            })
+        });
+        document.body.innerHTML = html;
+        highlighter = new Highlighter();
+    });
+
+    describe('#CREATE event', () => {
+        let listener: sinon.SinonSpy<any[], any[]>;
+
+        beforeEach(() => {
+            listener = sinon.spy();
+            (highlighter as any).on(Highlighter.event.CREATE, listener);
+        });
+
+        it('should be emitted by calling .fromRange', () => {
+            const range = document.createRange();
+            const $p = document.querySelectorAll('p')[0];
+            range.setStart($p.childNodes[0], 0);
+            range.setEnd($p.childNodes[0], 17);
+            highlighter.fromRange(range);
+
+            expect(listener.calledOnce).to.be.true;
+        });
+
+        it('should get correct arguments by calling .fromRange', () => {
+            const range = document.createRange();
+            const $p = document.querySelectorAll('p')[0];
+            range.setStart($p.childNodes[0], 0);
+            range.setEnd($p.childNodes[0], 17);
+            const content = range.toString();
+            highlighter.fromRange(range);
+            const sources: HighlightSource[] = listener.args[0][0].sources;
+
+            expect(listener.args[0][0].type).to.be.equal(CreateFrom.INPUT);
+            expect(sources[0].text).to.be.equal(content);
+            expect(Highlighter.isHighlightSource(sources[0])).to.be.true;
+        });
+
+        it('should be emitted by calling .fromStore', () => {
+            const s = sources[0];
+            highlighter.fromStore(s.startMeta, s.endMeta, s.text, s.id);
+
+            expect(listener.calledOnce).to.be.true;
+        });
+
+        it('should get correct arguments by calling .fromStore', () => {
+            const s = sources[0];
+            highlighter.fromStore(s.startMeta, s.endMeta, s.text, s.id);
+            const sourcesRes: HighlightSource[] = listener.args[0][0].sources;
+
+            expect(listener.args[0][0].type).to.be.equal(CreateFrom.STORE);
+            expect(sourcesRes[0].text).to.be.equal(s.text);
+            expect(Highlighter.isHighlightSource(sourcesRes[0])).to.be.true;
+        });
+
+        it('should be emitted when running automatically', () => {
+            highlighter.run();
+
+            const range = document.createRange();
+            const $p = document.querySelectorAll('p')[0];
+            range.setStart($p.childNodes[0], 0);
+            range.setEnd($p.childNodes[0], 17);
+            window.getSelection().addRange(range);
+
+            const e = new MouseEvent('mouseup', {
+                view: window,
+                bubbles: true,
+                cancelable: true
+            });
+            document.body.dispatchEvent(e);
+
+            expect(listener.calledOnce).to.be.true;
+        });
+
+        it('should get correct arguments when running automatically', () => {
+            highlighter.run();
+
+            const range = document.createRange();
+            const $p = document.querySelectorAll('p')[0];
+            range.setStart($p.childNodes[0], 0);
+            range.setEnd($p.childNodes[0], 17);
+            window.getSelection().addRange(range);
+
+            const content = range.toString();
+            const e = new MouseEvent('mouseup', {
+                view: window,
+                bubbles: true,
+                cancelable: true
+            });
+            document.body.dispatchEvent(e);
+
+            const sources: HighlightSource[] = listener.args[0][0].sources;
+            expect(listener.args[0][0].type).to.be.equal(CreateFrom.INPUT);
+            expect(sources[0].text).to.be.equal(content);
+            expect(Highlighter.isHighlightSource(sources[0])).to.be.true;
+        });
+    });
+
+    describe('#REMOVE event', () => {
+        let listener: sinon.SinonSpy<any[], any[]>;
+
+        beforeEach(() => {      
+            highlighter.removeAll();
+            sources.forEach(s => highlighter.fromStore(s.startMeta, s.endMeta, s.text, s.id));
+            listener = sinon.spy();
+            (highlighter as any).on(Highlighter.event.REMOVE, listener);
+        });
+
+        it('should be emitted by calling .removeAll', () => {
+            highlighter.removeAll();
+            expect(listener.calledOnce).to.be.true;
+        });
+
+        it('should get correct ids as arguments by calling .removeAll', () => {
+            highlighter.removeAll();
+            const ids: string[] = listener.args[0][0].ids;
+            expect(ids).lengthOf(sources.length);
+            expect(ids.every(id => sources.map(o => o.id).indexOf(id) > -1)).to.be.true;
+            expect(listener.calledOnce).to.be.true;
+        });
+
+        it('should be emitted by calling .remove', () => {
+            highlighter.remove(sources[0].id);
+            expect(listener.calledOnce).to.be.true;
+        });
+
+        it('should get correct ids as arguments by calling .remove', () => {
+            const id = sources[0].id
+            highlighter.remove(id);
+            const ids: string[] = listener.args[0][0].ids;
+            expect(ids).lengthOf(1);
+            expect(ids[0]).to.be.equal(id);
+        });
+
+        it('should be emitted when the id does not exist', () => {
+            highlighter.remove('fake id');
+            expect(listener.calledOnce).to.be.false;
+        });
+    });
+
+    describe('#CLICK event', () => {
+        let listener: sinon.SinonSpy<any[], any[]>;
+        let event: MouseEvent;
+
+        beforeEach(() => {      
+            highlighter.removeAll();
+            sources.forEach(s => highlighter.fromStore(s.startMeta, s.endMeta, s.text, s.id));
+            listener = sinon.spy();
+            (highlighter as any).on(Highlighter.event.CLICK, listener);
+            event = new MouseEvent('click', {
+                view: window,
+                bubbles: true,
+                cancelable: true
+            });
+        });
+
+        it('should be emitted correctly', () => {
+            highlighter.getDoms(sources[0].id)[0].dispatchEvent(event);
+            expect(listener.calledOnce).to.be.true;
+        });
+
+        it('should get correct id as arguments', () => {
+            const id = sources[0].id;
+            highlighter.getDoms(id)[0].dispatchEvent(event);
+            const args = listener.args[0][0];
+
+            expect(args.id).to.be.equal(id);
+        });
+
+        it('should not be emitted when clicked dom is not a wrapper', () => {
+            document.querySelector('p').dispatchEvent(event);
+            expect(listener.calledOnce).to.be.false;
+        });
+    });
+
+    describe('#HOVER event', () => {
+        let listener: sinon.SinonSpy<any[], any[]>;
+        let event: MouseEvent;
+
+        beforeEach(() => {      
+            highlighter.removeAll();
+            sources.forEach(s => highlighter.fromStore(s.startMeta, s.endMeta, s.text, s.id));
+            listener = sinon.spy();
+            (highlighter as any).on(Highlighter.event.HOVER, listener);
+            event = new MouseEvent('mouseover', {
+                view: window,
+                bubbles: true,
+                cancelable: true
+            });
+        });
+
+        it('should be emitted correctly', () => {
+            highlighter.getDoms(sources[0].id)[0].dispatchEvent(event);
+            expect(listener.calledOnce).to.be.true;
+        });
+
+        it('should get correct id as arguments', () => {
+            const id = sources[0].id;
+            highlighter.getDoms(id)[0].dispatchEvent(event);
+            const args = listener.args[0][0];
+
+            expect(args.id).to.be.equal(id);
+        });
+
+        it('should not be emitted when the dom hovered is not a wrapper', () => {
+            document.querySelector('p').dispatchEvent(event);
+            expect(listener.calledOnce).to.be.false;
+        });
+
+        it('should not be emitted when move to a same highlighted wrapper', () => {
+            highlighter.getDoms(sources[1].id)[0].dispatchEvent(event);
+            highlighter.getDoms(sources[1].id)[1].dispatchEvent(event);
+            expect(listener.calledOnce).to.be.true;
+        });
+    });
+
+    describe('#HOVER_OUT event', () => {
+        let listener: sinon.SinonSpy<any[], any[]>;
+        let event: MouseEvent;
+
+        beforeEach(() => {      
+            highlighter.removeAll();
+            sources.forEach(s => highlighter.fromStore(s.startMeta, s.endMeta, s.text, s.id));
+            listener = sinon.spy();
+            (highlighter as any).on(Highlighter.event.HOVER_OUT, listener);
+            event = new MouseEvent('mouseover', {
+                view: window,
+                bubbles: true,
+                cancelable: true
+            });
+        });
+
+        it('should be emitted correctly', () => {
+            highlighter.getDoms(sources[0].id)[0].dispatchEvent(event);
+            document.querySelector('p').dispatchEvent(event);
+            expect(listener.calledOnce).to.be.true;
+        });
+
+        it('should get correct id as arguments', () => {
+            const id = sources[0].id;
+            highlighter.getDoms(sources[0].id)[0].dispatchEvent(event);
+            highlighter.getDoms(sources[1].id)[0].dispatchEvent(event);
+
+            expect(listener.args[0][0].id).to.be.equal(id);
+        });
+
+        it('should not be emitted when just hover a wrapper', () => {
+            highlighter.getDoms(sources[0].id)[0].dispatchEvent(event);
+            expect(listener.calledOnce).to.be.false;
+        });
+
+        it('should not be emitted when just move to a wrapper in the same highlight', () => {
+            highlighter.getDoms(sources[1].id)[0].dispatchEvent(event);
+            highlighter.getDoms(sources[1].id)[1].dispatchEvent(event);
+            expect(listener.calledOnce).to.be.false;
+        });
+    });
+
+    afterEach(() => {
+        cleanup();
+    });
+});

package/test/fixtures/broken.json

@@ -0,0 +1,32 @@
+[
+    {
+        "startMeta": {
+            "parentTagName": "P",
+            "parentIndex": 0,
+            "textOffset": 0
+        },
+        "endMeta": {
+            "parentTagName": "CODE",
+            "parentIndex": 0,
+            "textOffset": 5
+        },
+        "text": "It's a broken source",
+        "id": "238bec32-693c-4e59-afe6-670f1a644ca2",
+        "__isHighlightSource": {}
+    },
+    {
+        "startMeta": {
+            "parentTagName": "P",
+            "parentIndex": 0,
+            "textOffset": 0
+        },
+        "endMeta": {
+            "parentTagName": "CODE",
+            "parentIndex": 0,
+            "textOffset": 5
+        },
+        "text": "It's a broken source",
+        "id": "238bec32-693c-4e59-afe6-670f1a644ca2",
+        "__isHighlightSource": {}
+    }
+]

package/test/fixtures/index.html

@@ -0,0 +1,11 @@
+<main>
+    <h1>Web Highlighter</h1>
+    <h2>Background</h2>
+    <p id="js-first-p" class="first-p">It's from an idea: highlight texts on the website and save the highlighted areas just like what you do in PDF.</p>
+    <p>If you have ever visited <a href="http://medium.com">medium.com</a>, you must know the feature of highlighting notes: users select a text segment and click the 'highlight' button. Then the text will be highlighted with a shining background color. Besides, the highlighted areas will be saved and recovered when you visit it next time. It's like the simple demo bellow.</p>
+    <p><img src="https://raw.githubusercontent.com/alienzhou/web-highlighter/master/docs/img/sample.gif" alt=""/></p>
+    <p>This is a useful feature for readers.<span class="highlight-mengshou-wrap" data-highlight-id="8a4cf231-6601-49f2-9137-e7677d592312" data-highlight-split-type="both" data-highlight-id-extra="">If you're a developer, you may want your website support it and attract more visits.</span>If you're a user (like me), you may want a browser-plugin to do this.</p>
+    <p>For this reason, the repo (web-highlighter) aims to help you implement highlighting-note on any website quickly (e.g. blogs, document viewers, online books and so on). It contains the core abilities for note highlighting and persistence. And you can implement your own product by some easy-to-use APIs. It has been used for our sites in production.</p>
+    <p>Try it and<br>have fun~</p>
+</main>
+<footer>This is a footer</footer>

package/test/fixtures/source.json

@@ -0,0 +1,47 @@
+[
+    {
+        "startMeta": {
+            "parentTagName": "P",
+            "parentIndex": 0,
+            "textOffset": 0
+        },
+        "endMeta": {
+            "parentTagName": "P",
+            "parentIndex": 0,
+            "textOffset": 17
+        },
+        "text": "It's from an idea",
+        "id": "cbfcf177-4a0e-4deb-9f00-66e247ee5363",
+        "__isHighlightSource": {}
+    },
+    {
+        "startMeta": {
+            "parentTagName": "P",
+            "parentIndex": 0,
+            "textOffset": 10
+        },
+        "endMeta": {
+            "parentTagName": "P",
+            "parentIndex": 0,
+            "textOffset": 34
+        },
+        "text": "an idea: highlight texts",
+        "id": "69a33f5e-60f5-4b5d-9f9c-18151a24bf95",
+        "__isHighlightSource": {}
+    },
+    {
+        "startMeta": {
+            "parentTagName": "P",
+            "parentIndex": 0,
+            "textOffset": 8
+        },
+        "endMeta": {
+            "parentTagName": "P",
+            "parentIndex": 0,
+            "textOffset": 26
+        },
+        "text": "m an idea: highlig",
+        "id": "14206065-205f-4c6d-8f80-1e022a6695a3",
+        "__isHighlightSource": {}
+    }
+]

package/test/hook.spec.ts

@@ -0,0 +1,244 @@
+import { expect } from 'chai';
+import { readFileSync } from 'fs';
+import { resolve } from 'path';
+import jsdomGlobal from 'jsdom-global';
+import Highlighter from '../src/index';
+import HighlightSource from '../src/model/source';
+import { DomNode } from '../src/types';
+import sinon from 'sinon';
+import sources from './fixtures/source.json';
+
+describe('Highlighter Hooks', function () {
+    this.timeout(50000);
+
+    let highlighter: Highlighter;
+    let cleanup;
+
+    beforeEach(() => {
+        const html = readFileSync(resolve(__dirname, 'fixtures', 'index.html'), 'utf-8');
+        cleanup = jsdomGlobal();
+        document.body.innerHTML = html;
+        highlighter = new Highlighter();
+    });
+
+    describe('#Render.UUID', () => {
+        let listener: sinon.SinonSpy<any[], any[]>;
+        let id = 'customize-id';
+
+        beforeEach(() => {
+            listener = sinon.spy();
+            (highlighter as any).on(Highlighter.event.CREATE, listener);
+        });
+
+        it('should use the customized id', () => {
+            highlighter.hooks.Render.UUID.tap(() => id);
+
+            const range = document.createRange();
+            const $p = document.querySelectorAll('p')[0];
+            range.setStart($p.childNodes[0], 0);
+            range.setEnd($p.childNodes[0], 17);
+            highlighter.fromRange(range);
+
+            expect(listener.args[0][0].sources[0].id).to.be.equal(id);
+        });
+
+        it('should use the internal uuid id when return undefined in the hook', () => {
+            const spy: sinon.SinonSpy<any[], string> = sinon.spy();
+            highlighter.hooks.Render.UUID.tap(spy);
+
+            const range = document.createRange();
+            const $p = document.querySelectorAll('p')[0];
+            range.setStart($p.childNodes[0], 0);
+            range.setEnd($p.childNodes[0], 17);
+            highlighter.fromRange(range);
+
+            expect(spy.calledOnce).to.be.true;
+            expect(listener.args[0][0].sources[0].id).to.not.equal(id);
+        });
+
+        it('should get correct arguments in the hook', () => {
+            const spy: sinon.SinonSpy<any[], string> = sinon.spy();
+            highlighter.hooks.Render.UUID.tap(spy);
+
+            const range = document.createRange();
+            const $p = document.querySelectorAll('p')[0];
+            range.setStart($p.childNodes[0], 0);
+            range.setEnd($p.childNodes[0], 17);
+            const content = range.toString();
+            highlighter.fromRange(range);
+
+            expect(spy.args[0][0].$node).to.be.equal($p.childNodes[0]);
+            expect(spy.args[0][0].offset).to.be.equal(0);
+            expect(spy.args[0][1].$node).to.be.equal($p.childNodes[0]);
+            expect(spy.args[0][1].offset).to.be.equal(17);
+            expect(spy.args[0][2]).to.be.equal(content);
+        });
+    });
+
+    describe('#Render.SelectedNodes', () => {
+
+        it('should not affect the document when return an empty array in the hook', () => {
+            highlighter.hooks.Render.SelectedNodes.tap(() => []);
+
+            const html = document.body.innerHTML;
+            const range = document.createRange();
+            const $p = document.querySelectorAll('p')[0];
+            range.setStart($p.childNodes[0], 0);
+            range.setEnd($p.childNodes[0], 17);
+            highlighter.fromRange(range);
+
+            expect(document.body.innerHTML).to.be.equal(html);
+        });
+
+        it('should not affect the document when return undefined in the hook', () => {
+            highlighter.hooks.Render.SelectedNodes.tap(() => []);
+
+            const html = document.body.innerHTML;
+            const range = document.createRange();
+            const $p = document.querySelectorAll('p')[0];
+            range.setStart($p.childNodes[0], 0);
+            range.setEnd($p.childNodes[0], 17);
+
+            expect(() => highlighter.fromRange(range)).not.to.throw();
+            expect(document.body.innerHTML).to.be.equal(html);
+        });
+
+        it('should get correct arguments in the hook', () => {
+            const spy: sinon.SinonSpy<any[], any[]> = sinon.spy();
+            highlighter.hooks.Render.SelectedNodes.tap(spy);
+
+            const range = document.createRange();
+            const $p = document.querySelectorAll('p')[0];
+            range.setStart($p.childNodes[0], 0);
+            range.setEnd($p.childNodes[0], 17);
+            highlighter.fromRange(range);
+
+            expect(spy.calledOnce).to.be.true;
+            expect(spy.args[0][0]).not.to.be.empty;
+            expect(spy.args[0][0]).not.to.be.string;
+            expect(spy.args[0][1]).lengthOf(1);
+        });
+    });
+
+    describe('#Render.WrapNode', () => {
+        it('should get correct arguments in the hook', () => {
+            const spy: sinon.SinonSpy<any[], HTMLElement> = sinon.spy();
+            highlighter.hooks.Render.WrapNode.tap(spy);
+
+            const range = document.createRange();
+            range.setStart(document.querySelectorAll('p')[0].childNodes[0], 0);
+            range.setEnd(document.querySelectorAll('p')[0].childNodes[0], 17);
+            highlighter.fromRange(range);
+
+            expect(spy.calledOnce).to.be.true;
+            expect(spy.args[0][0]).not.to.be.empty;
+            expect(spy.args[0][0]).not.to.be.string;
+            expect(Highlighter.isHighlightWrapNode(spy.args[0][1])).to.be.true;
+        });
+
+        it('should be called multiple times when creating multiple wrappers', () => {
+            const spy: sinon.SinonSpy<any[], HTMLElement> = sinon.spy();
+            highlighter.hooks.Render.WrapNode.tap(spy);
+
+            const range = document.createRange();
+            range.setStart(document.querySelectorAll('p')[0].childNodes[0], 0);
+            range.setEnd(document.querySelectorAll('p')[1].childNodes[0], 17);
+            highlighter.fromRange(range);
+
+            expect(spy.callCount).to.be.equal(3);
+        });
+    });
+
+    describe('#Serialize.Restore', () => {
+        it('should get correct arguments in the hook', () => {
+            const spy: sinon.SinonSpy<any[], any[]> = sinon.spy();
+            highlighter.hooks.Serialize.Restore.tap(spy);
+
+            const extra = 'this is for testing extra';
+            const s = sources[0];
+            highlighter.fromStore(s.startMeta, s.endMeta, s.text, s.id, extra);
+
+            expect(spy.calledOnce).to.be.true;
+
+            const source: HighlightSource = spy.args[0][0];
+            expect(source, 'source should not be empty').not.to.be.empty;
+            expect(source.extra, 'source extra info should be the same').to.be.equal(extra);
+
+            const start: DomNode = spy.args[0][1];
+            expect(start.$node instanceof Node, 'start .$node to be a Node').to.be.true;
+            expect(typeof start.offset, 'start .offset to be a number').to.be.equal('number');
+
+            const end: DomNode = spy.args[0][2];
+            expect(end.$node instanceof Node, 'end .$node to be a Node').to.be.true;
+            expect(typeof end.offset, 'end .offset to be a number').to.be.equal('number');
+        });
+
+        it('should change the selection when returning other values in the hook', () => {
+            const start = 5;
+            const end = 9;
+            highlighter.hooks.Serialize.Restore.tap((_: HighlightSource, s: DomNode, e: DomNode) => {
+                s.offset = start;
+                e.offset = end;
+                return [s , e];
+            });
+
+            const s = sources[0];
+            highlighter.fromStore(s.startMeta, s.endMeta, s.text, s.id);
+            const doms = highlighter.getDoms(s.id);
+
+            expect(doms).lengthOf(1);
+            expect(doms[0].textContent).to.be.equal(s.text.slice(start, end));
+        });
+    });
+
+    describe('#Serialize.RecordInfo', () => {
+        it('should get correct arguments in the hook', () => {
+            const spy: sinon.SinonSpy<any[], string> = sinon.spy();
+            highlighter.hooks.Serialize.RecordInfo.tap(spy);
+
+            const range = document.createRange();
+            range.setStart(document.querySelectorAll('p')[0].childNodes[0], 0);
+            range.setEnd(document.querySelectorAll('p')[0].childNodes[0], 17);
+            highlighter.fromRange(range);
+
+            expect(spy.calledOnce).to.be.true;
+            expect(spy.args[0][0]).not.to.be.empty;
+            expect(spy.args[0][1]).not.to.be.empty;
+            expect(spy.args[0][2]).to.be.equal(document);
+        });
+
+        it('should add extra info to sources', () => {   
+            const extra = 'test-extra';
+            const spy: sinon.SinonSpy<any[], any[]> = sinon.spy();
+            (highlighter as any).on(Highlighter.event.CREATE, spy);
+            highlighter.hooks.Serialize.RecordInfo.tap(() => extra);
+
+            const range = document.createRange();
+            range.setStart(document.querySelectorAll('p')[0].childNodes[0], 0);
+            range.setEnd(document.querySelectorAll('p')[0].childNodes[0], 17);
+            highlighter.fromRange(range);
+
+            expect(spy.args[0][0].sources[0].extra).to.be.equal(extra);
+        });
+    });
+
+    describe('#Remove.UpdateNodes', () => {
+        it('should get correct arguments in the hook', () => {
+            const spy: sinon.SinonSpy<any[], any[]> = sinon.spy();
+            highlighter.hooks.Remove.UpdateNodes.tap(spy);
+
+            const s = sources[0];
+            highlighter.fromStore(s.startMeta, s.endMeta, s.text, s.id);
+            highlighter.remove(s.id);
+
+            expect(spy.calledOnce).to.be.true;
+            expect(spy.args[0][0]).to.be.equal(s.id);
+            expect(Highlighter.isHighlightWrapNode(spy.args[0][1])).to.be.true;
+            expect(spy.args[0][2]).to.be.equal('remove');
+        });
+    });
+
+    afterEach(() => {
+        cleanup();
+    });
+});

package/test/integrate.spec.ts

@@ -0,0 +1,48 @@
+import { expect } from 'chai';
+import { readFileSync } from 'fs';
+import { resolve } from 'path';
+import jsdomGlobal from 'jsdom-global';
+import Highlighter from '../src/index';
+import HighlightSource from '../src/model/source';
+
+describe('Integration Usage', function () {
+    this.timeout(50000);
+
+    let cleanup;
+
+    beforeEach(() => {
+        cleanup = jsdomGlobal();
+    });
+
+    it('should work correctly when root contains no dom', () => {
+        const html = readFileSync(resolve(__dirname, 'fixtures', 'index.html'), 'utf-8');
+        document.body.innerHTML = html;
+
+        let highlighter = new Highlighter({
+            $root: document.querySelector('p')
+        });
+
+        let s: HighlightSource;
+        (highlighter as any).on(Highlighter.event.CREATE, data => {
+            s = data.sources[0];
+        });
+
+        const range = document.createRange();
+        const $p = document.querySelectorAll('p')[0];
+        range.setStart($p.childNodes[0], 0);
+        range.setEnd($p.childNodes[0], 17);
+        highlighter.fromRange(range);
+        const htmlHighlighted = document.body.innerHTML;
+
+        document.body.innerHTML = html;
+        highlighter = new Highlighter({
+            $root: document.querySelector('p')
+        });
+        highlighter.fromStore(s.startMeta, s.endMeta, s.text, s.id);
+        expect(document.body.innerHTML).to.be.equal(htmlHighlighted);
+    });
+
+    afterEach(() => {
+        cleanup();
+    });
+});