Add snapshot tests for Phase 11-13 components (AgentProgress, FlowViewer, StateMachineViewer, CollaborationOverlay)

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

Author: Copilot

__tests__/components/AgentProgress.test.tsx

@@ -0,0 +1,60 @@
+/**
+ * Snapshot tests for the AgentProgress component.
+ */
+import React from "react";
+import { render } from "@testing-library/react-native";
+
+import { AgentProgress } from "~/components/ai/AgentProgress";
+import type { AgentTask } from "~/hooks/useAgent";
+
+/* ------------------------------------------------------------------ */
+/*  Fixtures                                                           */
+/* ------------------------------------------------------------------ */
+
+const baseTask: AgentTask = {
+  id: "task-1",
+  status: "running",
+  progress: 50,
+  agentId: "summarizer",
+  createdAt: "2026-01-01T00:00:00Z",
+};
+
+/* ------------------------------------------------------------------ */
+/*  AgentProgress snapshots                                            */
+/* ------------------------------------------------------------------ */
+
+describe("AgentProgress", () => {
+  it("renders null when task is null", () => {
+    const tree = render(<AgentProgress task={null} />);
+    expect(tree.toJSON()).toBeNull();
+  });
+
+  it("renders running task with progress", () => {
+    const tree = render(<AgentProgress task={baseTask} />);
+    expect(tree.toJSON()).toMatchSnapshot();
+  });
+
+  it("renders completed task", () => {
+    const task: AgentTask = { ...baseTask, status: "completed", progress: 100 };
+    const tree = render(<AgentProgress task={task} />);
+    expect(tree.toJSON()).toMatchSnapshot();
+  });
+
+  it("renders failed task with error", () => {
+    const task: AgentTask = {
+      ...baseTask,
+      status: "failed",
+      progress: 30,
+      error: "Agent timed out",
+    };
+    const tree = render(<AgentProgress task={task} />);
+    expect(tree.toJSON()).toMatchSnapshot();
+  });
+
+  it("renders cancel button when running and onCancel provided", () => {
+    const tree = render(
+      <AgentProgress task={baseTask} onCancel={jest.fn()} />,
+    );
+    expect(tree.toJSON()).toMatchSnapshot();
+  });
+});

__tests__/components/CollaborationOverlay.test.tsx

@@ -0,0 +1,50 @@
+/**
+ * Snapshot tests for the CollaborationOverlay component.
+ */
+import React from "react";
+import { render } from "@testing-library/react-native";
+
+import { CollaborationOverlay } from "~/components/realtime/CollaborationOverlay";
+import type { CollaborationParticipant } from "~/hooks/useCollaboration";
+
+/* ------------------------------------------------------------------ */
+/*  Fixtures                                                           */
+/* ------------------------------------------------------------------ */
+
+const participants: CollaborationParticipant[] = [
+  {
+    userId: "user1",
+    name: "Alice",
+    cursor: { x: 100, y: 200, field: "title" },
+    status: "active",
+    color: "#3b82f6",
+    lastSeen: "2026-01-01T00:00:00Z",
+  },
+];
+
+/* ------------------------------------------------------------------ */
+/*  CollaborationOverlay snapshots                                     */
+/* ------------------------------------------------------------------ */
+
+describe("CollaborationOverlay", () => {
+  it("renders null when no participants", () => {
+    const tree = render(
+      <CollaborationOverlay participants={[]} />,
+    );
+    expect(tree.toJSON()).toBeNull();
+  });
+
+  it("renders participant cursors", () => {
+    const tree = render(
+      <CollaborationOverlay participants={participants} />,
+    );
+    expect(tree.toJSON()).toMatchSnapshot();
+  });
+
+  it("renders without cursors when showCursors is false", () => {
+    const tree = render(
+      <CollaborationOverlay participants={participants} showCursors={false} />,
+    );
+    expect(tree.toJSON()).toMatchSnapshot();
+  });
+});

__tests__/components/FlowViewer.test.tsx

@@ -0,0 +1,34 @@
+/**
+ * Snapshot tests for the FlowViewer component.
+ */
+import React from "react";
+import { render } from "@testing-library/react-native";
+
+import { FlowViewer } from "~/components/automation/FlowViewer";
+
+/* ------------------------------------------------------------------ */
+/*  Fixtures                                                           */
+/* ------------------------------------------------------------------ */
+
+const nodes = [
+  { id: "1", type: "trigger", label: "Start" },
+  { id: "2", type: "action", label: "Send Email" },
+];
+
+const edges = [{ id: "e1", source: "1", target: "2", label: "On Submit" }];
+
+/* ------------------------------------------------------------------ */
+/*  FlowViewer snapshots                                               */
+/* ------------------------------------------------------------------ */
+
+describe("FlowViewer", () => {
+  it("renders empty state when no nodes", () => {
+    const tree = render(<FlowViewer nodes={[]} edges={[]} />);
+    expect(tree.toJSON()).toMatchSnapshot();
+  });
+
+  it("renders nodes with edges", () => {
+    const tree = render(<FlowViewer nodes={nodes} edges={edges} />);
+    expect(tree.toJSON()).toMatchSnapshot();
+  });
+});

__tests__/components/StateMachineViewer.test.tsx

@@ -0,0 +1,51 @@
+/**
+ * Snapshot tests for the StateMachineViewer component.
+ */
+import React from "react";
+import { render } from "@testing-library/react-native";
+
+import { StateMachineViewer } from "~/components/workflow/StateMachineViewer";
+
+/* ------------------------------------------------------------------ */
+/*  Fixtures                                                           */
+/* ------------------------------------------------------------------ */
+
+const states = [
+  { name: "draft", type: "initial" as const, label: "Draft" },
+  { name: "published", type: "final" as const, label: "Published" },
+];
+
+const transitions = [
+  { from: "draft", to: "published", event: "publish", label: "Publish" },
+];
+
+/* ------------------------------------------------------------------ */
+/*  StateMachineViewer snapshots                                       */
+/* ------------------------------------------------------------------ */
+
+describe("StateMachineViewer", () => {
+  it("renders empty state when no states", () => {
+    const tree = render(
+      <StateMachineViewer states={[]} transitions={[]} />,
+    );
+    expect(tree.toJSON()).toMatchSnapshot();
+  });
+
+  it("renders states with transitions", () => {
+    const tree = render(
+      <StateMachineViewer states={states} transitions={transitions} />,
+    );
+    expect(tree.toJSON()).toMatchSnapshot();
+  });
+
+  it("highlights current state", () => {
+    const tree = render(
+      <StateMachineViewer
+        states={states}
+        transitions={transitions}
+        currentState="draft"
+      />,
+    );
+    expect(tree.toJSON()).toMatchSnapshot();
+  });
+});