test: T29-T31 component tests (20) + frontend stresstest (7) + backend DB stresstest (6) with 50k elements
This commit is contained in:
@@ -0,0 +1,274 @@
|
||||
/**
|
||||
* 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');
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user