manage/frontend/src/components/__tests__/PinnedServiceLink.test.tsx

import { describe, it, expect } from "vitest";
import { render, screen } from "@testing-library/react";
import { MemoryRouter, Routes, Route } from "react-router-dom";
import userEvent from "@testing-library/user-event";
import { PinnedServiceLink } from "../PinnedServiceLink";

function renderLink() {
	return render(
		<MemoryRouter initialEntries={["/"]}>
			<Routes>
				<Route
					path="/"
					element={
						<PinnedServiceLink
							label="My Jellyfin"
							target="/services/jellyfin/svc-1"
						/>
					}
				/>
				<Route
					path="/services/jellyfin/svc-1"
					element={<div>target page</div>}
				/>
			</Routes>
		</MemoryRouter>,
	);
}

describe("PinnedServiceLink", () => {
	it("renders the label", () => {
		renderLink();
		expect(screen.getByText("My Jellyfin")).toBeInTheDocument();
	});

	it("navigates to the target on click", async () => {
		const user = userEvent.setup();
		renderLink();
		await user.click(screen.getByText("My Jellyfin"));
		expect(screen.getByText("target page")).toBeInTheDocument();
	});
});