// @vitest-environment jsdom
import { describe, it, expect, afterEach, vi } from "vitest";
import { render, screen, cleanup } from "@testing-library/react";
import { Info } from "lucide-react";

vi.mock("react-i18next", () => ({ useTranslation: () => ({ t: (k: string) => k }) }));

import Banner from "./Banner";

afterEach(cleanup);

// The dismiss button is an icon, so its name is all a screen reader gets. A caller that forgets
// `dismissTitle` must still ship a NAMED control — the generic "Close" — never an unnamed one.
describe("Banner · the dismiss button's name", () => {
  it("falls back to the generic Close, and takes the caller's name when given", () => {
    render(
      <Banner tone="accent" icon={Info} onDismiss={() => {}}>
        News
      </Banner>,
    );
    expect(screen.getByRole("button", { name: "common.close" })).toBeTruthy();
    cleanup();

    render(
      <Banner tone="accent" icon={Info} onDismiss={() => {}} dismissTitle="Hide the notes">
        News
      </Banner>,
    );
    expect(screen.getByRole("button", { name: "Hide the notes" })).toBeTruthy();
  });
});