import { render } from "@testing-library/react";
import "@testing-library/jest-dom/vitest";

import { Megamenu, MegamenuBlog } from "../";

describe("Megamenu logo markup", () => {
  it("renders brand-mark wrapper for default Megamenu logo swap", () => {
    const { container } = render(<Megamenu isSticky={false} />);

    const logo = container.querySelector(".megamenu__nav-logo");
    const brandMark = logo?.querySelector(
      ":scope > [data-megamenu-brand-mark]",
    );

    expect(brandMark).toBeInTheDocument();
    expect(
      brandMark?.querySelector("[data-megamenu-logo-full]"),
    ).toBeInTheDocument();
    expect(
      brandMark?.querySelector("[data-megamenu-logo-compact]"),
    ).toBeInTheDocument();
  });

  it("keeps compactLogoOnly output without brand-mark wrapper", () => {
    const { container } = render(
      <MegamenuBlog compactLogoOnly isSticky={false} />,
    );

    const logo = container.querySelector(".megamenu__nav-logo");

    expect(
      logo?.querySelector(":scope > [data-megamenu-brand-mark]"),
    ).not.toBeInTheDocument();
    expect(
      logo?.querySelector("[data-megamenu-logo-full]"),
    ).not.toBeInTheDocument();
    expect(
      logo?.querySelector("[data-megamenu-logo-compact]"),
    ).not.toBeInTheDocument();
  });
});
