@plannotator/web-highlighter 0.8.0

package/test/mobile.spec.ts

@@ -0,0 +1,87 @@
+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 { getDefaultOptions } from '../src/util/const';
+import getInteraction from '../src/util/interaction';
+
+describe('Highlighter on mobiles', function () {
+    this.timeout(50000);
+
+    let highlighter: Highlighter;
+    let cleanup;
+    let wrapSelector: string;
+
+    beforeEach(() => {
+        const html = readFileSync(resolve(__dirname, 'fixtures', 'index.html'), 'utf-8');
+        cleanup = jsdomGlobal('', {
+            resources: new jsdom.ResourceLoader({
+                userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 13_2_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.3 Mobile/15E148 Safari/604.1'
+            })
+        });
+        document.body.innerHTML = html;
+        highlighter = new Highlighter();
+        wrapSelector = getDefaultOptions().wrapTag;
+    });
+
+    describe('#run', () => {
+        it('should highlight automatically after the user\'s interaction', () => {
+            expect(getInteraction().PointerEnd).to.be.equal('touchend');
+
+            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 TouchEvent('touchend', {
+                view: window,
+                bubbles: true,
+                cancelable: true
+            });
+            document.body.dispatchEvent(e);
+
+            const $w = document.querySelectorAll('p')[0].querySelector(wrapSelector);
+            expect($w.textContent).to.be.equal(content);
+        });
+    });
+
+    describe('#dispose', () => {
+        it('should not highlight automatically after calling .dispose', () => {
+            highlighter.run();
+            highlighter.dispose();
+
+            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 TouchEvent('touchend', {
+                view: window,
+                bubbles: true,
+                cancelable: true
+            });
+            document.body.dispatchEvent(e);
+
+            const $w = document.querySelectorAll('p')[0].querySelectorAll(wrapSelector);
+            expect($w.length).to.be.equal(0);
+        });
+
+        it('should remove all highlights after calling .dispose', () => {
+            highlighter.dispose();
+
+            const $w = document.querySelectorAll(wrapSelector);
+            expect($w.length).to.be.equal(0);
+        });
+    });
+
+    afterEach(() => {
+        cleanup();
+    });
+});

package/test/option.spec.ts

