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

import { describe, it, expect, vi } from "vitest";
import { render, screen, fireEvent } from "@testing-library/react";
import { ServiceTestPanel } from "../ServiceTestPanel";
import type { ServiceTestResult } from "../../types";

function noop() {}

describe("ServiceTestPanel", () => {
	it("renders the Test credentials button", () => {
		render(
			<ServiceTestPanel
				result={null}
				isPending={false}
				saveAnyway={false}
				onTest={noop}
				onSaveAnywayChange={noop}
			/>,
		);
		expect(screen.getByText("Test credentials")).toBeTruthy();
	});

	it("shows Testing… and disables button while pending", () => {
		render(
			<ServiceTestPanel
				result={null}
				isPending={true}
				saveAnyway={false}
				onTest={noop}
				onSaveAnywayChange={noop}
			/>,
		);
		expect(screen.getByText("Testing…")).toBeTruthy();
		expect(screen.getByText("Testing…")).toBeDisabled();
	});

	it("renders green ✓ Connected pill with evidence on success", () => {
		const result: ServiceTestResult = {
			ok: true,
			detail: "ok",
			evidence: "v4.5.0",
		};
		render(
			<ServiceTestPanel
				result={result}
				isPending={false}
				saveAnyway={false}
				onTest={noop}
				onSaveAnywayChange={noop}
			/>,
		);
		expect(screen.getByText(/✓ Connected — v4.5.0/)).toBeTruthy();
	});

	it("renders red ✗ pill with detail on failure", () => {
		const result: ServiceTestResult = {
			ok: false,
			detail: "Authentication failed",
			evidence: null,
		};
		render(
			<ServiceTestPanel
				result={result}
				isPending={false}
				saveAnyway={false}
				onTest={noop}
				onSaveAnywayChange={noop}
			/>,
		);
		expect(screen.getByText(/✗ Authentication failed/)).toBeTruthy();
	});

	it("fires onTest when Test credentials is clicked", () => {
		const onTest = vi.fn();
		render(
			<ServiceTestPanel
				result={null}
				isPending={false}
				saveAnyway={false}
				onTest={onTest}
				onSaveAnywayChange={noop}
			/>,
		);
		fireEvent.click(screen.getByText("Test credentials"));
		expect(onTest).toHaveBeenCalledOnce();
	});

	it("fires onSaveAnywayChange when checkbox is toggled", () => {
		const onSaveAnywayChange = vi.fn();
		render(
			<ServiceTestPanel
				result={null}
				isPending={false}
				saveAnyway={false}
				onTest={noop}
				onSaveAnywayChange={onSaveAnywayChange}
			/>,
		);
		const checkbox = screen.getByRole("checkbox");
		fireEvent.click(checkbox);
		expect(onSaveAnywayChange).toHaveBeenCalledWith(true);
	});

	it("renders the Save anyway checkbox", () => {
		render(
			<ServiceTestPanel
				result={null}
				isPending={false}
				saveAnyway={false}
				onTest={noop}
				onSaveAnywayChange={noop}
			/>,
		);
		expect(screen.getByRole("checkbox")).toBeTruthy();
	});
});