/js/tabitem/TabItem.test.ts

import { test, describe, afterEach, expect, vi } from "vitest";
import { cleanup, render, waitFor } from "@self/tootils/render";

import TabItemHarness from "./TabItemHarness.svelte";

describe("TabItem", () => {
	afterEach(() => cleanup());

	test("renders its slot content inside a tabpanel", async () => {
		const { getByRole, getByTestId } = await render(TabItemHarness, {
			tab_selected: "t1"
		});

		expect(getByRole("tabpanel", { hidden: true })).toBeInTheDocument();
		expect(getByTestId("tab-content")).toHaveTextContent("tab panel content");
	});

	test("content is visible when this tab is the selected tab", async () => {
		const { getByTestId } = await render(TabItemHarness, {
			tab_selected: "t1"
		});

		expect(getByTestId("tab-content")).toBeVisible();
	});

	test("content is hidden when a different tab is selected", async () => {
		const { getByTestId } = await render(TabItemHarness, {
			tab_selected: "t2"
		});

		expect(getByTestId("tab-content")).not.toBeVisible();
	});

	test("content stays hidden when visible is false even if selected", async () => {
		const { getByTestId } = await render(TabItemHarness, {
			tab_selected: "t1",
			tab_visible: false
		});

		expect(getByTestId("tab-content")).not.toBeVisible();
	});

	test("uses a stable internal id when no explicit id is provided", async () => {
		const on_register = vi.fn();
		const { getByTestId } = await render(TabItemHarness, {
			omit_id: true,
			tab_selected: 1,
			on_register
		});

		expect(getByTestId("tab-content")).toBeVisible();
		await waitFor(() => {
			expect(on_register).toHaveBeenCalledWith(
				expect.objectContaining({ id: 1 })
			);
		});
	});

	test("keeps 0 as an explicit id", async () => {
		const on_register = vi.fn();
		const { getByTestId } = await render(TabItemHarness, {
			tab_id: 0,
			tab_selected: 0,
			on_register
		});

		expect(getByTestId("tab-content")).toBeVisible();
		await waitFor(() => {
			expect(on_register).toHaveBeenCalledWith(
				expect.objectContaining({ id: 0 })
			);
		});
	});

	test("keeps an empty string as an explicit id", async () => {
		const on_register = vi.fn();
		const { getByTestId } = await render(TabItemHarness, {
			tab_id: "",
			tab_selected: "",
			on_register
		});

		expect(getByTestId("tab-content")).toBeVisible();
		await waitFor(() => {
			expect(on_register).toHaveBeenCalledWith(
				expect.objectContaining({ id: "" })
			);
		});
	});
});

describe("Events: select", () => {
	afterEach(() => cleanup());

	test("fires when this tab is the active index on mount", async () => {
		const on_tab_select = vi.fn();

		await render(TabItemHarness, {
			tab_selected: "t1",
			tab_selected_index: 0,
			on_tab_select
		});

		await waitFor(() => {
			expect(on_tab_select).toHaveBeenCalledWith({
				value: "First Tab",
				index: 0
			});
		});
	});

	test("does not fire when this tab is not the active index", async () => {
		const on_tab_select = vi.fn();

		await render(TabItemHarness, {
			tab_selected: "t2",
			tab_selected_index: 1,
			on_tab_select
		});

		expect(on_tab_select).not.toHaveBeenCalled();
	});
});