@@ -0,0 +1,212 @@
+import { expect } from 'chai';
+import { readFileSync } from 'fs';
+import { resolve } from 'path';
+import jsdomGlobal from 'jsdom-global';
+import Highlighter from '../src/index';
+import { getDefaultOptions } from '../src/util/const';
+
+describe('Highlighter Options', function () {
+    this.timeout(50000);
+
+    let cleanup: Function;
+
+    beforeEach(() => {
+        const html = readFileSync(resolve(__dirname, 'fixtures', 'index.html'), 'utf-8');
+        cleanup = jsdomGlobal();
+        document.body.innerHTML = html;
+    });
+
+    describe('#$root', () => {
+        it('should highlight text inside $root', () => {
+            const $root = document.querySelectorAll('p')[0];
+            const highlighter = new Highlighter({ $root });
+            highlighter.removeAll();
+
+            expect(highlighter.getDoms()).lengthOf(0);
+
+            const range = document.createRange();
+            range.setStart($root.childNodes[0], 0);
+            range.setEnd($root.childNodes[0], 17);
+            highlighter.fromRange(range);
+
+            expect(highlighter.getDoms()).lengthOf.gt(0);
+        });
+
+        it('should not highlight text outside $root', () => {
+            const $root = document.querySelectorAll('p')[0];
+            const highlighter = new Highlighter({ $root });
+            highlighter.removeAll();
+            expect(highlighter.getDoms()).lengthOf(0);
+
+            const range = document.createRange();
+            const $p = document.querySelectorAll('p')[1];
+            range.setStart($p.childNodes[0], 0);
+            range.setEnd($p.childNodes[0], 17);
+            highlighter.fromRange(range);
+
+            expect(highlighter.getDoms()).lengthOf(0);
+        });
+    });
+
+    describe('#exceptSelectors', () => {
+
+        it('should skip nodes because of the tag selector filters', () => {
+            const highlighter = new Highlighter({
+                exceptSelectors: ['p']
+            });
+            highlighter.removeAll();
+
+            const $p = document.querySelectorAll('p')[0];
+            const range = document.createRange();
+            range.setStart($p.childNodes[0], 0);
+            range.setEnd($p.childNodes[0], 17);
+            highlighter.fromRange(range);
+
+            expect(highlighter.getDoms()).lengthOf(0);
+        });
+
+        it('should skip nodes because of the className selector filters', () => {
+            const highlighter = new Highlighter({
+                exceptSelectors: ['.first-p']
+            });
+            highlighter.removeAll();
+
+            const $p = document.querySelectorAll('p')[0];
+            const range = document.createRange();
+            range.setStart($p.childNodes[0], 0);
+            range.setEnd($p.childNodes[0], 17);
+            highlighter.fromRange(range);
+
+            expect(highlighter.getDoms()).lengthOf(0);
+        });
+
+        it('should skip nodes because of the id selector filters', () => {
+            const highlighter = new Highlighter({
+                exceptSelectors: ['#js-first-p']
+            });
+            highlighter.removeAll();
+
+            const $p = document.querySelectorAll('p')[0];
+            const range = document.createRange();
+            range.setStart($p.childNodes[0], 0);
+            range.setEnd($p.childNodes[0], 17);
+            highlighter.fromRange(range);
+
+            expect(highlighter.getDoms()).lengthOf(0);
+        });
+
+        it('should not skip when no filter matches', () => {
+            const highlighter = new Highlighter({
+                exceptSelectors: ['.no-match']
+            });
+            highlighter.removeAll();
+
+            const $p = document.querySelectorAll('p')[0];
+            const range = document.createRange();
+            range.setStart($p.childNodes[0], 0);
+            range.setEnd($p.childNodes[0], 17);
+            highlighter.fromRange(range);
+
+            expect(highlighter.getDoms()).lengthOf.gt(0);
+        });
+    });
+
+    describe('#wrapTag', () => {
+        it('should use default tag for wrapping node when there\'s no config', () => {
+            const wrapTag = getDefaultOptions().wrapTag;
+            const highlighter = new Highlighter();
+            highlighter.removeAll();
+
+            const $p = document.querySelectorAll('p')[0];
+            const range = document.createRange();
+            range.setStart($p.childNodes[0], 0);
+            range.setEnd($p.childNodes[0], 17);
+            highlighter.fromRange(range);
+
+            expect(highlighter.getDoms()).lengthOf.gt(0);
+            const useCorrectTag = highlighter
+                .getDoms()
+                .every(n => n.tagName.toUpperCase() === wrapTag.toUpperCase());
+            expect(useCorrectTag).to.be.true;
+        });
+
+        it('should use customized tag for wrapping nodes', () => {
+            const wrapTag = getDefaultOptions().wrapTag === 'b' ? 'i' : 'b';
+            const highlighter = new Highlighter({ wrapTag });
+            highlighter.removeAll();
+
+            const $p = document.querySelectorAll('p')[0];
+            const range = document.createRange();
+            range.setStart($p.childNodes[0], 0);
+            range.setEnd($p.childNodes[0], 17);
+            highlighter.fromRange(range);
+
+            expect(highlighter.getDoms()).lengthOf.gt(0);
+            const useCorrectTag = highlighter
+                .getDoms()
+                .every(n => n.tagName.toUpperCase() === wrapTag.toUpperCase());
+            expect(useCorrectTag).to.be.true;
+        });
+    });
+
+    describe('#style.className', () => {
+        it('should use default className for wrapping nodes when there\'s no config', () => {
+            const defaultClassName = getDefaultOptions().style.className;
+            const highlighter = new Highlighter();
+            highlighter.removeAll();
+
+            const $p = document.querySelectorAll('p')[0];
+            const range = document.createRange();
+            range.setStart($p.childNodes[0], 0);
+            range.setEnd($p.childNodes[0], 17);
+            highlighter.fromRange(range);
+
+            expect(highlighter.getDoms()).lengthOf.gt(0);
+            expect(highlighter.getDoms().every(n => n.classList.contains(defaultClassName))).to.be.true;
+        });
+
+        it('should use customized className for wrapping nodes', () => {
+            const className = 'test-class-config';
+            const defaultClassName = getDefaultOptions().style.className;
+            const highlighter = new Highlighter({
+                style: { className }
+            });
+            highlighter.removeAll();
+
+            const $p = document.querySelectorAll('p')[0];
+            const range = document.createRange();
+            range.setStart($p.childNodes[0], 0);
+            range.setEnd($p.childNodes[0], 17);
+            highlighter.fromRange(range);
+
+            expect(highlighter.getDoms()).lengthOf.gt(0);
+            expect(highlighter.getDoms().every(n => n.classList.contains(className))).to.be.true;
+            expect(highlighter.getDoms().some(n => n.classList.contains(defaultClassName))).to.be.false;
+        });
+
+        it('should use support an className array for wrapping nodes', () => {
+            const className = ['test-class-config-1', 'test-class-config-2'];
+            const defaultClassName = getDefaultOptions().style.className;
+            const highlighter = new Highlighter({
+                style: { className }
+            });
+            highlighter.removeAll();
+
+            const $p = document.querySelectorAll('p')[0];
+            const range = document.createRange();
+            range.setStart($p.childNodes[0], 0);
+            range.setEnd($p.childNodes[0], 17);
+            highlighter.fromRange(range);
+
+            expect(highlighter.getDoms()).lengthOf.gt(0);
+            expect(highlighter.getDoms().every(n => 
+                n.classList.contains(className[0]) && n.classList.contains(className[1])
+            )).to.be.true;
+            expect(highlighter.getDoms().some(n => n.classList.contains(defaultClassName))).to.be.false;
+        });
+    });
+
+    afterEach(() => {
+        cleanup();
+    });
+});

