import { html } from "lit";

describe("<tems-header>", () => {
  it("should mount", () => {
    cy.mount(html`<tems-header></tems-header>`);
    cy.get("tems-header").should("exist");
  });

  it("should display heading", () => {
    const heading = "Test Heading";
    cy.mount(html`<tems-header heading=${heading}></tems-header>`);
    cy.get("tems-header").find(".heading").contains(heading);
  });

  it("should display breadcrumb", () => {
    const breadcrumb = [
      {
        route: "/home",
        label: "Home",
        resource: "",
      },
      {
        route: "/resource",
        label: "Resource",
        resource: "Category",
      },
    ];

    cy.mount(html`<tems-header .breadcrumb=${breadcrumb}></tems-header>`);
    cy.get("tems-header").find("tems-breadcrumb").should("exist");
  });

  it("should emit backlink event on back button click", () => {
    const onBacklinkSpy = cy.spy().as("onBacklinkSpy");
    cy.mount(
      html`<tems-header
        back-button=""
        @backlink=${onBacklinkSpy}
      ></tems-header>`,
    );
    cy.get("tems-header").find("tems-button").click();
    cy.get("@onBacklinkSpy").should("have.been.calledOnce");
  });

  it("should display slot content", () => {
    const slotContent = "Test Slot Content";
    cy.mount(
      html`<tems-header
        ><div class="test-slot">${slotContent}</div></tems-header
      >`,
    );
    cy.get("tems-header").find("slot").should("exist");
    cy.get("tems-header").find(".test-slot").contains(slotContent);
  });
});