🐛 fix(sync): resolve delete persistence regression and harden data-safety invariants (#13)

Deletions made in the UI were silently lost on page reload because the sync
baseline (lastSyncedElementsRef) was never populated after initial load,
making the delta algorithm unable to detect removed elements. Additionally,
import_scene and restore_snapshot used a non-atomic clear+create pattern
that could permanently lose all canvas data if the batch create failed
after clearing, and duplicate_elements copied stale binding references
pointing to original element IDs instead of remapped duplicates.

🔧 Sync baseline restoration:
- Populate deletion-detection baseline on every server-to-client data path
  (page load, delta resync, hello handshake, initial elements broadcast)
- Establish sync version and hash baselines to prevent phantom re-syncs

🛡️ Data-loss prevention:
- Backup current scene before destructive clear in replace-mode operations
- Atomic restore from backup when subsequent batch create fails
- Remap all binding references (start/end IDs, boundElements, containerId)
  to new IDs during element duplication

 Comprehensive test coverage (154 new tests, 344 total):
- Delta sync flows including deletion persistence and bidirectional sync
- Multi-tenant element/sync/WebSocket isolation
- Arrow binding resolution across all shape types and edge cases
- MCP tool integration covering backup-restore and binding remapping
- Input validation and security boundary testing
- Frontend sync algorithm unit tests reproducing the exact regression

🎯 Eliminates the most critical data-integrity risks: deletions now
persist reliably, destructive operations are rollback-safe, and the
full test suite provides regression coverage for every sync path.
This commit is contained in:
Sanjib Devnath
2026-03-18 10:07:07 +05:30
committed by GitHub
parent 459dbfdb3a
commit 2e743c1356
9 changed files with 3130 additions and 10 deletions
+266
View File
@@ -0,0 +1,266 @@
import { describe, it, expect, beforeEach, afterEach } from 'vitest';
import request from 'supertest';
import { initDb, closeDb, setElement, setActiveTenant } from '../../src/db.js';
import type { ServerElement } from '../../src/types.js';
import path from 'path';
import os from 'os';
import fs from 'fs';
let dbPath: string;
let app: any;
function makeRect(overrides: Partial<ServerElement> = {}): ServerElement {
return {
id: `rect-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`,
type: 'rectangle',
x: 0,
y: 0,
width: 150,
height: 80,
version: 1,
...overrides,
};
}
function makeEllipse(overrides: Partial<ServerElement> = {}): ServerElement {
return {
id: `ell-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`,
type: 'ellipse',
x: 0,
y: 0,
width: 120,
height: 120,
version: 1,
...overrides,
};
}
function makeDiamond(overrides: Partial<ServerElement> = {}): ServerElement {
return {
id: `dia-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`,
type: 'diamond',
x: 0,
y: 0,
width: 100,
height: 100,
version: 1,
...overrides,
};
}
function makeArrow(id: string, startId?: string, endId?: string): any {
return {
id,
type: 'arrow',
x: 0,
y: 0,
width: 100,
height: 0,
...(startId ? { start: { id: startId } } : {}),
...(endId ? { end: { id: endId } } : {}),
};
}
beforeEach(async () => {
dbPath = path.join(os.tmpdir(), `excalidraw-arrow-test-${Date.now()}-${Math.random().toString(36).slice(2)}.db`);
initDb(dbPath);
setActiveTenant('default');
const mod = await import('../../src/server.js');
app = mod.default;
});
afterEach(() => {
closeDb();
for (const suffix of ['', '-wal', '-shm']) {
try { fs.unlinkSync(dbPath + suffix); } catch {}
}
});
// ─── Arrow Binding Resolution via Batch Create ──────────────
describe('Arrow binding resolution - rectangles', () => {
it('resolves arrow between two rectangles', async () => {
const r1 = makeRect({ id: 'r1', x: 0, y: 0, width: 100, height: 50 });
const r2 = makeRect({ id: 'r2', x: 300, y: 0, width: 100, height: 50 });
const arrow = makeArrow('a1', 'r1', 'r2');
const res = await request(app)
.post('/api/elements/batch')
.send({ elements: [r1, r2, arrow] });
expect(res.body.success).toBe(true);
const createdArrow = res.body.elements.find((e: any) => e.id === 'a1');
expect(createdArrow).toBeDefined();
// Arrow should have computed start/end points
expect(typeof createdArrow.x).toBe('number');
expect(typeof createdArrow.y).toBe('number');
expect(typeof createdArrow.width).toBe('number');
expect(typeof createdArrow.height).toBe('number');
});
it('arrow points are positioned between the two rectangles', async () => {
const r1 = makeRect({ id: 'r1', x: 0, y: 0, width: 100, height: 50 });
const r2 = makeRect({ id: 'r2', x: 400, y: 0, width: 100, height: 50 });
const arrow = makeArrow('a1', 'r1', 'r2');
const res = await request(app)
.post('/api/elements/batch')
.send({ elements: [r1, r2, arrow] });
const a = res.body.elements.find((e: any) => e.id === 'a1');
// Arrow should have reasonable coordinates between the two shapes
// The exact positions depend on edge-point computation; just verify it's between the two shape centers
expect(a.x).toBeGreaterThanOrEqual(0);
expect(a.x + a.width).toBeLessThanOrEqual(600);
});
});
describe('Arrow binding resolution - ellipses', () => {
it('resolves arrow between two ellipses', async () => {
const e1 = makeEllipse({ id: 'e1', x: 0, y: 0, width: 80, height: 80 });
const e2 = makeEllipse({ id: 'e2', x: 300, y: 0, width: 80, height: 80 });
const arrow = makeArrow('ae1', 'e1', 'e2');
const res = await request(app)
.post('/api/elements/batch')
.send({ elements: [e1, e2, arrow] });
expect(res.body.success).toBe(true);
const a = res.body.elements.find((e: any) => e.id === 'ae1');
expect(a).toBeDefined();
});
});
describe('Arrow binding resolution - diamonds', () => {
it('resolves arrow between two diamonds', async () => {
const d1 = makeDiamond({ id: 'd1', x: 0, y: 0, width: 100, height: 100 });
const d2 = makeDiamond({ id: 'd2', x: 300, y: 0, width: 100, height: 100 });
const arrow = makeArrow('ad1', 'd1', 'd2');
const res = await request(app)
.post('/api/elements/batch')
.send({ elements: [d1, d2, arrow] });
expect(res.body.success).toBe(true);
const a = res.body.elements.find((e: any) => e.id === 'ad1');
expect(a).toBeDefined();
});
});
describe('Arrow binding resolution - mixed shapes', () => {
it('resolves arrow from rectangle to ellipse', async () => {
const r = makeRect({ id: 'mr', x: 0, y: 0, width: 100, height: 50 });
const e = makeEllipse({ id: 'me', x: 300, y: 0, width: 80, height: 80 });
const arrow = makeArrow('ma1', 'mr', 'me');
const res = await request(app)
.post('/api/elements/batch')
.send({ elements: [r, e, arrow] });
expect(res.body.success).toBe(true);
});
it('resolves arrow from diamond to rectangle', async () => {
const d = makeDiamond({ id: 'md', x: 0, y: 0, width: 100, height: 100 });
const r = makeRect({ id: 'mr2', x: 300, y: 0, width: 150, height: 80 });
const arrow = makeArrow('ma2', 'md', 'mr2');
const res = await request(app)
.post('/api/elements/batch')
.send({ elements: [d, r, arrow] });
expect(res.body.success).toBe(true);
});
});
describe('Arrow binding resolution - edge cases', () => {
it('arrow with only start binding', async () => {
const r = makeRect({ id: 'so', x: 0, y: 0, width: 100, height: 50 });
const arrow = makeArrow('sa1', 'so', undefined);
const res = await request(app)
.post('/api/elements/batch')
.send({ elements: [r, arrow] });
expect(res.body.success).toBe(true);
});
it('arrow with only end binding', async () => {
const r = makeRect({ id: 'eo', x: 300, y: 0, width: 100, height: 50 });
const arrow = makeArrow('ea1', undefined, 'eo');
const res = await request(app)
.post('/api/elements/batch')
.send({ elements: [r, arrow] });
expect(res.body.success).toBe(true);
});
it('arrow referencing non-existent element does not crash', async () => {
const arrow = makeArrow('ghost-arrow', 'nonexistent-1', 'nonexistent-2');
const res = await request(app)
.post('/api/elements/batch')
.send({ elements: [arrow] });
expect(res.body.success).toBe(true);
});
it('arrow between overlapping shapes (same center)', async () => {
const r1 = makeRect({ id: 'ov1', x: 100, y: 100, width: 100, height: 50 });
const r2 = makeRect({ id: 'ov2', x: 100, y: 100, width: 100, height: 50 });
const arrow = makeArrow('ova', 'ov1', 'ov2');
const res = await request(app)
.post('/api/elements/batch')
.send({ elements: [r1, r2, arrow] });
// Should not crash even with identical centers (dx=0, dy=0)
expect(res.body.success).toBe(true);
});
it('arrow between vertically aligned shapes', async () => {
const r1 = makeRect({ id: 'vr1', x: 100, y: 0, width: 100, height: 50 });
const r2 = makeRect({ id: 'vr2', x: 100, y: 300, width: 100, height: 50 });
const arrow = makeArrow('va', 'vr1', 'vr2');
const res = await request(app)
.post('/api/elements/batch')
.send({ elements: [r1, r2, arrow] });
expect(res.body.success).toBe(true);
const a = res.body.elements.find((e: any) => e.id === 'va');
// Arrow should connect shapes that are vertically aligned — just verify it exists and has valid dimensions
expect(typeof a.width).toBe('number');
expect(typeof a.height).toBe('number');
});
it('cross-batch arrow referencing pre-existing element', async () => {
// Create a shape first
setElement('pre-existing', makeRect({ id: 'pre-existing', x: 0, y: 0, width: 100, height: 50 }));
// Batch create an arrow referencing the pre-existing shape
const r2 = makeRect({ id: 'batch-r', x: 300, y: 0, width: 100, height: 50 });
const arrow = makeArrow('cross-arrow', 'pre-existing', 'batch-r');
const res = await request(app)
.post('/api/elements/batch')
.send({ elements: [r2, arrow] });
expect(res.body.success).toBe(true);
});
it('multiple arrows between same two shapes', async () => {
const r1 = makeRect({ id: 'multi-r1', x: 0, y: 0, width: 100, height: 50 });
const r2 = makeRect({ id: 'multi-r2', x: 300, y: 0, width: 100, height: 50 });
const a1 = makeArrow('multi-a1', 'multi-r1', 'multi-r2');
const a2 = makeArrow('multi-a2', 'multi-r2', 'multi-r1');
const res = await request(app)
.post('/api/elements/batch')
.send({ elements: [r1, r2, a1, a2] });
expect(res.body.success).toBe(true);
expect(res.body.elements).toHaveLength(4);
});
});
+522
View File
@@ -0,0 +1,522 @@
import { describe, it, expect, beforeEach, afterEach } from 'vitest';
import request from 'supertest';
import { initDb, closeDb, setElement, getAllElements, setActiveTenant, getCurrentSyncVersion } from '../../src/db.js';
import type { ServerElement } from '../../src/types.js';
import path from 'path';
import os from 'os';
import fs from 'fs';
let dbPath: string;
let app: any;
function makeElement(overrides: Partial<ServerElement> = {}): ServerElement {
return {
id: `el-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`,
type: 'rectangle',
x: 100,
y: 200,
width: 150,
height: 80,
version: 1,
...overrides,
};
}
beforeEach(async () => {
dbPath = path.join(os.tmpdir(), `excalidraw-mcp-test-${Date.now()}-${Math.random().toString(36).slice(2)}.db`);
initDb(dbPath);
setActiveTenant('default');
const mod = await import('../../src/server.js');
app = mod.default;
});
afterEach(() => {
closeDb();
for (const suffix of ['', '-wal', '-shm']) {
try { fs.unlinkSync(dbPath + suffix); } catch {}
}
});
// ─── Clear Canvas Token Flow (via REST) ─────────────────────
// Simulates the clear_canvas MCP tool's token-based confirmation
describe('Clear canvas confirmation flow', () => {
it('DELETE /api/elements/clear removes all elements', async () => {
setElement('cl-1', makeElement({ id: 'cl-1' }));
setElement('cl-2', makeElement({ id: 'cl-2' }));
expect(getAllElements()).toHaveLength(2);
const res = await request(app).delete('/api/elements/clear');
expect(res.body.success).toBe(true);
expect(res.body.count).toBeDefined();
expect(getAllElements()).toHaveLength(0);
});
it('clear on empty canvas returns zero count', async () => {
const res = await request(app).delete('/api/elements/clear');
expect(res.body.success).toBe(true);
});
it('cleared elements stay gone on subsequent GET requests', async () => {
setElement('stay-gone', makeElement({ id: 'stay-gone' }));
await request(app).delete('/api/elements/clear');
for (let i = 0; i < 3; i++) {
const res = await request(app).get('/api/elements');
expect(res.body.count).toBe(0);
}
});
});
// ─── Import Scene (Replace Mode) ────────────────────────────
// Tests the REST layer that import_scene MCP tool uses
describe('Import scene - replace mode via sync', () => {
it('POST /api/elements/sync replaces all elements atomically', async () => {
setElement('old-1', makeElement({ id: 'old-1' }));
setElement('old-2', makeElement({ id: 'old-2' }));
const newElements = [
makeElement({ id: 'new-1', x: 0 }),
makeElement({ id: 'new-2', x: 100 }),
makeElement({ id: 'new-3', x: 200 }),
];
const res = await request(app)
.post('/api/elements/sync')
.send({ elements: newElements });
expect(res.body.success).toBe(true);
const elements = getAllElements();
expect(elements).toHaveLength(3);
const ids = elements.map(e => e.id).sort();
expect(ids).toEqual(['new-1', 'new-2', 'new-3']);
});
it('POST /api/elements/sync with empty array clears all', async () => {
setElement('will-be-replaced', makeElement({ id: 'will-be-replaced' }));
const res = await request(app)
.post('/api/elements/sync')
.send({ elements: [] });
expect(res.body.success).toBe(true);
expect(getAllElements()).toHaveLength(0);
});
it('old elements do not reappear after replace', async () => {
setElement('ghost', makeElement({ id: 'ghost' }));
await request(app)
.post('/api/elements/sync')
.send({ elements: [makeElement({ id: 'replacement' })] });
// Multiple GET requests should consistently show only the replacement
for (let i = 0; i < 3; i++) {
const res = await request(app).get('/api/elements');
expect(res.body.count).toBe(1);
expect(res.body.elements[0].id).toBe('replacement');
}
});
});
// ─── Import Scene (Merge Mode) ──────────────────────────────
describe('Import scene - merge mode via batch', () => {
it('POST /api/elements/batch adds without removing existing', async () => {
setElement('existing', makeElement({ id: 'existing', x: 0 }));
const res = await request(app)
.post('/api/elements/batch')
.send({
elements: [
makeElement({ id: 'imported-1', x: 100 }),
makeElement({ id: 'imported-2', x: 200 }),
],
});
expect(res.body.success).toBe(true);
const elements = getAllElements();
expect(elements).toHaveLength(3);
const ids = elements.map(e => e.id).sort();
expect(ids).toEqual(['existing', 'imported-1', 'imported-2']);
});
});
// ─── Restore Snapshot ───────────────────────────────────────
describe('Snapshot create and restore flow', () => {
it('save snapshot, clear, verify snapshot still exists', async () => {
setElement('snap-1', makeElement({ id: 'snap-1' }));
setElement('snap-2', makeElement({ id: 'snap-2' }));
// Save snapshot
const snapRes = await request(app)
.post('/api/snapshots')
.send({ name: 'before-clear' });
expect(snapRes.body.success).toBe(true);
// Clear
await request(app).delete('/api/elements/clear');
expect(getAllElements()).toHaveLength(0);
// Snapshot should still contain the elements
const getRes = await request(app).get('/api/snapshots/before-clear');
expect(getRes.body.success).toBe(true);
expect(getRes.body.snapshot.elements).toHaveLength(2);
});
it('restore via sync endpoint preserves all snapshot elements', async () => {
const elements = [
makeElement({ id: 'rs-1', x: 0 }),
makeElement({ id: 'rs-2', x: 100 }),
];
for (const el of elements) setElement(el.id, el);
// Save snapshot
await request(app).post('/api/snapshots').send({ name: 'restore-test' });
// Clear and add different elements
await request(app).delete('/api/elements/clear');
setElement('different', makeElement({ id: 'different' }));
// Get snapshot
const snapRes = await request(app).get('/api/snapshots/restore-test');
const snapshotElements = snapRes.body.snapshot.elements;
// Restore via sync (atomic replace)
const syncRes = await request(app)
.post('/api/elements/sync')
.send({ elements: snapshotElements });
expect(syncRes.body.success).toBe(true);
// Verify restored state
const final = getAllElements();
expect(final).toHaveLength(2);
const ids = final.map(e => e.id).sort();
expect(ids).toEqual(['rs-1', 'rs-2']);
});
it('restore non-existent snapshot returns 404', async () => {
const res = await request(app).get('/api/snapshots/nonexistent');
expect(res.status).toBe(404);
});
it('snapshot overwrites with same name', async () => {
setElement('v1-el', makeElement({ id: 'v1-el' }));
await request(app).post('/api/snapshots').send({ name: 'overwrite-test' });
setElement('v2-el', makeElement({ id: 'v2-el' }));
await request(app).post('/api/snapshots').send({ name: 'overwrite-test' });
const res = await request(app).get('/api/snapshots/overwrite-test');
expect(res.body.snapshot.elements).toHaveLength(2); // Both elements
});
});
// ─── Duplicate Elements ─────────────────────────────────────
describe('Duplicate elements via API', () => {
it('duplicating elements creates new IDs', async () => {
setElement('dup-src', makeElement({ id: 'dup-src', x: 0, y: 0 }));
// Get the original
const getRes = await request(app).get('/api/elements/dup-src');
expect(getRes.body.success).toBe(true);
// Create a duplicate via batch (simulating what duplicate_elements does)
const original = getRes.body.element;
const duplicate = {
...original,
id: 'dup-copy',
x: original.x + 20,
y: original.y + 20,
};
const batchRes = await request(app)
.post('/api/elements/batch')
.send({ elements: [duplicate] });
expect(batchRes.body.success).toBe(true);
expect(getAllElements()).toHaveLength(2);
});
it('duplicated arrow with remapped bindings points to duplicated shapes', async () => {
// Create shape + arrow
const rect = makeElement({ id: 'dup-rect', x: 0, y: 0, width: 100, height: 50 });
const rect2 = makeElement({ id: 'dup-rect2', x: 300, y: 0, width: 100, height: 50 });
setElement('dup-rect', rect);
setElement('dup-rect2', rect2);
// Create arrow binding references
const arrow = {
id: 'dup-arrow',
type: 'arrow',
x: 100, y: 25,
width: 200, height: 0,
start: { id: 'dup-rect' },
end: { id: 'dup-rect2' },
};
// Simulate duplication with ID remapping
const idMap = new Map([
['dup-rect', 'copy-rect'],
['dup-rect2', 'copy-rect2'],
['dup-arrow', 'copy-arrow'],
]);
const dupArrow: any = {
...arrow,
id: 'copy-arrow',
x: arrow.x + 20,
y: arrow.y + 20,
start: { id: idMap.get(arrow.start.id) || arrow.start.id },
end: { id: idMap.get(arrow.end.id) || arrow.end.id },
};
expect(dupArrow.start.id).toBe('copy-rect');
expect(dupArrow.end.id).toBe('copy-rect2');
// Create the duplicated shapes and arrow
const batchRes = await request(app)
.post('/api/elements/batch')
.send({
elements: [
makeElement({ id: 'copy-rect', x: 20, y: 20, width: 100, height: 50 }),
makeElement({ id: 'copy-rect2', x: 320, y: 20, width: 100, height: 50 }),
dupArrow,
],
});
expect(batchRes.body.success).toBe(true);
const createdArrow = batchRes.body.elements.find((e: any) => e.id === 'copy-arrow');
expect(createdArrow).toBeDefined();
});
});
// ─── Mermaid Conversion Relay ───────────────────────────────
describe('Mermaid conversion relay', () => {
it('POST /api/elements/from-mermaid accepts valid diagram', async () => {
const res = await request(app)
.post('/api/elements/from-mermaid')
.send({
mermaidDiagram: 'graph TD\n A-->B',
config: {},
});
expect(res.status).toBe(200);
expect(res.body.success).toBe(true);
expect(res.body.mermaidDiagram).toBe('graph TD\n A-->B');
expect(res.body.message).toContain('frontend');
});
it('rejects empty mermaid diagram', async () => {
const res = await request(app)
.post('/api/elements/from-mermaid')
.send({ mermaidDiagram: '' });
expect(res.status).toBe(400);
expect(res.body.success).toBe(false);
});
it('rejects missing mermaid diagram', async () => {
const res = await request(app)
.post('/api/elements/from-mermaid')
.send({});
expect(res.status).toBe(400);
});
it('accepts diagram with config options', async () => {
const res = await request(app)
.post('/api/elements/from-mermaid')
.send({
mermaidDiagram: 'sequenceDiagram\n A->>B: Hello',
config: { theme: 'dark' },
});
expect(res.body.success).toBe(true);
expect(res.body.config).toEqual({ theme: 'dark' });
});
});
// ─── Image Export Relay ─────────────────────────────────────
describe('Image export relay', () => {
it('POST /api/export/image without connected browser returns 503', async () => {
const res = await request(app)
.post('/api/export/image')
.send({ format: 'png', background: true });
expect(res.status).toBe(503);
expect(res.body.success).toBe(false);
});
it('POST /api/export/image accepts captureViewport parameter', async () => {
const res = await request(app)
.post('/api/export/image')
.send({ format: 'png', background: true, captureViewport: true });
// Will be 503 since no browser, but should not 400 on the parameter
expect(res.status).toBe(503);
});
});
// ─── Viewport Relay ─────────────────────────────────────────
describe('Viewport relay', () => {
it('POST /api/viewport without connected browser returns 503', async () => {
const res = await request(app)
.post('/api/viewport')
.send({ action: 'scrollToContent' });
expect(res.status).toBe(503);
});
it('accepts various viewport actions', async () => {
for (const action of ['scrollToContent', 'zoomToFit']) {
const res = await request(app)
.post('/api/viewport')
.send({ action });
// 503 expected (no browser), but validates the action is accepted
expect(res.status).toBe(503);
}
});
});
// ─── Files API ──────────────────────────────────────────────
describe('Files API comprehensive', () => {
it('GET /api/files returns empty initially', async () => {
const res = await request(app).get('/api/files');
expect(res.body.success).toBe(true);
expect(Object.keys(res.body.files)).toHaveLength(0);
});
it('POST /api/files adds files and GET returns them', async () => {
await request(app)
.post('/api/files')
.send({
files: {
'f1': { id: 'f1', mimeType: 'image/png', dataURL: 'data:image/png;base64,abc', created: Date.now() },
'f2': { id: 'f2', mimeType: 'image/jpeg', dataURL: 'data:image/jpeg;base64,xyz', created: Date.now() },
},
});
const res = await request(app).get('/api/files');
expect(Object.keys(res.body.files)).toHaveLength(2);
expect(res.body.files['f1'].mimeType).toBe('image/png');
expect(res.body.files['f2'].mimeType).toBe('image/jpeg');
});
it('DELETE /api/files/:id removes the file', async () => {
await request(app)
.post('/api/files')
.send({
files: {
'del-f': { id: 'del-f', mimeType: 'image/png', dataURL: 'data:image/png;base64,abc', created: Date.now() },
},
});
const delRes = await request(app).delete('/api/files/del-f');
expect(delRes.body.success).toBe(true);
const listRes = await request(app).get('/api/files');
expect(listRes.body.files['del-f']).toBeUndefined();
});
it('DELETE /api/files/:id for non-existent file returns 404', async () => {
const res = await request(app).delete('/api/files/nonexistent');
expect(res.status).toBe(404);
});
it('POST /api/files rejects non-object body', async () => {
const res = await request(app)
.post('/api/files')
.send({ files: 'not-an-object' });
expect(res.status).toBe(400);
});
});
// ─── Sync Status ────────────────────────────────────────────
describe('Sync status endpoint', () => {
it('GET /api/sync/status returns element count', async () => {
setElement('ss-1', makeElement({ id: 'ss-1' }));
setElement('ss-2', makeElement({ id: 'ss-2' }));
const res = await request(app).get('/api/sync/status');
expect(res.body.success).toBe(true);
expect(res.body.elementCount).toBe(2);
});
});
// ─── Element Version History ────────────────────────────────
describe('Element version history via API', () => {
it('element has version after creation and update', async () => {
const createRes = await request(app)
.post('/api/elements')
.send({ id: 'hist-el', type: 'rectangle', x: 0, y: 0, width: 100, height: 50 });
expect(createRes.body.success).toBe(true);
const updateRes = await request(app)
.put('/api/elements/hist-el')
.send({ x: 500 });
expect(updateRes.body.success).toBe(true);
const getRes = await request(app).get('/api/elements/hist-el');
expect(getRes.body.element.x).toBe(500);
});
});
// ─── Error Handling ─────────────────────────────────────────
describe('API error handling', () => {
it('POST /api/elements with invalid JSON returns 400', async () => {
const res = await request(app)
.post('/api/elements')
.set('Content-Type', 'application/json')
.send('not-json');
// Express body-parser returns 400 or 500 on parse failure depending on version
expect([400, 500]).toContain(res.status);
});
it('PUT /api/elements/:id on non-existent element returns 404', async () => {
const res = await request(app)
.put('/api/elements/nonexistent')
.send({ x: 100 });
expect(res.status).toBe(404);
});
it('DELETE /api/elements/:id on non-existent returns 404', async () => {
const res = await request(app)
.delete('/api/elements/nonexistent');
expect(res.status).toBe(404);
});
it('POST /api/elements/batch rejects non-array elements', async () => {
const res = await request(app)
.post('/api/elements/batch')
.send({ elements: 'not-an-array' });
expect(res.status).toBe(400);
});
it('POST /api/snapshots rejects missing name', async () => {
const res = await request(app)
.post('/api/snapshots')
.send({});
expect(res.status).toBe(400);
});
});
+210
View File
@@ -0,0 +1,210 @@
import { describe, it, expect, beforeEach, afterEach } from 'vitest';
import request from 'supertest';
import { initDb, closeDb, setActiveTenant } from '../../src/db.js';
import path from 'path';
import os from 'os';
import fs from 'fs';
let dbPath: string;
let app: any;
beforeEach(async () => {
dbPath = path.join(os.tmpdir(), `excalidraw-security-test-${Date.now()}-${Math.random().toString(36).slice(2)}.db`);
initDb(dbPath);
setActiveTenant('default');
const mod = await import('../../src/server.js');
app = mod.default;
});
afterEach(() => {
closeDb();
for (const suffix of ['', '-wal', '-shm']) {
try { fs.unlinkSync(dbPath + suffix); } catch {}
}
});
// ─── Input Validation ───────────────────────────────────────
describe('Input validation - element creation', () => {
it('rejects element with missing type', async () => {
const res = await request(app)
.post('/api/elements')
.send({ x: 0, y: 0, width: 100, height: 50 });
expect(res.status).toBe(400);
});
it('rejects element with invalid type', async () => {
const res = await request(app)
.post('/api/elements')
.send({ type: 'malicious<script>', x: 0, y: 0, width: 100, height: 50 });
expect(res.status).toBe(400);
});
it('rejects element with negative dimensions gracefully', async () => {
// Server should handle negative dimensions without crashing
const res = await request(app)
.post('/api/elements')
.send({ type: 'rectangle', x: 0, y: 0, width: -100, height: -50 });
// May succeed (Excalidraw allows negative) or fail validation — either is acceptable
expect([200, 400]).toContain(res.status);
});
it('handles very large coordinates without crashing', async () => {
const res = await request(app)
.post('/api/elements')
.send({ type: 'rectangle', x: 1e15, y: 1e15, width: 100, height: 50 });
// Should not crash the server
expect([200, 400]).toContain(res.status);
});
});
describe('Input validation - batch operations', () => {
it('rejects batch with non-array elements', async () => {
const res = await request(app)
.post('/api/elements/batch')
.send({ elements: { not: 'an array' } });
expect(res.status).toBe(400);
});
it('rejects batch with null elements', async () => {
const res = await request(app)
.post('/api/elements/batch')
.send({ elements: null });
expect(res.status).toBe(400);
});
it('handles extremely large batch without crash', async () => {
const elements = Array.from({ length: 100 }, (_, i) => ({
id: `bulk-${i}`,
type: 'rectangle',
x: i * 10,
y: 0,
width: 8,
height: 8,
}));
const res = await request(app)
.post('/api/elements/batch')
.send({ elements });
expect(res.status).toBe(200);
expect(res.body.success).toBe(true);
});
});
describe('Input validation - sync endpoints', () => {
it('POST /api/elements/sync rejects non-array elements', async () => {
const res = await request(app)
.post('/api/elements/sync')
.send({ elements: 'not-array' });
expect(res.status).toBe(400);
});
it('POST /api/elements/sync/v2 rejects non-number lastSyncVersion', async () => {
const res = await request(app)
.post('/api/elements/sync/v2')
.send({ lastSyncVersion: 'not-a-number', changes: [] });
expect(res.status).toBe(400);
});
it('POST /api/elements/sync/v2 handles missing changes gracefully', async () => {
const res = await request(app)
.post('/api/elements/sync/v2')
.send({ lastSyncVersion: 0 });
// Should use default empty array
expect(res.status).toBe(200);
expect(res.body.success).toBe(true);
});
});
describe('Input validation - settings', () => {
it('PUT /api/settings/:key rejects missing value', async () => {
const res = await request(app)
.put('/api/settings/test')
.send({});
expect(res.status).toBe(400);
});
it('GET /api/settings/:key returns null for missing key', async () => {
const res = await request(app).get('/api/settings/nonexistent');
expect(res.body.value).toBeNull();
});
});
describe('Input validation - tenant operations', () => {
it('PUT /api/tenant/active rejects missing tenantId', async () => {
const res = await request(app)
.put('/api/tenant/active')
.send({});
expect(res.status).toBe(400);
});
it('PUT /api/tenant/active rejects non-existent tenant', async () => {
const res = await request(app)
.put('/api/tenant/active')
.send({ tenantId: 'nonexistent-tenant-xyz' });
expect(res.status).toBe(400);
});
});
describe('Input validation - search', () => {
it('GET /api/elements/search with no params returns all elements', async () => {
const res = await request(app).get('/api/elements/search');
expect(res.status).toBe(200);
expect(res.body.success).toBe(true);
});
it('GET /api/elements/search handles special characters in query', async () => {
const res = await request(app).get('/api/elements/search?q=%22OR%201%3D1');
// FTS5 may reject special chars with 500 — acceptable as long as server doesn't crash
expect([200, 400, 500]).toContain(res.status);
});
});
describe('Input validation - mermaid', () => {
it('rejects non-string mermaid diagram', async () => {
const res = await request(app)
.post('/api/elements/from-mermaid')
.send({ mermaidDiagram: 12345 });
expect(res.status).toBe(400);
});
});
// ─── Header Handling ────────────────────────────────────────
describe('X-Tenant-Id header handling', () => {
it('invalid X-Tenant-Id gracefully falls back', async () => {
const res = await request(app)
.get('/api/elements')
.set('X-Tenant-Id', 'nonexistent-tenant');
// Should either return empty elements or error — 500 is acceptable for unknown tenant
expect([200, 400, 404, 500]).toContain(res.status);
});
});
// ─── Content-Type Handling ──────────────────────────────────
describe('Content-Type edge cases', () => {
it('POST with no content-type header handles gracefully', async () => {
const res = await request(app)
.post('/api/elements')
.send('');
// Should not crash
expect([200, 400]).toContain(res.status);
});
});
+540
View File
@@ -0,0 +1,540 @@
import { describe, it, expect, beforeEach, afterEach } from 'vitest';
import request from 'supertest';
import { initDb, closeDb, setElement, getAllElements, deleteElement, clearElements, getCurrentSyncVersion, getChangesSince, setActiveTenant } from '../../src/db.js';
import type { ServerElement } from '../../src/types.js';
import path from 'path';
import os from 'os';
import fs from 'fs';
let dbPath: string;
let app: any;
function makeElement(overrides: Partial<ServerElement> = {}): ServerElement {
return {
id: `el-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`,
type: 'rectangle',
x: 100,
y: 200,
width: 150,
height: 80,
version: 1,
...overrides,
};
}
beforeEach(async () => {
dbPath = path.join(os.tmpdir(), `excalidraw-sync-test-${Date.now()}-${Math.random().toString(36).slice(2)}.db`);
initDb(dbPath);
setActiveTenant('default');
const mod = await import('../../src/server.js');
app = mod.default;
});
afterEach(() => {
closeDb();
for (const suffix of ['', '-wal', '-shm']) {
try { fs.unlinkSync(dbPath + suffix); } catch {}
}
});
// ─── Delta Sync v2: Deletion Flows ──────────────────────────
describe('Delta sync v2 - deletion flows', () => {
it('deletes elements when client sends action:delete', async () => {
setElement('a', makeElement({ id: 'a' }));
setElement('b', makeElement({ id: 'b' }));
setElement('c', makeElement({ id: 'c' }));
const v0 = getCurrentSyncVersion();
const res = await request(app)
.post('/api/elements/sync/v2')
.send({
lastSyncVersion: v0,
changes: [
{ id: 'a', action: 'delete' },
{ id: 'b', action: 'delete' },
],
});
expect(res.status).toBe(200);
expect(res.body.success).toBe(true);
expect(res.body.appliedCount).toBe(2);
const remaining = getAllElements();
expect(remaining).toHaveLength(1);
expect(remaining[0].id).toBe('c');
});
it('deletes all elements when client sends delete for every element', async () => {
setElement('x', makeElement({ id: 'x' }));
setElement('y', makeElement({ id: 'y' }));
setElement('z', makeElement({ id: 'z' }));
const v0 = getCurrentSyncVersion();
const res = await request(app)
.post('/api/elements/sync/v2')
.send({
lastSyncVersion: v0,
changes: [
{ id: 'x', action: 'delete' },
{ id: 'y', action: 'delete' },
{ id: 'z', action: 'delete' },
],
});
expect(res.body.appliedCount).toBe(3);
expect(getAllElements()).toHaveLength(0);
});
it('delete for non-existent element does not crash', async () => {
const res = await request(app)
.post('/api/elements/sync/v2')
.send({
lastSyncVersion: 0,
changes: [{ id: 'ghost', action: 'delete' }],
});
expect(res.status).toBe(200);
expect(res.body.success).toBe(true);
});
it('deleted elements do not reappear on subsequent GET /api/elements', async () => {
setElement('persist-1', makeElement({ id: 'persist-1' }));
setElement('persist-2', makeElement({ id: 'persist-2' }));
const v0 = getCurrentSyncVersion();
await request(app)
.post('/api/elements/sync/v2')
.send({
lastSyncVersion: v0,
changes: [{ id: 'persist-1', action: 'delete' }],
});
const res = await request(app).get('/api/elements');
expect(res.body.count).toBe(1);
expect(res.body.elements[0].id).toBe('persist-2');
});
it('deleted elements do not reappear after multiple reload cycles', async () => {
setElement('reload-1', makeElement({ id: 'reload-1' }));
setElement('reload-2', makeElement({ id: 'reload-2' }));
const v0 = getCurrentSyncVersion();
// Simulate: frontend syncs deletions
await request(app)
.post('/api/elements/sync/v2')
.send({
lastSyncVersion: v0,
changes: [
{ id: 'reload-1', action: 'delete' },
{ id: 'reload-2', action: 'delete' },
],
});
// Simulate: multiple page reloads fetching elements
for (let i = 0; i < 3; i++) {
const res = await request(app).get('/api/elements');
expect(res.body.count).toBe(0);
expect(res.body.elements).toEqual([]);
}
});
});
// ─── Delta Sync v2: Mixed Operations ────────────────────────
describe('Delta sync v2 - mixed operations', () => {
it('handles mixed upserts and deletes in single sync', async () => {
setElement('a', makeElement({ id: 'a', x: 0 }));
setElement('b', makeElement({ id: 'b', x: 100 }));
const v0 = getCurrentSyncVersion();
const res = await request(app)
.post('/api/elements/sync/v2')
.send({
lastSyncVersion: v0,
changes: [
{ id: 'a', action: 'delete' },
{ id: 'c', action: 'upsert', element: makeElement({ id: 'c', x: 200 }) },
{ id: 'b', action: 'upsert', element: makeElement({ id: 'b', x: 150 }) },
],
});
expect(res.body.appliedCount).toBe(3);
const remaining = getAllElements();
expect(remaining).toHaveLength(2);
const ids = remaining.map(e => e.id).sort();
expect(ids).toEqual(['b', 'c']);
const b = remaining.find(e => e.id === 'b')!;
expect(b.x).toBe(150);
});
it('upsert after delete re-creates the element', async () => {
setElement('revive', makeElement({ id: 'revive', x: 0 }));
const v0 = getCurrentSyncVersion();
// Delete it
await request(app)
.post('/api/elements/sync/v2')
.send({
lastSyncVersion: v0,
changes: [{ id: 'revive', action: 'delete' }],
});
expect(getAllElements()).toHaveLength(0);
// Re-create it
const v1 = getCurrentSyncVersion();
await request(app)
.post('/api/elements/sync/v2')
.send({
lastSyncVersion: v1,
changes: [{ id: 'revive', action: 'upsert', element: makeElement({ id: 'revive', x: 999 }) }],
});
const elements = getAllElements();
expect(elements).toHaveLength(1);
expect(elements[0].id).toBe('revive');
expect(elements[0].x).toBe(999);
});
});
// ─── Delta Sync v2: Bidirectional ───────────────────────────
describe('Delta sync v2 - bidirectional sync', () => {
it('returns server-side changes not sent by client', async () => {
// Server has elements from MCP
setElement('mcp-1', makeElement({ id: 'mcp-1' }));
setElement('mcp-2', makeElement({ id: 'mcp-2' }));
// Client syncs from version 0 with its own new element
const res = await request(app)
.post('/api/elements/sync/v2')
.send({
lastSyncVersion: 0,
changes: [
{ id: 'fe-1', action: 'upsert', element: makeElement({ id: 'fe-1' }) },
],
});
expect(res.body.success).toBe(true);
// Server should return mcp-1 and mcp-2 as changes the client hasn't seen
const serverChangeIds = res.body.serverChanges.map((c: any) => c.id).sort();
expect(serverChangeIds).toEqual(['mcp-1', 'mcp-2']);
// fe-1 should NOT be in serverChanges (client already knows about it)
expect(serverChangeIds).not.toContain('fe-1');
});
it('server-side deletes appear as delete actions in serverChanges', async () => {
setElement('srv-del', makeElement({ id: 'srv-del' }));
const v0 = getCurrentSyncVersion();
// Server-side delete (simulating MCP delete_element)
deleteElement('srv-del');
const v1 = getCurrentSyncVersion();
// Client syncs from before the delete
const res = await request(app)
.post('/api/elements/sync/v2')
.send({ lastSyncVersion: v0, changes: [] });
const deleteChange = res.body.serverChanges.find((c: any) => c.id === 'srv-del');
expect(deleteChange).toBeDefined();
expect(deleteChange.action).toBe('delete');
});
it('excludes client-sent IDs from serverChanges', async () => {
setElement('shared', makeElement({ id: 'shared', x: 0 }));
const res = await request(app)
.post('/api/elements/sync/v2')
.send({
lastSyncVersion: 0,
changes: [
{ id: 'shared', action: 'upsert', element: makeElement({ id: 'shared', x: 50 }) },
],
});
// 'shared' should NOT appear in serverChanges since the client sent it
const serverIds = res.body.serverChanges.map((c: any) => c.id);
expect(serverIds).not.toContain('shared');
});
});
// ─── Delta Sync v2: Multiple Rounds ─────────────────────────
describe('Delta sync v2 - multiple rounds', () => {
it('tracks sync version across multiple sync rounds', async () => {
// Round 1: create elements
const r1 = await request(app)
.post('/api/elements/sync/v2')
.send({
lastSyncVersion: 0,
changes: [
{ id: 'r1-a', action: 'upsert', element: makeElement({ id: 'r1-a' }) },
{ id: 'r1-b', action: 'upsert', element: makeElement({ id: 'r1-b' }) },
],
});
expect(r1.body.currentSyncVersion).toBeGreaterThan(0);
const v1 = r1.body.currentSyncVersion;
// Round 2: update one, delete one, create one
const r2 = await request(app)
.post('/api/elements/sync/v2')
.send({
lastSyncVersion: v1,
changes: [
{ id: 'r1-a', action: 'upsert', element: makeElement({ id: 'r1-a', x: 999 }) },
{ id: 'r1-b', action: 'delete' },
{ id: 'r2-c', action: 'upsert', element: makeElement({ id: 'r2-c' }) },
],
});
expect(r2.body.currentSyncVersion).toBeGreaterThan(v1);
expect(r2.body.appliedCount).toBe(3);
// No new server-side changes should be returned
expect(r2.body.serverChanges).toHaveLength(0);
// Verify final state
const elements = getAllElements();
expect(elements).toHaveLength(2);
const ids = elements.map(e => e.id).sort();
expect(ids).toEqual(['r1-a', 'r2-c']);
expect(elements.find(e => e.id === 'r1-a')!.x).toBe(999);
});
it('empty sync returns current version without changes', async () => {
setElement('existing', makeElement({ id: 'existing' }));
const v0 = getCurrentSyncVersion();
const res = await request(app)
.post('/api/elements/sync/v2')
.send({ lastSyncVersion: v0, changes: [] });
expect(res.body.success).toBe(true);
expect(res.body.appliedCount).toBe(0);
expect(res.body.serverChanges).toHaveLength(0);
expect(res.body.currentSyncVersion).toBe(v0);
});
});
// ─── Sync Version Monotonicity ──────────────────────────────
describe('Sync version monotonicity', () => {
it('sync version always increases after mutations', async () => {
const versions: number[] = [];
// Create
setElement('mono-a', makeElement({ id: 'mono-a' }));
versions.push(getCurrentSyncVersion());
// Update via sync
await request(app)
.post('/api/elements/sync/v2')
.send({
lastSyncVersion: 0,
changes: [{ id: 'mono-a', action: 'upsert', element: makeElement({ id: 'mono-a', x: 50 }) }],
});
versions.push(getCurrentSyncVersion());
// Delete via sync
await request(app)
.post('/api/elements/sync/v2')
.send({
lastSyncVersion: versions[versions.length - 1],
changes: [{ id: 'mono-a', action: 'delete' }],
});
versions.push(getCurrentSyncVersion());
// Create via API
await request(app)
.post('/api/elements')
.send({ type: 'rectangle', x: 0, y: 0, width: 100, height: 50 });
versions.push(getCurrentSyncVersion());
// Every version should be strictly greater than the previous
for (let i = 1; i < versions.length; i++) {
expect(versions[i]).toBeGreaterThan(versions[i - 1]!);
}
});
it('getChangesSince correctly filters by version', async () => {
setElement('cs-a', makeElement({ id: 'cs-a' }));
const v1 = getCurrentSyncVersion();
setElement('cs-b', makeElement({ id: 'cs-b' }));
const v2 = getCurrentSyncVersion();
setElement('cs-c', makeElement({ id: 'cs-c' }));
const v3 = getCurrentSyncVersion();
// Changes since v1 should include cs-b and cs-c but not cs-a
const changes = getChangesSince(v1);
const ids = changes.map(c => c.id).sort();
expect(ids).toEqual(['cs-b', 'cs-c']);
// Changes since v2 should only include cs-c
const changes2 = getChangesSince(v2);
expect(changes2).toHaveLength(1);
expect(changes2[0].id).toBe('cs-c');
// Changes since v3 should be empty
expect(getChangesSince(v3)).toHaveLength(0);
});
});
// ─── Concurrent Sync Requests ───────────────────────────────
describe('Concurrent sync requests', () => {
it('parallel sync requests all complete without data loss', async () => {
const promises = Array.from({ length: 5 }, (_, i) =>
request(app)
.post('/api/elements/sync/v2')
.send({
lastSyncVersion: 0,
changes: [
{ id: `par-${i}`, action: 'upsert', element: makeElement({ id: `par-${i}`, x: i * 100 }) },
],
})
);
const results = await Promise.all(promises);
for (const r of results) {
expect(r.body.success).toBe(true);
expect(r.body.appliedCount).toBe(1);
}
const elements = getAllElements();
expect(elements).toHaveLength(5);
});
it('parallel deletes all take effect', async () => {
for (let i = 0; i < 5; i++) {
setElement(`pd-${i}`, makeElement({ id: `pd-${i}` }));
}
const v0 = getCurrentSyncVersion();
const promises = Array.from({ length: 5 }, (_, i) =>
request(app)
.post('/api/elements/sync/v2')
.send({
lastSyncVersion: v0,
changes: [{ id: `pd-${i}`, action: 'delete' }],
})
);
await Promise.all(promises);
expect(getAllElements()).toHaveLength(0);
});
});
// ─── Sync After Clear ───────────────────────────────────────
describe('Sync after clear', () => {
it('elements created after clear persist correctly', async () => {
setElement('pre-clear', makeElement({ id: 'pre-clear' }));
await request(app).delete('/api/elements/clear');
expect(getAllElements()).toHaveLength(0);
const v0 = getCurrentSyncVersion();
const res = await request(app)
.post('/api/elements/sync/v2')
.send({
lastSyncVersion: v0,
changes: [
{ id: 'post-clear', action: 'upsert', element: makeElement({ id: 'post-clear' }) },
],
});
expect(res.body.appliedCount).toBe(1);
expect(getAllElements()).toHaveLength(1);
expect(getAllElements()[0].id).toBe('post-clear');
});
it('sync from version 0 after clear returns clear as delete changes', async () => {
setElement('was-here', makeElement({ id: 'was-here' }));
clearElements();
// Sync from 0 should see the element as a delete
const changes = getChangesSince(0);
const deleteChange = changes.find(c => c.id === 'was-here');
expect(deleteChange).toBeDefined();
expect(deleteChange!.action).toBe('delete');
});
});
// ─── Overwrite Sync (Legacy) ────────────────────────────────
describe('POST /api/elements/sync (legacy overwrite)', () => {
it('replaces all elements and deleted ones stay gone on GET', async () => {
setElement('old-1', makeElement({ id: 'old-1' }));
setElement('old-2', makeElement({ id: 'old-2' }));
const res = await request(app)
.post('/api/elements/sync')
.send({
elements: [makeElement({ id: 'new-1' })],
});
expect(res.body.success).toBe(true);
const elements = getAllElements();
expect(elements).toHaveLength(1);
expect(elements[0].id).toBe('new-1');
// Old elements should not be returned
const listRes = await request(app).get('/api/elements');
expect(listRes.body.count).toBe(1);
expect(listRes.body.elements[0].id).toBe('new-1');
});
it('overwrite with empty array clears all elements', async () => {
setElement('gone', makeElement({ id: 'gone' }));
await request(app)
.post('/api/elements/sync')
.send({ elements: [] });
expect(getAllElements()).toHaveLength(0);
const res = await request(app).get('/api/elements');
expect(res.body.count).toBe(0);
});
});
// ─── GET /api/sync/version consistency ──────────────────────
describe('GET /api/sync/version', () => {
it('matches internal getCurrentSyncVersion', async () => {
setElement('sv-check', makeElement({ id: 'sv-check' }));
const internal = getCurrentSyncVersion();
const res = await request(app).get('/api/sync/version');
expect(res.body.syncVersion).toBe(internal);
});
it('increases after sync/v2 applies changes', async () => {
const r1 = await request(app).get('/api/sync/version');
const v1 = r1.body.syncVersion;
await request(app)
.post('/api/elements/sync/v2')
.send({
lastSyncVersion: 0,
changes: [{ id: 'bump', action: 'upsert', element: makeElement({ id: 'bump' }) }],
});
const r2 = await request(app).get('/api/sync/version');
expect(r2.body.syncVersion).toBeGreaterThan(v1);
});
});
+403
View File
@@ -0,0 +1,403 @@
import { describe, it, expect, beforeAll, afterAll, beforeEach } from 'vitest';
import { initDb, closeDb, setElement, getAllElements, setActiveTenant, ensureTenant, setActiveProject, getActiveProjectId, getCurrentSyncVersion, getChangesSince, clearElements } from '../../src/db.js';
import type { ServerElement } from '../../src/types.js';
import WebSocket from 'ws';
import request from 'supertest';
import path from 'path';
import os from 'os';
import fs from 'fs';
let dbPath: string;
let port: number;
let startCanvasServer: () => Promise<void>;
let stopCanvasServer: () => Promise<void>;
let app: any;
function makeElement(overrides: Partial<ServerElement> = {}): ServerElement {
return {
id: `el-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`,
type: 'rectangle',
x: 100,
y: 200,
width: 150,
height: 80,
version: 1,
...overrides,
};
}
function connectClient(): Promise<WebSocket> {
return new Promise((resolve, reject) => {
const ws = new WebSocket(`ws://localhost:${port}`);
ws.on('open', () => resolve(ws));
ws.on('error', reject);
});
}
function waitForMessageOfType(ws: WebSocket, type: string, timeoutMs = 5000): Promise<any> {
return new Promise((resolve, reject) => {
const timer = setTimeout(() => reject(new Error(`Timeout waiting for message type: ${type}`)), timeoutMs);
const handler = (data: WebSocket.RawData) => {
const msg = JSON.parse(data.toString());
if (msg.type === type) {
clearTimeout(timer);
ws.off('message', handler);
resolve(msg);
}
};
ws.on('message', handler);
});
}
function drainInitialMessages(ws: WebSocket): Promise<void> {
return new Promise((resolve) => {
let count = 0;
const handler = () => {
count++;
if (count >= 3) {
ws.off('message', handler);
resolve();
}
};
ws.on('message', handler);
setTimeout(() => {
ws.off('message', handler);
resolve();
}, 2000);
});
}
/** Connect and wait until initial messages are drained. */
async function connectAndDrain(): Promise<WebSocket> {
const ws = await connectClient();
await drainInitialMessages(ws);
return ws;
}
/** Send hello and wait for hello_ack. */
async function sendHelloAndWait(ws: WebSocket, tenantId: string): Promise<any> {
const ackPromise = waitForMessageOfType(ws, 'hello_ack', 8000);
ws.send(JSON.stringify({ type: 'hello', tenantId }));
return ackPromise;
}
function collectMessagesFor(ws: WebSocket, durationMs: number): Promise<any[]> {
return new Promise((resolve) => {
const msgs: any[] = [];
const handler = (data: WebSocket.RawData) => msgs.push(JSON.parse(data.toString()));
ws.on('message', handler);
setTimeout(() => {
ws.off('message', handler);
resolve(msgs);
}, durationMs);
});
}
beforeAll(async () => {
port = 3300 + Math.floor(Math.random() * 100);
process.env.CANVAS_PORT = String(port);
process.env.HOST = 'localhost';
dbPath = path.join(os.tmpdir(), `excalidraw-isolation-test-${Date.now()}.db`);
initDb(dbPath);
const mod = await import('../../src/server.js');
app = mod.default;
startCanvasServer = mod.startCanvasServer;
stopCanvasServer = mod.stopCanvasServer;
await startCanvasServer();
});
afterAll(async () => {
await stopCanvasServer();
closeDb();
for (const suffix of ['', '-wal', '-shm']) {
try { fs.unlinkSync(dbPath + suffix); } catch {}
}
});
beforeEach(() => {
setActiveTenant('default');
});
// ─── Element Isolation per Tenant ───────────────────────────
describe('Element isolation per tenant', () => {
it('elements in tenant A are not visible to tenant B', async () => {
ensureTenant('tenant-a', 'Tenant A', '/path/a');
ensureTenant('tenant-b', 'Tenant B', '/path/b');
// Create element in tenant A
setActiveTenant('tenant-a');
const projA = getActiveProjectId();
setElement('el-a', makeElement({ id: 'el-a' }), projA);
// Create element in tenant B
setActiveTenant('tenant-b');
const projB = getActiveProjectId();
setElement('el-b', makeElement({ id: 'el-b' }), projB);
// Verify isolation via API
const resA = await request(app)
.get('/api/elements')
.set('X-Tenant-Id', 'tenant-a');
expect(resA.body.count).toBe(1);
expect(resA.body.elements[0].id).toBe('el-a');
const resB = await request(app)
.get('/api/elements')
.set('X-Tenant-Id', 'tenant-b');
expect(resB.body.count).toBe(1);
expect(resB.body.elements[0].id).toBe('el-b');
});
it('deleting elements in tenant A does not affect tenant B', async () => {
ensureTenant('del-a', 'Del A', '/path/del-a');
ensureTenant('del-b', 'Del B', '/path/del-b');
setActiveTenant('del-a');
const projA = getActiveProjectId();
setElement('del-el-a', makeElement({ id: 'del-el-a' }), projA);
setActiveTenant('del-b');
const projB = getActiveProjectId();
setElement('del-el-b', makeElement({ id: 'del-el-b' }), projB);
// Delete from tenant A via API
await request(app)
.delete('/api/elements/del-el-a')
.set('X-Tenant-Id', 'del-a');
// Tenant A should be empty
const resA = await request(app)
.get('/api/elements')
.set('X-Tenant-Id', 'del-a');
expect(resA.body.count).toBe(0);
// Tenant B should still have its element
const resB = await request(app)
.get('/api/elements')
.set('X-Tenant-Id', 'del-b');
expect(resB.body.count).toBe(1);
expect(resB.body.elements[0].id).toBe('del-el-b');
});
it('clear in tenant A does not affect tenant B', async () => {
ensureTenant('clr-a', 'Clr A', '/path/clr-a');
ensureTenant('clr-b', 'Clr B', '/path/clr-b');
setActiveTenant('clr-a');
setElement('clr-el-a', makeElement({ id: 'clr-el-a' }), getActiveProjectId());
setActiveTenant('clr-b');
setElement('clr-el-b', makeElement({ id: 'clr-el-b' }), getActiveProjectId());
// Clear tenant A
await request(app)
.delete('/api/elements/clear')
.set('X-Tenant-Id', 'clr-a');
const resA = await request(app)
.get('/api/elements')
.set('X-Tenant-Id', 'clr-a');
expect(resA.body.count).toBe(0);
const resB = await request(app)
.get('/api/elements')
.set('X-Tenant-Id', 'clr-b');
expect(resB.body.count).toBe(1);
});
});
// ─── Sync Version Isolation per Tenant ──────────────────────
describe('Sync version isolation', () => {
it('sync versions are independent per tenant/project', async () => {
ensureTenant('sv-a', 'SV A', '/path/sv-a');
ensureTenant('sv-b', 'SV B', '/path/sv-b');
// Create in tenant A
setActiveTenant('sv-a');
const projA = getActiveProjectId();
setElement('sv-el-a', makeElement({ id: 'sv-el-a' }), projA);
const vA = getCurrentSyncVersion(projA);
// Create in tenant B
setActiveTenant('sv-b');
const projB = getActiveProjectId();
setElement('sv-el-b', makeElement({ id: 'sv-el-b' }), projB);
const vB = getCurrentSyncVersion(projB);
// Both should have version 1 (independent counters)
expect(vA).toBe(1);
expect(vB).toBe(1);
});
it('delta sync v2 is scoped to the requesting tenant', async () => {
ensureTenant('ds-a', 'DS A', '/path/ds-a');
ensureTenant('ds-b', 'DS B', '/path/ds-b');
// Create in tenant A via API
await request(app)
.post('/api/elements')
.set('X-Tenant-Id', 'ds-a')
.send({ id: 'ds-el-a', type: 'rectangle', x: 0, y: 0, width: 100, height: 50 });
// Create in tenant B via API
await request(app)
.post('/api/elements')
.set('X-Tenant-Id', 'ds-b')
.send({ id: 'ds-el-b', type: 'rectangle', x: 0, y: 0, width: 100, height: 50 });
// Sync for tenant A from version 0
const resA = await request(app)
.post('/api/elements/sync/v2')
.set('X-Tenant-Id', 'ds-a')
.send({ lastSyncVersion: 0, changes: [] });
const idsA = resA.body.serverChanges.map((c: any) => c.id);
expect(idsA).toContain('ds-el-a');
expect(idsA).not.toContain('ds-el-b');
// Sync for tenant B from version 0
const resB = await request(app)
.post('/api/elements/sync/v2')
.set('X-Tenant-Id', 'ds-b')
.send({ lastSyncVersion: 0, changes: [] });
const idsB = resB.body.serverChanges.map((c: any) => c.id);
expect(idsB).toContain('ds-el-b');
expect(idsB).not.toContain('ds-el-a');
});
});
// ─── WebSocket Tenant Isolation ─────────────────────────────
describe('WebSocket tenant-scoped broadcasts', () => {
it('broadcast for tenant A does NOT reach client registered to tenant B', async () => {
ensureTenant('ws-a', 'WS A', '/path/ws-a');
ensureTenant('ws-b', 'WS B', '/path/ws-b');
const wsA = await connectAndDrain();
const wsB = await connectAndDrain();
await sendHelloAndWait(wsA, 'ws-a');
await sendHelloAndWait(wsB, 'ws-b');
// Start collecting messages on client B
const bMessages = collectMessagesFor(wsB, 2000);
// Create element in tenant A scope
await request(app)
.post('/api/elements')
.set('X-Tenant-Id', 'ws-a')
.send({ id: 'ws-only-a', type: 'rectangle', x: 0, y: 0, width: 100, height: 50 });
const received = await bMessages;
// Client B should NOT receive the element_created for tenant A
const created = received.filter(m => m.type === 'element_created' && m.element?.id === 'ws-only-a');
expect(created).toHaveLength(0);
wsA.close();
wsB.close();
});
it('broadcast for tenant A reaches all clients registered to tenant A', async () => {
ensureTenant('ws-multi', 'WS Multi', '/path/ws-multi');
const ws1 = await connectAndDrain();
const ws2 = await connectAndDrain();
await sendHelloAndWait(ws1, 'ws-multi');
await sendHelloAndWait(ws2, 'ws-multi');
const p1 = waitForMessageOfType(ws1, 'element_created');
const p2 = waitForMessageOfType(ws2, 'element_created');
await request(app)
.post('/api/elements')
.set('X-Tenant-Id', 'ws-multi')
.send({ id: 'ws-shared', type: 'rectangle', x: 0, y: 0, width: 100, height: 50 });
const [m1, m2] = await Promise.all([p1, p2]);
expect(m1.element.id).toBe('ws-shared');
expect(m2.element.id).toBe('ws-shared');
ws1.close();
ws2.close();
});
});
// ─── Hello Handshake Isolation ──────────────────────────────
describe('Hello handshake returns scoped elements', () => {
it('hello with tenantId returns only that tenant elements', async () => {
ensureTenant('hello-a', 'Hello A', '/path/hello-a');
ensureTenant('hello-b', 'Hello B', '/path/hello-b');
// Populate both tenants
await request(app)
.post('/api/elements')
.set('X-Tenant-Id', 'hello-a')
.send({ id: 'ha-el', type: 'rectangle', x: 0, y: 0, width: 100, height: 50 });
await request(app)
.post('/api/elements')
.set('X-Tenant-Id', 'hello-b')
.send({ id: 'hb-el', type: 'ellipse', x: 0, y: 0, width: 80, height: 80 });
const ws = await connectAndDrain();
const ack = await sendHelloAndWait(ws, 'hello-a');
expect(ack.tenantId).toBe('hello-a');
expect(ack.elements).toBeDefined();
const elementIds = ack.elements.map((e: any) => e.id);
expect(elementIds).toContain('ha-el');
expect(elementIds).not.toContain('hb-el');
ws.close();
});
});
// ─── Tenant Switch via API ──────────────────────────────────
describe('Tenant switch via API', () => {
it('PUT /api/tenant/active switches context and broadcasts', async () => {
ensureTenant('switch-to', 'Switch To', '/path/switch-to');
const ws = await connectAndDrain();
const switchPromise = waitForMessageOfType(ws, 'tenant_switched', 8000);
await request(app)
.put('/api/tenant/active')
.send({ tenantId: 'switch-to' });
const msg = await switchPromise;
expect(msg.tenant).toBeDefined();
expect(msg.tenant.id).toBe('switch-to');
ws.close();
});
it('GET /api/elements after tenant switch returns new tenant elements', async () => {
ensureTenant('ctx-old', 'Old', '/path/old');
ensureTenant('ctx-new', 'New', '/path/new');
await request(app)
.post('/api/elements')
.set('X-Tenant-Id', 'ctx-new')
.send({ id: 'new-el', type: 'rectangle', x: 0, y: 0, width: 100, height: 50 });
// Switch to new tenant
await request(app)
.put('/api/tenant/active')
.send({ tenantId: 'ctx-new' });
// Elements should be from the new tenant
const res = await request(app).get('/api/elements');
const ids = res.body.elements.map((e: any) => e.id);
expect(ids).toContain('new-el');
});
});