// Mockup https://www.figma.com/design/zsq2ahat30acTnumyy9aqC/00.Small-System?node-id=86-2920&m=dev
/*
 * This component expect a vanilla usage of inputs validity(customError, valid) & validationMessage
 */
import { html } from "lit";

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

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

  it("should render an input type text", () => {
    cy.mount(html`<tems-input-field></tems-input-field>`);

    cy.get("tems-input-field")
      .find("input")
      .should("exist")
      .and("have.attr", "type", "text");
  });

  const defaultValue = "Default value";
  const validationError = "Custom error message";

  it("should accept a status attribute", () => {
    // Info: status default to undefined
    // Info: Expecting usage of pseudo-element for styling errors
    cy.mount(html`<tems-input-field></tems-input-field>`);
    cy.get("tems-input-field").should("not.have.attr", "status");

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

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

  it("should accept a custom error message", () => {
    cy.mount(
      html`<tems-input-field status=${validationError}></tems-input-field>`,
    );
    cy.get("tems-input-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 });
  });

  const fieldName = "fieldName";
  const typedText = "User{enter}";
  const typeSequence = "Uss{backspace}err{backspace}{enter}";
  const expectedText = "User";

  it("should accept a name attribute", () => {
    cy.mount(html`<tems-input-field name=${fieldName}></tems-input-field>`);

    cy.get("tems-input-field")
      .find("input")
      .should("have.attr", "name", fieldName);
  });

  it("should accept a value attribute", () => {
    // Info: value is a dynamic property, we don't want to re-render while the user is typing
    cy.mount(
      html`<tems-input-field .value=${expectedText}></tems-input-field>`,
    );

    cy.get("tems-input-field").find("input").should("have.value", expectedText);
  });

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

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

  it("should emit a debounced change event", () => {
    const onChangeSpy = cy.spy().as("handleChange");
    cy.mount(
      html`<tems-input-field
        name=${fieldName}
        @change=${onChangeSpy}
      ></tems-input-field>`,
    );

    cy.get("tems-input-field").find("input").type(typeSequence);
    // Info: Cypress type with a 10ms between each keystrike

    cy.get("@handleChange").should("have.been.calledOnce");
  });
});