agent-react-devtools 0.0.0 → 0.1.0

package/src/__tests__/formatters.test.ts

@@ -0,0 +1,189 @@
+import { describe, it, expect } from 'vitest';
+import {
+  formatTree,
+  formatComponent,
+  formatSearchResults,
+  formatCount,
+  formatStatus,
+  formatProfileReport,
+  formatSlowest,
+  formatRerenders,
+  formatTimeline,
+} from '../formatters.js';
+import type { TreeNode } from '../component-tree.js';
+import type { InspectedElement, StatusInfo, ComponentRenderReport } from '../types.js';
+import type { TimelineEntry } from '../profiler.js';
+
+describe('formatTree', () => {
+  it('should format empty tree', () => {
+    expect(formatTree([])).toContain('No components');
+  });
+
+  it('should format a simple tree', () => {
+    const nodes: TreeNode[] = [
+      { id: 1, label: '@c1', displayName: 'App', type: 'function', key: null, parentId: null, children: [2, 3], depth: 0 },
+      { id: 2, label: '@c2', displayName: 'Header', type: 'memo', key: null, parentId: 1, children: [], depth: 1 },
+      { id: 3, label: '@c3', displayName: 'Footer', type: 'host', key: null, parentId: 1, children: [], depth: 1 },
+    ];
+
+    const result = formatTree(nodes);
+    expect(result).toContain('@c1 [fn] "App"');
+    expect(result).toContain('@c2 [memo] "Header"');
+    expect(result).toContain('@c3 [host] "Footer"');
+    expect(result).toContain('├─');
+    expect(result).toContain('└─');
+  });
+
+  it('should show keys', () => {
+    const nodes: TreeNode[] = [
+      { id: 1, label: '@c1', displayName: 'List', type: 'function', key: null, parentId: null, children: [2], depth: 0 },
+      { id: 2, label: '@c2', displayName: 'Item', type: 'function', key: 'item-1', parentId: 1, children: [], depth: 1 },
+    ];
+
+    const result = formatTree(nodes);
+    expect(result).toContain('key="item-1"');
+  });
+});
+
+describe('formatComponent', () => {
+  it('should format an inspected element', () => {
+    const element: InspectedElement = {
+      id: 5,
+      displayName: 'UserProfile',
+      type: 'function',
+      key: null,
+      props: { userId: 42, theme: 'dark' },
+      state: { isEditing: false },
+      hooks: [
+        { name: 'useState', value: false },
+        { name: 'useEffect', value: undefined },
+        { name: 'useCallback', value: 'ƒ' },
+      ],
+      renderedAt: null,
+    };
+
+    const result = formatComponent(element, '@c5');
+    expect(result).toContain('@c5 [fn] "UserProfile"');
+    expect(result).toContain('props:');
+    expect(result).toContain('  userId: 42');
+    expect(result).toContain('  theme: "dark"');
+    expect(result).toContain('state:');
+    expect(result).toContain('  isEditing: false');
+    expect(result).toContain('hooks:');
+    expect(result).toContain('  useState: false');
+  });
+});
+
+describe('formatSearchResults', () => {
+  it('should format empty results', () => {
+    expect(formatSearchResults([])).toContain('No components found');
+  });
+
+  it('should format results', () => {
+    const results: TreeNode[] = [
+      { id: 2, label: '@c2', displayName: 'UserProfile', type: 'function', key: null, parentId: 1, children: [], depth: 1 },
+      { id: 3, label: '@c3', displayName: 'UserCard', type: 'memo', key: 'bob', parentId: 1, children: [], depth: 1 },
+    ];
+
+    const result = formatSearchResults(results);
+    expect(result).toContain('@c2 [fn] "UserProfile"');
+    expect(result).toContain('@c3 [memo] "UserCard"');
+    expect(result).toContain('key="bob"');
+  });
+});
+
+describe('formatCount', () => {
+  it('should format component counts', () => {
+    const counts = { function: 10, memo: 3, host: 25 };
+    const result = formatCount(counts);
+    expect(result).toContain('38 components');
+    expect(result).toContain('host:25');
+    expect(result).toContain('fn:10');
+    expect(result).toContain('memo:3');
+  });
+});
+
+describe('formatStatus', () => {
+  it('should format status info', () => {
+    const status: StatusInfo = {
+      daemonRunning: true,
+      port: 8097,
+      connectedApps: 1,
+      componentCount: 47,
+      profilingActive: false,
+      uptime: 12000,
+    };
+
+    const result = formatStatus(status);
+    expect(result).toContain('running');
+    expect(result).toContain('8097');
+    expect(result).toContain('1 connected');
+    expect(result).toContain('47 components');
+  });
+});
+
+describe('formatProfileReport', () => {
+  it('should format a render report', () => {
+    const report: ComponentRenderReport = {
+      id: 5,
+      displayName: 'UserProfile',
+      renderCount: 12,
+      totalDuration: 540,
+      avgDuration: 45,
+      maxDuration: 120,
+      causes: ['props-changed', 'state-changed'],
+    };
+
+    const result = formatProfileReport(report, '@c5');
+    expect(result).toContain('@c5 "UserProfile"');
+    expect(result).toContain('renders:12');
+    expect(result).toContain('avg:45.0ms');
+    expect(result).toContain('max:120.0ms');
+    expect(result).toContain('props-changed');
+  });
+});
+
+describe('formatSlowest', () => {
+  it('should format empty data', () => {
+    expect(formatSlowest([])).toContain('No profiling data');
+  });
+
+  it('should format slowest components', () => {
+    const reports: ComponentRenderReport[] = [
+      { id: 1, displayName: 'SlowComp', renderCount: 5, totalDuration: 250, avgDuration: 50, maxDuration: 100, causes: ['props-changed'] },
+      { id: 2, displayName: 'FastComp', renderCount: 10, totalDuration: 100, avgDuration: 10, maxDuration: 20, causes: ['state-changed'] },
+    ];
+
+    const result = formatSlowest(reports);
+    expect(result).toContain('Slowest');
+    expect(result).toContain('SlowComp');
+    expect(result).toContain('FastComp');
+  });
+});
+
+describe('formatRerenders', () => {
+  it('should format rerender data', () => {
+    const reports: ComponentRenderReport[] = [
+      { id: 1, displayName: 'Chatty', renderCount: 50, totalDuration: 100, avgDuration: 2, maxDuration: 5, causes: ['parent-rendered'] },
+    ];
+
+    const result = formatRerenders(reports);
+    expect(result).toContain('50 renders');
+    expect(result).toContain('parent-rendered');
+  });
+});
+
+describe('formatTimeline', () => {
+  it('should format timeline entries', () => {
+    const entries: TimelineEntry[] = [
+      { index: 0, timestamp: 1000, duration: 12.5, componentCount: 5 },
+      { index: 1, timestamp: 2000, duration: 8.3, componentCount: 3 },
+    ];
+
+    const result = formatTimeline(entries);
+    expect(result).toContain('#0');
+    expect(result).toContain('12.5ms');
+    expect(result).toContain('#1');
+    expect(result).toContain('8.3ms');
+  });
+});

