tftsr-devops_investigation/tests/unit/DeploymentDetail.test.tsx
Shaun Arman 3f4869af01
Some checks failed
PR Review Automation / review (pull_request) Has been cancelled
Test / frontend-typecheck (pull_request) Has been cancelled
Test / rust-clippy (pull_request) Has been cancelled
Test / frontend-tests (pull_request) Has been cancelled
Test / rust-fmt-check (pull_request) Has been cancelled
Test / rust-tests (pull_request) Has been cancelled
feat(kubernetes): implement Lens Desktop v5 feature-parity UI
Complete overhaul of the Kubernetes management page from a basic config
panel into a full Lens-style IDE shell with 26 resource types, real-time
data, and a comprehensive test suite.

Layout & navigation:
- Rewrite KubernetesPage as a Lens v5-style shell: collapsible sidebar
  (Workloads / Services & Networking / Config & Storage / Access Control /
  Cluster), top hotbar with cluster+namespace selectors, Ctrl+K command
  palette
- All 26 resource types now accessible via sidebar navigation (previously 5)

New resource types (Rust + TypeScript + React):
- StorageClasses, NetworkPolicies, ResourceQuotas, LimitRanges
- 4 new Tauri commands registered in generate_handler![]

Component implementations (replacing stubs with real IPC):
- Terminal: full xterm.js with multi-tab sessions and exec_pod IPC
- YamlEditor: Monaco editor with YAML syntax highlighting
- MetricsChart: recharts LineChart/BarChart
- ClusterOverview: live node/pod/deployment/namespace counts
- ClusterDetails: real kubeconfig + node data
- PodDetail, DeploymentDetail, ServiceDetail, ConfigMapDetail, SecretDetail:
  all connected to real IPC data, zero hardcoded values
- CreateResourceModal, EditResourceModal: wired to createResourceCmd /
  editResourceCmd
- RbacViewer: live data from 4 RBAC IPC commands
- RbacEditor: create roles/cluster-roles via YAML editor
- CommandPalette: 12 real navigation commands, keyboard nav

Dependencies added: xterm@5, xterm-addon-fit, xterm-addon-web-links,
@monaco-editor/react@4, recharts@2

Tooling:
- Replace eslint-plugin-react (incompatible with ESLint 10) with
  @eslint-react/eslint-plugin; fix eslint.config.js for flat config
- Fix pre-existing hoisting lint errors in Security.tsx, PortForwardForm.tsx
- Fix eventBus.ts: replace all `any` generics with `unknown`

Tests: 251 passing across 35 test files (was 94/19)
- 16 new test files covering all new and fixed components (TDD)
- npx tsc --noEmit: 0 errors
- cargo clippy -- -D warnings: 0 warnings
- cargo fmt --check: passes
- eslint src/ --max-warnings 0: 0 issues
2026-06-07 16:41:28 -05:00

182 lines
4.8 KiB
TypeScript

import React from "react";
import { describe, it, expect, vi, beforeEach } from "vitest";
import { render, screen, fireEvent, waitFor } from "@testing-library/react";
import { invoke } from "@tauri-apps/api/core";
import { DeploymentDetail } from "@/components/Kubernetes/DeploymentDetail";
import type { DeploymentInfo } from "@/lib/tauriCommands";
vi.mock("@tauri-apps/api/core");
type MockedInvoke = typeof invoke & {
mockResolvedValue: (v: unknown) => void;
mockRejectedValue: (e: Error) => void;
mockImplementation: (fn: (cmd: string) => Promise<unknown>) => void;
};
const mockInvoke = invoke as MockedInvoke;
const mockDeployment: DeploymentInfo = {
name: "nginx-deployment",
namespace: "production",
ready: "3/3",
up_to_date: "3",
available: "3",
age: "2d",
replicas: 3,
labels: { app: "nginx", tier: "frontend" },
};
describe("DeploymentDetail", () => {
beforeEach(() => {
vi.clearAllMocks();
});
it("renders deployment name from DeploymentInfo prop", () => {
render(
<DeploymentDetail
clusterId="cluster-1"
namespace="production"
deployment={mockDeployment}
onClose={() => {}}
/>
);
expect(screen.getByRole("heading", { name: /deployment: nginx-deployment/i })).toBeDefined();
});
it("shows replica count in ready/total format", () => {
render(
<DeploymentDetail
clusterId="cluster-1"
namespace="production"
deployment={mockDeployment}
onClose={() => {}}
/>
);
// ready field "3/3" shown in overview
expect(screen.getByText("3/3")).toBeDefined();
});
it("scale button calls scale_deployment IPC with new replica count", async () => {
mockInvoke.mockResolvedValue(undefined);
render(
<DeploymentDetail
clusterId="cluster-1"
namespace="production"
deployment={mockDeployment}
onClose={() => {}}
/>
);
const actionsTab = screen.getByRole("button", { name: /^actions$/i });
fireEvent.click(actionsTab);
await waitFor(() => {
expect(screen.getByTestId("scale-button")).toBeDefined();
});
const scaleButton = screen.getByTestId("scale-button");
fireEvent.click(scaleButton);
await waitFor(() => {
expect(mockInvoke).toHaveBeenCalledWith("scale_deployment", {
clusterId: "cluster-1",
namespace: "production",
deploymentName: "nginx-deployment",
replicas: 3,
});
});
});
it("restart button calls restart_deployment IPC", async () => {
mockInvoke.mockResolvedValue(undefined);
render(
<DeploymentDetail
clusterId="cluster-1"
namespace="production"
deployment={mockDeployment}
onClose={() => {}}
/>
);
const actionsTab = screen.getByRole("button", { name: /^actions$/i });
fireEvent.click(actionsTab);
await waitFor(() => {
expect(screen.getByTestId("restart-button")).toBeDefined();
});
const restartButton = screen.getByTestId("restart-button");
fireEvent.click(restartButton);
await waitFor(() => {
expect(mockInvoke).toHaveBeenCalledWith("restart_deployment", {
clusterId: "cluster-1",
namespace: "production",
deploymentName: "nginx-deployment",
});
});
});
it("shows loading state during scale operation", async () => {
mockInvoke.mockImplementation((cmd: string) => {
if (cmd === "scale_deployment") return new Promise(() => {});
return Promise.resolve(undefined);
});
render(
<DeploymentDetail
clusterId="cluster-1"
namespace="production"
deployment={mockDeployment}
onClose={() => {}}
/>
);
const actionsTab = screen.getByRole("button", { name: /^actions$/i });
fireEvent.click(actionsTab);
await waitFor(() => {
expect(screen.getByTestId("scale-button")).toBeDefined();
});
fireEvent.click(screen.getByTestId("scale-button"));
await waitFor(() => {
expect(screen.getByTestId("scale-loading")).toBeDefined();
});
});
it("shows error when scale fails", async () => {
mockInvoke.mockImplementation((cmd: string) => {
if (cmd === "scale_deployment") {
return Promise.reject(new Error("Forbidden"));
}
return Promise.resolve(undefined);
});
render(
<DeploymentDetail
clusterId="cluster-1"
namespace="production"
deployment={mockDeployment}
onClose={() => {}}
/>
);
const actionsTab = screen.getByRole("button", { name: /^actions$/i });
fireEvent.click(actionsTab);
await waitFor(() => {
expect(screen.getByTestId("scale-button")).toBeDefined();
});
fireEvent.click(screen.getByTestId("scale-button"));
await waitFor(() => {
expect(screen.getByTestId("scale-error")).toBeDefined();
});
});
});