// Mockup https://www.figma.com/design/zsq2ahat30acTnumyy9aqC/00.Small-System?node-id=1245-36831&m=dev
/*
 * <tems-division type="display-1">
 *   <div class="display-1"><slot>Some Text</slot></div>
 * </tems-division>
 */
import { html } from "lit";

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

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

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

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

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

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

  const defaultText = "I'm a division";

  it("should display as body-m by default", () => {
    cy.mount(html`<tems-division>${defaultText}</tems-division>`);

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

    cy.get("@division").invoke("attr", "type").should("eq", "body-m");

    cy.get("@division")
      .find("p")
      .should("have.class", "body-m")
      .and("have.css", "display", "flex")
      .and("have.css", "justify-content", "center")
      .and("have.css", "gap", "8px")
      .and("have.css", "padding", "0px 8px");
  });

  const titles = [
    { name: "h1", size: "32px" },
    { name: "h2", size: "28px" },
    { name: "h3", size: "24px" },
    { name: "h4", size: "20px" },
    { name: "display-1", size: "64px", tagName: "div" },
    { name: "display-2", size: "46px", tagName: "div" },
    { name: "display-3", size: "32px", tagName: "div" },
    { name: "display-4", size: "22px", tagName: "div" },
    { name: "body-sm", size: "14px", tagName: "p" },
    { name: "body-m", size: "16px", tagName: "p" },
    { name: "body-l", size: "18px", tagName: "p" },
  ];

  for (const el of titles) {
    it(`should display ${el.tagName ? `<${el.tagName}> named ${el.name}` : `<${el.name}>`} of size ${el.size}`, () => {
      cy.mount(
        html`<tems-division type="${el.name}">${defaultText}</tems-division>`,
      );

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

      cy.get("@division").invoke("attr", "type").should("eq", el.name);

      cy.get("@division")
        .find(el.tagName || el.name)
        .and("have.css", "font-size", el.size);
    });
  }
});