feat(renderer): Sidebar, FileTree, Outline components wired into AppShell

2026-08-02 18:10:18 +05:30 · 2026-06-05 14:59:15 +05:30
parent 77c8e05fa5
commit 05bbb9f86b
9 changed files with 1240 additions and 2 deletions
@@ -0,0 +1,75 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { ThemeProvider } from '@/components/theme-provider';
+import { Outline } from '@/components/sidebar/Outline';
+import { useEditorStore } from '@/stores/editor-store';
+
+describe('Outline', () => {
+  beforeEach(() => {
+    useEditorStore.setState({ buffers: new Map(), activeId: null });
+  });
+
+  it('renders "No file open" when no active buffer', () => {
+    render(
+      <ThemeProvider defaultTheme="dark" attribute="class">
+        <Outline />
+      </ThemeProvider>
+    );
+    expect(screen.getByText(/no file open/i)).toBeInTheDocument();
+  });
+
+  it('renders H1-H6 headings from the active buffer content', () => {
+    const buffers = new Map([
+      [
+        'b1',
+        {
+          id: 'b1',
+          path: '/x.md',
+          content: '# Hello\n## World\n### Foo\n#### Bar\n##### Baz\n###### Qux',
+          dirty: false,
+        },
+      ],
+    ]);
+    useEditorStore.setState({ buffers, activeId: 'b1' });
+
+    render(
+      <ThemeProvider defaultTheme="dark" attribute="class">
+        <Outline />
+      </ThemeProvider>
+    );
+
+    expect(screen.getByText('Hello')).toBeInTheDocument();
+    expect(screen.getByText('World')).toBeInTheDocument();
+    expect(screen.getByText('Foo')).toBeInTheDocument();
+    expect(screen.getByText('Bar')).toBeInTheDocument();
+    expect(screen.getByText('Baz')).toBeInTheDocument();
+    expect(screen.getByText('Qux')).toBeInTheDocument();
+  });
+
+  it('renders headings with level-based indent', () => {
+    const buffers = new Map([
+      [
+        'b1',
+        {
+          id: 'b1',
+          path: '/x.md',
+          content: '# Title\n## Subtitle\n### Section',
+          dirty: false,
+        },
+      ],
+    ]);
+    useEditorStore.setState({ buffers, activeId: 'b1' });
+
+    render(
+      <ThemeProvider defaultTheme="dark" attribute="class">
+        <Outline />
+      </ThemeProvider>
+    );
+
+    const buttons = screen.getAllByRole('button');
+    // H1 has paddingLeft 8px, H2 has24px, H3 has 40px
+    expect(buttons[0]).toHaveStyle('padding-left: 8px');
+    expect(buttons[1]).toHaveStyle('padding-left: 24px');
+    expect(buttons[2]).toHaveStyle('padding-left: 40px');
+  });
+});