package/src/__tests__/profiler.test.ts

@@ -0,0 +1,264 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { Profiler } from '../profiler.js';
+import { ComponentTree } from '../component-tree.js';
+
+/**
+ * Operations encoding reference (protocol v2):
+ * [rendererID, rootFiberID, stringTableSize, ...stringTable, ...ops]
+ *
+ * String table: for each string, [length, ...charCodes]. String ID 0 = null.
+ *
+ * TREE_OPERATION_ADD (1):
+ *   1, id, elementType, parentId, ownerID, displayNameStringID, keyStringID
+ */
+
+/** Build a string table and return [tableData, stringIdMap] */
+function buildStringTable(strings: string[]): [number[], Map<string, number>] {
+  const idMap = new Map<string, number>();
+  const data: number[] = [];
+  for (const s of strings) {
+    const id = idMap.size + 1; // 0 is reserved for null
+    if (!idMap.has(s)) {
+      idMap.set(s, id);
+      data.push(s.length, ...Array.from(s).map((c) => c.charCodeAt(0)));
+    }
+  }
+  return [data, idMap];
+}
+
+/** Build a complete operations array with string table */
+function buildOps(
+  rendererID: number,
+  rootID: number,
+  strings: string[],
+  opsFn: (strId: (s: string) => number) => number[],
+): number[] {
+  const [tableData, idMap] = buildStringTable(strings);
+  const strId = (s: string) => idMap.get(s) || 0;
+  const ops = opsFn(strId);
+  return [rendererID, rootID, tableData.length, ...tableData, ...ops];
+}
+
+function addOp(
+  id: number,
+  elementType: number,
+  parentId: number,
+  displayNameStrId: number,
+  keyStrId: number = 0,
+): number[] {
+  return [1, id, elementType, parentId, 0, displayNameStrId, keyStrId];
+}
+
+describe('Profiler', () => {
+  let profiler: Profiler;
+  let tree: ComponentTree;
+
+  beforeEach(() => {
+    profiler = new Profiler();
+    tree = new ComponentTree();
+
+    // Set up a basic tree (FUNCTION=5 in protocol v2)
+    const ops = buildOps(1, 100, ['App', 'Header', 'Content'], (s) => [
+      ...addOp(1, 5, 0, s('App')),
+      ...addOp(2, 5, 1, s('Header')),
+      ...addOp(3, 5, 1, s('Content')),
+    ]);
+    tree.applyOperations(ops);
+  });
+
+  it('should track active state', () => {
+    expect(profiler.isActive()).toBe(false);
+    profiler.start('test');
+    expect(profiler.isActive()).toBe(true);
+    profiler.stop();
+    expect(profiler.isActive()).toBe(false);
+  });
+
+  it('should return null when stopping without starting', () => {
+    expect(profiler.stop()).toBeNull();
+  });
+
+  it('should process flat profiling data', () => {
+    profiler.start('test');
+
+    profiler.processProfilingData({
+      commitData: [
+        {
+          timestamp: 1000,
+          duration: 15,
+          fiberActualDurations: [1, 10, 2, 3, 3, 2],
+          fiberSelfDurations: [1, 5, 2, 3, 3, 2],
+        },
+        {
+          timestamp: 2000,
+          duration: 8,
+          fiberActualDurations: [1, 5, 3, 3],
+          fiberSelfDurations: [1, 2, 3, 3],
+        },
+      ],
+    });
+
+    const summary = profiler.stop();
+    expect(summary).not.toBeNull();
+    expect(summary!.commitCount).toBe(2);
+    expect(summary!.componentRenderCounts.length).toBeGreaterThan(0);
+  });
+
+  it('should generate render reports', () => {
+    profiler.start('test');
+
+    profiler.processProfilingData({
+      commitData: [
+        {
+          timestamp: 1000,
+          duration: 15,
+          fiberActualDurations: [1, 10, 2, 3],
+          fiberSelfDurations: [1, 5, 2, 3],
+          changeDescriptions: [
+            [1, { props: ['theme'], isFirstMount: false }],
+            [2, { isFirstMount: true }],
+          ],
+        },
+        {
+          timestamp: 2000,
+          duration: 8,
+          fiberActualDurations: [1, 20],
+          fiberSelfDurations: [1, 15],
+          changeDescriptions: [
+            [1, { didHooksChange: true, isFirstMount: false }],
+          ],
+        },
+      ],
+    });
+
+    const report = profiler.getReport(1, tree);
+    expect(report).not.toBeNull();
+    expect(report!.displayName).toBe('App');
+    expect(report!.renderCount).toBe(2);
+    expect(report!.totalDuration).toBe(30);
+    expect(report!.avgDuration).toBe(15);
+    expect(report!.maxDuration).toBe(20);
+    expect(report!.causes).toContain('props-changed');
+    expect(report!.causes).toContain('hooks-changed');
+  });
+
+  it('should find slowest components', () => {
+    profiler.start('test');
+
+    profiler.processProfilingData({
+      commitData: [
+        {
+          timestamp: 1000,
+          duration: 15,
+          fiberActualDurations: [1, 50, 2, 5, 3, 30],
+          fiberSelfDurations: [1, 15, 2, 5, 3, 30],
+        },
+      ],
+    });
+
+    const slowest = profiler.getSlowest(tree, 2);
+    expect(slowest).toHaveLength(2);
+    expect(slowest[0].displayName).toBe('App');
+    expect(slowest[1].displayName).toBe('Content');
+  });
+
+  it('should find most rerenders', () => {
+    profiler.start('test');
+
+    profiler.processProfilingData({
+      commitData: [
+        {
+          timestamp: 1000,
+          duration: 5,
+          fiberActualDurations: [1, 1, 2, 1, 3, 1],
+          fiberSelfDurations: [1, 1, 2, 1, 3, 1],
+        },
+        {
+          timestamp: 2000,
+          duration: 5,
+          fiberActualDurations: [2, 1, 3, 1],
+          fiberSelfDurations: [2, 1, 3, 1],
+        },
+        {
+          timestamp: 3000,
+          duration: 5,
+          fiberActualDurations: [3, 1],
+          fiberSelfDurations: [3, 1],
+        },
+      ],
+    });
+
+    const rerenders = profiler.getMostRerenders(tree, 3);
+    expect(rerenders[0].displayName).toBe('Content');
+    expect(rerenders[0].renderCount).toBe(3);
+  });
+
+  it('should process dataForRoots nested format', () => {
+    profiler.start('test');
+
+    profiler.processProfilingData({
+      dataForRoots: [
+        {
+          commitData: [
+            {
+              timestamp: 1000,
+              duration: 12,
+              fiberActualDurations: [1, 8, 2, 4],
+              fiberSelfDurations: [1, 4, 2, 4],
+              changeDescriptions: [
+                [1, { props: ['count'], isFirstMount: false }],
+                [2, { state: ['value'], isFirstMount: false }],
+              ],
+            },
+          ],
+        },
+      ],
+    });
+
+    const summary = profiler.stop();
+    expect(summary).not.toBeNull();
+    expect(summary!.commitCount).toBe(1);
+
+    // Verify the state change was captured correctly
+    profiler.start('test2');
+    profiler.processProfilingData({
+      dataForRoots: [
+        {
+          commitData: [
+            {
+              timestamp: 2000,
+              duration: 5,
+              fiberActualDurations: [2, 3],
+              fiberSelfDurations: [2, 3],
+              changeDescriptions: [
+                [2, { state: ['value', 'count'], isFirstMount: false }],
+              ],
+            },
+          ],
+        },
+      ],
+    });
+
+    const report = profiler.getReport(2, tree);
+    expect(report).not.toBeNull();
+    expect(report!.causes).toContain('state-changed');
+  });
+
+  it('should generate timeline', () => {
+    profiler.start('test');
+
+    profiler.processProfilingData({
+      commitData: [
+        { timestamp: 1000, duration: 10, fiberActualDurations: [1, 5], fiberSelfDurations: [] },
+        { timestamp: 2000, duration: 20, fiberActualDurations: [1, 10, 2, 5], fiberSelfDurations: [] },
+      ],
+    });
+
+    const timeline = profiler.getTimeline();
+    expect(timeline).toHaveLength(2);
+    expect(timeline[0].duration).toBe(10);
+    expect(timeline[0].componentCount).toBe(1);
+    expect(timeline[1].duration).toBe(20);
+    expect(timeline[1].componentCount).toBe(2);
+  });
+});