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

describe("<tems-defined-field>", () => {
  it("should mount", () => {
    cy.mount(html`<tems-defined-field></tems-defined-field>`);
    cy.get("tems-defined-field").should("exist");
  });

  const defaultPlaceholder = "Placeholder";
  const typedText = "User{enter}";
  const expectedValue = "User";

  it("should display placeholder", () => {
    cy.mount(
      html`<tems-defined-field
        label=${defaultPlaceholder}
      ></tems-defined-field>`,
    );
    cy.get("tems-defined-field")
      .find("input")
      .should("have.attr", "placeholder", defaultPlaceholder);
  });

  it("should display value", () => {
    cy.mount(
      html`<tems-defined-field .value=${expectedValue}></tems-defined-field>`,
    );
    cy.get("tems-defined-field")
      .find("input")
      .should("have.value", expectedValue);
  });

  it("should be disabled", () => {
    cy.mount(html`<tems-defined-field disabled></tems-defined-field>`);
    cy.get("tems-defined-field").find("input").should("be.disabled");
  });

  it("should allow typing", () => {
    cy.mount(html`<tems-defined-field></tems-defined-field>`);
    cy.get("tems-defined-field").find("input").type(typedText);
    cy.get("tems-defined-field")
      .find("input")
      .should("have.value", expectedValue);
  });

  it("should reflect typed text to its value", () => {
    cy.mount(html`<tems-defined-field></tems-defined-field>`);

    cy.get("tems-defined-field").find("input").type(typedText);
    cy.get("tems-defined-field").should("have.value", expectedValue);
  });

  it("should display pretab label", () => {
    cy.mount(
      html`<tems-defined-field .pretabLabel=${"www."}></tems-defined-field>`,
    );
    cy.get("tems-defined-field").find("tems-input-pretab").contains("www.");
  });

  it("should display posttab icon", () => {
    cy.mount(
      html`<tems-defined-field
        .posttabIcon=${html`<span class="custom-icon">Icon</span>`}
      ></tems-defined-field>`,
    );
    cy.get("tems-defined-field")
      .find("tems-input-posttab")
      .find(".custom-icon")
      .should("exist");
  });

  it("should display pretab icon", () => {
    cy.mount(
      html`<tems-defined-field
        .pretabIcon=${html`<span class="custom-icon">Icon</span>`}
      ></tems-defined-field>`,
    );
    cy.get("tems-defined-field")
      .find("tems-input-pretab")
      .find(".custom-icon")
      .should("exist");
  });

  it("should display status error", () => {
    cy.mount(html`<tems-defined-field status="false"></tems-defined-field>`);
    cy.get("tems-defined-field").find("input:invalid").should("exist");
  });

  it("should display status success", () => {
    cy.mount(html`<tems-defined-field status="true"></tems-defined-field>`);
    cy.get("tems-defined-field").find("input:valid").should("exist");
  });

  const validationError = "Custom error message";

  it("should display status custom message", () => {
    cy.mount(
      html`<tems-defined-field status=${validationError}></tems-defined-field>`,
    );
    cy.get("tems-defined-field").find("input").as("invalidInput");

    cy.get("@invalidInput")
      .invoke("prop", "validationMessage")
      .should("eq", validationError);
    cy.get("@invalidInput")
      .invoke("prop", "validity")
      .should("deep.include", { customError: true, valid: false });
  });
});