import { HTMLInputTypeAttribute } from "./text-input-field.js";
import "../../node_modules/vitest-browser-lit/dist/index.js";
import { html } from "lit";
import { describe, beforeEach, it } from "../../node_modules/@vitest/runner/dist/index.js";
import { render as render$1 } from "../../node_modules/vitest-browser-lit/dist/pure-D9bcvh0k.js";
import { g as globalExpect, v as vi } from "../../node_modules/vitest/dist/chunks/test.CTcmp4Su.js";
describe("obc-text-input-field", () => {
  let el;
  let input;
  beforeEach(async () => {
    const screen = render$1(
      html`<obc-text-input-field value="hello"></obc-text-input-field>`
    );
    el = screen.baseElement.querySelector(
      "obc-text-input-field"
    );
    await el.updateComplete;
    if (!el.shadowRoot) {
      console.error("Shadow root not found", el);
      throw new Error("Shadow root not found");
    }
    input = el.shadowRoot.querySelector(".value-input");
    if (!input) {
      console.error("Input not found", el.shadowRoot);
      throw new Error("Input not found");
    }
  });
  describe("rejectUpdates", () => {
    beforeEach(async () => {
      el.rejectUpdates = true;
      await el.updateComplete;
    });
    it("keeps user-typed value when property is set back to previous", async () => {
      el.value = "hello world";
      await el.updateComplete;
      globalExpect(input.value).toBe("hello");
    });
  });
  describe("rejectUpdatesOnFocus", () => {
    beforeEach(async () => {
      el.rejectUpdatesOnFocus = true;
      await el.updateComplete;
    });
    it("keeps user-typed value when property is set back to previous value while focused", async () => {
      input.focus();
      input.value = "hello world";
      input.dispatchEvent(new InputEvent("input", { bubbles: true }));
      await el.updateComplete;
      el.value = "hello";
      await el.updateComplete;
      globalExpect(input.value).toBe("hello world");
    });
  });
  describe("rejectDuplicateUpdates", () => {
    beforeEach(async () => {
      el.rejectDuplicateUpdates = true;
      await el.updateComplete;
    });
    it("keeps user-typed value when property is set back to previous value while focused", async () => {
      input.focus();
      input.value = "hello world";
      input.dispatchEvent(new InputEvent("input", { bubbles: true }));
      await el.updateComplete;
      globalExpect(input.value).toBe("hello world");
      el.value = "hello";
      await el.updateComplete;
      globalExpect(input.value).toBe("hello world");
      globalExpect(el.value).toBe("hello world");
    });
    it("updates the value when the property is set to a new value", async () => {
      input.focus();
      input.value = "hello world";
      input.dispatchEvent(new InputEvent("input", { bubbles: true }));
      await el.updateComplete;
      globalExpect(el.value).toBe("hello world");
      el.value = "hello there";
      await el.updateComplete;
      globalExpect(input.value).toBe("hello there");
      globalExpect(el.value).toBe("hello there");
    });
  });
  describe("input handling", () => {
    it("updates el.value when user types in the input", async () => {
      input.value = "hello world";
      input.dispatchEvent(new InputEvent("input", { bubbles: true }));
      await el.updateComplete;
      globalExpect(el.value).toBe("hello world");
    });
    it("dispatches input event when user types", async () => {
      const inputHandler = vi.fn();
      el.addEventListener("input", inputHandler);
      input.value = "hello world";
      input.dispatchEvent(
        new InputEvent("input", { bubbles: true, composed: true })
      );
      await el.updateComplete;
      globalExpect(inputHandler).toHaveBeenCalled();
    });
  });
  describe("event dispatching", () => {
    let clearButton;
    beforeEach(async () => {
      el.hasClearButton = true;
      await el.updateComplete;
      clearButton = el.shadowRoot.querySelector(
        ".trailing-icon-button"
      );
    });
    it("dispatches clear event when clear button is clicked", async () => {
      const clearHandler = vi.fn();
      el.addEventListener("clear", clearHandler);
      clearButton.click();
      await el.updateComplete;
      globalExpect(clearHandler).toHaveBeenCalled();
    });
    it("dispatches input and change events when clear button is clicked", async () => {
      const inputHandler = vi.fn();
      const changeHandler = vi.fn();
      el.addEventListener("input", inputHandler);
      el.addEventListener("change", changeHandler);
      clearButton.click();
      await el.updateComplete;
      globalExpect(inputHandler).toHaveBeenCalled();
      globalExpect(changeHandler).toHaveBeenCalled();
    });
    it("returns focus to input after clear button is clicked", async () => {
      input.focus();
      globalExpect(document.activeElement).toBe(el);
      globalExpect(el.shadowRoot?.activeElement).toBe(input);
      clearButton.click();
      await el.updateComplete;
      globalExpect(el.shadowRoot?.activeElement).toBe(input);
    });
  });
  describe("change event", () => {
    it("dispatches change event when input value changes and blur occurs", async () => {
      const changeHandler = vi.fn();
      el.addEventListener("change", changeHandler);
      input.value = "new value";
      input.dispatchEvent(new InputEvent("input", { bubbles: true }));
      input.dispatchEvent(new Event("change", { bubbles: true }));
      await el.updateComplete;
      globalExpect(changeHandler).toHaveBeenCalled();
    });
  });
  describe("password visibility", () => {
    beforeEach(async () => {
      el.type = HTMLInputTypeAttribute.Password;
      el.value = "secret";
      await el.updateComplete;
    });
    it("shows password toggle button when type is password", async () => {
      const toggleButton = el.shadowRoot.querySelector(
        ".trailing-icon-button"
      );
      globalExpect(toggleButton).toBeTruthy();
    });
    it("toggles input type between password and text when toggle is clicked", async () => {
      const toggleButton = el.shadowRoot.querySelector(
        ".trailing-icon-button"
      );
      globalExpect(input.type).toBe("password");
      toggleButton.click();
      await el.updateComplete;
      globalExpect(input.type).toBe("text");
      toggleButton.click();
      await el.updateComplete;
      globalExpect(input.type).toBe("password");
    });
    it("hides password toggle when disabled", async () => {
      el.disabled = true;
      await el.updateComplete;
      const toggleButton = el.shadowRoot.querySelector(
        ".trailing-icon-button"
      );
      globalExpect(toggleButton).toBeNull();
    });
  });
  describe("clear button", () => {
    let clearButton;
    beforeEach(async () => {
      el.hasClearButton = true;
      await el.updateComplete;
      clearButton = el.shadowRoot.querySelector(
        ".trailing-icon-button"
      );
      if (!clearButton) {
        console.error("Clear button not found", el.shadowRoot);
        throw new Error("Clear button not found");
      }
    });
    it("clears the input value when the clear button is clicked", async () => {
      clearButton.click();
      await el.updateComplete;
      globalExpect(input.value).toBe("");
      globalExpect(el.value).toBe("");
    });
    it("clears when reject updates is true", async () => {
      el.rejectUpdates = true;
      await el.updateComplete;
      clearButton.click();
      await el.updateComplete;
      globalExpect(input.value).toBe("");
      globalExpect(el.value).toBe("");
    });
  });
});
//# sourceMappingURL=text-input-field.spec.js.map
