router-dom
Version:
A lightweight router for everyone
148 lines (124 loc) • 4.25 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Router Tests</title>
<script type="module">
import { hydro, $ } from "hydro-js";
import { runTests } from "@web/test-runner-mocha";
import { expect } from "@esm-bundle/chai";
import Router from "../../dist/router.js";
const sleep = (time) =>
new Promise((resolve) => setTimeout(resolve, time));
runTests(() => {
let router;
describe("router", () => {
it("restores the scroll height", async () => {
router = new Router([
{
path: "/",
element: `<div>
<div style="height: 2000px;">A</div>
<div>B</div>
</div>`,
},
]);
router.go("/");
await sleep(50);
window.scrollTo(0, document.body.scrollHeight);
// Simulate reload
window.dispatchEvent(new Event("beforeunload"));
router.oldRoute = null;
window.scrollTo(0, 0);
window.dispatchEvent(new Event("popstate"));
await sleep(50);
expect(window.scrollY).not.to.equal(0);
});
it("does not restore the scroll height", async () => {
router = new Router([
{
path: "/",
element: `<div>
<div style="height: 2000px;">A</div>
<div>B</div>
</div>`,
restoreScroll: false,
},
]);
router.go("/");
await sleep(50);
window.scrollTo(0, document.body.scrollHeight);
// Simulate reload
window.dispatchEvent(new Event("beforeunload"));
router.oldRoute = null;
window.scrollTo(0, 0);
window.dispatchEvent(new Event("popstate"));
await sleep(50);
expect(window.scrollY).to.equal(0);
});
it("sets scroll to 0 when navigating to another route", async () => {
document.body.insertAdjacentHTML(
"beforeend",
`<div style="height: 2000px;">
<a href="/a">A</a>
<a href="/b">B</a>
<div data-outlet></div>
</div>`
);
router = new Router([
{
path: "/a",
element: `<div>A Content</div>`,
},
{
path: "/b",
element: `<div>B Content</div>`,
},
]);
router.go("/a");
await sleep(50);
window.scrollTo(0, 600);
router.go("/b");
await sleep(50);
expect(window.scrollY).to.equal(0);
});
it("does restore the scroll when scrolling, navigating and navigating back", async () => {
document.body.insertAdjacentHTML(
"beforeend",
`<div style="height: 2000px;">
<a href="/a">A</a>
<a href="/b">B</a>
<div data-outlet></div>
</div>`
);
router = new Router([
{
path: "/a",
element: `<div>A Content</div>`,
},
{
path: "/b",
element: `<div>B Content</div>`,
},
]);
window.router = router;
router.go("/a");
await sleep(50);
window.scrollTo(0, 500);
router.go("/b");
await sleep(50);
expect(window.scrollY).to.equal(0);
history.back();
await sleep(50);
expect(window.scrollY).to.equal(500);
});
});
});
</script>
</head>
<body>
<a id="profile" href="/settings/profile">Profile</a>
<div data-outlet></div>
</body>
</html>