package/test/util.spec.ts

@@ -0,0 +1,244 @@
+import { expect } from 'chai';
+import jsdomGlobal from 'jsdom-global';
+import HighlightSource from '../src/model/source/index';
+import sources from './fixtures/source.json';
+import Cache from '../src/data/cache';
+import Hook from '../src/util/hook';
+import EventEmitter from '../src/util/event.emitter';
+import { initDefaultStylesheet } from '../src/painter/style';
+import { addEventListener } from '../src/util/dom';
+import sinon from 'sinon';
+
+describe('Else Utils', function () {
+    this.timeout(50000);
+
+    describe('Cache', () => {
+        let cache: Cache;
+
+        beforeEach(() => {
+            cache = new Cache();
+        });
+
+        it('should work correctly when saving source', () => {
+            const s = sources[0];
+            const highlightSource = new HighlightSource(s.startMeta, s.endMeta, s.text, s.id);
+            cache.save(highlightSource);
+            expect(cache.getAll()).lengthOf(1);
+            expect(cache.getAll()[0]).to.be.equal(highlightSource);
+        });
+
+        it('should throw error when set data', () => {
+            const s = sources[0];
+            const highlightSource = new HighlightSource(s.startMeta, s.endMeta, s.text, s.id);
+            cache.save(highlightSource);
+            expect(() => cache.data = [highlightSource]).to.throw();
+        });
+
+        it('should be the same when using .data and .getAll', () => {
+            const s = sources[0];
+            const highlightSource = new HighlightSource(s.startMeta, s.endMeta, s.text, s.id);
+            cache.save(highlightSource);
+            expect(cache.getAll()).lengthOf(cache.data.length);
+            expect(cache.getAll().every(c => cache.data.indexOf(c) > -1)).to.be.true;
+        });
+
+        it('should support an array as the argument', () => {
+            const highlightSources = sources.map(s => new HighlightSource(s.startMeta, s.endMeta, s.text, s.id));
+            cache.save(highlightSources);
+            expect(cache.getAll()).lengthOf(highlightSources.length);
+        });
+
+        it('should return the correct data by .get', () => {
+            const s = sources[0];
+            const highlightSource = new HighlightSource(s.startMeta, s.endMeta, s.text, s.id);
+            cache.save(highlightSource);
+            expect(cache.get(s.id)).to.be.equal(highlightSource);
+        });
+    });
+
+    describe('Style', () => {
+        it('should not generate duplicate stylesheet', () => {
+            const cleanup = jsdomGlobal();
+            expect(document.querySelectorAll('style')).lengthOf(0);
+            initDefaultStylesheet();
+            expect(document.querySelectorAll('style')).lengthOf(1);
+            initDefaultStylesheet();
+            expect(document.querySelectorAll('style')).lengthOf(1);
+            cleanup();
+        });
+    });
+
+    describe('Hook', () => {
+        it('should have the correct name', () => {
+            const hook = new Hook('test');
+            expect(hook.name).to.be.equal('test');
+        });
+
+        it('should be empty before tapping anything', () => {
+            const hook = new Hook();
+            expect(hook.isEmpty()).to.be.true;
+        });
+
+        it('should call only once for a tapped function', () => {
+            const spy: sinon.SinonSpy<any[], any[]> = sinon.spy();
+            const spy2: sinon.SinonSpy<any[], any[]> = sinon.spy();
+            const hook = new Hook();
+            hook.tap(spy);
+            hook.tap(spy2);
+            hook.call();
+
+            expect(spy.calledOnce).to.be.true;
+            expect(spy2.calledOnce).to.be.true;
+        });
+
+        it('should call tapped functions in the correct order', () => {
+            const seq = [];
+            const first = () => seq.push(1);
+            const second = () => seq.push(2);
+            const third = () => seq.push(3);
+            const hook = new Hook();
+            hook.tap(first);
+            hook.tap(second);
+            hook.tap(third);
+            hook.call();
+
+            expect(seq).to.deep.equal([1, 2, 3]);
+        });
+
+        it('should return a valid removing function when calling .tap', () => {
+            const spy: sinon.SinonSpy<any[], any[]> = sinon.spy();
+            const hook = new Hook();
+            const remove = hook.tap(spy);
+            remove();
+            hook.call();
+
+            expect(hook.isEmpty()).to.be.true;
+            expect(spy.callCount).to.be.equal(0);
+        });
+
+        it('should not tap the same function twice', () => {
+            const spy: sinon.SinonSpy<any[], any[]> = sinon.spy();
+            const hook = new Hook();
+            hook.tap(spy);
+            hook.tap(spy);
+            hook.call();
+
+            expect(spy.calledOnce).to.be.true;
+        });
+
+        it('should remove the tapped functions by calling .remove', () => {
+            const spy: sinon.SinonSpy<any[], any[]> = sinon.spy();
+            const hook = new Hook();
+            hook.tap(spy);
+            hook.remove(spy);
+            hook.call();
+            
+            expect(hook.isEmpty()).to.be.true;
+            expect(spy.callCount).to.be.equal(0);
+        });
+
+        it('should get the correct parameters when calling .call', () => {
+            const spy: sinon.SinonSpy<any[], any[]> = sinon.spy();
+            const spy2: sinon.SinonSpy<any[], any[]> = sinon.spy();
+            const hook = new Hook();
+            const p1 = 'test';
+            const p2 = [1];
+            hook.tap(spy);
+            hook.tap(spy2);
+            hook.call(p1, p2);
+            
+            expect(spy.args[0][0]).to.be.equal(p1);
+            expect(spy2.args[0][0]).to.be.equal(p1);
+            expect(spy.args[0][1]).to.be.equal(p2);
+            expect(spy2.args[0][1]).to.be.equal(p2);
+        });
+
+        it('should use the last tapped function\s return as the returned value', () => {
+            const hook = new Hook();
+            hook.tap(() => 1);
+            hook.tap(() => 2);
+            hook.tap(() => 3);
+            expect(hook.call()).to.be.equal(3);
+        });
+
+        it('should not throw error when removing a non-exist function', () => {
+            const hook = new Hook();
+            expect(() => hook.remove(() => {})).not.to.be.throw();
+        });
+    });
+
+    describe('EventEmitter', () => {
+        it('should call the callback when event emit', () => {
+            const spy: sinon.SinonSpy<any[], any[]> = sinon.spy();
+            const event = new EventEmitter();
+            event.on('test', spy);
+            event.emit('test');
+
+            expect(spy.calledOnce).to.be.true;
+        });
+
+        it('should not call the callback when another event emit', () => {
+            const spy: sinon.SinonSpy<any[], any[]> = sinon.spy();
+            const event = new EventEmitter();
+            event.on('test', spy);
+            event.emit('test-2');
+
+            expect(spy.callCount).to.be.equal(0);
+        });
+
+        it('should not call the callback after calling .off', () => {
+            const spy: sinon.SinonSpy<any[], any[]> = sinon.spy();
+            const event = new EventEmitter();
+            event.on('test', spy);
+            event.off('test', spy);
+            event.emit('test');
+
+            expect(spy.callCount).to.be.equal(0);
+        });
+
+        it('should not have effects when event name is not exist', () => {
+            const spy: sinon.SinonSpy<any[], any[]> = sinon.spy();
+            const event = new EventEmitter();
+            event.on('test', spy);
+            event.off('test-1', spy);
+            event.emit('test');
+
+            expect(spy.calledOnce).to.be.true;
+        });
+    });
+
+    describe('DOM addEventListener', () => {
+        it('should add listener correctly', () => {
+            const cleanup = jsdomGlobal('<button>test</button>');
+            
+            const spy: sinon.SinonSpy<any[], any[]> = sinon.spy();
+            const dom = document.querySelector('button');
+            addEventListener(dom, 'click', spy);
+            dom.dispatchEvent(new MouseEvent('click', {
+                view: window,
+                bubbles: true,
+                cancelable: true
+            }));
+
+            expect(spy.calledOnce).to.be.true;
+            cleanup();
+        });
+
+        it('should remove listener correctly', () => {
+            const cleanup = jsdomGlobal('<button>test</button>');
+            
+            const spy: sinon.SinonSpy<any[], any[]> = sinon.spy();
+            const dom = document.querySelector('button');
+            const remove = addEventListener(dom, 'click', spy);
+            remove();
+            dom.dispatchEvent(new MouseEvent('click', {
+                view: window,
+                bubbles: true,
+                cancelable: true
+            }));
+
+            expect(spy.callCount).to.be.equal(0);
+            cleanup();
+        });
+    });
+});