@mseep/claudian 2.0.25

package/tests/unit/features/chat/rendering/WriteEditRenderer.test.ts

@@ -0,0 +1,474 @@
+import { createMockEl } from '@test/helpers/mockElement';
+
+import type { ToolCallInfo, ToolDiffData } from '@/core/types';
+import {
+  createWriteEditBlock,
+  finalizeWriteEditBlock,
+  renderStoredWriteEdit,
+  updateWriteEditWithDiff,
+} from '@/features/chat/rendering/WriteEditRenderer';
+
+// Helper to create a basic tool call
+function createToolCall(overrides: Partial<ToolCallInfo> = {}): ToolCallInfo {
+  return {
+    id: 'tool-123',
+    name: 'Write',
+    input: { file_path: '/test/vault/notes/test.md', content: 'new content' },
+    status: 'running',
+    ...overrides,
+  };
+}
+
+// Helper to create pre-computed diff data
+function createDiffData(overrides: Partial<ToolDiffData> = {}): ToolDiffData {
+  return {
+    filePath: 'test.md',
+    diffLines: [
+      { type: 'equal', text: 'line1', oldLineNum: 1, newLineNum: 1 },
+      { type: 'delete', text: 'old', oldLineNum: 2 },
+      { type: 'insert', text: 'new', newLineNum: 2 },
+    ],
+    stats: { added: 1, removed: 1 },
+    ...overrides,
+  };
+}
+
+describe('WriteEditRenderer', () => {
+  describe('createWriteEditBlock', () => {
+    it('should create a block with correct structure', () => {
+      const parentEl = createMockEl();
+      const toolCall = createToolCall();
+
+      const state = createWriteEditBlock(parentEl, toolCall);
+
+      expect(state.wrapperEl).toBeDefined();
+      expect(state.headerEl).toBeDefined();
+      expect(state.nameEl).toBeDefined();
+      expect(state.summaryEl).toBeDefined();
+      expect(state.statsEl).toBeDefined();
+      expect(state.statusEl).toBeDefined();
+      expect(state.contentEl).toBeDefined();
+      expect(state.toolCall).toBe(toolCall);
+    });
+
+    it('should set data-tool-id on wrapper', () => {
+      const parentEl = createMockEl();
+      const toolCall = createToolCall({ id: 'my-tool-id' });
+
+      const state = createWriteEditBlock(parentEl, toolCall);
+
+      expect(state.wrapperEl.dataset.toolId).toBe('my-tool-id');
+    });
+
+    it('should display tool name and filename in two-part header', () => {
+      const parentEl = createMockEl();
+      const toolCall = createToolCall({
+        name: 'Edit',
+        input: { file_path: 'notes/test.md' },
+      });
+
+      const state = createWriteEditBlock(parentEl, toolCall);
+
+      expect(state.nameEl.textContent).toBe('Edit');
+      expect(state.summaryEl.textContent).toBe('test.md');
+    });
+
+    it('should show spinner status while running', () => {
+      const parentEl = createMockEl();
+      const toolCall = createToolCall();
+
+      const state = createWriteEditBlock(parentEl, toolCall);
+
+      expect(state.statusEl.hasClass('status-running')).toBe(true);
+    });
+
+    it('should show filename only in summary', () => {
+      const parentEl = createMockEl();
+      const toolCall = createToolCall({
+        input: { file_path: '/very/long/path/to/some/deeply/nested/file.md' },
+      });
+
+      const state = createWriteEditBlock(parentEl, toolCall);
+
+      // Summary should show just the filename
+      expect(state.summaryEl.textContent).toBe('file.md');
+    });
+
+    it('should handle missing file_path gracefully', () => {
+      const parentEl = createMockEl();
+      const toolCall = createToolCall({ input: {} });
+
+      const state = createWriteEditBlock(parentEl, toolCall);
+
+      expect(state.summaryEl.textContent).toBe('file');
+    });
+
+    it('should start collapsed by default', () => {
+      const parentEl = createMockEl();
+      const toolCall = createToolCall();
+
+      const state = createWriteEditBlock(parentEl, toolCall);
+
+      expect(state.isExpanded).toBe(false);
+      expect(state.wrapperEl.hasClass('expanded')).toBe(false);
+      expect(state.contentEl.hasClass('claudian-hidden')).toBe(true);
+      expect(state.headerEl.getAttribute('aria-expanded')).toBe('false');
+      expect(state.headerEl.getAttribute('aria-label')).toContain('click to expand');
+    });
+
+    it('should start expanded when requested', () => {
+      const parentEl = createMockEl();
+      const toolCall = createToolCall();
+
+      const state = createWriteEditBlock(parentEl, toolCall, { initiallyExpanded: true });
+
+      expect(state.isExpanded).toBe(true);
+      expect(state.wrapperEl.hasClass('expanded')).toBe(true);
+      expect(state.contentEl.hasClass('claudian-hidden')).toBe(false);
+      expect(state.headerEl.getAttribute('aria-expanded')).toBe('true');
+      expect(state.headerEl.getAttribute('aria-label')).toContain('click to collapse');
+    });
+  });
+
+  describe('updateWriteEditWithDiff', () => {
+    it('should render diff stats when diff data is provided', () => {
+      const parentEl = createMockEl();
+      const toolCall = createToolCall();
+      const state = createWriteEditBlock(parentEl, toolCall);
+
+      const diffData = createDiffData({
+        stats: { added: 1, removed: 0 },
+      });
+
+      updateWriteEditWithDiff(state, diffData);
+
+      // Should show +1 for added line
+      expect((state.statsEl as any)._children.length).toBeGreaterThan(0);
+    });
+
+    it('should store diffLines in state', () => {
+      const parentEl = createMockEl();
+      const toolCall = createToolCall();
+      const state = createWriteEditBlock(parentEl, toolCall);
+
+      const diffData = createDiffData();
+
+      updateWriteEditWithDiff(state, diffData);
+
+      expect(state.diffLines).toBeDefined();
+      expect(state.diffLines!.length).toBeGreaterThan(0);
+    });
+
+    it('should show both added and removed counts', () => {
+      const parentEl = createMockEl();
+      const toolCall = createToolCall();
+      const state = createWriteEditBlock(parentEl, toolCall);
+
+      const diffData = createDiffData({
+        stats: { added: 3, removed: 2 },
+      });
+
+      updateWriteEditWithDiff(state, diffData);
+
+      // Should have stats children
+      expect((state.statsEl as any)._children.length).toBeGreaterThan(0);
+    });
+
+    it('should handle empty diffLines with zero stats', () => {
+      const parentEl = createMockEl();
+      const toolCall = createToolCall();
+      const state = createWriteEditBlock(parentEl, toolCall);
+
+      const diffData = createDiffData({
+        diffLines: [],
+        stats: { added: 0, removed: 0 },
+      });
+
+      updateWriteEditWithDiff(state, diffData);
+
+      // Should not have stats children when no changes
+      expect((state.statsEl as any)._children.length).toBe(0);
+    });
+  });
+
+  describe('finalizeWriteEditBlock', () => {
+    it('should update status to done on success', () => {
+      const parentEl = createMockEl();
+      const toolCall = createToolCall();
+      const state = createWriteEditBlock(parentEl, toolCall);
+
+      // Add diff data first
+      updateWriteEditWithDiff(state, createDiffData());
+
+      finalizeWriteEditBlock(state, false);
+
+      expect(state.wrapperEl.hasClass('done')).toBe(true);
+      expect(state.statusEl.hasClass('status-running')).toBe(false);
+    });
+
+    it('should update status to error on failure', () => {
+      const parentEl = createMockEl();
+      const toolCall = createToolCall({ result: 'Error: file not found' });
+      const state = createWriteEditBlock(parentEl, toolCall);
+
+      finalizeWriteEditBlock(state, true);
+
+      expect(state.wrapperEl.hasClass('error')).toBe(true);
+      expect(state.statusEl.hasClass('status-error')).toBe(true);
+    });
+
+    it('should show error message in content when no diff', () => {
+      const parentEl = createMockEl();
+      const toolCall = createToolCall({ result: 'Permission denied' });
+      const state = createWriteEditBlock(parentEl, toolCall);
+
+      finalizeWriteEditBlock(state, true);
+
+      const contentText = getTextContent(state.contentEl);
+      expect(contentText).toContain('Permission denied');
+    });
+
+    it('should clear spinner status on finalize', () => {
+      const parentEl = createMockEl();
+      const toolCall = createToolCall();
+      const state = createWriteEditBlock(parentEl, toolCall);
+
+      finalizeWriteEditBlock(state, false);
+
+      expect(state.statusEl.hasClass('status-running')).toBe(false);
+      expect((state.statusEl as any)._children.length).toBe(0);
+    });
+  });
+
+  describe('renderStoredWriteEdit', () => {
+    it('should show done state for completed status', () => {
+      const parentEl = createMockEl();
+      const toolCall = createToolCall({ status: 'completed' });
+
+      const block = renderStoredWriteEdit(parentEl, toolCall);
+
+      expect(block.hasClass('done')).toBe(true);
+    });
+
+    it('should show error state for error status', () => {
+      const parentEl = createMockEl();
+      const toolCall = createToolCall({ status: 'error' });
+
+      const block = renderStoredWriteEdit(parentEl, toolCall);
+
+      expect(block.hasClass('error')).toBe(true);
+    });
+
+    it('should show error state for blocked status', () => {
+      const parentEl = createMockEl();
+      const toolCall = createToolCall({ status: 'blocked' });
+
+      const block = renderStoredWriteEdit(parentEl, toolCall);
+
+      expect(block.hasClass('error')).toBe(true);
+    });
+
+    it('should render diff stats from stored diffData', () => {
+      const parentEl = createMockEl();
+      const toolCall = createToolCall({
+        status: 'completed',
+        diffData: createDiffData({
+          stats: { added: 2, removed: 1 },
+        }),
+      });
+
+      const block = renderStoredWriteEdit(parentEl, toolCall);
+
+      // Block should be created successfully with stats
+      expect(block.dataset.toolId).toBe('tool-123');
+    });
+
+    it('should handle stored block with empty diffLines', () => {
+      const parentEl = createMockEl();
+      const toolCall = createToolCall({
+        status: 'completed',
+        diffData: createDiffData({
+          diffLines: [],
+          stats: { added: 0, removed: 0 },
+        }),
+      });
+
+      const block = renderStoredWriteEdit(parentEl, toolCall);
+
+      expect(block).toBeDefined();
+    });
+
+    it('should show error message when no diffData and error', () => {
+      const parentEl = createMockEl();
+      const toolCall = createToolCall({
+        status: 'error',
+        result: 'File not found',
+      });
+
+      const block = renderStoredWriteEdit(parentEl, toolCall);
+
+      expect(block.hasClass('error')).toBe(true);
+    });
+
+    it('should use correct icon for Edit tool', () => {
+      const parentEl = createMockEl();
+      const toolCall = createToolCall({ name: 'Edit' });
+
+      const block = renderStoredWriteEdit(parentEl, toolCall);
+
+      // Block should render for Edit tool
+      expect(block).toBeDefined();
+    });
+
+    it('should start collapsed by default', () => {
+      const parentEl = createMockEl();
+      const toolCall = createToolCall({ status: 'completed' });
+
+      const block = renderStoredWriteEdit(parentEl, toolCall);
+      const headerEl = block.querySelector('.claudian-write-edit-header');
+      const contentEl = block.querySelector('.claudian-write-edit-content');
+
+      expect(block.hasClass('expanded')).toBe(false);
+      expect(contentEl?.hasClass('claudian-hidden')).toBe(true);
+      expect(headerEl?.getAttribute('aria-expanded')).toBe('false');
+      expect(headerEl?.getAttribute('aria-label')).toContain('click to expand');
+    });
+
+    it('should start expanded when requested', () => {
+      const parentEl = createMockEl();
+      const toolCall = createToolCall({ status: 'completed' });
+
+      const block = renderStoredWriteEdit(parentEl, toolCall, { initiallyExpanded: true });
+      const headerEl = block.querySelector('.claudian-write-edit-header');
+      const contentEl = block.querySelector('.claudian-write-edit-content');
+
+      expect(block.hasClass('expanded')).toBe(true);
+      expect(contentEl?.hasClass('claudian-hidden')).toBe(false);
+      expect(headerEl?.getAttribute('aria-expanded')).toBe('true');
+      expect(headerEl?.getAttribute('aria-label')).toContain('click to collapse');
+    });
+
+  });
+
+  describe('filename extraction', () => {
+    it('should extract filename from path', () => {
+      const parentEl = createMockEl();
+      const toolCall = createToolCall({
+        input: { file_path: 'notes/test.md' },
+      });
+
+      const state = createWriteEditBlock(parentEl, toolCall);
+
+      expect(state.summaryEl.textContent).toBe('test.md');
+    });
+
+    it('should extract filename from long path', () => {
+      const parentEl = createMockEl();
+      const longPath = 'src/components/features/auth/modals/confirmation/ConfirmationDialog.tsx';
+      const toolCall = createToolCall({
+        input: { file_path: longPath },
+      });
+
+      const state = createWriteEditBlock(parentEl, toolCall);
+
+      expect(state.summaryEl.textContent).toBe('ConfirmationDialog.tsx');
+    });
+
+    it('should handle paths with only filename', () => {
+      const parentEl = createMockEl();
+      const toolCall = createToolCall({
+        input: { file_path: 'README.md' },
+      });
+
+      const state = createWriteEditBlock(parentEl, toolCall);
+
+      expect(state.summaryEl.textContent).toBe('README.md');
+    });
+  });
+
+  describe('diff rendering', () => {
+    it('should render new file correctly (all inserts)', () => {
+      const parentEl = createMockEl();
+      const toolCall = createToolCall();
+      const state = createWriteEditBlock(parentEl, toolCall);
+
+      const diffData: ToolDiffData = {
+        filePath: 'test.md',
+        diffLines: [
+          { type: 'insert', text: 'new content', newLineNum: 1 },
+          { type: 'insert', text: 'line 2', newLineNum: 2 },
+        ],
+        stats: { added: 2, removed: 0 },
+      };
+
+      updateWriteEditWithDiff(state, diffData);
+
+      // Should show +2 for two new lines
+      expect(state.diffLines).toBeDefined();
+      expect(state.diffLines!.filter(l => l.type === 'insert').length).toBe(2);
+    });
+
+    it('should handle file deletion (all deletes)', () => {
+      const parentEl = createMockEl();
+      const toolCall = createToolCall();
+      const state = createWriteEditBlock(parentEl, toolCall);
+
+      const diffData: ToolDiffData = {
+        filePath: 'test.md',
+        diffLines: [
+          { type: 'delete', text: 'content', oldLineNum: 1 },
+        ],
+        stats: { added: 0, removed: 1 },
+      };
+
+      updateWriteEditWithDiff(state, diffData);
+
+      expect(state.diffLines).toBeDefined();
+      expect(state.diffLines!.filter(l => l.type === 'delete').length).toBe(1);
+    });
+
+    it('should handle mixed changes', () => {
+      const parentEl = createMockEl();
+      const toolCall = createToolCall();
+      const state = createWriteEditBlock(parentEl, toolCall);
+
+      const diffData: ToolDiffData = {
+        filePath: 'test.md',
+        diffLines: [
+          { type: 'equal', text: 'line1', oldLineNum: 1, newLineNum: 1 },
+          { type: 'delete', text: 'old', oldLineNum: 2 },
+          { type: 'insert', text: 'new1', newLineNum: 2 },
+          { type: 'insert', text: 'new2', newLineNum: 3 },
+          { type: 'equal', text: 'line3', oldLineNum: 3, newLineNum: 4 },
+        ],
+        stats: { added: 2, removed: 1 },
+      };
+
+      updateWriteEditWithDiff(state, diffData);
+
+      expect(state.diffLines).toBeDefined();
+      const types = state.diffLines!.reduce(
+        (acc, l) => {
+          acc[l.type] = (acc[l.type] || 0) + 1;
+          return acc;
+        },
+        {} as Record<string, number>
+      );
+
+      expect(types.delete).toBe(1);
+      expect(types.insert).toBe(2);
+      expect(types.equal).toBe(2);
+    });
+  });
+});
+
+// Helper to get text content recursively
+function getTextContent(element: any): string {
+  let text = element.textContent || '';
+  if (element._children) {
+    for (const child of element._children) {
+      text += getTextContent(child);
+    }
+  }
+  return text;
+}

