Add tests for remaining actions

src/clickOutside.test.ts

@@ -1,45 +1,56 @@
 import { clickOutside } from './clickOutside';
+import { Action } from './types';
 import * as assert from 'assert';
 import * as sinon from 'sinon';
 
 describe('clickOutside', function() {
 	let element: HTMLElement;
 	let sibling: HTMLElement;
+	let action: ReturnType<Action>;
 
-	beforeEach(function() {
+	before(function() {
 		element = document.createElement('div');
 		sibling = document.createElement('div');
 		document.body.appendChild(element);
 		document.body.appendChild(sibling);
 	});
 
+	after(function() {
+		element.remove();
+		sibling.remove();
+	});
+
+	afterEach(function() {
+		action.destroy!();
+	});
+
 	it('calls callback on outside click', function() {
 		const cb = sinon.fake();
-		clickOutside(element, { enabled: true, cb });
+		action = clickOutside(element, { enabled: true, cb });
 
 		sibling.click();
 		assert.ok(cb.calledOnce);
 	});
 
 	it('does not call callback when disabled', function() {
 		const cb = sinon.fake();
-		clickOutside(element, { enabled: false, cb });
+		action = clickOutside(element, { enabled: false, cb });
 
 		sibling.click();
 		assert.ok(cb.notCalled);
 	});
 
 	it('does not call callback when element clicked', function() {
 		const cb = sinon.fake();
-		clickOutside(element, { enabled: true, cb });
+		action = clickOutside(element, { enabled: true, cb });
 
 		element.click();
 		assert.ok(cb.notCalled);
 	});
 
 	it('updates parameters', function() {
 		const cb = sinon.fake();
-		const action = clickOutside(element, { enabled: true, cb });
+		action = clickOutside(element, { enabled: true, cb });
 
 		action.update!({ enabled: false });
 		element.click();

src/lazyload.test.ts

@@ -0,0 +1,95 @@
+import { lazyload } from './lazyload';
+import { Action } from './types';
+import * as assert from 'assert';
+import * as sinon from 'sinon';
+
+describe('lazyload', function() {
+	let element: HTMLElement;
+	let action: ReturnType<Action>;
+	let intersectionObserverConstructorSpy: sinon.SinonSpy;
+	const observeFake = sinon.fake();
+	const unobserveFake = sinon.fake();
+
+	before(function() {
+		setupIntersectionObserverMock({
+			observe: observeFake,
+			unobserve: unobserveFake
+		});
+		intersectionObserverConstructorSpy = sinon.spy(global, 'IntersectionObserver');
+	});
+
+	beforeEach(function() {
+		element = document.createElement('div');
+		document.body.appendChild(element);
+	});
+
+	afterEach(function() {
+		action.destroy!();
+		element.remove();
+		observeFake.resetHistory();
+		unobserveFake.resetHistory();
+	});
+
+	it('observes node', function() {
+		action = lazyload(element, {});
+		assert.ok(intersectionObserverConstructorSpy.calledOnce);
+		assert.ok(observeFake.calledOnce);
+	});
+
+	it('sets attribute on intersection', function() {
+		action = lazyload(element, { className: 'test'});		
+		const intersectionCallback = intersectionObserverConstructorSpy.firstCall.firstArg;
+		intersectionCallback([{ 
+			isIntersecting: true,
+			target: element
+		}]);
+
+		assert.ok(unobserveFake.calledOnce);
+		assert.strictEqual(element.className, 'test');
+	});
+
+	it('does not set attribute when no intersection', function() {
+		action = lazyload(element, { className: 'test'});		
+		const intersectionCallback = intersectionObserverConstructorSpy.firstCall.firstArg;
+		intersectionCallback([{ 
+			isIntersecting: false,
+			target: element
+		}]);
+
+		assert.ok(unobserveFake.notCalled);
+		assert.strictEqual(element.className, '');
+	});
+});
+
+// from https://stackoverflow.com/a/58651649
+function setupIntersectionObserverMock({
+	root = null,
+	rootMargin = '',
+	thresholds = [],
+	disconnect = () => null,
+	observe = () => null,
+	takeRecords = () => [],
+	unobserve = () => null
+} = {}): void {
+	class MockIntersectionObserver implements IntersectionObserver {
+		readonly root: Element | null = root;
+		readonly rootMargin: string = rootMargin;
+		readonly thresholds: ReadonlyArray<number> = thresholds;
+		disconnect: () => void = disconnect;
+		observe: (target: Element) => void = observe;
+		takeRecords: () => IntersectionObserverEntry[] = takeRecords;
+		unobserve: (target: Element) => void = unobserve;
+	}
+
+	Object.defineProperty(window, 'IntersectionObserver', {
+		writable: true,
+		configurable: true,
+		value: MockIntersectionObserver
+	});
+
+	Object.defineProperty(global, 'IntersectionObserver', {
+		writable: true,
+		configurable: true,
+		value: MockIntersectionObserver
+	});
+}

src/longpress.test.ts

@@ -0,0 +1,56 @@
+import { longpress } from './longpress';
+import { Action } from './types';
+import * as assert from 'assert';
+import * as sinon from 'sinon';
+
+describe('longpress', function() {
+	let element: HTMLElement;
+	let cb = sinon.fake();
+	let action: ReturnType<Action>;
+	let clock: sinon.SinonFakeTimers;
+
+	before(function() {
+		element = document.createElement('div');
+		element.addEventListener('longpress', cb);
+		document.body.appendChild(element);
+		clock = sinon.useFakeTimers();
+	});
+
+	after(function() {
+		element.remove();
+		clock.restore();
+	});
+
+	afterEach(function() {
+		action.destroy!();
+		cb.resetHistory();
+	});
+
+	it('dispatches longpress event when mousedown more than duration', function() {
+		const duration = 10;
+		action = longpress(element, duration);
+		element.dispatchEvent(new window.MouseEvent('mousedown'));
+		clock.tick(duration);
+		element.dispatchEvent(new window.MouseEvent('mouseup'));
+		assert.ok(cb.calledOnce);
+	});
+
+	it('does not dispatch longpress event when mousedown less than duration', function() {
+		action = longpress(element, 100);
+		element.dispatchEvent(new window.MouseEvent('mousedown'));
+		clock.tick(10);
+		element.dispatchEvent(new window.MouseEvent('mouseup'));
+		assert.ok(cb.notCalled);
+	});
+
+	it('updates duration', function() {
+		const newDuration = 10;
+		action = longpress(element, 500);
+		action.update!(newDuration);
+
+		element.dispatchEvent(new window.MouseEvent('mousedown'));
+		clock.tick(newDuration);
+		element.dispatchEvent(new window.MouseEvent('mouseup'));
+		assert.ok(cb.calledOnce);
+	});
+});

src/longpress.ts

@@ -16,15 +16,15 @@ export function longpress(node: HTMLElement, duration: number): ReturnType<Actio
   let timer: number;
 
   const handleMousedown = () => {
-    timer = setTimeout(() => {
+    timer = window.setTimeout(() => {
       node.dispatchEvent(
         new CustomEvent('longpress')
       );
     }, duration);
   };
 
   const handleMouseup = () => {
-    clearTimeout(timer)
+    clearTimeout(timer);
   };
 
   node.addEventListener('mousedown', handleMousedown);

src/pannable.test.ts

@@ -0,0 +1,44 @@
+import { pannable } from './pannable';
+import { Action } from './types';
+import * as assert from 'assert';
+import * as sinon from 'sinon';
+
+describe('pannable', function() {
+	let element: HTMLElement;
+	let action: ReturnType<Action>;
+
+	before(function() {
+		element = document.createElement('div');
+		document.body.appendChild(element);
+	});
+
+	after(function() {
+		element.remove();
+	});
+
+	afterEach(function() {
+		action.destroy!();
+	});
+
+	it('dispatches pan events', function() {
+		action = pannable(element);
+		const panstartCb = sinon.spy();
+		const panmoveCb = sinon.spy();
+		const panendCb = sinon.spy();
+		element.addEventListener('panstart', panstartCb);
+		element.addEventListener('panmove', panmoveCb);
+		element.addEventListener('panend', panendCb);
+
+		element.dispatchEvent(new window.MouseEvent('mousedown', { clientX: 20, clientY: 30}));
+		const panstartDetail = panstartCb.firstCall.firstArg.detail;
+		assert.deepStrictEqual(panstartDetail, { x: 20, y: 30 });
+
+		window.dispatchEvent(new window.MouseEvent('mousemove', { clientX: 30, clientY: 50 }));
+		const panmoveDetail = panmoveCb.firstCall.firstArg.detail;
+		assert.deepStrictEqual(panmoveDetail, { x: 30, y: 50, dx: 10, dy: 20 });
+
+		window.dispatchEvent(new window.MouseEvent('mouseup', { clientX: 35, clientY: 55 }));
+		const panendDetail = panendCb.firstCall.firstArg.detail;
+		assert.deepStrictEqual(panendDetail, { x: 35, y: 55 });
+	});
+});

src/preventTabClose.test.ts

@@ -0,0 +1,56 @@
+import { preventTabClose } from './preventTabClose';
+import { Action } from './types';
+import * as assert from 'assert';
+import * as sinon from 'sinon';
+
+describe('preventTabClose', function() {
+	let element: HTMLElement;
+	let action: ReturnType<Action>;
+
+	before(function() {
+		element = document.createElement('div');
+		document.body.appendChild(element);
+	});
+
+	after(function() {
+		element.remove();
+	});
+
+	afterEach(function() {
+		action.destroy!();
+	});
+
+	it('cancels beforeunload event when enabled', function() {
+		action = preventTabClose(element, true);
+		const event = new window.Event('beforeunload');
+		const preventDefaultSpy = sinon.spy(event, 'preventDefault');
+		const returnValSpy = sinon.spy(event, 'returnValue', ['set']);
+		window.dispatchEvent(event);
+
+		assert.ok(preventDefaultSpy.calledOnce);
+		assert.ok(returnValSpy.set.calledWith(''));
+	});
+
+	it('does not cancel beforeunload event when disabled', function() {
+		action = preventTabClose(element, false);
+		const event = new window.Event('beforeunload');
+		const preventDefaultSpy = sinon.spy(event, 'preventDefault');
+		window.dispatchEvent(event);
+
+		assert.ok(preventDefaultSpy.notCalled);
+	});
+
+	it('updates enabled parameter', function() {
+		action = preventTabClose(element, false);
+		const event = new window.Event('beforeunload');
+		const preventDefaultSpy = sinon.spy(event, 'preventDefault');
+		window.dispatchEvent(event);
+
+		assert.ok(preventDefaultSpy.notCalled);
+
+		action.update!(true);
+		window.dispatchEvent(event);
+
+		assert.ok(preventDefaultSpy.called);
+	});
+});