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

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

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

  const defaultText = "Label";

  it("should accept label attribute", () => {
    cy.mount(html`<tems-label label=${defaultText}></tems-label>`);

    cy.get("tems-label").contains(defaultText);
  });

  it("should accept slotted element", () => {
    cy.mount(html`<tems-label><span>${defaultText}</span></tems-label>`);

    cy.get("tems-label").find("span").contains(defaultText);
  });

  it("should handle info attribute", () => {
    const info = "Some informations about this field";
    cy.mount(html`<tems-label info=${info}>${defaultText}</tems-label>`);

    cy.get("tems-label").find(`span[title="${info}"]`).should("exist");
  });

  it("should not display (?) when no info attribute provided", () => {
    cy.mount(html`<tems-label>${defaultText}</tems-label>`);

    cy.get("tems-label").find("span[title]").should("not.exist");
  });

  it("can be required", () => {
    cy.mount(html`<tems-label required="">${defaultText}</tems-label>`);

    cy.get("tems-label").find("span").first().contains("*");
  });

  it("can be optional", () => {
    cy.mount(html`<tems-label optional="true">${defaultText}</tems-label>`);

    cy.get("tems-label").find("span").last().contains("(optional)");
  });
});