import { describe, expect, it } from "vitest";
import { render } from "svelte/server";
import Avatar from "#lib/components/ui/Avatar.svelte";

const markup = (props: { avatarCid?: string | null }): string =>
	render(Avatar, { props: { did: "did:plc:alice", handle: "alice.test", ...props } }).body;

describe("an avatar", () => {
	it("requests the image when it is not known whether there is one", () => {
		expect(markup({})).toContain("<img");
	});

	it("requests the image of an account that has one", () => {
		expect(
			markup({ avatarCid: "bafkreigh2akiscaildc7gnvtklbsfhdgwz72eolmpckbqr5ej26byp3uli" })
		).toContain("<img");
	});

	it("still requests the image of an account without one and keeps the gradient", () => {
		const html = markup({ avatarCid: null });

		expect(html).toContain("<img");
		expect(html).toContain("linear-gradient");
	});
});