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

describe("Breadcrumbs", () => {
	it("has role=navigation", () => {
		render(() => (
			<Breadcrumbs>
				<Breadcrumbs.Item>
					<Breadcrumbs.Link href="/">Home</Breadcrumbs.Link>
				</Breadcrumbs.Item>
				<Breadcrumbs.Separator>/</Breadcrumbs.Separator>
				<Breadcrumbs.Item>Current</Breadcrumbs.Item>
			</Breadcrumbs>
		));
		expect(screen.getByRole("navigation")).toBeTruthy();
	});
	it("has aria-label", () => {
		render(() => (
			<Breadcrumbs>
				<Breadcrumbs.Item>Home</Breadcrumbs.Item>
			</Breadcrumbs>
		));
		expect(screen.getByRole("navigation").getAttribute("aria-label")).toBe("Breadcrumbs");
	});
	it("renders as ol > li", () => {
		render(() => (
			<Breadcrumbs>
				<Breadcrumbs.Item>Home</Breadcrumbs.Item>
				<Breadcrumbs.Item>Page</Breadcrumbs.Item>
			</Breadcrumbs>
		));
		expect(screen.getByRole("navigation").querySelector("ol")).toBeTruthy();
		expect(screen.getByRole("navigation").querySelectorAll("li")).toHaveLength(2);
	});
	it("link renders as anchor", () => {
		render(() => (
			<Breadcrumbs>
				<Breadcrumbs.Item>
					<Breadcrumbs.Link href="/home">Home</Breadcrumbs.Link>
				</Breadcrumbs.Item>
			</Breadcrumbs>
		));
		expect(screen.getByRole("link")).toBeTruthy();
		expect(screen.getByRole("link").getAttribute("href")).toBe("/home");
	});
	it("current item has aria-current=page", () => {
		render(() => (
			<Breadcrumbs>
				<Breadcrumbs.Item>
					<Breadcrumbs.Link href="/">Home</Breadcrumbs.Link>
				</Breadcrumbs.Item>
				<Breadcrumbs.Item current>Current</Breadcrumbs.Item>
			</Breadcrumbs>
		));
		const items = screen.getByRole("navigation").querySelectorAll("li");
		expect(items[1].getAttribute("aria-current")).toBe("page");
	});
});