import "@testing-library/jest-dom/vitest";
import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { useState } from "react";
import { describe, expect, it } from "vitest";

function BookmarkButton() {
  const [isBookmarked, setIsBookmarked] = useState(false);

  return (
    <button type="button" onClick={() => setIsBookmarked(true)}>
      {isBookmarked ? "Hapus bookmark" : "Simpan bookmark"}
    </button>
  );
}

describe("BookmarkButton", () => {
  it("shows the saved label after a user click", async () => {
    const user = userEvent.setup();
    render(<BookmarkButton />);

    await user.click(screen.getByRole("button", { name: "Simpan bookmark" }));

    expect(
      screen.getByRole("button", { name: "Hapus bookmark" }),
    ).toBeInTheDocument();
  });
});