package/tests/unit/features/chat/rendering/collapsible.test.ts

@@ -0,0 +1,158 @@
+import { createMockEl } from '@test/helpers/mockElement';
+
+import {
+  collapseElement,
+  type CollapsibleState,
+  setupCollapsible,
+} from '@/features/chat/rendering/collapsible';
+
+describe('collapsible', () => {
+  let wrapper: ReturnType<typeof createMockEl>;
+  let header: ReturnType<typeof createMockEl>;
+  let content: ReturnType<typeof createMockEl>;
+  let state: CollapsibleState;
+
+  beforeEach(() => {
+    wrapper = createMockEl();
+    header = createMockEl();
+    content = createMockEl();
+    state = { isExpanded: false };
+  });
+
+  describe('setupCollapsible', () => {
+    it('should start collapsed by default', () => {
+      setupCollapsible(wrapper, header, content, state);
+
+      expect(state.isExpanded).toBe(false);
+      expect(content.hasClass('claudian-hidden')).toBe(true);
+      expect(header.getAttribute('aria-expanded')).toBe('false');
+      expect(wrapper.hasClass('expanded')).toBe(false);
+    });
+
+    it('should start expanded when initiallyExpanded is true', () => {
+      setupCollapsible(wrapper, header, content, state, { initiallyExpanded: true });
+
+      expect(state.isExpanded).toBe(true);
+      expect(content.hasClass('claudian-hidden')).toBe(false);
+      expect(header.getAttribute('aria-expanded')).toBe('true');
+      expect(wrapper.hasClass('expanded')).toBe(true);
+    });
+
+    it('should toggle on click', () => {
+      setupCollapsible(wrapper, header, content, state);
+
+      const clickHandlers = header._eventListeners.get('click') || [];
+      expect(clickHandlers.length).toBe(1);
+
+      // Expand
+      clickHandlers[0]();
+      expect(state.isExpanded).toBe(true);
+      expect(wrapper.hasClass('expanded')).toBe(true);
+      expect(content.hasClass('claudian-hidden')).toBe(false);
+      expect(header.getAttribute('aria-expanded')).toBe('true');
+
+      // Collapse
+      clickHandlers[0]();
+      expect(state.isExpanded).toBe(false);
+      expect(wrapper.hasClass('expanded')).toBe(false);
+      expect(content.hasClass('claudian-hidden')).toBe(true);
+      expect(header.getAttribute('aria-expanded')).toBe('false');
+    });
+
+    it('should toggle on Enter key', () => {
+      setupCollapsible(wrapper, header, content, state);
+
+      const keydownHandlers = header._eventListeners.get('keydown') || [];
+      const event = { key: 'Enter', preventDefault: jest.fn() };
+      keydownHandlers[0](event);
+
+      expect(event.preventDefault).toHaveBeenCalled();
+      expect(state.isExpanded).toBe(true);
+    });
+
+    it('should toggle on Space key', () => {
+      setupCollapsible(wrapper, header, content, state);
+
+      const keydownHandlers = header._eventListeners.get('keydown') || [];
+      const event = { key: ' ', preventDefault: jest.fn() };
+      keydownHandlers[0](event);
+
+      expect(event.preventDefault).toHaveBeenCalled();
+      expect(state.isExpanded).toBe(true);
+    });
+
+    it('should not toggle on other keys', () => {
+      setupCollapsible(wrapper, header, content, state);
+
+      const keydownHandlers = header._eventListeners.get('keydown') || [];
+      const event = { key: 'Tab', preventDefault: jest.fn() };
+      keydownHandlers[0](event);
+
+      expect(event.preventDefault).not.toHaveBeenCalled();
+      expect(state.isExpanded).toBe(false);
+    });
+
+    it('should call onToggle callback with new state', () => {
+      const onToggle = jest.fn();
+
+      setupCollapsible(wrapper, header, content, state, { onToggle });
+
+      const clickHandlers = header._eventListeners.get('click') || [];
+
+      clickHandlers[0]();
+      expect(onToggle).toHaveBeenCalledWith(true);
+
+      clickHandlers[0]();
+      expect(onToggle).toHaveBeenCalledWith(false);
+    });
+
+    it('should set aria-label with baseAriaLabel', () => {
+      setupCollapsible(wrapper, header, content, state, { baseAriaLabel: 'Read: file.ts' });
+
+      expect(header.getAttribute('aria-label')).toBe('Read: file.ts - click to expand');
+
+      // Expand and check label changes
+      const clickHandlers = header._eventListeners.get('click') || [];
+      clickHandlers[0]();
+      expect(header.getAttribute('aria-label')).toBe('Read: file.ts - click to collapse');
+    });
+
+    it('should set aria-label for initially expanded with baseAriaLabel', () => {
+      setupCollapsible(wrapper, header, content, state, {
+        initiallyExpanded: true,
+        baseAriaLabel: 'Tool',
+      });
+
+      expect(header.getAttribute('aria-label')).toBe('Tool - click to collapse');
+    });
+
+    it('should not set aria-label without baseAriaLabel', () => {
+      setupCollapsible(wrapper, header, content, state);
+
+      expect(header.getAttribute('aria-label')).toBeNull();
+    });
+  });
+
+  describe('collapseElement', () => {
+    it('should collapse an expanded element', () => {
+      state.isExpanded = true;
+      wrapper.addClass('expanded');
+      content.style.display = 'block';
+      header.setAttribute('aria-expanded', 'true');
+
+      collapseElement(wrapper, header, content, state);
+
+      expect(state.isExpanded).toBe(false);
+      expect(wrapper.hasClass('expanded')).toBe(false);
+      expect(content.hasClass('claudian-hidden')).toBe(true);
+      expect(header.getAttribute('aria-expanded')).toBe('false');
+    });
+
+    it('should be safe to call on already collapsed element', () => {
+      collapseElement(wrapper, header, content, state);
+
+      expect(state.isExpanded).toBe(false);
+      expect(content.hasClass('claudian-hidden')).toBe(true);
+    });
+  });
+});