kandev/apps/web/components/settings/plugins/plugin-row.test.tsx

import { afterEach, describe, expect, it, vi } from "vitest";
import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
import { PluginRow } from "./plugin-row";
import type { MarketplaceEntry, PluginRecord } from "@/lib/types/plugins";

afterEach(() => cleanup());

function plugin(overrides: Partial<PluginRecord> = {}): PluginRecord {
  return {
    id: "acme",
    api_version: 1,
    version: "1.0.0",
    display_name: "Acme",
    description: "",
    author: "acme",
    categories: [],
    capabilities: {},
    status: "active",
    install_path: "/p",
    signed: true,
    installed_at: "2026-01-01T00:00:00Z",
    restart_count: 0,
    ...overrides,
  };
}

function updateEntry(): MarketplaceEntry {
  return {
    id: "acme",
    name: "Acme",
    description: "",
    author: "acme",
    categories: [],
    icon_url: "",
    repo_url: "",
    version: "2.0.0",
    min_kandev_version: "",
    package_url: "https://ex/acme-2.0.0.tar.gz",
    package_sha256: "",
    stars: 0,
    updated_at: "",
    install_state: "update_available",
    source_id: "official",
    source_name: "Kandev Official",
  };
}

const noop = () => undefined;

// baseProps carries the always-required callbacks/flags so each test only
// spells out the props it is actually asserting on.
const baseProps = {
  busy: false,
  autoUpdateDefault: false,
  autoUpdateBusy: false,
  onEnable: noop,
  onDisable: noop,
  onSetAutoUpdate: noop,
};

/** Test ids reused across these cases. */
const REPO_LINK_TESTID = "plugin-repo-link";
const AUTO_UPDATE_TESTID = "plugin-auto-update-acme";

/** The class that lifts a control above the card's overlay link. */
const ABOVE_OVERLAY = "z-10";

describe("PluginRow settings link", () => {
  it("covers the whole card with a named link to the plugin's settings page", () => {
    render(<PluginRow {...baseProps} plugin={plugin()} />);
    const link = screen.getByTestId("plugin-row-link-acme");
    expect(link.getAttribute("href")).toBe("/settings/plugins/acme");
    // The link carries no text of its own, so the accessible name has to come
    // from the label — without it the card is an unnamed link.
    expect(link.getAttribute("aria-label")).toBe("Open settings for Acme");
    expect(link.className).toContain("absolute");
    expect(link.className).toContain("inset-0");
  });

  it("percent-encodes a plugin id that is not URL-safe", () => {
    render(<PluginRow {...baseProps} plugin={plugin({ id: "acme/one" })} />);
    expect(screen.getByTestId("plugin-row-link-acme/one").getAttribute("href")).toBe(
      "/settings/plugins/acme%2Fone",
    );
  });

  it("keeps the row's own controls above the overlay link", () => {
    render(
      <PluginRow
        {...baseProps}
        plugin={plugin({ repo_url: "https://github.com/kdlbs/kandev-plugin-acme" })}
      />,
    );
    // Anything interactive must sit at z-10; under the overlay it is unclickable.
    expect(screen.getByTestId(REPO_LINK_TESTID).className).toContain(ABOVE_OVERLAY);
    expect(screen.getByRole("button", { name: "Disable" }).parentElement?.className).toContain(
      ABOVE_OVERLAY,
    );
    expect(screen.getByTestId(AUTO_UPDATE_TESTID).parentElement?.className).toContain(
      ABOVE_OVERLAY,
    );
  });
});

describe("PluginRow setup-required badge", () => {
  it("flags a plugin whose required settings are unset", () => {
    render(<PluginRow {...baseProps} plugin={plugin()} needsSetup />);
    expect(screen.getByTestId("plugin-setup-required-acme").textContent).toBe("Setup required");
  });

  it("renders no badge when the plugin needs no setup", () => {
    render(<PluginRow {...baseProps} plugin={plugin()} />);
    expect(screen.queryByTestId("plugin-setup-required-acme")).toBeNull();
  });
});

describe("PluginRow update button", () => {
  it("shows an Update button with the new version and fires onUpdate", () => {
    const onUpdate = vi.fn();
    render(
      <PluginRow {...baseProps} plugin={plugin()} update={updateEntry()} onUpdate={onUpdate} />,
    );
    const button = screen.getByTestId("plugin-update-acme");
    expect(button.textContent).toContain("Update to v2.0.0");
    fireEvent.click(button);
    expect(onUpdate).toHaveBeenCalledWith(updateEntry());
  });

  it("renders no Update button when there is no pending update", () => {
    render(<PluginRow {...baseProps} plugin={plugin()} />);
    expect(screen.queryByTestId("plugin-update-acme")).toBeNull();
  });
});

