mirror of
https://github.com/lordmathis/lemma.git
synced 2025-11-05 15:44:21 +00:00
Add tests for Header, Layout, MainContent, and Sidebar components
This commit is contained in:
62
app/src/components/layout/Header.test.tsx
Normal file
62
app/src/components/layout/Header.test.tsx
Normal file
@@ -0,0 +1,62 @@
|
||||
import { describe, it, expect, vi } from 'vitest';
|
||||
import { render } from '../../test/utils';
|
||||
import Header from './Header';
|
||||
|
||||
// Mock the child components
|
||||
vi.mock('../navigation/UserMenu', () => ({
|
||||
default: () => <div data-testid="user-menu">User Menu</div>,
|
||||
}));
|
||||
|
||||
vi.mock('../navigation/WorkspaceSwitcher', () => ({
|
||||
default: () => <div data-testid="workspace-switcher">Workspace Switcher</div>,
|
||||
}));
|
||||
|
||||
vi.mock('../settings/workspace/WorkspaceSettings', () => ({
|
||||
default: () => <div data-testid="workspace-settings">Workspace Settings</div>,
|
||||
}));
|
||||
|
||||
const TestWrapper = ({ children }: { children: React.ReactNode }) => (
|
||||
<div>{children}</div>
|
||||
);
|
||||
|
||||
describe('Header', () => {
|
||||
it('renders the app title', () => {
|
||||
const { getByText } = render(
|
||||
<TestWrapper>
|
||||
<Header />
|
||||
</TestWrapper>
|
||||
);
|
||||
|
||||
expect(getByText('Lemma')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders user menu component', () => {
|
||||
const { getByTestId } = render(
|
||||
<TestWrapper>
|
||||
<Header />
|
||||
</TestWrapper>
|
||||
);
|
||||
|
||||
expect(getByTestId('user-menu')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders workspace switcher component', () => {
|
||||
const { getByTestId } = render(
|
||||
<TestWrapper>
|
||||
<Header />
|
||||
</TestWrapper>
|
||||
);
|
||||
|
||||
expect(getByTestId('workspace-switcher')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders workspace settings component', () => {
|
||||
const { getByTestId } = render(
|
||||
<TestWrapper>
|
||||
<Header />
|
||||
</TestWrapper>
|
||||
);
|
||||
|
||||
expect(getByTestId('workspace-settings')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
159
app/src/components/layout/Layout.test.tsx
Normal file
159
app/src/components/layout/Layout.test.tsx
Normal file
@@ -0,0 +1,159 @@
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest';
|
||||
import { render } from '../../test/utils';
|
||||
import Layout from './Layout';
|
||||
import { Theme, type FileNode } from '../../types/models';
|
||||
|
||||
// Mock child components
|
||||
vi.mock('./Header', () => ({
|
||||
default: () => <div data-testid="header">Header</div>,
|
||||
}));
|
||||
|
||||
vi.mock('./Sidebar', () => ({
|
||||
default: () => <div data-testid="sidebar">Sidebar</div>,
|
||||
}));
|
||||
|
||||
vi.mock('./MainContent', () => ({
|
||||
default: () => <div data-testid="main-content">Main Content</div>,
|
||||
}));
|
||||
|
||||
// Mock hooks
|
||||
vi.mock('../../hooks/useFileNavigation', () => ({
|
||||
useFileNavigation: vi.fn(),
|
||||
}));
|
||||
|
||||
vi.mock('../../hooks/useFileList', () => ({
|
||||
useFileList: vi.fn(),
|
||||
}));
|
||||
|
||||
vi.mock('../../hooks/useWorkspace', () => ({
|
||||
useWorkspace: vi.fn(),
|
||||
}));
|
||||
|
||||
const TestWrapper = ({ children }: { children: React.ReactNode }) => (
|
||||
<div>{children}</div>
|
||||
);
|
||||
|
||||
describe('Layout', () => {
|
||||
const mockHandleFileSelect = vi.fn();
|
||||
const mockLoadFileList = vi.fn();
|
||||
|
||||
const mockCurrentWorkspace = {
|
||||
id: 1,
|
||||
name: 'Test Workspace',
|
||||
createdAt: '2024-01-01T00:00:00Z',
|
||||
gitEnabled: true,
|
||||
gitAutoCommit: false,
|
||||
theme: Theme.Light,
|
||||
autoSave: true,
|
||||
showHiddenFiles: false,
|
||||
gitUrl: '',
|
||||
gitBranch: 'main',
|
||||
gitUsername: '',
|
||||
gitEmail: '',
|
||||
gitToken: '',
|
||||
gitUser: '',
|
||||
gitCommitMsgTemplate: '',
|
||||
gitCommitName: '',
|
||||
gitCommitEmail: '',
|
||||
};
|
||||
|
||||
const mockFiles: FileNode[] = [
|
||||
{
|
||||
id: '1',
|
||||
name: 'README.md',
|
||||
path: 'README.md',
|
||||
},
|
||||
];
|
||||
|
||||
beforeEach(async () => {
|
||||
vi.clearAllMocks();
|
||||
|
||||
const { useWorkspace } = await import('../../hooks/useWorkspace');
|
||||
vi.mocked(useWorkspace).mockReturnValue({
|
||||
currentWorkspace: mockCurrentWorkspace,
|
||||
workspaces: [],
|
||||
settings: mockCurrentWorkspace,
|
||||
updateSettings: vi.fn(),
|
||||
loading: false,
|
||||
colorScheme: 'light',
|
||||
updateColorScheme: vi.fn(),
|
||||
switchWorkspace: vi.fn(),
|
||||
deleteCurrentWorkspace: vi.fn(),
|
||||
});
|
||||
|
||||
const { useFileNavigation } = await import('../../hooks/useFileNavigation');
|
||||
vi.mocked(useFileNavigation).mockReturnValue({
|
||||
selectedFile: 'README.md',
|
||||
isNewFile: false,
|
||||
handleFileSelect: mockHandleFileSelect,
|
||||
});
|
||||
|
||||
const { useFileList } = await import('../../hooks/useFileList');
|
||||
vi.mocked(useFileList).mockReturnValue({
|
||||
files: mockFiles,
|
||||
loadFileList: mockLoadFileList,
|
||||
});
|
||||
});
|
||||
|
||||
it('renders all layout components when workspace is loaded', () => {
|
||||
const { getByTestId } = render(
|
||||
<TestWrapper>
|
||||
<Layout />
|
||||
</TestWrapper>
|
||||
);
|
||||
|
||||
expect(getByTestId('header')).toBeInTheDocument();
|
||||
expect(getByTestId('sidebar')).toBeInTheDocument();
|
||||
expect(getByTestId('main-content')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows loading spinner when workspace is loading', async () => {
|
||||
const { useWorkspace } = await import('../../hooks/useWorkspace');
|
||||
vi.mocked(useWorkspace).mockReturnValue({
|
||||
currentWorkspace: mockCurrentWorkspace,
|
||||
workspaces: [],
|
||||
settings: mockCurrentWorkspace,
|
||||
updateSettings: vi.fn(),
|
||||
loading: true,
|
||||
colorScheme: 'light',
|
||||
updateColorScheme: vi.fn(),
|
||||
switchWorkspace: vi.fn(),
|
||||
deleteCurrentWorkspace: vi.fn(),
|
||||
});
|
||||
|
||||
const { getByRole } = render(
|
||||
<TestWrapper>
|
||||
<Layout />
|
||||
</TestWrapper>
|
||||
);
|
||||
|
||||
expect(
|
||||
getByRole('status', { name: 'Loading workspace' })
|
||||
).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows no workspace message when no current workspace', async () => {
|
||||
const { useWorkspace } = await import('../../hooks/useWorkspace');
|
||||
vi.mocked(useWorkspace).mockReturnValue({
|
||||
currentWorkspace: null,
|
||||
workspaces: [],
|
||||
settings: mockCurrentWorkspace,
|
||||
updateSettings: vi.fn(),
|
||||
loading: false,
|
||||
colorScheme: 'light',
|
||||
updateColorScheme: vi.fn(),
|
||||
switchWorkspace: vi.fn(),
|
||||
deleteCurrentWorkspace: vi.fn(),
|
||||
});
|
||||
|
||||
const { getByText } = render(
|
||||
<TestWrapper>
|
||||
<Layout />
|
||||
</TestWrapper>
|
||||
);
|
||||
|
||||
expect(
|
||||
getByText('No workspace found. Please create a workspace.')
|
||||
).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
@@ -14,7 +14,11 @@ const Layout: React.FC = () => {
|
||||
|
||||
if (workspaceLoading) {
|
||||
return (
|
||||
<Center style={{ height: '100vh' }}>
|
||||
<Center
|
||||
style={{ height: '100vh' }}
|
||||
role="status"
|
||||
aria-label="Loading workspace"
|
||||
>
|
||||
<Loader size="xl" />
|
||||
</Center>
|
||||
);
|
||||
|
||||
159
app/src/components/layout/MainContent.test.tsx
Normal file
159
app/src/components/layout/MainContent.test.tsx
Normal file
@@ -0,0 +1,159 @@
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest';
|
||||
import { render } from '../../test/utils';
|
||||
import MainContent from './MainContent';
|
||||
|
||||
// Mock child components
|
||||
vi.mock('../editor/ContentView', () => ({
|
||||
default: ({
|
||||
activeTab,
|
||||
selectedFile,
|
||||
}: {
|
||||
activeTab: string;
|
||||
selectedFile: string | null;
|
||||
}) => (
|
||||
<div data-testid="content-view">
|
||||
Content View - {activeTab} - {selectedFile || 'No file'}
|
||||
</div>
|
||||
),
|
||||
}));
|
||||
|
||||
vi.mock('../modals/file/CreateFileModal', () => ({
|
||||
default: () => <div data-testid="create-file-modal">Create File Modal</div>,
|
||||
}));
|
||||
|
||||
vi.mock('../modals/file/DeleteFileModal', () => ({
|
||||
default: () => <div data-testid="delete-file-modal">Delete File Modal</div>,
|
||||
}));
|
||||
|
||||
vi.mock('../modals/git/CommitMessageModal', () => ({
|
||||
default: () => (
|
||||
<div data-testid="commit-message-modal">Commit Message Modal</div>
|
||||
),
|
||||
}));
|
||||
|
||||
// Mock hooks
|
||||
vi.mock('../../hooks/useFileContent', () => ({
|
||||
useFileContent: vi.fn(),
|
||||
}));
|
||||
|
||||
vi.mock('../../hooks/useFileOperations', () => ({
|
||||
useFileOperations: vi.fn(),
|
||||
}));
|
||||
|
||||
vi.mock('../../hooks/useGitOperations', () => ({
|
||||
useGitOperations: vi.fn(),
|
||||
}));
|
||||
|
||||
const TestWrapper = ({ children }: { children: React.ReactNode }) => (
|
||||
<div>{children}</div>
|
||||
);
|
||||
|
||||
describe('MainContent', () => {
|
||||
const mockHandleFileSelect = vi.fn();
|
||||
const mockLoadFileList = vi.fn();
|
||||
const mockHandleContentChange = vi.fn();
|
||||
const mockSetHasUnsavedChanges = vi.fn();
|
||||
const mockHandleSave = vi.fn();
|
||||
const mockHandleCreate = vi.fn();
|
||||
const mockHandleDelete = vi.fn();
|
||||
const mockHandleCommitAndPush = vi.fn();
|
||||
|
||||
beforeEach(async () => {
|
||||
vi.clearAllMocks();
|
||||
|
||||
const { useFileContent } = await import('../../hooks/useFileContent');
|
||||
vi.mocked(useFileContent).mockReturnValue({
|
||||
content: 'Test content',
|
||||
setContent: vi.fn(),
|
||||
hasUnsavedChanges: false,
|
||||
setHasUnsavedChanges: mockSetHasUnsavedChanges,
|
||||
loadFileContent: vi.fn(),
|
||||
handleContentChange: mockHandleContentChange,
|
||||
});
|
||||
|
||||
const { useFileOperations } = await import('../../hooks/useFileOperations');
|
||||
vi.mocked(useFileOperations).mockReturnValue({
|
||||
handleSave: mockHandleSave,
|
||||
handleCreate: mockHandleCreate,
|
||||
handleDelete: mockHandleDelete,
|
||||
});
|
||||
|
||||
const { useGitOperations } = await import('../../hooks/useGitOperations');
|
||||
vi.mocked(useGitOperations).mockReturnValue({
|
||||
handlePull: vi.fn(),
|
||||
handleCommitAndPush: mockHandleCommitAndPush,
|
||||
});
|
||||
});
|
||||
|
||||
it('shows breadcrumbs for selected file', () => {
|
||||
const { getByText } = render(
|
||||
<TestWrapper>
|
||||
<MainContent
|
||||
selectedFile="docs/guide.md"
|
||||
handleFileSelect={mockHandleFileSelect}
|
||||
loadFileList={mockLoadFileList}
|
||||
/>
|
||||
</TestWrapper>
|
||||
);
|
||||
|
||||
expect(getByText('docs')).toBeInTheDocument();
|
||||
expect(getByText('guide.md')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows unsaved changes indicator when file has changes', async () => {
|
||||
const { useFileContent } = await import('../../hooks/useFileContent');
|
||||
vi.mocked(useFileContent).mockReturnValue({
|
||||
content: 'Test content',
|
||||
setContent: vi.fn(),
|
||||
hasUnsavedChanges: true,
|
||||
setHasUnsavedChanges: mockSetHasUnsavedChanges,
|
||||
loadFileContent: vi.fn(),
|
||||
handleContentChange: mockHandleContentChange,
|
||||
});
|
||||
|
||||
const { container } = render(
|
||||
<TestWrapper>
|
||||
<MainContent
|
||||
selectedFile="test.md"
|
||||
handleFileSelect={mockHandleFileSelect}
|
||||
loadFileList={mockLoadFileList}
|
||||
/>
|
||||
</TestWrapper>
|
||||
);
|
||||
|
||||
// Should show unsaved changes indicator (yellow dot)
|
||||
const indicator = container.querySelector('svg[style*="yellow"]');
|
||||
expect(indicator).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders all modal components', () => {
|
||||
const { getByTestId } = render(
|
||||
<TestWrapper>
|
||||
<MainContent
|
||||
selectedFile="test.md"
|
||||
handleFileSelect={mockHandleFileSelect}
|
||||
loadFileList={mockLoadFileList}
|
||||
/>
|
||||
</TestWrapper>
|
||||
);
|
||||
|
||||
expect(getByTestId('create-file-modal')).toBeInTheDocument();
|
||||
expect(getByTestId('delete-file-modal')).toBeInTheDocument();
|
||||
expect(getByTestId('commit-message-modal')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('handles no selected file', () => {
|
||||
const { getByTestId } = render(
|
||||
<TestWrapper>
|
||||
<MainContent
|
||||
selectedFile={null}
|
||||
handleFileSelect={mockHandleFileSelect}
|
||||
loadFileList={mockLoadFileList}
|
||||
/>
|
||||
</TestWrapper>
|
||||
);
|
||||
|
||||
const contentView = getByTestId('content-view');
|
||||
expect(contentView).toHaveTextContent('Content View - source - No file');
|
||||
});
|
||||
});
|
||||
181
app/src/components/layout/Sidebar.test.tsx
Normal file
181
app/src/components/layout/Sidebar.test.tsx
Normal file
@@ -0,0 +1,181 @@
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest';
|
||||
import { render } from '../../test/utils';
|
||||
import Sidebar from './Sidebar';
|
||||
import { Theme, type FileNode } from '../../types/models';
|
||||
|
||||
// Mock the child components
|
||||
vi.mock('../files/FileActions', () => ({
|
||||
default: ({ selectedFile }: { selectedFile: string | null }) => (
|
||||
<div data-testid="file-actions">
|
||||
File Actions - {selectedFile || 'No file'}
|
||||
</div>
|
||||
),
|
||||
}));
|
||||
|
||||
vi.mock('../files/FileTree', () => ({
|
||||
default: ({
|
||||
files,
|
||||
showHiddenFiles,
|
||||
}: {
|
||||
files: FileNode[];
|
||||
showHiddenFiles: boolean;
|
||||
}) => (
|
||||
<div data-testid="file-tree">
|
||||
File Tree - {files.length} files - Hidden: {showHiddenFiles.toString()}
|
||||
</div>
|
||||
),
|
||||
}));
|
||||
|
||||
// Mock the hooks
|
||||
vi.mock('../../hooks/useGitOperations', () => ({
|
||||
useGitOperations: vi.fn(),
|
||||
}));
|
||||
|
||||
vi.mock('../../hooks/useWorkspace', () => ({
|
||||
useWorkspace: vi.fn(),
|
||||
}));
|
||||
|
||||
const TestWrapper = ({ children }: { children: React.ReactNode }) => (
|
||||
<div>{children}</div>
|
||||
);
|
||||
|
||||
describe('Sidebar', () => {
|
||||
const mockHandleFileSelect = vi.fn();
|
||||
const mockLoadFileList = vi.fn();
|
||||
const mockHandlePull = vi.fn();
|
||||
|
||||
const mockFiles: FileNode[] = [
|
||||
{
|
||||
id: '1',
|
||||
name: 'README.md',
|
||||
path: 'README.md',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: 'docs',
|
||||
path: 'docs',
|
||||
children: [],
|
||||
},
|
||||
];
|
||||
|
||||
const mockSettings = {
|
||||
gitEnabled: true,
|
||||
gitAutoCommit: false,
|
||||
theme: Theme.Light,
|
||||
autoSave: true,
|
||||
showHiddenFiles: false,
|
||||
gitUrl: '',
|
||||
gitBranch: 'main',
|
||||
gitUsername: '',
|
||||
gitEmail: '',
|
||||
gitToken: '',
|
||||
gitUser: '',
|
||||
gitCommitMsgTemplate: '',
|
||||
gitCommitName: '',
|
||||
gitCommitEmail: '',
|
||||
};
|
||||
|
||||
beforeEach(async () => {
|
||||
vi.clearAllMocks();
|
||||
|
||||
const { useGitOperations } = await import('../../hooks/useGitOperations');
|
||||
vi.mocked(useGitOperations).mockReturnValue({
|
||||
handlePull: mockHandlePull,
|
||||
handleCommitAndPush: vi.fn(),
|
||||
});
|
||||
|
||||
const { useWorkspace } = await import('../../hooks/useWorkspace');
|
||||
vi.mocked(useWorkspace).mockReturnValue({
|
||||
currentWorkspace: null,
|
||||
workspaces: [],
|
||||
settings: mockSettings,
|
||||
updateSettings: vi.fn(),
|
||||
loading: false,
|
||||
colorScheme: 'light',
|
||||
updateColorScheme: vi.fn(),
|
||||
switchWorkspace: vi.fn(),
|
||||
deleteCurrentWorkspace: vi.fn(),
|
||||
});
|
||||
});
|
||||
|
||||
it('renders child components', () => {
|
||||
const { getByTestId } = render(
|
||||
<TestWrapper>
|
||||
<Sidebar
|
||||
selectedFile="test.md"
|
||||
handleFileSelect={mockHandleFileSelect}
|
||||
files={mockFiles}
|
||||
loadFileList={mockLoadFileList}
|
||||
/>
|
||||
</TestWrapper>
|
||||
);
|
||||
|
||||
const fileActions = getByTestId('file-actions');
|
||||
expect(fileActions).toBeInTheDocument();
|
||||
expect(fileActions).toHaveTextContent('File Actions - test.md');
|
||||
|
||||
const fileTree = getByTestId('file-tree');
|
||||
expect(fileTree).toBeInTheDocument();
|
||||
expect(fileTree).toHaveTextContent('File Tree - 2 files - Hidden: false');
|
||||
});
|
||||
|
||||
it('passes showHiddenFiles setting to file tree', async () => {
|
||||
const { useWorkspace } = await import('../../hooks/useWorkspace');
|
||||
vi.mocked(useWorkspace).mockReturnValue({
|
||||
currentWorkspace: null,
|
||||
workspaces: [],
|
||||
settings: { ...mockSettings, showHiddenFiles: true },
|
||||
updateSettings: vi.fn(),
|
||||
loading: false,
|
||||
colorScheme: 'light',
|
||||
updateColorScheme: vi.fn(),
|
||||
switchWorkspace: vi.fn(),
|
||||
deleteCurrentWorkspace: vi.fn(),
|
||||
});
|
||||
|
||||
const { getByTestId } = render(
|
||||
<TestWrapper>
|
||||
<Sidebar
|
||||
selectedFile="test.md"
|
||||
handleFileSelect={mockHandleFileSelect}
|
||||
files={mockFiles}
|
||||
loadFileList={mockLoadFileList}
|
||||
/>
|
||||
</TestWrapper>
|
||||
);
|
||||
|
||||
const fileTree = getByTestId('file-tree');
|
||||
expect(fileTree).toHaveTextContent('File Tree - 2 files - Hidden: true');
|
||||
});
|
||||
|
||||
it('shows no file selected when selectedFile is null', () => {
|
||||
const { getByTestId } = render(
|
||||
<TestWrapper>
|
||||
<Sidebar
|
||||
selectedFile={null}
|
||||
handleFileSelect={mockHandleFileSelect}
|
||||
files={mockFiles}
|
||||
loadFileList={mockLoadFileList}
|
||||
/>
|
||||
</TestWrapper>
|
||||
);
|
||||
|
||||
const fileActions = getByTestId('file-actions');
|
||||
expect(fileActions).toHaveTextContent('File Actions - No file');
|
||||
});
|
||||
|
||||
it('calls loadFileList on mount', () => {
|
||||
render(
|
||||
<TestWrapper>
|
||||
<Sidebar
|
||||
selectedFile="test.md"
|
||||
handleFileSelect={mockHandleFileSelect}
|
||||
files={mockFiles}
|
||||
loadFileList={mockLoadFileList}
|
||||
/>
|
||||
</TestWrapper>
|
||||
);
|
||||
|
||||
expect(mockLoadFileList).toHaveBeenCalledOnce();
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user