pwa-helpers
Version:
Small helper methods or mixins to help you build web apps.
117 lines (103 loc) • 4.45 kB
HTML
<!--
@license
Copyright (c) 2018 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html lang="en">
<head>
<meta charset="utf-8">
<title>router</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
<script src="../node_modules/chai/chai.js"></script>
<script src="../node_modules/mocha/mocha.js"></script>
<script src="../node_modules/wct-mocha/wct-mocha.js"></script>
</head>
<body>
<test-fixture id="basic">
<template>
<div>
<a id="internal" href="/foo/bar">internal link</a>
<a id="target" href="/foo/bar" target="_blank">target link</a>
<a id="download" href="/foo/bar" download>download link</a>
<a id="rel" href="/foo/bar" rel="external">rel="external" link</a>
<a id="mailto" href="mailto:abc@example.com">mailto link</a>
<a id="external" href="http://example.com">external link</a>
</div>
</template>
</test-fixture>
<script type="module">
import '@polymer/test-fixture';
import sinon from 'sinon';
import { installRouter } from '../router.js';
const originalHref = window.location.href;
const firstCallback = sinon.spy();
let callback = firstCallback;
installRouter((location, event) => callback(location, event));
// Prevent navigation from test page.
document.body.addEventListener('click', e => {
e.preventDefault();
});
function simulateClick(link, options) {
link.dispatchEvent(new MouseEvent('click',
Object.assign({ bubbles: true, cancelable: true }, options)));
}
suite('router tests', () => {
let internal, target, download, rel, mailto, external;
setup(() => {
const div = fixture('basic');
internal = div.querySelector('a#internal');
target = div.querySelector('a#target');
download = div.querySelector('a#download');
rel = div.querySelector('a#rel');
mailto = div.querySelector('a#mailto');
external = div.querySelector('a#external');
callback = sinon.spy();
});
test('installation should use callback', () => {
assert.isTrue(firstCallback.called);
assert.equal(firstCallback.lastCall.args[0], window.location);
assert.equal(firstCallback.lastCall.args[1], null);
});
test('internal link click should use callback', () => {
simulateClick(internal);
assert.equal(callback.lastCall.args[0], window.location);
assert.equal(callback.lastCall.args[0].pathname, '/foo/bar');
assert.isTrue(callback.lastCall.args[1].defaultPrevented);
});
test('secondary click should not use callback', () => {
simulateClick(internal, { button: 1 });
assert.isFalse(callback.called);
});
test('modifier key click should not use callback', () => {
simulateClick(internal, { metaKey: true });
simulateClick(internal, { ctrlKey: true });
simulateClick(internal, { shiftKey: true });
assert.isFalse(callback.called);
});
test('other link click should not use callback', () => {
simulateClick(target);
simulateClick(download);
simulateClick(rel);
simulateClick(mailto);
simulateClick(external);
assert.isFalse(callback.called);
});
test('popstate event should use callback', () => {
const event = new PopStateEvent('popstate');
window.dispatchEvent(event);
assert.equal(callback.lastCall.args[0], window.location);
assert.equal(callback.lastCall.args[1], event);
});
teardown(() => {
window.history.replaceState({}, '', originalHref);
});
});
</script>
</body>
</html>