describe("PluginRow repo link", () => {
  it("renders a Repo link when the plugin declares an http(s) repo_url", () => {
    render(
      <PluginRow
        {...baseProps}
        plugin={plugin({ repo_url: "https://github.com/kdlbs/kandev-plugin-acme" })}
      />,
    );
    const link = screen.getByTestId(REPO_LINK_TESTID);
    expect(link.getAttribute("href")).toBe("https://github.com/kdlbs/kandev-plugin-acme");
  });

  it("renders no Repo link when the plugin declares no repo_url", () => {
    render(<PluginRow {...baseProps} plugin={plugin()} />);
    expect(screen.queryByTestId(REPO_LINK_TESTID)).toBeNull();
  });

  it("renders no Repo link for a non-http(s) repo_url scheme", () => {
    render(
      <PluginRow
        {...baseProps}
        plugin={plugin({ repo_url: "javascript:alert(document.cookie)" })}
      />,
    );
    expect(screen.queryByTestId(REPO_LINK_TESTID)).toBeNull();
  });
});

describe("PluginRow error recovery", () => {
  it("shows the failure diagnostic and an Enable action for errored plugins", () => {
    const onEnable = vi.fn();
    const p = plugin({
      status: "error",
      last_error: "plugins/runtime: handshake failed",
      last_error_at: "2026-08-02T12:34:56Z",
    });
    render(<PluginRow {...baseProps} plugin={p} onEnable={onEnable} />);

    expect(screen.getByRole("alert").textContent).toContain("plugins/runtime: handshake failed");
    const enable = screen.getByRole("button", { name: "Enable" });
    fireEvent.click(enable);
    expect(onEnable).toHaveBeenCalledWith(p);
  });
});

describe("PluginRow auto-update toggle", () => {
  it("reflects the global default when the plugin has no override", () => {
    render(<PluginRow {...baseProps} plugin={plugin({ auto_update: null })} autoUpdateDefault />);
    const toggle = screen.getByTestId(AUTO_UPDATE_TESTID);
    expect(toggle.getAttribute("aria-checked")).toBe("true");
    // No override → no "override" badge and no Reset affordance.
    expect(screen.queryByTestId("plugin-auto-update-reset-acme")).toBeNull();
  });

  it("prefers the per-plugin override over the global default", () => {
    render(<PluginRow {...baseProps} plugin={plugin({ auto_update: false })} autoUpdateDefault />);
    const toggle = screen.getByTestId(AUTO_UPDATE_TESTID);
    expect(toggle.getAttribute("aria-checked")).toBe("false");
    expect(screen.getByTestId("plugin-auto-update-reset-acme")).toBeTruthy();
  });

  it("sets an explicit override when toggled", () => {
    const onSetAutoUpdate = vi.fn();
    const p = plugin({ auto_update: null });
    render(
      <PluginRow
        {...baseProps}
        plugin={p}
        autoUpdateDefault={false}
        onSetAutoUpdate={onSetAutoUpdate}
      />,
    );
    fireEvent.click(screen.getByTestId(AUTO_UPDATE_TESTID));
    expect(onSetAutoUpdate).toHaveBeenCalledWith(p, true);
  });

  it("clears the override via Reset", () => {
    const onSetAutoUpdate = vi.fn();
    const p = plugin({ auto_update: true });
    render(<PluginRow {...baseProps} plugin={p} onSetAutoUpdate={onSetAutoUpdate} />);
    fireEvent.click(screen.getByTestId("plugin-auto-update-reset-acme"));
    expect(onSetAutoUpdate).toHaveBeenCalledWith(p, null);
  });
});

describe("PluginRow uninstall confirmation", () => {
  const pluginName = "Acme Tools";

  it("anchors fine-pointer confirmation to the row action and names the target", () => {
    const p = plugin({ display_name: pluginName });
    const onConfirmUninstall = vi.fn();

    render(
      <PluginRow {...baseProps} plugin={p} isFinePointer onConfirmUninstall={onConfirmUninstall} />,
    );

    fireEvent.click(screen.getByRole("button", { name: /^Uninstall$/i }));

    expect(screen.getByTestId("plugin-uninstall-confirm-popover").textContent).toContain(
      pluginName,
    );
    expect(document.querySelector('[data-slot="dialog-overlay"]')).toBeNull();

    fireEvent.click(screen.getByRole("button", { name: /^Cancel$/i }));
    expect(screen.queryByTestId("plugin-uninstall-confirm-popover")).toBeNull();
  });

  it("uses inline touch actions on coarse pointers and passes the row target on confirm", async () => {
    const p = plugin({ display_name: pluginName });
    const onConfirmUninstall = vi.fn();

    render(
      <PluginRow
        {...baseProps}
        plugin={p}
        isFinePointer={false}
        onConfirmUninstall={onConfirmUninstall}
      />,
    );

    fireEvent.click(screen.getByRole("button", { name: /^Uninstall$/i }));

    const confirmation = screen.getByTestId("plugin-uninstall-inline-confirmation");
    expect(confirmation.textContent).toContain(pluginName);
    expect(screen.queryByRole("button", { name: /^Uninstall$/i })).toBeNull();
    expect(screen.getByTestId("plugin-uninstall-confirm").className).toContain("h-11");
    expect(screen.getByTestId("plugin-uninstall-confirm").className).toContain("min-w-11");

    fireEvent.click(screen.getByTestId("plugin-uninstall-confirm"));
    await waitFor(() => expect(onConfirmUninstall).toHaveBeenCalledWith(p));
  });
});