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

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

  const defaultLabel = "Label";
  const defaultPlaceholder = "Placeholder";
  const defaultValue = "Sample text";
  const defaultHint = "Hint copy";
  const typedText = "User{enter}";
  const typeSequence = "Uss{backspace}err{backspace}{enter}";
  const expectedText = "User\n";

  it("should display label", () => {
    cy.mount(html`<tems-textarea label=${defaultLabel}></tems-textarea>`);
    cy.get("tems-textarea").find("tems-label").contains(defaultLabel);
  });

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

  it("should display hint", () => {
    cy.mount(html`<tems-textarea hint=${defaultHint}></tems-textarea>`);
    cy.get("tems-textarea").find(".hint").contains(defaultHint);
  });

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

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

  it("should handle rows attribute", () => {
    cy.mount(html`<tems-textarea rows="5"></tems-textarea>`);
    cy.get("tems-textarea").find("textarea").should("have.attr", "rows", "5");
  });

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

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

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

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

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

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

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

    cy.get("tems-textarea").find("textarea").type(typedText);

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