tftsr-devops_investigation/tests/unit/criticalUIFixes.test.tsx

/**
 * TDD tests: Critical UI fixes for Kubernetes management
 * 1. LogStreamPanel integration in PodList
 * 2. Smart positioning for ResourceActionMenu
 * 3. Dark mode text visibility
 * 4. YAML editor loading race condition
 */

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 { BrowserRouter } from "react-router-dom";

import { PodList } from "@/components/Kubernetes/PodList";
import { ResourceActionMenu } from "@/components/Kubernetes/ResourceActionMenu";
import { YamlEditor } from "@/components/Kubernetes/YamlEditor";
import { EditResourceModal } from "@/components/Kubernetes/EditResourceModal";
import type { PodInfo } from "@/lib/tauriCommands";

type MockedInvoke = typeof invoke & {
  mockResolvedValue: (v: unknown) => void;
  mockImplementation: (fn: (cmd: string, args?: unknown) => Promise<unknown>) => void;
};

const mockInvoke = invoke as MockedInvoke;

// ─── 1. LogStreamPanel Integration in PodList ────────────────────────────────

describe("PodList – LogStreamPanel integration", () => {
  const pod: PodInfo = {
    name: "test-pod",
    namespace: "default",
    status: "Running",
    ready: "1/1",
    age: "1d",
    containers: ["main", "sidecar"],
  };

  beforeEach(() => vi.clearAllMocks());

  it("opens LogStreamPanel when Logs action is clicked", async () => {
    // Mock streamPodLogsCmd to return a stream ID
    mockInvoke.mockImplementation(async (cmd: string) => {
      if (cmd === "stream_pod_logs") {
        return "test-stream-123";
      }
      return undefined;
    });

    render(<PodList pods={[pod]} clusterId="c1" namespace="default" />);

    // Open action menu
    const buttons = screen.getAllByRole("button");
    const actionButton = buttons.find(btn => btn.getAttribute("aria-label") === "Actions");
    if (!actionButton) throw new Error("Action button not found");
    fireEvent.click(actionButton);

    // Click Logs action
    const logsAction = await screen.findByText("Logs");
    fireEvent.click(logsAction);

    // LogStreamPanel should be rendered (look for dialog title)
    await waitFor(() => {
      expect(screen.getByText(/Log Stream/i)).toBeInTheDocument();
    });
  });

  it("LogStreamPanel receives correct props from PodList", async () => {
    // Mock streamPodLogsCmd
    mockInvoke.mockImplementation(async (cmd: string) => {
      if (cmd === "stream_pod_logs") {
        return "test-stream-123";
      }
      return undefined;
    });

    render(<PodList pods={[pod]} clusterId="c1" namespace="default" />);

    // Open action menu and click Logs
    const buttons = screen.getAllByRole("button");
    const actionButton = buttons.find(btn => btn.getAttribute("aria-label") === "Actions");
    if (!actionButton) throw new Error("Action button not found");
    fireEvent.click(actionButton);

    const logsAction = await screen.findByText("Logs");
    fireEvent.click(logsAction);

    // Verify dialog title contains pod name
    await waitFor(() => {
      expect(screen.getByText(/Log Stream — test-pod/i)).toBeInTheDocument();
    });

    // Verify container dropdown shows containers
    const select = screen.getByRole("combobox");
    expect(select).toBeInTheDocument();
  });
});

// ─── 2. Smart Positioning for ResourceActionMenu ─────────────────────────────

