import { describe, it, expect, beforeEach } from "vitest";
import { initHash } from "../scripts/init-hash.mjs";

function makeSelect(options = ["10", "25", "50", "100"]) {
  const sel = document.createElement("select");
  sel.id = "items-per-page-dropdown";
  for (const v of options) {
    const o = document.createElement("option");
    o.value = v;
    o.textContent = v;
    sel.appendChild(o);
  }
  document.body.appendChild(sel);
  return sel;
}

describe("init-hash DOM binding", () => {
  beforeEach(() => {
    document.body.innerHTML = "";
    localStorage.clear();
    window.location.hash = "";
  });

  it("reads 'per' from hash on load and sets the dropdown", () => {
    window.location.hash = "#page=3&per=50";
    const sel = makeSelect();
    initHash();
    expect(sel.value).toBe("50");
  });

  it("writes 'per' to hash when dropdown changes and mirrors prefs", () => {
    const sel = makeSelect();
    initHash();
    sel.value = "100";
    sel.dispatchEvent(new Event("change"));

    expect(window.location.hash.includes("per=100")).toBe(true);
    expect(localStorage.getItem("qedit:itemsPerPage")).toBe("100");
  });
});