// Mockup https://www.figma.com/design/zsq2ahat30acTnumyy9aqC/00.Small-System?node-id=22-890&m=dev
/*
 * Expect named slots (icon, label) or attributes (icon, label)
 * Can have a active attribute
 * Should emit a click event if not disabled or not active
 */
import { html } from "lit";
import "~icons/mingcute/search-3-line";

describe("<tems-breadcrumb-item>", () => {
  it("should mount", () => {
    cy.mount(html`<tems-breadcrumb-item></tems-breadcrumb-item>`);

    cy.get("tems-breadcrumb-item").should("exist");
  });

  const defaultLabel = "Label";
  const defaultIcon = html`<icon-mingcute-search-3-line></icon-mingcute-search-3-line>`;
  const defaultIconAsSlot = html`<icon-mingcute-search-3-line
    slot="icon"
  ></icon-mingcute-search-3-line>`;

  it("should display label", () => {
    cy.mount(
      html`<tems-breadcrumb-item label=${defaultLabel}></tems-breadcrumb-item>`,
    );

    cy.get("tems-breadcrumb-item").contains(defaultLabel);
  });

  it("should handle active attribute", () => {
    cy.mount(
      html`<tems-breadcrumb-item label=${defaultLabel}></tems-breadcrumb-item>`,
    );

    cy.get("tems-breadcrumb-item")
      .find("button")
      .should("have.css", "background-color", "rgba(0, 0, 0, 0)");

    cy.mount(
      html`<tems-breadcrumb-item
        active=""
        label=${defaultLabel}
      ></tems-breadcrumb-item>`,
    );

    cy.get("tems-breadcrumb-item")
      .find("button")
      .should("have.css", "background-color", "rgb(255, 33, 242)");
  });

  it("should handle icon attribute", () => {
    cy.mount(
      html`<tems-breadcrumb-item
        .icon=${defaultIcon}
        label=${defaultLabel}
      ></tems-breadcrumb-item>`,
    );

    cy.get("tems-breadcrumb-item")
      .find("button")
      .find("icon-mingcute-search-3-line")
      .should("exist");
  });

  it("should accept slots", () => {
    cy.mount(
      html`<tems-breadcrumb-item
        ><span>${defaultLabel}</span></tems-breadcrumb-item
      >`,
    );

    cy.get("tems-breadcrumb-item").find("button").find("slot").should("exist");
  });

  it("should accept named slots", () => {
    cy.mount(
      html`<tems-breadcrumb-item
        ><span slot="label">${defaultLabel}</span></tems-breadcrumb-item
      >`,
    );

    cy.get("tems-breadcrumb-item")
      .find("button")
      .find("slot[name='label']")
      .should("exist");

    cy.mount(
      html`<tems-breadcrumb-item label=${defaultLabel}
        >${defaultIconAsSlot}</tems-breadcrumb-item
      >`,
    );

    cy.get("tems-breadcrumb-item")
      .find("button")
      .find("slot[name='icon']")
      .should("exist");

    cy.mount(
      html`<tems-breadcrumb-item
        ><span slot="label">${defaultLabel}</span
        >${defaultIconAsSlot}</tems-breadcrumb-item
      >`,
    );
    cy.get("tems-breadcrumb-item").find("button").as("button");

    cy.get("@button").find("slot[name='icon']").should("exist");
    cy.get("@button").find("slot[name='label']").should("exist");
  });

  it("should emit a click event", () => {
    const onClickedSpy = cy.spy().as("handleClick");
    cy.mount(
      html`<tems-breadcrumb-item
        @clicked=${onClickedSpy}
        label=${defaultLabel}
      ></tems-breadcrumb-item>`,
    );

    cy.get("tems-breadcrumb-item").find("button").click();

    cy.get("@handleClick").should("have.been.called");
  });

  it("should not emit a click event when active", () => {
    const onClickedSpy = cy.spy().as("handleClick");
    cy.mount(
      html`<tems-breadcrumb-item
        @clicked=${onClickedSpy}
        active=""
        label=${defaultLabel}
      ></tems-breadcrumb-item>`,
    );

    cy.get("tems-breadcrumb-item").find("button").click();

    cy.get("@handleClick").should("not.have.been.calledWith", {
      detail: Cypress.sinon.match(Object),
    });
  });
});