greenflame089
52 lines
1.7 KiB
JavaScript
52 lines
1.7 KiB
JavaScript
import { describe, it, expect, beforeEach } from "vitest";
|
|
import { initPageHash } from "../scripts/init-page-hash.mjs";
|
|
|
|
function makePagination() {
|
|
const top = document.createElement("div");
|
|
top.id = "pagination-top";
|
|
top.innerHTML = `
|
|
<button data-page="1">1</button>
|
|
<button data-page="2">2</button>
|
|
<button data-page="3">3</button>
|
|
`;
|
|
const bottom = document.createElement("div");
|
|
bottom.id = "pagination-bottom";
|
|
bottom.innerHTML = `
|
|
<button data-page="1">1</button>
|
|
<button data-page="2">2</button>
|
|
<button data-page="3">3</button>
|
|
`;
|
|
document.body.appendChild(top);
|
|
document.body.appendChild(bottom);
|
|
return { top, bottom };
|
|
}
|
|
|
|
describe("init-page-hash bridge", () => {
|
|
beforeEach(() => {
|
|
document.body.innerHTML = "";
|
|
window.location.hash = "";
|
|
});
|
|
|
|
it("clicking a page button sets the hash and marks active", () => {
|
|
const { top } = makePagination();
|
|
initPageHash();
|
|
const btn2 = top.querySelector('[data-page="2"]');
|
|
btn2.click();
|
|
expect(window.location.hash.includes("page=2")).toBe(true);
|
|
// active reflection is async via event, but in jsdom we call reflect synchronously
|
|
// so check class after the handler
|
|
expect(btn2.classList.contains("is-active")).toBe(true);
|
|
expect(btn2.getAttribute("aria-current")).toBe("page");
|
|
});
|
|
|
|
it("updates active when hash changes programmatically", () => {
|
|
const { top } = makePagination();
|
|
initPageHash();
|
|
window.location.hash = "#page=3";
|
|
// Trigger hashchange manually (jsdom may not dispatch automatically)
|
|
window.dispatchEvent(new Event("hashchange"));
|
|
const btn3 = top.querySelector('[data-page="3"]');
|
|
expect(btn3.classList.contains("is-active")).toBe(true);
|
|
});
|
|
});
|