describe("ResourceActionMenu – smart positioning", () => {
  beforeEach(() => {
    // Mock getBoundingClientRect
    Element.prototype.getBoundingClientRect = vi.fn(() => ({
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      width: 0,
      height: 0,
      x: 0,
      y: 0,
      toJSON: () => {},
    }));
  });

  it("flips menu upward when near bottom of viewport", async () => {
    const actions = [
      { label: "Edit", icon: () => null, onClick: vi.fn() },
      { label: "Delete", icon: () => null, onClick: vi.fn() },
    ];

    render(<ResourceActionMenu actions={actions} />);

    const button = screen.getByLabelText("Actions");

    // Mock the menu being near bottom (spaceBelow < 20px)
    Element.prototype.getBoundingClientRect = vi.fn(function(this: Element) {
      if (this.classList.contains("absolute")) {
        return {
          top: window.innerHeight - 100,
          left: 0,
          right: 200,
          bottom: window.innerHeight + 100, // extends below viewport
          width: 200,
          height: 200,
          x: 0,
          y: window.innerHeight - 100,
          toJSON: () => {},
        };
      }
      return {
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        width: 0,
        height: 0,
        x: 0,
        y: 0,
        toJSON: () => {},
      };
    });

    fireEvent.click(button);

    await waitFor(() => {
      const menu = screen.getByText("Edit").closest("div.absolute");
      expect(menu).toHaveClass("bottom-full");
    });
  });

  it("keeps menu downward when sufficient space below", async () => {
    const actions = [
      { label: "Edit", icon: () => null, onClick: vi.fn() },
    ];

    render(<ResourceActionMenu actions={actions} />);

    const button = screen.getByLabelText("Actions");

    // Mock the menu having plenty of space below
    Element.prototype.getBoundingClientRect = vi.fn(function(this: Element) {
      if (this.classList.contains("absolute")) {
        return {
          top: 100,
          left: 0,
          right: 200,
          bottom: 300, // plenty of space below
          width: 200,
          height: 200,
          x: 0,
          y: 100,
          toJSON: () => {},
        };
      }
      return {
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        width: 0,
        height: 0,
        x: 0,
        y: 0,
        toJSON: () => {},
      };
    });

    fireEvent.click(button);

    await waitFor(() => {
      const menu = screen.getByText("Edit").closest("div.absolute");
      expect(menu).toHaveClass("top-full");
    });
  });
});

// ─── 3. Dark Mode Text Visibility ────────────────────────────────────────────

describe("Dark mode – text visibility", () => {
  it("applies dark class to html element when theme is dark", () => {
    // We can't directly test App.tsx without mocking everything,
    // but we can verify the logic by checking that globals.css
    // has proper dark mode CSS variables defined

    // This is a structural test - dark mode should apply to html, not a div
    const root = document.documentElement;
    root.classList.add("dark");

    expect(root.classList.contains("dark")).toBe(true);

    root.classList.remove("dark");
  });
});

// ─── 4. YAML Editor Loading Race Condition ───────────────────────────────────

describe("YamlEditor – loading race condition fix", () => {
  it("shows loader while Monaco is mounting", () => {
    const { container } = render(
      <YamlEditor
        content="apiVersion: v1\nkind: Pod"
        showControls={true}
      />
    );

    // Loader should be visible initially
    const loader = container.querySelector('[role="status"]');
    expect(loader).toBeInTheDocument();
  });

  it("manages loading state properly", () => {
    // Test that the component has proper loading state management
    const { container } = render(
      <YamlEditor
        content="apiVersion: v1\nkind: Pod"
        showControls={true}
      />
    );

    // Loader div should exist with proper styling
    const loaderContainer = container.querySelector(".flex.items-center.justify-center");
    expect(loaderContainer).toBeInTheDocument();
  });

  it("waits for content before rendering in EditResourceModal", async () => {
    mockInvoke.mockResolvedValue("apiVersion: v1\nkind: Pod\nmetadata:\n  name: test");

    const { container } = render(
      <BrowserRouter>
        <EditResourceModal
          isOpen={true}
          clusterId="c1"
          namespace="default"
          resourceType="pods"
          resourceName="test-pod"
          initialYaml="apiVersion: v1\nkind: Pod"
          onClose={vi.fn()}
        />
      </BrowserRouter>
    );

    // Switch to YAML tab
    const yamlTab = screen.getByText("YAML");
    fireEvent.click(yamlTab);

    // YamlEditor should render (with or without Monaco fully loaded)
    await waitFor(() => {
      const yamlContainer = container.querySelector(".flex.flex-col.gap-2");
      expect(yamlContainer).toBeInTheDocument();
    });
  });
});

// ─── useSmartPosition Hook ────────────────────────────────────────────────────

describe("useSmartPosition hook", () => {
  it("returns correct positioning classes based on viewport space", async () => {
    // This will be implemented in the hook file
    // The hook should return { position: "top-full" | "bottom-full" }
    // based on available space below the element

    const mockRef = {
      current: {
        getBoundingClientRect: () => ({
          top: window.innerHeight - 50,
          bottom: window.innerHeight + 150,
          left: 0,
          right: 200,
          width: 200,
          height: 200,
          x: 0,
          y: window.innerHeight - 50,
          toJSON: () => {},
        }),
      },
    } as React.RefObject<HTMLDivElement>;

    // Hook should detect that menu extends below viewport
    // and return positioning that flips it upward
    expect(mockRef.current).toBeDefined();
  });
});