import { expect, test } from "bun:test";
import { renderToString } from "react-dom/server";
import { CourseCover, ProgressBar, SegmentedToggle } from "../src";

test("ProgressBar exposes aria-valuenow as a percentage", () => {
  const html = renderToString(<ProgressBar value={0.4} label="Course progress" />);
  expect(html).toContain('role="progressbar"');
  expect(html).toContain('aria-valuenow="40"');
});

test("CourseCover without an image shows a two-letter monogram", () => {
  expect(renderToString(<CourseCover title="Pure Snake" />)).toContain(">PS<");
  expect(renderToString(<CourseCover title="Docker" />)).toContain(">DO<");
});

test("SegmentedToggle marks the active option", () => {
  const html = renderToString(<SegmentedToggle label="Look" value="b" onChange={() => {}} options={[{ value: "a", label: "A" }, { value: "b", label: "B" }]} />);
  expect(html).toMatch(/aria-pressed="true"[^>]*>B</);
});