import {
  describe,
  expect,
  getFormValues,
  it,
  render,
  select,
  user,
} from "../../utils/Test";

describe("uwc-input[type=textarea]", () => {
  // currently user-event sets the textContent of [contentEditable] elements
  // which leads to the text never including line breaks since \n
  // isn't converted to <br> elements when setting textContent
  it.skip("should be possible to enter line breaks", async () => {
    const page = render(<uwc-input type="textarea"></uwc-input>);
    const input = select(page, "uwc-input");

    await user.type(input, "foo{Enter}bar");

    expect(input.value).to.eq("foo\nbar");
  });

  it("should have validity.tooLong if value is too long for [maxlength]", () => {
    const page = render(
      <uwc-input type="textarea" maxlength={3} value="fooo"></uwc-input>,
    );

    const input = select(page, "uwc-input");
    expect(input.validity.tooLong).to.eq(true);
    input.value = "foo";
    expect(input.validity.tooLong).to.eq(false);
  });

  it("should have validity.tooShort if value is too short for [minlength]", () => {
    const page = render(
      <uwc-input type="textarea" minlength={3} value="fo"></uwc-input>,
    );

    const input = select(page, "uwc-input");
    expect(input.validity.tooShort).to.eq(true);
    input.value = "foo";
    expect(input.validity.tooShort).to.eq(false);
  });

  it("should be possible to .clear() it", () => {
    const page = render(
      <form>
        <uwc-input name="foo" type="textarea" value="foo"></uwc-input>
      </form>,
    );

    const form = select(page, "form");
    const input = select(page, "uwc-input");

    expect(getFormValues(form)).to.deep.eq({ foo: "foo" });

    input.clear();

    expect(getFormValues(form)).to.deep.eq({ foo: "" });
  });
});