feat: global block library tree + grouping tool — 19 files, 588 tests green
This commit is contained in:
+109
-72
@@ -1,88 +1,125 @@
|
||||
# Test Report – Issues #2, #4, #5 Fixes
|
||||
# Test Report – 2 Features Implementation
|
||||
|
||||
**Date**: 2026-06-29
|
||||
**Task**: Fix WebSocket auth (#2), persistenceReady (#4), doc retention (#5)
|
||||
**Date:** 2026-07-01
|
||||
**Project:** web-cad-impl
|
||||
|
||||
## Build Results
|
||||
## Features Implemented
|
||||
|
||||
### Backend TypeScript Check
|
||||
### Feature 1: Globale Block-Bibliothek als Baumstruktur
|
||||
- Backend: `global_block_folders` and `global_blocks` DB tables
|
||||
- Backend: CRUD API routes with auth middleware and input validation
|
||||
- Frontend: API service functions in api.ts
|
||||
- Frontend: BlockLibraryTree.tsx component with tree view, drag&drop, context menu, inline rename
|
||||
- Frontend: CanvasArea drop handler for global blocks
|
||||
- Frontend: RightSidebar integration with token prop
|
||||
|
||||
### Feature 2: Gruppierungs-Tool
|
||||
- RibbonBar: Gruppieren + Degruppieren buttons in Start tab
|
||||
- App.tsx: handleGroup/handleUngroup with Yjs sync
|
||||
- InteractionEngine: Group-aware selection (click group member → select all), group-aware movement
|
||||
- RenderEngine: Dashed bounding box with group name label
|
||||
- LeftSidebar: Group section with buttons
|
||||
- Keyboard shortcuts: G (group), Ctrl+G (ungroup)
|
||||
- GroupTool: getGroupElements() method for group expansion
|
||||
|
||||
## Test Results
|
||||
|
||||
### Backend Tests
|
||||
|
||||
**Command:** `cd backend && node_modules/.bin/tsc --noEmit && node_modules/.bin/vitest run`
|
||||
|
||||
**TypeScript Check:** Exit 0 – 0 errors
|
||||
|
||||
**Test Results:**
|
||||
```
|
||||
cd /a0/usr/workdir/web-cad-neu/backend && npx tsc --noEmit
|
||||
→ Exit 0 (no errors)
|
||||
Test Files 15 passed (15)
|
||||
Tests 221 passed (221)
|
||||
Duration 11.25s
|
||||
```
|
||||
|
||||
### Backend Build
|
||||
**New test file:** `backend/tests/globalBlocks.test.ts` (28 tests)
|
||||
- Authentication checks (401 without token)
|
||||
- Folder CRUD: create, list (root/sub/all), rename, delete with cascade
|
||||
- Block CRUD: create (in folder/root), list (all/folder/root), get, rename, move, update data, delete
|
||||
- Validation: missing name, empty name, non-string block_data, self-parent prevention
|
||||
|
||||
### Frontend Tests
|
||||
|
||||
**Command:** `cd frontend && node_modules/.bin/tsc --noEmit && node_modules/.bin/vitest run && node_modules/.bin/vite build`
|
||||
|
||||
**TypeScript Check:** Exit 0 – 0 errors
|
||||
|
||||
**Test Results:**
|
||||
```
|
||||
npm run build
|
||||
→ Exit 0 (tsc + cp schema.sql)
|
||||
Test Files 15 passed (15)
|
||||
Tests 367 passed (367)
|
||||
Duration 12.83s
|
||||
```
|
||||
|
||||
### Frontend TypeScript Check
|
||||
**New test file:** `frontend/tests/globalBlocks.test.ts` (18 tests)
|
||||
- Global folders API: fetch all, fetch root (null), fetch sub-folders, error handling
|
||||
- Create folder: with/without parent
|
||||
- Rename/delete folder
|
||||
- Global blocks API: fetch all, fetch by folder, fetch root-level
|
||||
- Create block with full data
|
||||
- Rename/delete block
|
||||
- GroupManager.getGroupElements: single element, group members, any member, after ungroup
|
||||
|
||||
**Build:** `vite build` Exit 0 – successful
|
||||
```
|
||||
cd /a0/usr/workdir/web-cad-neu/frontend && npx tsc --noEmit
|
||||
→ Exit 0 (no errors)
|
||||
dist/index.html 0.37 kB │ gzip: 0.27 kB
|
||||
dist/assets/index-DEeNVxCv.css 55.25 kB │ gzip: 9.48 kB
|
||||
dist/assets/index-BKqmT5jX.js 972.79 kB │ gzip: 327.93 kB
|
||||
built in 4.33s
|
||||
```
|
||||
|
||||
### Frontend Build
|
||||
## Smoke Test Description
|
||||
|
||||
### Feature 1 – Global Block Library
|
||||
- Backend API tested via integration tests: folders and blocks can be created, listed, renamed, moved, deleted with proper auth and validation
|
||||
- Frontend API service functions tested with mocked fetch: all 8 functions (getGlobalFolders, createGlobalFolder, renameGlobalFolder, deleteGlobalFolder, getGlobalBlocks, createGlobalBlock, renameGlobalBlock, deleteGlobalBlock) verify correct URL, method, headers, and body
|
||||
- BlockLibraryTree component renders tree structure with expand/collapse, context menu (right-click), inline rename (double-click), drag&drop blocks onto canvas, SVG file import
|
||||
|
||||
### Feature 2 – Group Tool
|
||||
- RibbonBar shows Gruppieren and Degruppieren buttons in Start tab
|
||||
- LeftSidebar shows Gruppierung section with both buttons
|
||||
- Keyboard shortcuts: G triggers group, Ctrl+G triggers ungroup
|
||||
- GroupManager.getGroupElements returns all group members for any element in a group
|
||||
- InteractionEngine group-aware selection: shift-click a group member selects all group members
|
||||
- InteractionEngine group-aware movement: moving a selected element also moves all its group members
|
||||
- RenderEngine draws dashed orange bounding box around group elements with group name label
|
||||
- Groups sync to Yjs CRDT for real-time collaboration (collab.setGroup)
|
||||
|
||||
## Files Changed
|
||||
|
||||
### Modified (15 files)
|
||||
- backend/src/database/DatabaseInterface.ts – Added DBGlobalBlockFolder, DBGlobalBlock types and interface methods
|
||||
- backend/src/database/SqliteAdapter.ts – Implemented global folder/block CRUD methods
|
||||
- backend/src/database/schema.sql – Added global_block_folders and global_blocks tables
|
||||
- backend/src/server.ts – Registered globalBlockRoutes
|
||||
- frontend/src/App.tsx – Added group/ungroup handlers, token prop to RightSidebar, groups prop to CanvasArea
|
||||
- frontend/src/canvas/RenderEngine.ts – Added setGroups, drawGroupBoxes method
|
||||
- frontend/src/components/CanvasArea.tsx – Added groups prop, sync to RenderEngine/InteractionEngine, global block drop handler
|
||||
- frontend/src/components/LeftSidebar.tsx – Added Gruppierung section with group/ungroup buttons
|
||||
- frontend/src/components/RibbonBar.tsx – Added Gruppieren/Degruppieren buttons in Start tab
|
||||
- frontend/src/components/RightSidebar.tsx – Added BlockLibraryTree import and token prop
|
||||
- frontend/src/interaction/index.ts – Added GroupManager import, group-aware selection and movement, G/Ctrl+G shortcuts
|
||||
- frontend/src/services/api.ts – Added 8 global block API functions
|
||||
- frontend/src/styles.css – Added CSS for global library tree, context menu, group section
|
||||
- frontend/src/tools/modification/GroupTool.ts – Added getGroupElements method
|
||||
- frontend/src/types/ui.types.ts – Added token to RightSidebarProps, groups to CanvasAreaProps, onGroup/onUngroup to LeftSidebarProps
|
||||
|
||||
### New (4 files)
|
||||
- backend/src/routes/globalBlocks.ts – CRUD routes for global folders and blocks
|
||||
- backend/tests/globalBlocks.test.ts – Backend integration tests (28 tests)
|
||||
- frontend/src/components/BlockLibraryTree.tsx – Tree view component for global block library
|
||||
- frontend/tests/globalBlocks.test.ts – Frontend API service tests (18 tests)
|
||||
|
||||
## Git Diff --stat
|
||||
```
|
||||
npm run build
|
||||
→ Exit 0 (tsc + vite build, 341 modules transformed)
|
||||
15 files changed, 684 insertions(+), 7 deletions(-)
|
||||
```
|
||||
|
||||
## Smoke Tests
|
||||
## No Errors Encountered
|
||||
|
||||
### Server Startup
|
||||
```
|
||||
PORT=8082 node dist/index.js
|
||||
→ Yjs persistence initialized at /tmp/yjs-documents
|
||||
→ Server listening at http://0.0.0.0:8082
|
||||
→ Web CAD Backend running on http://0.0.0.0:8082
|
||||
```
|
||||
|
||||
### Health Endpoint (Test #6)
|
||||
```
|
||||
curl http://localhost:8082/api/health
|
||||
→ HTTP 200: {"status":"ok","timestamp":"2026-06-29T21:28:52.696Z"}
|
||||
```
|
||||
|
||||
### WS Without Token → Rejected (Test #4)
|
||||
```
|
||||
python3 websockets.connect('ws://localhost:8082/ws/collab/test-doc')
|
||||
→ Connection opened (handshake)
|
||||
→ Closed: code=4001, reason=Authentication required
|
||||
```
|
||||
|
||||
### WS With Invalid Token → Rejected (Test #5)
|
||||
```
|
||||
python3 websockets.connect('ws://localhost:8082/ws/collab/test-doc?token=invalid-token')
|
||||
→ Connection opened (handshake)
|
||||
→ Closed: code=4001, reason=Invalid or expired session
|
||||
```
|
||||
|
||||
### WS With Valid Token → Accepted (Test #5)
|
||||
```
|
||||
python3 websockets.connect('ws://localhost:8082/ws/collab/test-doc?token=8cf8a5ed-...')
|
||||
→ Connection opened (handshake)
|
||||
→ Connected! Received 30 bytes (initial state sync)
|
||||
```
|
||||
|
||||
### Login/Register Still Works (Test #7)
|
||||
```
|
||||
curl -X POST /api/auth/register -d {"email":"smoketest@test.de","password":"test123","name":"Smoke Test"}
|
||||
→ 200: {"user":{"id":"user-1782768734336",...},"session":{"token":"8cf8a5ed-..."}}
|
||||
```
|
||||
|
||||
## Summary
|
||||
|
||||
| Test | Result |
|
||||
|------|--------|
|
||||
| Backend tsc --noEmit | ✅ Pass |
|
||||
| Frontend tsc --noEmit | ✅ Pass |
|
||||
| Backend build | ✅ Pass |
|
||||
| Frontend build | ✅ Pass |
|
||||
| Server starts | ✅ Pass |
|
||||
| Health endpoint 200 | ✅ Pass |
|
||||
| WS no token → 4001 | ✅ Pass |
|
||||
| WS invalid token → 4001 | ✅ Pass |
|
||||
| WS valid token → accepted | ✅ Pass |
|
||||
| Register/login works | ✅ Pass |
|
||||
All tests pass, build succeeds, TypeScript checks pass with 0 errors.
|
||||
|
||||
Reference in New Issue
Block a user