275 lines
9.8 KiB
TypeScript
275 lines
9.8 KiB
TypeScript
/**
|
||
* Component Tests – RibbonBar, Topbar, StatusBar, LayerPanel, PropertiesPanel
|
||
* Testet Rendering, Button-Klicks und Callback-Aufrufe.
|
||
*/
|
||
import { describe, it, expect, vi } from 'vitest';
|
||
import { render, screen, fireEvent } from '@testing-library/react';
|
||
import RibbonBar from '../src/components/RibbonBar';
|
||
import Topbar from '../src/components/Topbar';
|
||
import StatusBar from '../src/components/StatusBar';
|
||
import LayerPanel from '../src/components/LayerPanel';
|
||
import PropertiesPanel from '../src/components/PropertiesPanel';
|
||
import type { CADElement, CADLayer } from '../src/types/cad.types';
|
||
|
||
// ─── Fixtures ────────────────────────────────────────
|
||
|
||
function makeLayer(overrides: Partial<CADLayer> = {}): CADLayer {
|
||
return {
|
||
id: 'layer-1',
|
||
name: 'Layer 1',
|
||
visible: true,
|
||
locked: false,
|
||
color: '#ffffff',
|
||
lineType: 'solid',
|
||
transparency: 0,
|
||
sortOrder: 0,
|
||
parentId: null,
|
||
...overrides,
|
||
};
|
||
}
|
||
|
||
function makeElement(overrides: Partial<CADElement> = {}): CADElement {
|
||
return {
|
||
id: 'elem-1',
|
||
type: 'rect',
|
||
layerId: 'layer-1',
|
||
x: 10,
|
||
y: 20,
|
||
width: 100,
|
||
height: 50,
|
||
properties: {},
|
||
...overrides,
|
||
};
|
||
}
|
||
|
||
// ─── RibbonBar ────────────────────────────────────────
|
||
|
||
describe('RibbonBar', () => {
|
||
it('should render all tab buttons', () => {
|
||
render(<RibbonBar activeTab="start" onTabChange={() => {}} onAction={() => {}} />);
|
||
// Tabs are in a tablist - use role=tab
|
||
const tabs = screen.getAllByRole('tab');
|
||
expect(tabs.length).toBeGreaterThanOrEqual(3);
|
||
expect(screen.getByText('Start')).toBeInTheDocument();
|
||
// 'Einfügen' appears as tab AND action - use getAllByText
|
||
const einfuegen = screen.getAllByText('Einfügen');
|
||
expect(einfuegen.length).toBeGreaterThanOrEqual(1);
|
||
});
|
||
|
||
it('should call onTabChange when clicking a tab', () => {
|
||
const onTabChange = vi.fn();
|
||
render(<RibbonBar activeTab="start" onTabChange={onTabChange} onAction={() => {}} />);
|
||
// Click the 'Format' tab (unique text)
|
||
fireEvent.click(screen.getByText('Format'));
|
||
expect(onTabChange).toHaveBeenCalledWith('format');
|
||
});
|
||
|
||
it('should call onAction when clicking an action button', () => {
|
||
const onAction = vi.fn();
|
||
render(<RibbonBar activeTab="start" onTabChange={() => {}} onAction={onAction} />);
|
||
// Find action buttons by class name
|
||
const actionBtns = document.querySelectorAll('.ribbon-btn');
|
||
if (actionBtns.length > 0) {
|
||
fireEvent.click(actionBtns[0]);
|
||
expect(onAction).toHaveBeenCalled();
|
||
}
|
||
});
|
||
});
|
||
|
||
// ─── Topbar ───────────────────────────────────────────
|
||
|
||
describe('Topbar', () => {
|
||
it('should render project name and saved status', () => {
|
||
render(
|
||
<Topbar projectName="Test Project" savedStatus="Gespeichert" onUndo={() => {}} onRedo={() => {}} onThemeToggle={() => {}} theme="dark" />,
|
||
);
|
||
expect(screen.getByText('Test Project')).toBeInTheDocument();
|
||
expect(screen.getByText('Gespeichert')).toBeInTheDocument();
|
||
});
|
||
|
||
it('should call onUndo when clicking undo button', () => {
|
||
const onUndo = vi.fn();
|
||
render(
|
||
<Topbar projectName="P" savedStatus="" onUndo={onUndo} onRedo={() => {}} onThemeToggle={() => {}} theme="dark" />,
|
||
);
|
||
fireEvent.click(screen.getByLabelText(/Rückgängig/i));
|
||
expect(onUndo).toHaveBeenCalled();
|
||
});
|
||
|
||
it('should call onRedo when clicking redo button', () => {
|
||
const onRedo = vi.fn();
|
||
render(
|
||
<Topbar projectName="P" savedStatus="" onUndo={() => {}} onRedo={onRedo} onThemeToggle={() => {}} theme="dark" />,
|
||
);
|
||
fireEvent.click(screen.getByLabelText(/Wiederherstellen/i));
|
||
expect(onRedo).toHaveBeenCalled();
|
||
});
|
||
|
||
it('should call onThemeToggle when clicking theme button', () => {
|
||
const onThemeToggle = vi.fn();
|
||
render(
|
||
<Topbar projectName="P" savedStatus="" onUndo={() => {}} onRedo={() => {}} onThemeToggle={onThemeToggle} theme="dark" />,
|
||
);
|
||
fireEvent.click(screen.getByLabelText(/Hell.*Dunkel|Theme/i));
|
||
expect(onThemeToggle).toHaveBeenCalled();
|
||
});
|
||
});
|
||
|
||
// ─── StatusBar ────────────────────────────────────────
|
||
|
||
describe('StatusBar', () => {
|
||
const defaultProps = {
|
||
snapEnabled: true,
|
||
orthoEnabled: false,
|
||
polarEnabled: true,
|
||
gridEnabled: false,
|
||
cursorX: 123.456,
|
||
cursorY: 78.9,
|
||
activeLayer: 'Layer 1',
|
||
activeTool: 'line',
|
||
onlineCount: 3,
|
||
onToggleSnap: vi.fn(),
|
||
onToggleOrtho: vi.fn(),
|
||
onTogglePolar: vi.fn(),
|
||
onToggleGrid: vi.fn(),
|
||
};
|
||
|
||
it('should render cursor coordinates', () => {
|
||
render(<StatusBar {...defaultProps} />);
|
||
expect(screen.getByText(/123/)).toBeInTheDocument();
|
||
expect(screen.getByText(/78/)).toBeInTheDocument();
|
||
});
|
||
|
||
it('should render active layer and tool', () => {
|
||
render(<StatusBar {...defaultProps} />);
|
||
expect(screen.getByText('Layer 1')).toBeInTheDocument();
|
||
expect(screen.getByText('line')).toBeInTheDocument();
|
||
});
|
||
|
||
it('should render online count', () => {
|
||
render(<StatusBar {...defaultProps} />);
|
||
// Online count is in a div with title containing 'online'
|
||
const onlineEl = screen.getByTitle(/online/i);
|
||
expect(onlineEl).toBeInTheDocument();
|
||
expect(onlineEl.textContent).toContain('3');
|
||
});
|
||
|
||
it('should call onToggleSnap when clicking snap toggle', () => {
|
||
const onToggleSnap = vi.fn();
|
||
render(<StatusBar {...defaultProps} onToggleSnap={onToggleSnap} />);
|
||
// StatusBar uses div with title attribute, not button with aria-label
|
||
fireEvent.click(screen.getByTitle(/Snap-Modus/i));
|
||
expect(onToggleSnap).toHaveBeenCalled();
|
||
});
|
||
|
||
it('should call onToggleOrtho when clicking ortho toggle', () => {
|
||
const onToggleOrtho = vi.fn();
|
||
render(<StatusBar {...defaultProps} onToggleOrtho={onToggleOrtho} />);
|
||
fireEvent.click(screen.getByTitle(/Ortho-Modus/i));
|
||
expect(onToggleOrtho).toHaveBeenCalled();
|
||
});
|
||
});
|
||
|
||
// ─── LayerPanel ──────────────────────────────────────
|
||
|
||
describe('LayerPanel', () => {
|
||
const layers = [
|
||
makeLayer({ id: 'layer-1', name: 'Wände' }),
|
||
makeLayer({ id: 'layer-2', name: 'Türen', visible: false }),
|
||
];
|
||
|
||
it('should render layer names', () => {
|
||
render(
|
||
<LayerPanel
|
||
layers={layers}
|
||
onSelectLayer={() => {}}
|
||
onAddLayer={() => {}}
|
||
onToggleLayer={() => {}}
|
||
/>,
|
||
);
|
||
expect(screen.getByText('Wände')).toBeInTheDocument();
|
||
expect(screen.getByText('Türen')).toBeInTheDocument();
|
||
});
|
||
|
||
it('should call onAddLayer when clicking add button', () => {
|
||
const onAddLayer = vi.fn();
|
||
render(
|
||
<LayerPanel
|
||
layers={layers}
|
||
onSelectLayer={() => {}}
|
||
onAddLayer={onAddLayer}
|
||
onToggleLayer={() => {}}
|
||
/>,
|
||
);
|
||
// Add button has class 'add-layer-btn'
|
||
const addBtn = document.querySelector('.add-layer-btn');
|
||
expect(addBtn).toBeTruthy();
|
||
fireEvent.click(addBtn!);
|
||
expect(onAddLayer).toHaveBeenCalled();
|
||
});
|
||
|
||
it('should call onSelectLayer when clicking a layer', () => {
|
||
const onSelectLayer = vi.fn();
|
||
render(
|
||
<LayerPanel
|
||
layers={layers}
|
||
activeLayerId="layer-1"
|
||
onSelectLayer={onSelectLayer}
|
||
onAddLayer={() => {}}
|
||
onToggleLayer={() => {}}
|
||
/>,
|
||
);
|
||
fireEvent.click(screen.getByText('Wände'));
|
||
expect(onSelectLayer).toHaveBeenCalledWith('layer-1');
|
||
});
|
||
|
||
it('should call onToggleLayer when toggling visibility', () => {
|
||
const onToggleLayer = vi.fn();
|
||
render(
|
||
<LayerPanel
|
||
layers={layers}
|
||
onSelectLayer={() => {}}
|
||
onAddLayer={() => {}}
|
||
onToggleLayer={onToggleLayer}
|
||
/>,
|
||
);
|
||
// Visibility toggle has aria-label 'Verstecken' (visible) or 'Anzeigen' (hidden)
|
||
const toggleBtn = screen.getByLabelText('Verstecken');
|
||
fireEvent.click(toggleBtn);
|
||
expect(onToggleLayer).toHaveBeenCalled();
|
||
});
|
||
});
|
||
|
||
// ─── PropertiesPanel ─────────────────────────────────
|
||
|
||
describe('PropertiesPanel', () => {
|
||
const layers = [makeLayer({ id: 'layer-1', name: 'Layer 1' })];
|
||
const element = makeElement({ id: 'elem-1', type: 'rect', x: 10, y: 20, width: 100, height: 50 });
|
||
|
||
it('should show default values when no element selected', () => {
|
||
render(<PropertiesPanel selectedElement={null} layers={layers} onUpdateProperty={() => {}} />);
|
||
// Default values are in inputs with aria-labels
|
||
expect(screen.getByLabelText('Position X')).toHaveDisplayValue('0.000 m');
|
||
expect(screen.getByLabelText('Position Y')).toHaveDisplayValue('0.000 m');
|
||
});
|
||
|
||
it('should display element coordinates when element is selected', () => {
|
||
render(<PropertiesPanel selectedElement={element} layers={layers} onUpdateProperty={() => {}} />);
|
||
expect(screen.getByLabelText('Position X')).toHaveDisplayValue('10.000 m');
|
||
expect(screen.getByLabelText('Position Y')).toHaveDisplayValue('20.000 m');
|
||
});
|
||
|
||
it('should display element dimensions', () => {
|
||
render(<PropertiesPanel selectedElement={element} layers={layers} onUpdateProperty={() => {}} />);
|
||
expect(screen.getByLabelText('Breite')).toHaveDisplayValue('100.00 m');
|
||
expect(screen.getByLabelText('Tiefe')).toHaveDisplayValue('50.00 m');
|
||
});
|
||
|
||
it('should call onUpdateProperty when changing a property input', () => {
|
||
const onUpdateProperty = vi.fn();
|
||
render(<PropertiesPanel selectedElement={element} layers={layers} onUpdateProperty={onUpdateProperty} />);
|
||
fireEvent.change(screen.getByLabelText('Position X'), { target: { value: '999' } });
|
||
expect(onUpdateProperty).toHaveBeenCalledWith('x', '999');
|
||
});
|
||
});
|