import React from 'react'; import { describe, it, expect, beforeEach, vi } from 'vitest'; import { render, screen, fireEvent, act } from '@testing-library/react'; import { GitSidebar } from '../../../src/renderer/components/GitSidebar/GitSidebar'; import { useAppStore } from '../../../src/renderer/store'; const getStore = () => useAppStore.getState(); describe('GitSidebar', () => { beforeEach(() => { vi.clearAllMocks(); useAppStore.setState({ activeProject: { id: 'project-1', name: 'Test Project', slug: 'test-project', isActive: true, createdAt: new Date().toISOString(), updatedAt: new Date().toISOString(), }, tabs: [], activeTabId: null, }); (window as any).electronAPI = { ...(window as any).electronAPI, app: { ...(window as any).electronAPI?.app, getDefaultProjectPath: vi.fn().mockResolvedValue('/repo/path'), }, git: { checkAvailability: vi.fn().mockResolvedValue({ gitFound: true, version: '2.49.0' }), getRepoState: vi.fn().mockResolvedValue({ isRepo: false, hasRemote: false }), getStatus: vi.fn().mockResolvedValue({ files: [], counts: { untracked: 0, modified: 0, deleted: 0, renamed: 0, staged: 0, total: 0 } }), getDiff: vi.fn().mockResolvedValue({ filePath: 'posts/a.md', patch: 'diff --git a/posts/a.md b/posts/a.md' }), getDiffContent: vi.fn().mockResolvedValue({ filePath: 'posts/a.md', original: '', modified: '' }), getCommitDiffContent: vi.fn().mockResolvedValue({ commitHash: 'abc123', original: '', modified: '' }), getHistory: vi.fn().mockResolvedValue([]), fetch: vi.fn().mockResolvedValue({ success: true }), pull: vi.fn().mockResolvedValue({ success: true }), push: vi.fn().mockResolvedValue({ success: true }), commitAll: vi.fn().mockResolvedValue({ success: true }), init: vi.fn().mockResolvedValue({ success: true }), ensureGitignore: vi.fn().mockResolvedValue({ updated: false, created: false, addedEntries: [] }), onInitProgress: vi.fn().mockImplementation(() => () => {}), }, }; }); it('does not modify gitignore when sidebar loads', async () => { render(); await screen.findByRole('button', { name: /initialize git/i }); expect((window as any).electronAPI.git.ensureGitignore).not.toHaveBeenCalled(); }); it('shows Initialize Git button when active project is not a git repository', async () => { render(); expect(await screen.findByRole('button', { name: /initialize git/i })).toBeInTheDocument(); }); it('renders open changes list when repository exists', async () => { (window as any).electronAPI.git.getRepoState = vi.fn().mockResolvedValue({ isRepo: true, rootPath: '/repo/path', currentBranch: 'main', hasRemote: true, }); (window as any).electronAPI.git.getStatus = vi.fn().mockResolvedValue({ files: [ { path: 'posts/first.md', status: 'modified' }, { path: 'posts/second.md', status: 'untracked' }, ], counts: { untracked: 1, modified: 1, deleted: 0, renamed: 0, staged: 0, total: 2 }, }); (window as any).electronAPI.git.getHistory = vi.fn().mockResolvedValue([ { hash: 'abc123', shortHash: 'abc123', date: '2026-02-16T10:00:00.000Z', subject: 'feat: add git sidebar', author: 'Dev One', }, ]); render(); expect(await screen.findByText(/open changes/i)).toBeInTheDocument(); expect(screen.getByText('posts/first.md')).toBeInTheDocument(); expect(screen.getByText('posts/second.md')).toBeInTheDocument(); expect(screen.getByText(/version history/i)).toBeInTheDocument(); expect(screen.getByText(/feat: add git sidebar/i)).toBeInTheDocument(); expect(screen.getByText(/abc123/i)).toBeInTheDocument(); }); it('uses the same section-title class as posts published heading', async () => { (window as any).electronAPI.git.getRepoState = vi.fn().mockResolvedValue({ isRepo: true, rootPath: '/repo/path', currentBranch: 'main', hasRemote: true, }); render(); const openChangesHeader = await screen.findByText(/open changes/i); const historyHeader = screen.getByText(/version history/i); expect(openChangesHeader).toHaveClass('sidebar-section-title'); expect(historyHeader).toHaveClass('sidebar-section-title'); }); it('single click opens and reuses a transient git-diff tab', async () => { (window as any).electronAPI.git.getRepoState = vi.fn().mockResolvedValue({ isRepo: true, rootPath: '/repo/path', currentBranch: 'main', hasRemote: true, }); (window as any).electronAPI.git.getStatus = vi.fn().mockResolvedValue({ files: [ { path: 'posts/first.md', status: 'modified' }, { path: 'posts/second.md', status: 'untracked' }, ], counts: { untracked: 1, modified: 1, deleted: 0, renamed: 0, staged: 0, total: 2 }, }); render(); const first = await screen.findByRole('button', { name: /posts\/first\.md/i }); const second = screen.getByRole('button', { name: /posts\/second\.md/i }); await act(async () => { fireEvent.click(first); }); expect(getStore().tabs).toHaveLength(1); expect(getStore().tabs[0]).toMatchObject({ type: 'git-diff', id: 'git-diff:posts/first.md', isTransient: true }); await act(async () => { fireEvent.click(second); }); expect(getStore().tabs).toHaveLength(1); expect(getStore().tabs[0]).toMatchObject({ type: 'git-diff', id: 'git-diff:posts/second.md', isTransient: true }); }); it('double click opens a persistent git-diff tab', async () => { (window as any).electronAPI.git.getRepoState = vi.fn().mockResolvedValue({ isRepo: true, rootPath: '/repo/path', currentBranch: 'main', hasRemote: true, }); (window as any).electronAPI.git.getStatus = vi.fn().mockResolvedValue({ files: [{ path: 'posts/first.md', status: 'modified' }], counts: { untracked: 0, modified: 1, deleted: 0, renamed: 0, staged: 0, total: 1 }, }); render(); const first = await screen.findByRole('button', { name: /posts\/first\.md/i }); await act(async () => { fireEvent.doubleClick(first); }); expect(getStore().tabs).toHaveLength(1); expect(getStore().tabs[0]).toMatchObject({ type: 'git-diff', id: 'git-diff:posts/first.md', isTransient: false }); }); it('single click on a commit opens a transient git-diff commit tab', async () => { (window as any).electronAPI.git.getRepoState = vi.fn().mockResolvedValue({ isRepo: true, rootPath: '/repo/path', currentBranch: 'main', hasRemote: true, }); (window as any).electronAPI.git.getHistory = vi.fn().mockResolvedValue([ { hash: 'abc123def456', shortHash: 'abc123d', date: '2026-02-16T10:00:00.000Z', subject: 'feat: add sidebar history click', author: 'Dev One', }, ]); render(); const commitItem = await screen.findByRole('button', { name: /feat: add sidebar history click/i }); await act(async () => { fireEvent.click(commitItem); }); expect(getStore().tabs).toHaveLength(1); expect(getStore().tabs[0]).toMatchObject({ type: 'git-diff', id: 'git-diff:commit:abc123def456', isTransient: true, }); }); it('double click on a commit opens a persistent git-diff commit tab', async () => { (window as any).electronAPI.git.getRepoState = vi.fn().mockResolvedValue({ isRepo: true, rootPath: '/repo/path', currentBranch: 'main', hasRemote: true, }); (window as any).electronAPI.git.getHistory = vi.fn().mockResolvedValue([ { hash: 'abc123def456', shortHash: 'abc123d', date: '2026-02-16T10:00:00.000Z', subject: 'feat: add sidebar history click', author: 'Dev One', }, ]); render(); const commitItem = await screen.findByRole('button', { name: /feat: add sidebar history click/i }); await act(async () => { fireEvent.doubleClick(commitItem); }); expect(getStore().tabs).toHaveLength(1); expect(getStore().tabs[0]).toMatchObject({ type: 'git-diff', id: 'git-diff:commit:abc123def456', isTransient: false, }); }); it('initializes repository and refreshes repo state after clicking Initialize Git', async () => { const getRepoStateMock = vi .fn() .mockResolvedValueOnce({ isRepo: false, hasRemote: false }) .mockResolvedValueOnce({ isRepo: true, rootPath: '/repo/path', currentBranch: 'main', hasRemote: true }); (window as any).electronAPI.git.getRepoState = getRepoStateMock; (window as any).electronAPI.git.init = vi.fn().mockResolvedValue({ success: true }); render(); const initButton = await screen.findByRole('button', { name: /initialize git/i }); await act(async () => { fireEvent.click(initButton); }); await vi.waitFor(() => { expect((window as any).electronAPI.git.init).toHaveBeenCalledWith('/repo/path'); }); await vi.waitFor(() => { expect(screen.getByText(/open changes/i)).toBeInTheDocument(); }); }); it('passes remote url to init when user provides one', async () => { (window as any).electronAPI.git.init = vi.fn().mockResolvedValue({ success: true }); (window as any).electronAPI.git.getRepoState = vi .fn() .mockResolvedValueOnce({ isRepo: false, hasRemote: false }) .mockResolvedValueOnce({ isRepo: true, rootPath: '/repo/path', currentBranch: 'main', hasRemote: true }); render(); const remoteInput = await screen.findByPlaceholderText(/optional remote repository url/i); await act(async () => { fireEvent.change(remoteInput, { target: { value: 'https://github.com/example/repo.git' } }); }); expect((remoteInput as HTMLInputElement).value).toBe('https://github.com/example/repo.git'); const initButton = screen.getByRole('button', { name: /initialize git/i }); await act(async () => { fireEvent.click(initButton); }); await vi.waitFor(() => { expect((window as any).electronAPI.git.init).toHaveBeenCalledWith('/repo/path', 'https://github.com/example/repo.git'); }); }); it('shows detailed progress feedback while initialization is running', async () => { let resolveInit: ((value: { success: boolean }) => void) | null = null; (window as any).electronAPI.git.init = vi.fn().mockImplementation( () => new Promise((resolve) => { resolveInit = resolve; }), ); render(); const initButton = await screen.findByRole('button', { name: /initialize git/i }); await act(async () => { fireEvent.click(initButton); }); expect(screen.getByText(/preparing repository initialization/i)).toBeInTheDocument(); expect(screen.getByRole('button', { name: /initializing/i })).toBeDisabled(); await act(async () => { resolveInit?.({ success: true }); }); }); it('updates progress detail text from init progress events', async () => { let resolveInit: ((value: { success: boolean }) => void) | null = null; (window as any).electronAPI.git.init = vi.fn().mockImplementation( () => new Promise((resolve) => { resolveInit = resolve; }), ); render(); const onInitProgressMock = (window as any).electronAPI.git.onInitProgress as ReturnType; const subscription = onInitProgressMock.mock.calls[0][0] as (payload: { message: string }) => void; const initButton = await screen.findByRole('button', { name: /initialize git/i }); await act(async () => { fireEvent.click(initButton); }); await act(async () => { subscription({ message: 'Staging project files...', progress: 75 }); }); expect(screen.getByText(/staging project files\.\.\.\s*\(75%\)/i)).toBeInTheDocument(); await act(async () => { resolveInit?.({ success: true }); }); }); it('renders a compact transcript of initialization steps', async () => { let resolveInit: ((value: { success: boolean }) => void) | null = null; (window as any).electronAPI.git.init = vi.fn().mockImplementation( () => new Promise((resolve) => { resolveInit = resolve; }), ); render(); const onInitProgressMock = (window as any).electronAPI.git.onInitProgress as ReturnType; const subscription = onInitProgressMock.mock.calls[0][0] as (payload: { message: string; progress: number }) => void; const initButton = await screen.findByRole('button', { name: /initialize git/i }); await act(async () => { fireEvent.click(initButton); }); await act(async () => { subscription({ message: 'Checking Git availability...', progress: 5 }); subscription({ message: 'Initializing repository...', progress: 15 }); }); const transcriptToggle = screen.getByRole('button', { name: /initialization transcript/i }); expect(transcriptToggle).toBeInTheDocument(); expect(transcriptToggle).toHaveAttribute('aria-expanded', 'false'); expect(screen.queryByText(/5% — checking git availability/i)).not.toBeInTheDocument(); await act(async () => { fireEvent.click(transcriptToggle); }); expect(transcriptToggle).toHaveAttribute('aria-expanded', 'true'); expect(screen.getByText(/5% — checking git availability/i)).toBeInTheDocument(); expect(screen.getByText(/15% — initializing repository/i)).toBeInTheDocument(); await act(async () => { resolveInit?.({ success: true }); }); }); it('auto-expands transcript when a failed progress event is received', async () => { render(); const onInitProgressMock = (window as any).electronAPI.git.onInitProgress as ReturnType; const subscription = onInitProgressMock.mock.calls[0][0] as (payload: { phase: string; message: string; progress: number }) => void; await act(async () => { subscription({ phase: 'failed', message: 'Failed to configure remote repository.', progress: 100 }); }); const transcriptToggle = screen.getByRole('button', { name: /initialization transcript/i }); expect(transcriptToggle).toHaveAttribute('aria-expanded', 'true'); expect(screen.getByText(/100% — failed to configure remote repository/i)).toBeInTheDocument(); }); it('wires fetch, pull, and push buttons', async () => { (window as any).electronAPI.git.getRepoState = vi.fn().mockResolvedValue({ isRepo: true, rootPath: '/repo/path', currentBranch: 'main', hasRemote: true, }); render(); const fetchButton = await screen.findByRole('button', { name: /fetch/i }); const pullButton = screen.getByRole('button', { name: /pull/i }); const pushButton = screen.getByRole('button', { name: /push/i }); await act(async () => { fireEvent.click(fetchButton); fireEvent.click(pullButton); fireEvent.click(pushButton); }); expect((window as any).electronAPI.git.fetch).toHaveBeenCalledWith('/repo/path'); expect((window as any).electronAPI.git.pull).toHaveBeenCalledWith('/repo/path'); expect((window as any).electronAPI.git.push).toHaveBeenCalledWith('/repo/path'); }); it('commits all changes and closes open git-diff tabs', async () => { (window as any).electronAPI.git.getRepoState = vi.fn().mockResolvedValue({ isRepo: true, rootPath: '/repo/path', currentBranch: 'main', hasRemote: true, }); useAppStore.setState({ tabs: [ { type: 'git-diff', id: 'git-diff:posts/first.md', isTransient: false }, { type: 'post', id: 'post-1', isTransient: false }, { type: 'git-diff', id: 'git-diff:posts/second.md', isTransient: true }, ], activeTabId: 'git-diff:posts/first.md', }); render(); const commitInput = await screen.findByPlaceholderText(/commit message/i); await act(async () => { fireEvent.change(commitInput, { target: { value: 'feat: commit from sidebar' } }); }); const commitButton = screen.getByRole('button', { name: /^commit$/i }); await act(async () => { fireEvent.click(commitButton); }); expect((window as any).electronAPI.git.commitAll).toHaveBeenCalledWith('/repo/path', 'feat: commit from sidebar'); expect(getStore().tabs).toEqual([ { type: 'post', id: 'post-1', isTransient: false }, ]); }); it('shows auth guidance when fetch fails due to authentication', async () => { (window as any).electronAPI.git.getRepoState = vi.fn().mockResolvedValue({ isRepo: true, rootPath: '/repo/path', currentBranch: 'main', hasRemote: true, }); (window as any).electronAPI.git.fetch = vi.fn().mockResolvedValue({ success: false, code: 'auth-required', error: 'Authentication required for remote Git action. Detected provider: GitHub.', guidance: [ 'Create a GitHub Personal Access Token.', 'Retry with username + token.', ], }); render(); const fetchButton = await screen.findByRole('button', { name: /fetch/i }); await act(async () => { fireEvent.click(fetchButton); }); expect(await screen.findByText(/authentication required/i)).toBeInTheDocument(); expect(screen.getAllByText(/create a github personal access token/i)).toHaveLength(1); expect(screen.getByText(/retry with username \+ token/i)).toBeInTheDocument(); }); it('shows in-progress feedback while push is running', async () => { let resolvePush: ((value: { success: boolean }) => void) | null = null; (window as any).electronAPI.git.getRepoState = vi.fn().mockResolvedValue({ isRepo: true, rootPath: '/repo/path', currentBranch: 'main', hasRemote: true, }); (window as any).electronAPI.git.push = vi.fn().mockImplementation( () => new Promise((resolve) => { resolvePush = resolve; }), ); render(); const pushButton = await screen.findByRole('button', { name: /push/i }); await act(async () => { fireEvent.click(pushButton); }); expect(screen.getByRole('status')).toHaveTextContent(/pushing commits to remote/i); expect(screen.getByRole('button', { name: /pushing/i })).toBeDisabled(); await act(async () => { resolvePush?.({ success: true }); }); }); });