Leopoldadmin/web-cad
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

test: T29-T31 component tests (20) + frontend stresstest (7) + backend DB stresstest (6) with 50k elements

Browse Source
This commit is contained in:
Leopoldadmin
2026-06-26 16:20:09 +02:00
parent 1d6c2cb30e
commit 89b91a1050
7 changed files with 819 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/package-lock.json
Generated
+239
View File
@@ -17,6 +17,9 @@
"yjs": "^13.6.0"
},
"devDependencies": {
"@testing-library/jest-dom": "^6.9.1",
"@testing-library/react": "^16.3.2",
"@testing-library/user-event": "^14.6.1",
"@types/rbush": "^4.0.0",
"@types/react": "^18.3.0",
"@types/react-dom": "^18.3.0",
@@ -27,6 +30,12 @@
"vitest": "^2.0.0"
}
},
"node_modules/@adobe/css-tools": {
"version": "4.5.0",
"resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.5.0.tgz",
"integrity": "sha512-6OzddxPio9UiWTCemp4N8cYLV2ZN1ncRnV1cVGtve7dhPOtRkleRyx32GQCYSwDYgaHU3USMm84tNsvKzRCa1Q==",
"dev": true
},
"node_modules/@asamuzakjp/css-color": {
"version": "5.1.11",
"resolved": "https://registry.npmjs.org/@asamuzakjp/css-color/-/css-color-5.1.11.tgz",
@@ -292,6 +301,15 @@
"@babel/core": "^7.0.0-0"
}
},
"node_modules/@babel/runtime": {
"version": "7.29.7",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.29.7.tgz",
"integrity": "sha512-Nq8OhGWiZIZGV6hLHoyAKLLcJihP/xFeBMGJoUrxTX2psI8dCifzLhZISFb+VWS3wFMRDmCGw5R+dOySCqPLhw==",
"dev": true,
"engines": {
"node": ">=6.9.0"
}
},
"node_modules/@babel/template": {
"version": "7.29.7",
"resolved": "https://registry.npmjs.org/@babel/template/-/template-7.29.7.tgz",
@@ -1260,6 +1278,98 @@
"win32"
]
},
"node_modules/@testing-library/dom": {
"version": "10.4.1",
"resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.1.tgz",
"integrity": "sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==",
"dev": true,
"peer": true,
"dependencies": {
"@babel/code-frame": "^7.10.4",
"@babel/runtime": "^7.12.5",
"@types/aria-query": "^5.0.1",
"aria-query": "5.3.0",
"dom-accessibility-api": "^0.5.9",
"lz-string": "^1.5.0",
"picocolors": "1.1.1",
"pretty-format": "^27.0.2"
},
"engines": {
"node": ">=18"
}
},
"node_modules/@testing-library/jest-dom": {
"version": "6.9.1",
"resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-6.9.1.tgz",
"integrity": "sha512-zIcONa+hVtVSSep9UT3jZ5rizo2BsxgyDYU7WFD5eICBE7no3881HGeb/QkGfsJs6JTkY1aQhT7rIPC7e+0nnA==",
"dev": true,
"dependencies": {
"@adobe/css-tools": "^4.4.0",
"aria-query": "^5.0.0",
"css.escape": "^1.5.1",
"dom-accessibility-api": "^0.6.3",
"picocolors": "^1.1.1",
"redent": "^3.0.0"
},
"engines": {
"node": ">=14",
"npm": ">=6",
"yarn": ">=1"
}
},
"node_modules/@testing-library/jest-dom/node_modules/dom-accessibility-api": {
"version": "0.6.3",
"resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.6.3.tgz",
"integrity": "sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==",
"dev": true
},
"node_modules/@testing-library/react": {
"version": "16.3.2",
"resolved": "https://registry.npmjs.org/@testing-library/react/-/react-16.3.2.tgz",
"integrity": "sha512-XU5/SytQM+ykqMnAnvB2umaJNIOsLF3PVv//1Ew4CTcpz0/BRyy/af40qqrt7SjKpDdT1saBMc42CUok5gaw+g==",
"dev": true,
"dependencies": {
"@babel/runtime": "^7.12.5"
},
"engines": {
"node": ">=18"
},
"peerDependencies": {
"@testing-library/dom": "^10.0.0",
"@types/react": "^18.0.0 || ^19.0.0",
"@types/react-dom": "^18.0.0 || ^19.0.0",
"react": "^18.0.0 || ^19.0.0",
"react-dom": "^18.0.0 || ^19.0.0"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"@types/react-dom": {
"optional": true
}
}
},
"node_modules/@testing-library/user-event": {
"version": "14.6.1",
"resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.6.1.tgz",
"integrity": "sha512-vq7fv0rnt+QTXgPxr5Hjc210p6YKq2kmdziLgnsZGgLJ9e6VAShx1pACLuRjd/AS/sr7phAR58OIIpf0LlmQNw==",
"dev": true,
"engines": {
"node": ">=12",
"npm": ">=6"
},
"peerDependencies": {
"@testing-library/dom": ">=7.21.4"
}
},
"node_modules/@types/aria-query": {
"version": "5.0.4",
"resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
"integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==",
"dev": true,
"peer": true
},
"node_modules/@types/babel__core": {
"version": "7.20.5",
"resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
@@ -1481,6 +1591,38 @@
"node": ">=6"
}
},
"node_modules/ansi-regex": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
"dev": true,
"peer": true,
"engines": {
"node": ">=8"
}
},
"node_modules/ansi-styles": {
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
"integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
"dev": true,
"peer": true,
"engines": {
"node": ">=10"
},
"funding": {
"url": "https://github.com/chalk/ansi-styles?sponsor=1"
}
},
"node_modules/aria-query": {
"version": "5.3.0",
"resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
"integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
"dev": true,
"dependencies": {
"dequal": "^2.0.3"
}
},
"node_modules/assertion-error": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-2.0.1.tgz",
@@ -1667,6 +1809,12 @@
"node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
}
},
"node_modules/css.escape": {
"version": "1.5.1",
"resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
"integrity": "sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==",
"dev": true
},
"node_modules/csstype": {
"version": "3.2.3",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
@@ -1732,6 +1880,22 @@
"node": ">=6"
}
},
"node_modules/dequal": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
"integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
"dev": true,
"engines": {
"node": ">=6"
}
},
"node_modules/dom-accessibility-api": {
"version": "0.5.16",
"resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
"integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
"dev": true,
"peer": true
},
"node_modules/dxf-parser": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/dxf-parser/-/dxf-parser-1.1.2.tgz",
@@ -1918,6 +2082,15 @@
"integrity": "sha512-HR7EVodfFUdQCTIeySw+WDRFJlPcLOJbXfwwZ7Oom6tjsvZ3bOkCDJHehQC3nxJrv7+f9XecwazynjU8e4Vw3Q==",
"optional": true
},
"node_modules/indent-string": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
"integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==",
"dev": true,
"engines": {
"node": ">=8"
}
},
"node_modules/inherits": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
@@ -2226,6 +2399,16 @@
"integrity": "sha512-AI2r85+4MquTw9ZYqabu4nMwy9Oftlfa/e/52t9IjtfG+mGBbTNdAoZ3RQKLHR6r0wQnwZnPIEh/Ya6XTWAKNA==",
"optional": true
},
"node_modules/lz-string": {
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
"integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
"dev": true,
"peer": true,
"bin": {
"lz-string": "bin/bin.js"
}
},
"node_modules/magic-string": {
"version": "0.30.21",
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
@@ -2241,6 +2424,15 @@
"integrity": "sha512-9Yubnt3e8A0OKwxYSXyhLymGW4sCufcLG6VdiDdUGVkPhpqLxlvP5vl1983gQjJl3tqbrM731mjaZaP68AgosQ==",
"dev": true
},
"node_modules/min-indent": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
"integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==",
"dev": true,
"engines": {
"node": ">=4"
}
},
"node_modules/ms": {
"version": "2.1.3",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -2368,6 +2560,21 @@
"node": "^10 || ^12 || >=14"
}
},
"node_modules/pretty-format": {
"version": "27.5.1",
"resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
"integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
"dev": true,
"peer": true,
"dependencies": {
"ansi-regex": "^5.0.1",
"ansi-styles": "^5.0.0",
"react-is": "^17.0.1"
},
"engines": {
"node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
}
},
"node_modules/prr": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
@@ -2419,6 +2626,13 @@
"react": "^18.3.1"
}
},
"node_modules/react-is": {
"version": "17.0.2",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
"dev": true,
"peer": true
},
"node_modules/react-refresh": {
"version": "0.17.0",
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",
@@ -2442,6 +2656,19 @@
"node": ">= 6"
}
},
"node_modules/redent": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
"integrity": "sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==",
"dev": true,
"dependencies": {
"indent-string": "^4.0.0",
"strip-indent": "^3.0.0"
},
"engines": {
"node": ">=8"
}
},
"node_modules/require-from-string": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
@@ -2580,6 +2807,18 @@
"safe-buffer": "~5.2.0"
}
},
"node_modules/strip-indent": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz",
"integrity": "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==",
"dev": true,
"dependencies": {
"min-indent": "^1.0.0"
},
"engines": {
"node": ">=8"
}
},
"node_modules/symbol-tree": {
"version": "3.2.4",
"resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
frontend/package.json
+3
View File
@@ -19,6 +19,9 @@
"yjs": "^13.6.0"
},
"devDependencies": {
"@testing-library/jest-dom": "^6.9.1",
"@testing-library/react": "^16.3.2",
"@testing-library/user-event": "^14.6.1",
"@types/rbush": "^4.0.0",
"@types/react": "^18.3.0",
"@types/react-dom": "^18.3.0",
frontend/tests/Components.test.tsx
+274
View File
@@ -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');
});
});
frontend/tests/StressTest.test.ts
+173
View File
@@ -0,0 +1,173 @@
/**
* Stresstest – 50.000 Elemente: SpatialIndex Query-Performance,
* HistoryManager Memory, Undo/Redo Performance.
*/
import { describe, it, expect } from 'vitest';
import { SpatialIndex } from '../src/canvas/SpatialIndex';
import { HistoryManager } from '../src/history/HistoryManager';
import type { CADElement, CADLayer } from '../src/types/cad.types';
const N = 50_000;
function generateElements(count: number): CADElement[] {
const elements: CADElement[] = [];
for (let i = 0; i < count; i++) {
elements.push({
id: `elem-${i}`,
type: 'rect',
layerId: 'layer-1',
x: (i % 1000) * 1.5,
y: Math.floor(i / 1000) * 1.5,
width: 1,
height: 1,
properties: {},
});
}
return elements;
}
function makeLayer(): CADLayer {
return {
id: 'layer-1',
name: 'Layer 1',
visible: true,
locked: false,
color: '#ffffff',
lineType: 'solid',
transparency: 0,
sortOrder: 0,
parentId: null,
};
}
describe('Stresstest: 50.000 Elemente', () => {
it('should bulk-insert 50k elements into SpatialIndex in under 2s', () => {
const elements = generateElements(N);
const index = new SpatialIndex();
const start = performance.now();
index.bulkInsert(elements);
const elapsed = performance.now() - start;
console.log(`SpatialIndex bulkInsert: ${elapsed.toFixed(1)}ms for ${N} elements`);
expect(elapsed).toBeLessThan(2000);
});
it('should search SpatialIndex with 50k elements in under 10ms', () => {
const elements = generateElements(N);
const index = new SpatialIndex();
index.bulkInsert(elements);
// Search a region in the middle
const start = performance.now();
const results = index.search({ minX: 750, minY: 37.5, maxX: 1500, maxY: 75 });
const elapsed = performance.now() - start;
console.log(`SpatialIndex search: ${elapsed.toFixed(2)}ms, found ${results.length} elements`);
expect(elapsed).toBeLessThan(50);
expect(results.length).toBeGreaterThan(0);
});
it('should search a small point region with 50k elements in under 5ms', () => {
const elements = generateElements(N);
const index = new SpatialIndex();
index.bulkInsert(elements);
const start = performance.now();
const results = index.search({ minX: 750, minY: 37.5, maxX: 751, maxY: 38.5 });
const elapsed = performance.now() - start;
console.log(`SpatialIndex point search: ${elapsed.toFixed(3)}ms, found ${results.length} elements`);
expect(elapsed).toBeLessThan(10);
});
it('should clear and re-insert 50k elements in under 2s', () => {
const elements = generateElements(N);
const index = new SpatialIndex();
index.bulkInsert(elements);
// Modify 100 elements
for (let i = 0; i < 100; i++) {
elements[i].x += 5000;
}
const start = performance.now();
index.clear();
index.bulkInsert(elements);
const elapsed = performance.now() - start;
console.log(`SpatialIndex clear+reinsert: ${elapsed.toFixed(1)}ms after 100 modifications`);
expect(elapsed).toBeLessThan(2000);
});
it('should handle HistoryManager with 50k elements snapshot', () => {
const elements = generateElements(N);
const layers = [makeLayer()];
const history = new HistoryManager({ maxStackSize: 50 });
const start = performance.now();
history.initialize({
elements,
layers,
blocks: [],
groups: [],
bgConfig: null,
});
const elapsed = performance.now() - start;
console.log(`HistoryManager initialize: ${elapsed.toFixed(1)}ms for ${N} elements`);
expect(elapsed).toBeLessThan(1000);
});
it('should push 10 history snapshots with 50k elements each', () => {
const elements = generateElements(N);
const layers = [makeLayer()];
const history = new HistoryManager({ maxStackSize: 50 });
history.initialize({
elements,
layers,
blocks: [],
groups: [],
bgConfig: null,
});
const start = performance.now();
for (let i = 0; i < 10; i++) {
// Slightly modify elements each snapshot
elements[i * 100].x += 1;
history.pushSnapshot({
elements: [...elements],
layers,
blocks: [],
groups: [],
bgConfig: null,
label: `Step ${i + 1}`,
});
}
const elapsed = performance.now() - start;
console.log(`HistoryManager 10 snapshots: ${elapsed.toFixed(1)}ms for ${N} elements each`);
expect(elapsed).toBeLessThan(5000);
expect(history.getHistory().length).toBe(11); // initial + 10
});
it('should undo/redo with 50k elements in under 100ms', () => {
const elements = generateElements(N);
const layers = [makeLayer()];
const history = new HistoryManager({ maxStackSize: 50 });
history.initialize({
elements,
layers,
blocks: [],
groups: [],
bgConfig: null,
});
history.pushSnapshot({
elements: [...elements],
layers,
blocks: [],
groups: [],
bgConfig: null,
label: 'Step 1',
});
const undoStart = performance.now();
const undoSnap = history.undo();
const undoTime = performance.now() - undoStart;
console.log(`Undo: ${undoTime.toFixed(2)}ms for ${N} elements`);
expect(undoSnap).not.toBeNull();
expect(undoTime).toBeLessThan(100);
const redoStart = performance.now();
const redoSnap = history.redo();
const redoTime = performance.now() - redoStart;
console.log(`Redo: ${redoTime.toFixed(2)}ms for ${N} elements`);
expect(redoSnap).not.toBeNull();
expect(redoTime).toBeLessThan(100);
});
});
frontend/tests/setup.ts
+1
View File
@@ -0,0 +1 @@
import '@testing-library/jest-dom';
frontend/vitest.config.ts
+3 -2
View File
@@ -12,10 +12,11 @@ export default defineConfig({
test: {
globals: true,
environment: 'jsdom',
include: ['tests/**/*.test.ts'],
include: ['tests/**/*.test.ts', 'tests/**/*.test.tsx'],
setupFiles: ['tests/setup.ts'],
coverage: {
provider: 'v8',
include: ['src/canvas/**', 'src/history/**'],
include: ['src/canvas/**', 'src/history/**', 'src/components/**'],
},
},
});