import { render } from "@testing-library/react";
import { describe, expect, it } from "vitest";
import { AppIcon } from "./AppIcons";

describe("AppIcon", () => {
  it("injects an svg from useanimations data", () => {
    const { container } = render(
      <button type="button">
        <AppIcon name="bell" size={24} />
      </button>,
    );
    const host = container.querySelector(".hb-app-icon");
    expect(host).toBeTruthy();
    expect(host?.querySelector("svg")).toBeTruthy();
  });

  it("starts animating when the parent is hovered", async () => {
    const { container } = render(
      <button type="button">
        <AppIcon name="bell" size={24} />
      </button>,
    );
    const host = container.querySelector(".hb-app-icon");
    const before = host?.innerHTML ?? "";
    host?.closest("button")?.dispatchEvent(new Event("pointerenter", { bubbles: true }));
    await new Promise((resolve) => {
      window.setTimeout(resolve, 80);
    });
    const after = host?.innerHTML ?? "";
    expect(after.length).toBeGreaterThan(0);
    expect(after !== before || after.includes("transform")).toBe(true);
  });
});
