import { elementForHash, samePageHashTarget } from "./fragment-nav";

/**
 * Testes de caminhos-base de elementForHash e de samePageHashTarget (complemento de fragment-nav.test.tsx):
 * hash vazio, só "#", id com percent-encoding, hash malformado, id que não existe, e o clique que o `<a>` de um
 * SVG recebe (não é um HTMLAnchorElement, então não é âncora de página).
 */

afterEach(() => {
  document.body.innerHTML = "";
});

describe("elementForHash", () => {
  it.each([
    ["an empty hash", ""],
    ["a lone #", "#"],
    ["an id that does not exist", "#nada"],
    ["a malformed percent-encoding", "#%E0%A4%A"],
  ])("path: %s -> null", (_label, hash) => {
    document.body.innerHTML = `<section id="alvo"></section>`;

    expect(elementForHash(hash)).toBeNull();
  });

  it("path: an id that exists -> that element", () => {
    document.body.innerHTML = `<section id="alvo"></section>`;

    expect(elementForHash("#alvo")?.id).toBe("alvo");
  });

  it("path: an id written with percent-encoding -> decoded before the lookup", () => {
    document.body.innerHTML = `<section id="seção"></section>`;

    expect(elementForHash("#se%C3%A7%C3%A3o")?.id).toBe("seção");
  });
});

describe("samePageHashTarget: o que não é âncora de página", () => {
  it("path: the closest link is an SVG <a> -> null, even with an href to this page", () => {
    document.body.innerHTML = `
      <svg><a href="/#alvo"><text id="rotulo">ir</text></a></svg>
      <section id="alvo"></section>`;
    const event = new MouseEvent("click", { bubbles: true });
    Object.defineProperty(event, "target", {
      value: document.getElementById("rotulo"),
    });

    expect(samePageHashTarget(event)).toBeNull();
  });
});