// Mockup https://www.figma.com/design/zsq2ahat30acTnumyy9aqC/00.Small-System?node-id=1235-18186&m=dev
/*
 * Expect icon as a slot
 * Can have a active attribute
 */
import { html } from "lit";
import "~icons/heroicons-outline/selector";

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

    cy.get("tems-input-posttab").should("exist");
  });

  const defaultIcon = html`<icon-heroicons-outline-selector></icon-heroicons-outline-selector>`;

  it("should accept slots", () => {
    cy.mount(
      html`<tems-input-posttab .icon=${defaultIcon}></tems-input-posttab>`,
    );

    cy.get("tems-input-posttab")
      .find("icon-heroicons-outline-selector")
      .should("exist");
  });

  it("should handle active attribute", () => {
    cy.mount(
      html`<tems-input-posttab .icon=${defaultIcon}></tems-input-posttab>`,
    );

    cy.get("tems-input-posttab")
      .find("div")
      .should("have.css", "background-color", "rgb(236, 238, 242)");

    cy.mount(
      html`<tems-input-posttab active="" .icon=${defaultIcon}></tems-input-posttab>`,
    );

    cy.get("tems-input-posttab")
      .find("div")
      .should("have.css", "background-color", "rgb(255, 33, 242)");
  });

  it("should handle a size attribute", () => {
    cy.mount(
      html`<tems-input-posttab size="lg" .icon=${defaultIcon}></tems-input-posttab>`,
    );
    cy.get("tems-input-posttab").should("have.css", "height", "44px");

    cy.mount(
      html`<tems-input-posttab size="sm" .icon=${defaultIcon}></tems-input-posttab>`,
    );
    cy.get("tems-input-posttab").should("have.css", "height", "32px");

    cy.mount(
      html`<tems-input-posttab size="md" .icon=${defaultIcon}></tems-input-posttab>`,
    );
    cy.get("tems-input-posttab").should("have.css", "height", "40px");
  });

  it("should default to size md", () => {
    cy.mount(
      html`<tems-input-posttab .icon=${defaultIcon}></tems-input-posttab>`,
    );
    cy.get("tems-input-posttab").should("have.attr", "size", "md");
  });
});