import { describe, expect, it } from "vitest";
import { render } from "svelte/server";
import NotificationItem from "#lib/components/notifications/NotificationItem.svelte";
import { notifications } from "#lib/components/notifications/mock.ts";
import type { NotificationSummary } from "#lib/components/notifications/types.ts";

const rowOf = (type: NotificationSummary["type"]): NotificationSummary => {
	const found = notifications.find((notification) => notification.type === type);
	if (!found) throw new Error(`no ${type} fixture to render`);
	return found;
};

const markup = (notification: NotificationSummary): string =>
	render(NotificationItem, { props: { notification, onToggleRead: () => {} } }).body;

const insideTheLink = (html: string): string => {
	const open = html.indexOf("<a ");
	const close = html.indexOf("</a>", open);
	if (open < 0 || close < 0) throw new Error("the row rendered no link");
	return html.slice(open, close);
};

describe("a notification row", () => {
	it("no control sits inside the link, since anchors can't wrap buttons", () => {
		const html = markup(rowOf("pull_merged"));

		expect(insideTheLink(html)).not.toContain("<button");
		expect(html.split("<a ")).toHaveLength(2);
	});

	it("one link stretches across the row instead of wrapping it", () => {
		expect(insideTheLink(markup(rowOf("user_mentioned")))).toContain("after:inset-0");
	});

	it("keeps just its read toggle", () => {
		expect(markup(rowOf("pull_merged")).split("<button")).toHaveLength(2);
	});
});