diff --git a/test/detach.html b/test/detach.html
deleted file mode 100644
index eb9b396..0000000
--- a/test/detach.html
+++ /dev/null
@@ -1,109 +0,0 @@
-
-
-
-
-
- cosmoz-image-viewer basic test
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/test/detach.test.js b/test/detach.test.js
new file mode 100644
index 0000000..2fab547
--- /dev/null
+++ b/test/detach.test.js
@@ -0,0 +1,77 @@
+
+
+import '../cosmoz-image-viewer.js';
+import {
+ assert, fixture, html
+} from '@open-wc/testing';
+
+import sinon from 'sinon';
+
+sinon.assert.expose(chai.assert, { prefix: '' });
+
+const createImageViewer = async () => {
+ const el = await fixture(html``);
+
+ el.images = [
+ '/base/stories/images/stockholm.jpg',
+ '/base/stories/images/strasbourg.jpg',
+ '/base/stories/images/cosmos1.jpg'
+ ];
+
+ return el;
+};
+
+suite('cosmoz-image-viewer', () => {
+ let imageViewer;
+
+ setup(async function () {
+ imageViewer = await createImageViewer();
+
+ const w = imageViewer.detach();
+ if (w == null) {
+ /* eslint-disable-next-line no-console */
+ console.warn('Only gets tested without popup blocker');
+ /* eslint-disable-next-line no-invalid-this */
+ this.skip();
+ }
+ w.close();
+ });
+
+ teardown(() => {
+ imageViewer.window.close();
+ });
+
+ test('detaching works', () => {
+ const w = imageViewer.detach();
+ assert.isNotNull(w);
+ });
+
+ test('detaching to existing window works', () => {
+ const w = imageViewer.detach(),
+ w2 = imageViewer.detach();
+ assert.isNotNull(w);
+ assert.deepEqual(w, w2);
+ });
+
+ test('shared detaching works', async () => {
+ const imageViewer2 = await createImageViewer(),
+ w = imageViewer.detach(),
+ w2 = imageViewer2.detach();
+ assert.isNotNull(w);
+ assert.deepEqual(w, w2);
+ });
+
+ test('detach from fullscreen works', () => {
+ assert.isFalse(imageViewer.hidden);
+ assert.isFalse(imageViewer.hasWindow);
+
+ imageViewer.openFullscreen();
+ assert.isFalse(imageViewer.hasWindow);
+
+ const ov = document.querySelector('cosmoz-image-viewer-overlay');
+
+ ov.shadowRoot.querySelector('cosmoz-image-viewer').detach();
+ assert.isTrue(imageViewer.hasWindow);
+ assert.isTrue(imageViewer.hidden);
+ });
+});
diff --git a/test/haunted-pan-zoom.html b/test/haunted-pan-zoom.html
deleted file mode 100644
index 55cbe3e..0000000
--- a/test/haunted-pan-zoom.html
+++ /dev/null
@@ -1,152 +0,0 @@
-
-
-
-
-
- cosmoz-image-viewer basic test
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/test/haunted-pan-zoom.test.js b/test/haunted-pan-zoom.test.js
new file mode 100644
index 0000000..c777b24
--- /dev/null
+++ b/test/haunted-pan-zoom.test.js
@@ -0,0 +1,121 @@
+
+import {
+ assertFuzzyMatch
+} from './helpers';
+import { makeMouseEvent } from '@polymer/iron-test-helpers/mock-interactions.js';
+import '../lib/haunted-pan-zoom.js';
+import {
+ assert, fixture, html, aTimeout
+} from '@open-wc/testing';
+
+const status = (el, status) => new Promise(resolve =>
+ el.addEventListener('status-changed', (
+ { detail: { value }}) => value === status && resolve()
+ )
+ ),
+ loaded = el => status(el, 'loaded'),
+ error = el => status(el, 'error'),
+
+ scroll = (el, dir) => el.shadowRoot.querySelector('.container').dispatchEvent(new WheelEvent('wheel', { deltaY: dir })),
+ scrollDown = el => scroll(el, 1),
+ scrollUp = el => scroll(el, -1);
+
+// eslint-disable-next-line max-lines-per-function
+suite('haunted-pan-zoom', () => {
+ let el;
+
+ setup(async () => {
+ el = await fixture(html`
+
+ `);
+ });
+
+ test('displays the image centered', () => {
+ const img = el.shadowRoot.querySelector('img');
+ assert.include(img.src, '/base/stories/images/cosmos1.jpg');
+ assertFuzzyMatch(img.getBoundingClientRect(), {
+ top: 43.75,
+ left: 0,
+ width: 200,
+ height: 112.5
+ });
+ });
+
+ test('handles errors', async () => {
+ el.src = 'missing.jpg';
+
+ await error(el);
+ const img = el.shadowRoot.querySelector('img');
+ assert.notExists(img);
+ });
+
+ test('changing src changes the image and centers it', async () => {
+ el.src = '/base/stories/images/cosmos2.jpg';
+
+ await loaded(el);
+
+ const img = el.shadowRoot.querySelector('img');
+ assert.include(img.src, '/base/stories/images/cosmos2.jpg');
+ assertFuzzyMatch(img.getBoundingClientRect(), {
+ top: 0,
+ left: 0,
+ width: 200,
+ height: 200
+ });
+ });
+
+ test('handles scroll events', async () => {
+ const img = el.shadowRoot.querySelector('img');
+
+ scrollUp(el);
+ await aTimeout();
+
+ assertFuzzyMatch(img.getBoundingClientRect(), {
+ top: -0.9,
+ left: -79.5,
+ width: 359,
+ height: 201.94
+ });
+
+ scrollDown(el);
+ await aTimeout();
+
+ assertFuzzyMatch(img.getBoundingClientRect(), {
+ top: 43.75,
+ left: 0,
+ width: 200,
+ height: 112.5
+ });
+ });
+
+ test('handles mouse panning', async () => {
+ const img = el.shadowRoot.querySelector('img');
+
+ makeMouseEvent('mousedown', {
+ x: 10,
+ y: 10
+ }, img);
+ await aTimeout();
+
+ makeMouseEvent('mousemove', {
+ x: 10,
+ y: 20
+ }, document);
+ await aTimeout();
+
+ makeMouseEvent('mouseup', {}, document);
+ await aTimeout();
+
+ assertFuzzyMatch(img.getBoundingClientRect(), {
+ top: 53.75,
+ left: 0,
+ width: 200,
+ height: 112.5
+ });
+ });
+});
diff --git a/test/helpers/index.js b/test/helpers/index.js
index 1096f05..82e4a62 100644
--- a/test/helpers/index.js
+++ b/test/helpers/index.js
@@ -1,13 +1,6 @@
-/* global host */
+import { assert } from '@open-wc/testing';
export const
-
- attach = element => {
- const el = document.createElement(element);
- host.appendChild(el);
- return () => host.removeChild(el);
- },
-
mount = str => {
const template = document.createElement('template');
template.innerHTML = str;
@@ -38,24 +31,11 @@ export const
});
},
- cycle = () => {
- return new Promise(resolve => {
- requestAnimationFrame(() => {
- requestAnimationFrame(() => {
- requestAnimationFrame(() => {
- resolve();
- });
- });
- });
- });
- },
-
HAS_NEW_TOUCH = (() => {
- let has = false;
try {
- has = Boolean(new TouchEvent('x'));
+ return Boolean(new TouchEvent('x'));
} catch (_) { /**/ }
- return has;
+ return false;
})(),
diff --git a/test/hooks/use-mouse-pan_test.js b/test/hooks/use-mouse-pan_test.js
index 96fff4b..8a61e54 100644
--- a/test/hooks/use-mouse-pan_test.js
+++ b/test/hooks/use-mouse-pan_test.js
@@ -11,7 +11,7 @@ suite('use-mouse-pan', () => {
suiteSetup(() => {
const App = () => {
const [status, deltaX, deltaY, , start] = useMousePan();
- return html`${status}, ${deltaX}, ${deltaY}`;
+ return html`${ status }, ${ deltaX }, ${ deltaY }`;
};
customElements.define('use-mouse-pan', component(App));
});
diff --git a/test/index.html b/test/index.html
deleted file mode 100644
index 175e04a..0000000
--- a/test/index.html
+++ /dev/null
@@ -1,20 +0,0 @@
-
-
-
-
-
- cosmoz-image-viewer tests
-
-
-
-
-
-
-