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

describe("uwc-input", () => {
  it("should have class .touched once focussed", async () => {
    const page = render(<uwc-input></uwc-input>);
    const input = select(page, "uwc-input");
    await user.click(input);

    expect(input).to.have.class("touched");
  });

  it("should have class .changed once changed", async () => {
    const page = render(<uwc-input></uwc-input>);
    const input = select(page, "uwc-input");
    await user.type(input, "foo");

    expect(input).to.have.class("changed");
  });

  it("should not have class .changed when value is changed back to initial", async () => {
    const page = render(<uwc-input></uwc-input>);
    const input = select(page, "uwc-input");
    await user.type(input, "foo");
    await user.type(input, "{Backspace}{Backspace}{Backspace}");

    expect(input).to.not.have.class("changed");
  });

  it("should have class .pristine when reset", async () => {
    const page = render(
      <form>
        <uwc-input name="foo"></uwc-input>
        <button type="reset"></button>
      </form>,
    );
    const input = select(page, "uwc-input");
    await user.type(input, "foo");
    await user.click(select(page, "button"));

    expect(input).to.include({
      className: "pristine",
    });
  });

  it.todo("should be possible to show the dialog with `.showPicker()`");

  describe("a11y", () => {
    it("should have [aria-disabled] when [disabled]", () => {
      const page = render(<uwc-input disabled></uwc-input>);
      const input = queryByRole(page, "textbox");

      expect(input).to.have.attribute("aria-disabled", "true");
    });

    it("should have [aria-readonly] when [readonly]", () => {
      const page = render(<uwc-input readonly></uwc-input>);
      const input = queryByRole(page, "textbox");

      expect(input).to.have.attribute("aria-readonly", "true");
    });
  });
});