import { useState } from "react";
import { expect, test } from "vitest";
import { screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { renderApp } from "../test/render";
import { useDebouncedValue } from "./use-debounced-value";

function Harness() {
  const [text, setText] = useState("");
  const debounced = useDebouncedValue(text, 150);
  return (
    <div>
      <input aria-label="in" value={text} onChange={(e) => setText(e.target.value)} />
      <span data-testid="out">{debounced}</span>
    </div>
  );
}

test("reflects the value after the delay", async () => {
  renderApp(<Harness />);
  await userEvent.type(screen.getByLabelText("in"), "bronze");
  await screen.findByText("bronze");
  expect(screen.getByTestId("out")).toHaveTextContent("bronze");
});