// Mockup https://www.figma.com/design/zsq2ahat30acTnumyy9aqC/00.Small-System?node-id=760-16696&m=dev
/*
 * <tems-tab-item
 *   label="Some text"
 *   count="9999"
 *   active=""
 *   disabled="">
 *   <button class="active" disabled="">Some Text<span>+9K</span></button>
 * </tems-tab-item>
 */
import { html } from "lit";

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

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

  it("should display a label", () => {
    const text = "Label";
    cy.mount(html`<tems-tab-item .label=${text}></tems-tab-item>`);

    cy.get("tems-tab-item").find("button").contains(text);
  });

  it("should display a counter", () => {
    const count = 50;
    cy.mount(html`<tems-tab-item .count=${count}></tems-tab-item>`);

    cy.get("tems-tab-item").find("button").contains(String(count));
  });

  it("should format the counter appropriatly", () => {
    // <1e3: exact value
    cy.mount(html`<tems-tab-item .count=${0}></tems-tab-item>`).contains("0");
    cy.mount(html`<tems-tab-item .count=${99}></tems-tab-item>`).contains("99");
    cy.mount(html`<tems-tab-item .count=${999}></tems-tab-item>`).contains(
      "999",
    );
    // 1e3: +nK
    cy.mount(html`<tems-tab-item .count=${1000}></tems-tab-item>`).contains(
      "+1K",
    );
    cy.mount(html`<tems-tab-item .count=${10000}></tems-tab-item>`).contains(
      "+10K",
    );
    cy.mount(html`<tems-tab-item .count=${100000}></tems-tab-item>`).contains(
      "+100K",
    );
    // 1e6: +nM
    cy.mount(html`<tems-tab-item .count=${1000000}></tems-tab-item>`).contains(
      "+1M",
    );
    cy.mount(html`<tems-tab-item .count=${10000000}></tems-tab-item>`).contains(
      "+10M",
    );
    cy.mount(
      html`<tems-tab-item .count=${100000000}></tems-tab-item>`,
    ).contains("+100M");
    // 1e9: +nG
    cy.mount(
      html`<tems-tab-item .count=${1000000000}></tems-tab-item>`,
    ).contains("+1G");
    cy.mount(
      html`<tems-tab-item .count=${10000000000}></tems-tab-item>`,
    ).contains("+10G");
    cy.mount(
      html`<tems-tab-item .count=${100000000000}></tems-tab-item>`,
    ).contains("+100G");
    // 1e12: T
    cy.mount(
      html`<tems-tab-item .count=${1000000000000}></tems-tab-item>`,
    ).contains("+1T");
    cy.mount(
      html`<tems-tab-item .count=${10000000000000}></tems-tab-item>`,
    ).contains("+10T");
    cy.mount(
      html`<tems-tab-item .count=${100000000000000}></tems-tab-item>`,
    ).contains("+100T");
    // OK, I'm stopping here.
  });

  const defaultLabel = "Label";
  const defaultCount = 1000;
  const expectedCount = "+1K";

  it("should display a text + counter", () => {
    cy.mount(
      html`<tems-tab-item
        .count=${defaultCount}
        .label=${defaultLabel}
      ></tems-tab-item>`,
    );

    cy.get("tems-tab-item").find("button").as("temsTabItem");
    cy.get("@temsTabItem").contains(defaultLabel);
    cy.get("@temsTabItem").contains(expectedCount);
  });

  it("should accept an active attribute", () => {
    cy.mount(
      html`<tems-tab-item
        .count=${defaultCount}
        .label=${defaultLabel}
        active=""
      ></tems-tab-item>`,
    );
    cy.get("tems-tab-item").find("button").as("temsTabItem");
    cy.get("@temsTabItem").contains(defaultLabel);
    cy.get("@temsTabItem").contains(expectedCount);
    cy.get("@temsTabItem").and("have.class", "active");
  });

  it("should accept a disabled attribute", () => {
    cy.mount(
      html`<tems-tab-item
        .count=${defaultCount}
        .label=${defaultLabel}
        disabled=""
      ></tems-tab-item>`,
    );
    cy.get("tems-tab-item").find("button").as("temsTabItem");
    cy.get("@temsTabItem").contains(defaultLabel);
    cy.get("@temsTabItem").contains(expectedCount);
    cy.get("@temsTabItem").and("have.class", "disabled").and("be.disabled");
  });

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

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

    cy.get("@handleClick").should(
      "have.been.calledOnce",
      Cypress.sinon.match({
        detail: { target: Cypress.sinon.match.any },
      }),
    );
  });
});