// Mockup https://www.figma.com/design/zsq2ahat30acTnumyy9aqC/00.Small-System?node-id=22-676&m=dev
import { html } from "lit";

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

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

  it("should displays the label and counter by default", () => {
    cy.mount(
      html`<tems-tag label="Label" count="5" display-close=""></tems-tag>`,
    );
    cy.get("tems-tag").contains("Label");
    cy.get("tems-tag").contains("5");
    cy.get("tems-tag")
      .find("icon-material-symbols-close-rounded")
      .should("exist");
  });

  it("should displays the label and counter with the size 'xs'", () => {
    cy.mount(
      html`<tems-tag
        label="Label"
        size="xs"
        count="5"
        display-close=""
      ></tems-tag>`,
    );
    cy.get("tems-tag").contains("Label");
    cy.get("tems-tag").contains("5");
    cy.get("tems-tag").find("label").should("have.class", "xs");
    cy.get("tems-tag")
      .find("icon-material-symbols-close-rounded")
      .should("exist");
  });

  it("should displays the label and counter with the size 'sm'", () => {
    cy.mount(
      html`<tems-tag
        label="Label"
        size="sm"
        count="5"
        display-close=""
      ></tems-tag>`,
    );
    cy.get("tems-tag").contains("Label");
    cy.get("tems-tag").contains("5");
    cy.get("tems-tag").find("label").should("have.class", "sm");
    cy.get("tems-tag")
      .find("icon-material-symbols-close-rounded")
      .should("exist");
  });

  it("should not display the close icon", () => {
    cy.mount(html`<tems-tag label="Label" count="5"></tems-tag>`);
    cy.get("tems-tag").contains("Label");
    cy.get("tems-tag").contains("5");
    cy.get("tems-tag")
      .find("icon-material-symbols-close-rounded")
      .should("not.exist");
  });

  it("should be active", () => {
    cy.mount(
      html`<tems-tag
        label="Label"
        active=""
        count="5"
        display-close=""
      ></tems-tag>`,
    );
    cy.get("tems-tag").contains("Label");
    cy.get("tems-tag").contains("5");
    cy.get("tems-tag").find("label").should("have.attr", "active");
    cy.get("tems-tag")
      .find("icon-material-symbols-close-rounded")
      .should("exist");
  });

  it("should be disabled", () => {
    cy.mount(
      html`<tems-tag
        label="Label"
        disabled=""
        count="5"
        display-close=""
      ></tems-tag>`,
    );
    cy.get("tems-tag").contains("Label");
    cy.get("tems-tag").contains("5");
    cy.get("tems-tag").find("label").should("have.attr", "disabled");
    cy.get("tems-tag")
      .find("icon-material-symbols-close-rounded")
      .should("exist");
  });

  it("should displays the label without a counter", () => {
    cy.mount(html`<tems-tag label="Label" display-close=""></tems-tag>`);
    cy.get("tems-tag").contains("Label");
    cy.get("tems-tag").should("not.contain.text", /[0-9]/);
    cy.get("tems-tag")
      .find("icon-material-symbols-close-rounded")
      .should("exist");
  });

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

    cy.get("tems-tag").click();
    cy.get("@handleClick").should("have.been.calledOnce");
  });
});