import { render, screen } from "@solidjs/testing-library";
import { describe, expect, it } from "vitest";
import { Meter } from "../../../src/components/meter/index";

describe("Meter", () => {
  it("has role=meter", () => {
    render(() => <Meter value={50} />);
    expect(screen.getByRole("meter")).toBeTruthy();
  });
  it("sets aria-valuenow", () => {
    render(() => <Meter value={75} />);
    expect(screen.getByRole("meter").getAttribute("aria-valuenow")).toBe("75");
  });
  it("sets min and max", () => {
    render(() => <Meter value={5} min={0} max={10} />);
    const el = screen.getByRole("meter");
    expect(el.getAttribute("aria-valuemin")).toBe("0");
    expect(el.getAttribute("aria-valuemax")).toBe("10");
  });
  it("uses custom getValueLabel", () => {
    render(() => <Meter value={75} getValueLabel={(v, m) => `${v}/${m}`} />);
    expect(screen.getByRole("meter").getAttribute("aria-valuetext")).toBe("75/100");
  });
  it("has data-value", () => {
    render(() => <Meter value={50} data-testid="m" />);
    expect(screen.getByTestId("m").getAttribute("data-value")).toBe("50");
  });
});