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

describe("Skeleton", () => {
	it("is aria-hidden", () => {
		render(() => <Skeleton data-testid="s" />);
		expect(screen.getByTestId("s").getAttribute("aria-hidden")).toBe("true");
	});
	it("has data-visible by default", () => {
		render(() => <Skeleton data-testid="s" />);
		expect(screen.getByTestId("s")).toHaveAttribute("data-visible");
	});
	it("no data-visible when visible=false", () => {
		render(() => <Skeleton data-testid="s" visible={false} />);
		expect(screen.getByTestId("s")).not.toHaveAttribute("data-visible");
	});
	it("data-circle when circle=true", () => {
		render(() => <Skeleton data-testid="s" circle />);
		expect(screen.getByTestId("s")).toHaveAttribute("data-circle");
	});
	it("applies width and height", () => {
		render(() => <Skeleton data-testid="s" width="100px" height="20px" />);
		const el = screen.getByTestId("s");
		expect(el.style.width).toBe("100px");
		expect(el.style.height).toBe("20px");
	});
});