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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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