// Mockup https://www.figma.com/design/zsq2ahat30acTnumyy9aqC/00.Small-System?node-id=82-2188&m=dev
/*
 * <tems-badge type="success">
 *   <div class="success md"><slot>Some Text</slot></div>
 * </tems-badge>
 */
import { html } from "lit";

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

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

  it("should display content", () => {
    const text = "I will show up in the test";
    cy.mount(html`<tems-badge>${text}</tems-badge>`);

    cy.get("tems-badge").should("contain.text", text);
  });

  it("should display html", () => {
    const text = "strings templates are also allowed";
    const htmlString = html`${text}`;
    cy.mount(html`<tems-badge>${htmlString}</tems-badge>`);

    cy.get("tems-badge").should("contain.text", text);
  });

  const defaultText = "I'm a badge";

  it("should have a default size and type", () => {
    cy.mount(html`<tems-badge>${defaultText}</tems-badge>`);

    cy.get("tems-badge").as("badge");

    cy.get("@badge").invoke("attr", "type").should("eq", "default");
    cy.get("@badge").invoke("attr", "size").should("eq", "md");

    cy.get("@badge")
      .find("div")
      .should("have.class", "default")
      .and("have.css", "background-color", "rgb(255, 255, 255)")
      .and("have.class", "md")
      .and("have.css", "height", "36px");
  });

  it("should handle type attribute", () => {
    const type = "success";
    cy.mount(html`<tems-badge type=${type}>${defaultText}</tems-badge>`);

    cy.get("tems-badge").as("badge");

    cy.get("@badge").invoke("attr", "type").should("eq", type);

    cy.get("@badge")
      .find("div")
      .should("have.class", type)
      .and("have.css", "background-color", "rgb(209, 250, 236)");
  });

  it("should handle size attribute", () => {
    const size = "xs";
    cy.mount(html`<tems-badge size=${size}>${defaultText}</tems-badge>`);

    cy.get("tems-badge").as("badge");

    cy.get("@badge").invoke("attr", "size").should("eq", size);

    cy.get("@badge")
      .find("div")
      .should("have.class", size)
      .and("have.css", "height", "26px");
  });

  it("should fallback to default on unhandled size or type", () => {
    const type = "successful";
    const size = "extra-small";
    cy.mount(
      html`<tems-badge type=${type} size=${size}>${defaultText}</tems-badge>`,
    );

    cy.get("tems-badge").as("badge");

    cy.get("@badge").invoke("attr", "type").should("not.eq", type);
    cy.get("@badge").invoke("attr", "size").should("not.eq", size);

    cy.get("@badge")
      .find("div")
      .should("not.have.class", type)
      .and("not.have.css", "background-color", "rgb(209, 250, 236)")
      .and("not.have.class", size)
      .and("not.have.css", "height", "26px");
  });
});