@things-factory/board-ui 10.0.0-beta.64 → 10.0.0-beta.65

package/dist-client/pages/board-edit-dispatch.test.js

@@ -0,0 +1,858 @@
+/**
+ * board-edit-dispatch.ts 단위 테스트.
+ *
+ * 핵심 보호:
+ *   - 호스트 측 in-place 적용 동작 — scene API (.add/.remove/target.set/.align/...)
+ *     호출 인자 + 호출 순서 검증
+ *   - revert 용 inverse op 정확성 — 적용 직전 좌표/모델 캡처가 정확한가
+ *   - silent fail (없는 refid, 미만 개수의 refids 등) 분류 — applied:false 반환
+ *
+ * 호스트 onBoardEditPatch 가 dispatcher 결과를 사용해 missed warning + patchInverses
+ * 누적하므로, dispatcher 가 잘못 분류하면 사용자에게는 "AI 응답이 적용 안 됨" 또는
+ * "revert 가 동작 안 함" 회귀로 직접 노출됨.
+ */
+import { dispatchBoardEditOp, collectAllRefids, captureOldKeys, computeArrangePositions } from './board-edit-dispatch';
+// ── Mock things-scene component ─────────────────────────────────────
+// scene 의 컴포넌트는 .model 객체 + .get(key) / .set(merged) / .parent / .components 를 가짐.
+// commander.execute / scene.add / scene.remove / scene.align 등을 mock 으로 캡처.
+function makeMockSceneComp(model, parent = null) {
+    const comp = {
+        model: { ...model },
+        parent,
+        components: [],
+        get(key) {
+            return this.model[key];
+        },
+        set(merged) {
+            this.model = merged;
+        }
+    };
+    return comp;
+}
+function makeMockScene(opts = {}) {
+    const comps = (opts.components || []).map(m => makeMockSceneComp(m));
+    const refidIndexMap = new Map();
+    for (const c of comps)
+        refidIndexMap.set(c.model.refid, c);
+    const rootMock = opts.rootModel
+        ? {
+            model: { ...opts.rootModel },
+            set(merged) {
+                this.model = merged;
+            }
+        }
+        : null;
+    const calls = [];
+    const scene = {
+        selected: [],
+        rootContainer: { refidIndexMap },
+        root: rootMock,
+        commander: {
+            execute(...args) {
+                calls.push({ method: 'commander.execute', args });
+            }
+        },
+        add(component, _bounds) {
+            calls.push({ method: 'add', component });
+            // 새 refid 발급 (auto-increment) — collectAllRefids 가 차집합으로 캡처
+            const next = (Math.max(0, ...refidIndexMap.keys()) || 0) + 1;
+            const newComp = makeMockSceneComp({ ...component, refid: next });
+            newComp.parent = this.rootContainer;
+            refidIndexMap.set(next, newComp);
+        },
+        remove() {
+            // selected 의 컴포넌트들을 refidIndexMap 에서 제거
+            for (const sel of this.selected) {
+                if (sel?.model?.refid != null)
+                    refidIndexMap.delete(sel.model.refid);
+            }
+            calls.push({ method: 'remove', selected: [...this.selected] });
+        },
+        align(direction) {
+            calls.push({ method: 'align', direction, selected: [...this.selected] });
+            // 좌표 변경 시뮬레이션 — 'left' 면 모든 selected 의 left = 0
+            if (direction === 'left') {
+                for (const c of this.selected)
+                    c.model.left = 0;
+            }
+        },
+        distribute(axis) {
+            calls.push({ method: 'distribute', axis, selected: [...this.selected] });
+        },
+        group() {
+            // group → 새 Group 컴포넌트 1개 생성 + selected 들이 그 자식이 됨
+            const next = (Math.max(0, ...refidIndexMap.keys()) || 0) + 1;
+            const groupComp = makeMockSceneComp({ refid: next, type: 'group' });
+            groupComp.components = [...this.selected];
+            refidIndexMap.set(next, groupComp);
+            calls.push({ method: 'group', children: [...this.selected], newRefid: next });
+        },
+        ungroup() {
+            // selected[0] 의 자식들이 부모로 흡수, group 자체는 제거
+            const target = this.selected[0];
+            if (target)
+                refidIndexMap.delete(target.model.refid);
+            calls.push({ method: 'ungroup', target });
+        },
+        zorder(direction) {
+            calls.push({ method: 'zorder', direction, selected: [...this.selected] });
+        }
+    };
+    return { scene, calls, refidIndexMap };
+}
+// ── collectAllRefids ────────────────────────────────────────────────
+describe('collectAllRefids', () => {
+    test('refidIndexMap 의 모든 refid 수집', () => {
+        const { scene } = makeMockScene({
+            components: [{ refid: 1 }, { refid: 35 }, { refid: 99 }]
+        });
+        expect(collectAllRefids(scene).sort((a, b) => a - b)).toEqual([1, 35, 99]);
+    });
+    test('빈 scene → 빈 배열', () => {
+        const { scene } = makeMockScene();
+        expect(collectAllRefids(scene)).toEqual([]);
+    });
+    test('rootContainer 없을 때도 안전', () => {
+        expect(collectAllRefids({})).toEqual([]);
+        expect(collectAllRefids(null)).toEqual([]);
+    });
+});
+// ── captureOldKeys ──────────────────────────────────────────────────
+describe('captureOldKeys', () => {
+    test('patch 가 건드린 키만 deep-clone 으로 보관', () => {
+        const model = { left: 10, top: 20, fillStyle: '#fff', height: 100 };
+        const patch = { left: 999, fillStyle: '#000' };
+        expect(captureOldKeys(model, patch)).toEqual({ left: 10, fillStyle: '#fff' });
+    });
+    test('원본에 없는 키는 null 보관 (revert 시 명시적 null reset)', () => {
+        const model = { left: 10 };
+        const patch = { left: 999, newKey: 'x' };
+        expect(captureOldKeys(model, patch)).toEqual({ left: 10, newKey: null });
+    });
+    test('nested 값은 통째로 deep-clone (참조 공유 X)', () => {
+        const model = { threeD: { material: { color: '#f00' } } };
+        const patch = { threeD: { material: { color: '#0f0' } } };
+        const out = captureOldKeys(model, patch);
+        // 원본 참조와 다른 객체
+        expect(out.threeD).not.toBe(model.threeD);
+        // 그러나 값은 동일
+        expect(out.threeD).toEqual({ material: { color: '#f00' } });
+        // 원본 mutate 해도 캡처본은 영향 X
+        model.threeD.material.color = '#000';
+        expect(out.threeD.material.color).toBe('#f00');
+    });
+    test('patch 가 빈 객체 → 빈 결과', () => {
+        expect(captureOldKeys({ a: 1 }, {})).toEqual({});
+        expect(captureOldKeys({ a: 1 }, null)).toEqual({});
+    });
+    test('model 이 null 이어도 안전 — 모든 키 null 로', () => {
+        expect(captureOldKeys(null, { a: 1, b: 2 })).toEqual({ a: null, b: null });
+    });
+});
+// ── dispatchBoardEditOp — add ───────────────────────────────────────
+describe('dispatchBoardEditOp — add', () => {
+    test('정상 — scene.add 호출 + 새 refid 의 inverse remove 반환', () => {
+        const { scene, calls, refidIndexMap } = makeMockScene({
+            components: [{ refid: 1, type: 'rect' }]
+        });
+        const r = dispatchBoardEditOp(scene, {
+            op: 'add',
+            component: { type: 'rect', left: 100 }
+        });
+        expect(r.applied).toBe(true);
+        // mock 의 add 는 refid=2 발급 (max=1 → +1)
+        expect(r.inverseOps).toEqual([{ op: 'remove', refid: 2 }]);
+        expect(calls.find(c => c.method === 'add')).toBeDefined();
+        expect(refidIndexMap.has(2)).toBe(true);
+    });
+    test('빈 scene 에 추가 — 첫 refid 1 발급', () => {
+        const { scene } = makeMockScene();
+        const r = dispatchBoardEditOp(scene, {
+            op: 'add',
+            component: { type: 'rect' }
+        });
+        expect(r.applied).toBe(true);
+        expect(r.inverseOps).toEqual([{ op: 'remove', refid: 1 }]);
+    });
+    test('normalize 콜백 사용 — add 에 전달되는 component 가 normalized', () => {
+        const { scene, calls } = makeMockScene();
+        const normalize = (c) => ({ ...c, value: 50, fillStyle: '#default' });
+        dispatchBoardEditOp(scene, { op: 'add', component: { type: 'gauge' } }, { normalize });
+        const addCall = calls.find(c => c.method === 'add');
+        expect(addCall.component.value).toBe(50);
+        expect(addCall.component.fillStyle).toBe('#default');
+    });
+    test('normalize 미지정 — component 그대로 전달', () => {
+        const { scene, calls } = makeMockScene();
+        dispatchBoardEditOp(scene, {
+            op: 'add',
+            component: { type: 'rect', left: 5 }
+        });
+        const addCall = calls.find(c => c.method === 'add');
+        expect(addCall.component).toEqual({ type: 'rect', left: 5 });
+    });
+});
+// ── dispatchBoardEditOp — remove ────────────────────────────────────
+describe('dispatchBoardEditOp — remove', () => {
+    test('정상 — 삭제 직전 model 을 add inverse 로 캡처', () => {
+        const { scene, calls, refidIndexMap } = makeMockScene({
+            components: [{ refid: 35, type: 'rect', left: 10, name: 'AGV-1' }]
+        });
+        // 컴포넌트의 parent 를 mock 으로 설정 (remove 가 parent 체크함)
+        refidIndexMap.get(35).parent = { fake: 'parent' };
+        const r = dispatchBoardEditOp(scene, { op: 'remove', refid: 35 });
+        expect(r.applied).toBe(true);
+        expect(r.inverseOps).toHaveLength(1);
+        const inv = r.inverseOps[0];
+        expect(inv.op).toBe('add');
+        expect(inv.component.refid).toBe(35);
+        expect(inv.component.name).toBe('AGV-1');
+        // scene.remove 호출 + selected 가 target 이었는지
+        const removeCall = calls.find(c => c.method === 'remove');
+        expect(removeCall.selected[0].model.refid).toBe(35);
+        expect(refidIndexMap.has(35)).toBe(false);
+    });
+    test('없는 refid → applied:false, scene.remove 미호출', () => {
+        const { scene, calls } = makeMockScene({ components: [{ refid: 1 }] });
+        const r = dispatchBoardEditOp(scene, { op: 'remove', refid: 999 });
+        expect(r.applied).toBe(false);
+        expect(r.inverseOps).toEqual([]);
+        expect(calls.find(c => c.method === 'remove')).toBeUndefined();
+    });
+    test('parent 가 없는 (orphan) 컴포넌트 → applied:false', () => {
+        // 회귀 방지: refidIndexMap 에 있어도 parent 가 없으면 things-scene 의 remove 가
+        // 동작하지 않는다 (이미 detach 된 상태). 분명하게 missed 로 분류해야 함.
+        const { scene } = makeMockScene({ components: [{ refid: 1 }] });
+        // 의도적으로 parent 미설정 (makeMockSceneComp default 가 null)
+        const r = dispatchBoardEditOp(scene, { op: 'remove', refid: 1 });
+        expect(r.applied).toBe(false);
+    });
+    test('inverse 의 component 는 깊은 클론 — 원본 변형이 복원에 영향 안 줌', () => {
+        const { scene, refidIndexMap } = makeMockScene({
+            components: [{ refid: 5, threeD: { material: { color: '#f00' } } }]
+        });
+        refidIndexMap.get(5).parent = { fake: 'p' };
+        const original = refidIndexMap.get(5).model;
+        const r = dispatchBoardEditOp(scene, { op: 'remove', refid: 5 });
+        // 원본 model mutate
+        original.threeD.material.color = '#0f0';
+        const inv = r.inverseOps[0];
+        expect(inv.component.threeD.material.color).toBe('#f00');
+    });
+    test('selected 복원 — 삭제 대상 외 selected 는 그대로', () => {
+        const { scene, refidIndexMap } = makeMockScene({
+            components: [{ refid: 1 }, { refid: 2 }]
+        });
+        refidIndexMap.get(1).parent = { p: 1 };
+        const other = refidIndexMap.get(2);
+        scene.selected = [refidIndexMap.get(1), other];
+        dispatchBoardEditOp(scene, { op: 'remove', refid: 1 });
+        expect(scene.selected).toEqual([other]);
+    });
+});
+// ── dispatchBoardEditOp — modify ────────────────────────────────────
+describe('dispatchBoardEditOp — modify', () => {
+    test('정상 — target.set 에 merged 전달, inverse 는 원본 키 값', () => {
+        const { scene, calls, refidIndexMap } = makeMockScene({
+            components: [{ refid: 35, type: 'rect', left: 10, top: 20, fillStyle: '#fff' }]
+        });
+        const r = dispatchBoardEditOp(scene, {
+            op: 'modify',
+            refid: 35,
+            patch: { left: 100, fillStyle: '#000' }
+        });
+        expect(r.applied).toBe(true);
+        const target = refidIndexMap.get(35);
+        expect(target.model.left).toBe(100);
+        expect(target.model.fillStyle).toBe('#000');
+        expect(target.model.top).toBe(20); // 다른 키 보존
+        // inverse 는 원본 값
+        expect(r.inverseOps).toEqual([
+            { op: 'modify', refid: 35, patch: { left: 10, fillStyle: '#fff' } }
+        ]);
+        // commander.execute 호출 (snapshot push)
+        expect(calls.find(c => c.method === 'commander.execute')).toBeDefined();
+    });
+    test('nested object deep-merge — 색만 바꿀 때 geometry 보존', () => {
+        const { scene, refidIndexMap } = makeMockScene({
+            components: [
+                {
+                    refid: 1,
+                    type: 'rect',
+                    threeD: {
+                        enabled: true,
+                        geometry: { type: 'box', size: { x: 100 } },
+                        material: { color: '#f00', metalness: 0.5 }
+                    }
+                }
+            ]
+        });
+        dispatchBoardEditOp(scene, {
+            op: 'modify',
+            refid: 1,
+            patch: { threeD: { material: { color: '#0f0' } } }
+        });
+        const target = refidIndexMap.get(1);
+        expect(target.model.threeD.material.color).toBe('#0f0');
+        expect(target.model.threeD.material.metalness).toBe(0.5); // 보존
+        expect(target.model.threeD.geometry).toEqual({ type: 'box', size: { x: 100 } });
+        expect(target.model.threeD.enabled).toBe(true);
+    });
+    test('없는 refid → applied:false', () => {
+        const { scene } = makeMockScene({ components: [{ refid: 1 }] });
+        const r = dispatchBoardEditOp(scene, {
+            op: 'modify',
+            refid: 999,
+            patch: { left: 10 }
+        });
+        expect(r.applied).toBe(false);
+        expect(r.inverseOps).toEqual([]);
+    });
+});
+// ── dispatchBoardEditOp — modifyBoard ───────────────────────────────
+describe('dispatchBoardEditOp — modifyBoard', () => {
+    test('정상 — root.set 호출 + inverse 는 root 의 원본 키', () => {
+        const { scene, calls } = makeMockScene({
+            rootModel: { fillStyle: '#fff', name: 'Floor' },
+            components: []
+        });
+        const r = dispatchBoardEditOp(scene, {
+            op: 'modifyBoard',
+            patch: { fillStyle: '#0a1929' }
+        });
+        expect(r.applied).toBe(true);
+        expect(scene.root.model.fillStyle).toBe('#0a1929');
+        expect(scene.root.model.name).toBe('Floor'); // 다른 키 보존
+        expect(r.inverseOps).toEqual([
+            { op: 'modifyBoard', patch: { fillStyle: '#fff' } }
+        ]);
+        expect(calls.find(c => c.method === 'commander.execute')).toBeDefined();
+    });
+    test('patch 의 components 키는 무시 — 자식 변경은 별도 op', () => {
+        const { scene } = makeMockScene({
+            rootModel: { fillStyle: '#fff' },
+            components: [{ refid: 1, type: 'rect' }]
+        });
+        const r = dispatchBoardEditOp(scene, {
+            op: 'modifyBoard',
+            patch: { fillStyle: '#000', components: [] }
+        });
+        expect(r.applied).toBe(true);
+        expect(scene.root.model.fillStyle).toBe('#000');
+        expect(scene.root.model.components).toBeUndefined();
+        // inverse 도 components 키 미포함
+        const inv = r.inverseOps[0];
+        expect(Object.keys(inv.patch).sort()).toEqual(['fillStyle']);
+    });
+    test('scene.root 없음 / set 미정의 → applied:false', () => {
+        const { scene } = makeMockScene(); // rootModel 없음
+        const r = dispatchBoardEditOp(scene, {
+            op: 'modifyBoard',
+            patch: { fillStyle: '#000' }
+        });
+        expect(r.applied).toBe(false);
+    });
+    test('원본에 없는 root 키 → inverse 에 null 보관 (revert 시 reset)', () => {
+        const { scene } = makeMockScene({
+            rootModel: { fillStyle: '#fff' },
+            components: []
+        });
+        const r = dispatchBoardEditOp(scene, {
+            op: 'modifyBoard',
+            patch: { sky: 'color', exposure: 0.7 }
+        });
+        expect(r.applied).toBe(true);
+        expect(r.inverseOps).toEqual([
+            { op: 'modifyBoard', patch: { sky: null, exposure: null } }
+        ]);
+    });
+});
+// ── dispatchBoardEditOp — replace ───────────────────────────────────
+describe('dispatchBoardEditOp — replace (호스트 wholesale 경로)', () => {
+    test('replace 는 dispatcher 가 받지 않음 — applied:false', () => {
+        const { scene } = makeMockScene();
+        const r = dispatchBoardEditOp(scene, {
+            op: 'replace',
+            board: { width: 800, height: 600, components: [] }
+        });
+        expect(r.applied).toBe(false);
+        expect(r.inverseOps).toEqual([]);
+    });
+});
+// ── dispatchBoardEditOp — align ─────────────────────────────────────
+describe('dispatchBoardEditOp — align', () => {
+    test('정상 — scene.align 호출 + 직전 좌표를 modify inverse 시퀀스로', () => {
+        const { scene, calls, refidIndexMap } = makeMockScene({
+            components: [
+                { refid: 1, type: 'rect', left: 10, top: 0, width: 100, height: 50 },
+                { refid: 2, type: 'rect', left: 50, top: 0, width: 80, height: 40 }
+            ]
+        });
+        const r = dispatchBoardEditOp(scene, {
+            op: 'align',
+            refids: [1, 2],
+            direction: 'left'
+        });
+        expect(r.applied).toBe(true);
+        // mock 의 align('left') 가 모든 selected 의 left=0 으로 만든다
+        expect(refidIndexMap.get(1).model.left).toBe(0);
+        expect(refidIndexMap.get(2).model.left).toBe(0);
+        // inverse 는 직전 좌표를 modify 시퀀스로 — 원래 left 복원
+        expect(r.inverseOps).toEqual([
+            { op: 'modify', refid: 1, patch: { left: 10, top: 0, width: 100, height: 50 } },
+            { op: 'modify', refid: 2, patch: { left: 50, top: 0, width: 80, height: 40 } }
+        ]);
+        const alignCall = calls.find(c => c.method === 'align');
+        expect(alignCall.direction).toBe('left');
+    });
+    test('refids 가 1개 미만 — applied:false (align 은 2개 이상 필요)', () => {
+        const { scene } = makeMockScene({ components: [{ refid: 1 }] });
+        const r = dispatchBoardEditOp(scene, {
+            op: 'align',
+            refids: [1],
+            direction: 'left'
+        });
+        expect(r.applied).toBe(false);
+    });
+    test('refids 안에 없는 refid 가 있어도 매칭된 게 2개 이상이면 진행', () => {
+        const { scene } = makeMockScene({
+            components: [
+                { refid: 1, left: 10 },
+                { refid: 2, left: 20 }
+            ]
+        });
+        const r = dispatchBoardEditOp(scene, {
+            op: 'align',
+            refids: [1, 999, 2],
+            direction: 'left'
+        });
+        expect(r.applied).toBe(true);
+        expect(r.inverseOps).toHaveLength(2);
+    });
+    test('selected 복원 — align 후 직전 selected 으로 되돌림', () => {
+        const { scene, refidIndexMap } = makeMockScene({
+            components: [{ refid: 1 }, { refid: 2 }]
+        });
+        const sentinel = { sentinel: true };
+        scene.selected = [sentinel];
+        dispatchBoardEditOp(scene, {
+            op: 'align',
+            refids: [1, 2],
+            direction: 'left'
+        });
+        // align 진행 중에는 selected = targets, 완료 후 sentinel 복원
+        expect(scene.selected).toEqual([sentinel]);
+    });
+});
+// ── dispatchBoardEditOp — distribute ────────────────────────────────
+describe('dispatchBoardEditOp — distribute', () => {
+    test('horizontal → scene.distribute("HORIZONTAL") 대문자 매핑', () => {
+        const { scene, calls } = makeMockScene({
+            components: [{ refid: 1, left: 0, top: 0 }, { refid: 2, left: 100, top: 0 }]
+        });
+        dispatchBoardEditOp(scene, {
+            op: 'distribute',
+            refids: [1, 2],
+            axis: 'horizontal'
+        });
+        const dCall = calls.find(c => c.method === 'distribute');
+        expect(dCall.axis).toBe('HORIZONTAL'); // 대문자 매핑 회귀 방지
+    });
+    test('vertical → scene.distribute("VERTICAL")', () => {
+        const { scene, calls } = makeMockScene({
+            components: [{ refid: 1, left: 0, top: 0 }, { refid: 2, left: 0, top: 100 }]
+        });
+        dispatchBoardEditOp(scene, {
+            op: 'distribute',
+            refids: [1, 2],
+            axis: 'vertical'
+        });
+        expect(calls.find(c => c.method === 'distribute').axis).toBe('VERTICAL');
+    });
+    test('inverse 는 직전 left/top 의 modify 시퀀스 (width/height 미포함)', () => {
+        // align 과 달리 distribute 는 좌표만 변경 → inverse 도 좌표만 보관 (size 키 없음)
+        const { scene } = makeMockScene({
+            components: [
+                { refid: 1, left: 10, top: 5, width: 100, height: 50 },
+                { refid: 2, left: 50, top: 5, width: 80, height: 40 }
+            ]
+        });
+        const r = dispatchBoardEditOp(scene, {
+            op: 'distribute',
+            refids: [1, 2],
+            axis: 'horizontal'
+        });
+        expect(r.inverseOps).toEqual([
+            { op: 'modify', refid: 1, patch: { left: 10, top: 5 } },
+            { op: 'modify', refid: 2, patch: { left: 50, top: 5 } }
+        ]);
+    });
+    test('refids 부족 (<2 매칭) → applied:false', () => {
+        const { scene } = makeMockScene({ components: [{ refid: 1 }] });
+        const r = dispatchBoardEditOp(scene, {
+            op: 'distribute',
+            refids: [1],
+            axis: 'horizontal'
+        });
+        expect(r.applied).toBe(false);
+    });
+});
+// ── dispatchBoardEditOp — group ─────────────────────────────────────
+describe('dispatchBoardEditOp — group', () => {
+    test('정상 — scene.group 호출 + 새 group refid 의 ungroup inverse', () => {
+        const { scene, calls, refidIndexMap } = makeMockScene({
+            components: [{ refid: 1 }, { refid: 2 }]
+        });
+        const r = dispatchBoardEditOp(scene, { op: 'group', refids: [1, 2] });
+        expect(r.applied).toBe(true);
+        expect(r.inverseOps).toHaveLength(1);
+        const inv = r.inverseOps[0];
+        expect(inv.op).toBe('ungroup');
+        // mock group 은 새 refid 3 발급
+        expect(inv.refid).toBe(3);
+        expect(refidIndexMap.has(3)).toBe(true);
+        expect(calls.find(c => c.method === 'group')).toBeDefined();
+    });
+    test('refids < 2 — applied:false (group 은 2개 이상 필요)', () => {
+        const { scene } = makeMockScene({ components: [{ refid: 1 }] });
+        const r = dispatchBoardEditOp(scene, { op: 'group', refids: [1] });
+        expect(r.applied).toBe(false);
+    });
+    test('selected 복원 — group 직전 selected 로 되돌림', () => {
+        const { scene, refidIndexMap } = makeMockScene({
+            components: [{ refid: 1 }, { refid: 2 }]
+        });
+        const sentinel = { id: 'before-group' };
+        scene.selected = [sentinel];
+        dispatchBoardEditOp(scene, { op: 'group', refids: [1, 2] });
+        expect(scene.selected).toEqual([sentinel]);
+    });
+});
+// ── dispatchBoardEditOp — ungroup ───────────────────────────────────
+describe('dispatchBoardEditOp — ungroup', () => {
+    test('정상 — 자식 refid 들 캡처해 group inverse 생성', () => {
+        const { scene, refidIndexMap, calls } = makeMockScene({
+            components: [{ refid: 5, type: 'group' }]
+        });
+        // mock group 자식 — child 의 .get('refid') 가 작동하도록 makeMockSceneComp 형태
+        const g = refidIndexMap.get(5);
+        g.components = [makeMockSceneComp({ refid: 11 }), makeMockSceneComp({ refid: 12 })];
+        const r = dispatchBoardEditOp(scene, { op: 'ungroup', refid: 5 });
+        expect(r.applied).toBe(true);
+        expect(r.inverseOps).toEqual([{ op: 'group', refids: [11, 12] }]);
+        expect(calls.find(c => c.method === 'ungroup')).toBeDefined();
+    });
+    test('자식이 1개 — inverse 없음 (group 은 2개 이상 필요), applied:true 유지', () => {
+        const { scene, refidIndexMap } = makeMockScene({
+            components: [{ refid: 5 }]
+        });
+        const g = refidIndexMap.get(5);
+        g.components = [makeMockSceneComp({ refid: 11 })];
+        const r = dispatchBoardEditOp(scene, { op: 'ungroup', refid: 5 });
+        expect(r.applied).toBe(true);
+        expect(r.inverseOps).toEqual([]);
+    });
+    test('없는 refid → applied:false', () => {
+        const { scene } = makeMockScene();
+        const r = dispatchBoardEditOp(scene, { op: 'ungroup', refid: 999 });
+        expect(r.applied).toBe(false);
+    });
+});
+// ── dispatchBoardEditOp — zorder ────────────────────────────────────
+describe('dispatchBoardEditOp — zorder', () => {
+    test('forward → 정상 + inverse 는 backward', () => {
+        const { scene, calls } = makeMockScene({ components: [{ refid: 1 }] });
+        const r = dispatchBoardEditOp(scene, {
+            op: 'zorder',
+            refid: 1,
+            direction: 'forward'
+        });
+        expect(r.applied).toBe(true);
+        expect(r.inverseOps).toEqual([
+            { op: 'zorder', refid: 1, direction: 'backward' }
+        ]);
+        expect(calls.find(c => c.method === 'zorder').direction).toBe('forward');
+    });
+    test('4 direction 모두 — 반대 방향이 inverse', () => {
+        const cases = [
+            ['forward', 'backward'],
+            ['backward', 'forward'],
+            ['front', 'back'],
+            ['back', 'front']
+        ];
+        for (const [dir, opp] of cases) {
+            const { scene } = makeMockScene({ components: [{ refid: 1 }] });
+            const r = dispatchBoardEditOp(scene, {
+                op: 'zorder',
+                refid: 1,
+                direction: dir
+            });
+            expect(r.inverseOps[0]).toEqual({
+                op: 'zorder',
+                refid: 1,
+                direction: opp
+            });
+        }
+    });
+    test('없는 refid → applied:false', () => {
+        const { scene } = makeMockScene();
+        const r = dispatchBoardEditOp(scene, {
+            op: 'zorder',
+            refid: 999,
+            direction: 'forward'
+        });
+        expect(r.applied).toBe(false);
+    });
+});
+// ── computeArrangePositions — pure 위치 계산 ─────────────────────────
+describe('computeArrangePositions — grid', () => {
+    test('2x2 그리드 — 4 컴포넌트 동일 사이즈, 기본 gap=10', () => {
+        const r = computeArrangePositions({ type: 'grid', cols: 2, anchor: { left: 0, top: 0 } }, [
+            { left: 0, top: 0 },
+            { left: 0, top: 0 },
+            { left: 0, top: 0 },
+            { left: 0, top: 0 }
+        ], [
+            { width: 100, height: 50 },
+            { width: 100, height: 50 },
+            { width: 100, height: 50 },
+            { width: 100, height: 50 }
+        ]);
+        expect(r).toEqual([
+            { left: 0, top: 0 }, // (0,0)
+            { left: 110, top: 0 }, // (0,1) — width + gap
+            { left: 0, top: 60 }, // (1,0)
+            { left: 110, top: 60 } // (1,1)
+        ]);
+    });
+    test('cell 크기 = 모든 사이즈의 max — 다른 사이즈에서도 겹침 없음', () => {
+        const r = computeArrangePositions({ type: 'grid', cols: 2, gap: 0, anchor: { left: 0, top: 0 } }, [
+            { left: 0, top: 0 },
+            { left: 0, top: 0 },
+            { left: 0, top: 0 }
+        ], [
+            { width: 50, height: 100 }, // 가장 키 큰 컴포넌트
+            { width: 200, height: 30 }, // 가장 너비 큰 컴포넌트
+            { width: 80, height: 60 }
+        ]);
+        // cell = 200 × 100
+        expect(r).toEqual([
+            { left: 0, top: 0 },
+            { left: 200, top: 0 },
+            { left: 0, top: 100 }
+        ]);
+    });
+    test('anchor 미지정 시 첫 컴포넌트의 현재 (left, top) 사용', () => {
+        const r = computeArrangePositions({ type: 'grid', cols: 2, gap: 0 }, [
+            { left: 100, top: 50 },
+            { left: 999, top: 999 }, // 무시
+            { left: 0, top: 0 }
+        ], [
+            { width: 50, height: 50 },
+            { width: 50, height: 50 },
+            { width: 50, height: 50 }
+        ]);
+        expect(r[0]).toEqual({ left: 100, top: 50 });
+        expect(r[1]).toEqual({ left: 150, top: 50 });
+        expect(r[2]).toEqual({ left: 100, top: 100 });
+    });
+    test('cols 가 floor 처리 (소수도 허용 — Math.floor)', () => {
+        const r = computeArrangePositions({ type: 'grid', cols: 2.7, anchor: { left: 0, top: 0 } }, [
+            { left: 0, top: 0 },
+            { left: 0, top: 0 }
+        ], [
+            { width: 100, height: 100 },
+            { width: 100, height: 100 }
+        ]);
+        // 2.7 → 2 cols
+        expect(r).toEqual([
+            { left: 0, top: 0 },
+            { left: 110, top: 0 }
+        ]);
+    });
+});
+describe('computeArrangePositions — row', () => {
+    test('가로 일렬 — 누적 width + gap', () => {
+        const r = computeArrangePositions({ type: 'row', gap: 10, anchor: { left: 50, top: 100 } }, [
+            { left: 0, top: 0 },
+            { left: 0, top: 0 },
+            { left: 0, top: 0 }
+        ], [
+            { width: 80, height: 60 },
+            { width: 120, height: 60 },
+            { width: 60, height: 60 }
+        ]);
+        expect(r).toEqual([
+            { left: 50, top: 100 },
+            { left: 140, top: 100 }, // 50 + 80 + 10
+            { left: 270, top: 100 } // 140 + 120 + 10
+        ]);
+    });
+    test('align: center — 다른 height 들이 maxH 기준으로 세로 가운데 정렬', () => {
+        const r = computeArrangePositions({ type: 'row', gap: 0, anchor: { left: 0, top: 0 }, align: 'center' }, [
+            { left: 0, top: 0 },
+            { left: 0, top: 0 }
+        ], [
+            { width: 100, height: 80 }, // maxH
+            { width: 100, height: 40 }
+        ]);
+        expect(r[0].top).toBe(0); // tall 한 거 자체는 anchor.top
+        expect(r[1].top).toBe(20); // (80 - 40) / 2
+    });
+    test('align: end — 바닥 정렬', () => {
+        const r = computeArrangePositions({ type: 'row', gap: 0, anchor: { left: 0, top: 0 }, align: 'end' }, [
+            { left: 0, top: 0 },
+            { left: 0, top: 0 }
+        ], [
+            { width: 100, height: 80 },
+            { width: 100, height: 40 }
+        ]);
+        expect(r[0].top).toBe(0); // tallest stays
+        expect(r[1].top).toBe(40); // 80 - 40
+    });
+    test('align 기본값 = start (top-aligned)', () => {
+        const r = computeArrangePositions({ type: 'row', anchor: { left: 0, top: 50 } }, [
+            { left: 0, top: 0 },
+            { left: 0, top: 0 }
+        ], [
+            { width: 100, height: 80 },
+            { width: 100, height: 40 }
+        ]);
+        expect(r[0].top).toBe(50);
+        expect(r[1].top).toBe(50); // start = same top
+    });
+});
+describe('computeArrangePositions — column', () => {
+    test('세로 일렬 — 누적 height + gap', () => {
+        const r = computeArrangePositions({ type: 'column', gap: 10, anchor: { left: 50, top: 0 } }, [
+            { left: 0, top: 0 },
+            { left: 0, top: 0 }
+        ], [
+            { width: 100, height: 60 },
+            { width: 100, height: 80 }
+        ]);
+        expect(r).toEqual([
+            { left: 50, top: 0 },
+            { left: 50, top: 70 } // 0 + 60 + 10
+        ]);
+    });
+    test('align: center — 다른 width 들이 maxW 기준으로 가로 가운데 정렬', () => {
+        const r = computeArrangePositions({ type: 'column', gap: 0, anchor: { left: 0, top: 0 }, align: 'center' }, [
+            { left: 0, top: 0 },
+            { left: 0, top: 0 }
+        ], [
+            { width: 200, height: 50 },
+            { width: 100, height: 50 } // narrower
+        ]);
+        expect(r[0].left).toBe(0);
+        expect(r[1].left).toBe(50); // (200 - 100) / 2
+    });
+    test('align: end — 우측 정렬', () => {
+        const r = computeArrangePositions({ type: 'column', gap: 0, anchor: { left: 0, top: 0 }, align: 'end' }, [
+            { left: 0, top: 0 },
+            { left: 0, top: 0 }
+        ], [
+            { width: 200, height: 50 },
+            { width: 100, height: 50 }
+        ]);
+        expect(r[1].left).toBe(100); // 200 - 100
+    });
+});
+// ── dispatchBoardEditOp — arrange ─────────────────────────────────
+describe('dispatchBoardEditOp — arrange', () => {
+    test('grid: target.set 호출 + 새 좌표 적용 + inverse 는 modify 시퀀스', () => {
+        const { scene, calls, refidIndexMap } = makeMockScene({
+            components: [
+                { refid: 1, type: 'rect', left: 999, top: 999, width: 100, height: 50 },
+                { refid: 2, type: 'rect', left: 999, top: 999, width: 100, height: 50 },
+                { refid: 3, type: 'rect', left: 999, top: 999, width: 100, height: 50 },
+                { refid: 4, type: 'rect', left: 999, top: 999, width: 100, height: 50 }
+            ]
+        });
+        const r = dispatchBoardEditOp(scene, {
+            op: 'arrange',
+            refids: [1, 2, 3, 4],
+            layout: { type: 'grid', cols: 2, gap: 0, anchor: { left: 0, top: 0 } }
+        });
+        expect(r.applied).toBe(true);
+        // 좌표가 grid 에 따라 갱신
+        expect(refidIndexMap.get(1).model.left).toBe(0);
+        expect(refidIndexMap.get(1).model.top).toBe(0);
+        expect(refidIndexMap.get(2).model.left).toBe(100);
+        expect(refidIndexMap.get(2).model.top).toBe(0);
+        expect(refidIndexMap.get(3).model.left).toBe(0);
+        expect(refidIndexMap.get(3).model.top).toBe(50);
+        expect(refidIndexMap.get(4).model.left).toBe(100);
+        expect(refidIndexMap.get(4).model.top).toBe(50);
+        // inverse — 직전 좌표 (모두 999, 999)
+        expect(r.inverseOps).toHaveLength(4);
+        expect(r.inverseOps[0]).toEqual({
+            op: 'modify',
+            refid: 1,
+            patch: { left: 999, top: 999 }
+        });
+        // commander.execute (단일 snapshot)
+        expect(calls.find(c => c.method === 'commander.execute')).toBeDefined();
+    });
+    test('row: 누적 width + gap', () => {
+        const { scene, refidIndexMap } = makeMockScene({
+            components: [
+                { refid: 1, type: 'rect', left: 0, top: 0, width: 80, height: 50 },
+                { refid: 2, type: 'rect', left: 0, top: 0, width: 120, height: 50 }
+            ]
+        });
+        dispatchBoardEditOp(scene, {
+            op: 'arrange',
+            refids: [1, 2],
+            layout: { type: 'row', gap: 10, anchor: { left: 0, top: 0 } }
+        });
+        expect(refidIndexMap.get(1).model.left).toBe(0);
+        expect(refidIndexMap.get(2).model.left).toBe(90); // 0 + 80 + 10
+    });
+    test('refids < 2 → applied:false', () => {
+        const { scene } = makeMockScene({ components: [{ refid: 1 }] });
+        const r = dispatchBoardEditOp(scene, {
+            op: 'arrange',
+            refids: [1],
+            layout: { type: 'grid', cols: 1 }
+        });
+        expect(r.applied).toBe(false);
+    });
+    test('일부 refid 누락 — 매칭된 것이 2 이상이면 진행', () => {
+        const { scene, refidIndexMap } = makeMockScene({
+            components: [
+                { refid: 1, left: 0, top: 0, width: 50, height: 50 },
+                { refid: 2, left: 0, top: 0, width: 50, height: 50 }
+            ]
+        });
+        const r = dispatchBoardEditOp(scene, {
+            op: 'arrange',
+            refids: [1, 999, 2],
+            layout: { type: 'row', gap: 10, anchor: { left: 0, top: 0 } }
+        });
+        expect(r.applied).toBe(true);
+        expect(refidIndexMap.get(1).model.left).toBe(0);
+        expect(refidIndexMap.get(2).model.left).toBe(60);
+    });
+});
+// ── 방어 ────────────────────────────────────────────────────────────
+describe('dispatchBoardEditOp — 방어', () => {
+    test('scene null → applied:false', () => {
+        expect(dispatchBoardEditOp(null, { op: 'add', component: { type: 'rect' } })).toEqual({ applied: false, inverseOps: [] });
+    });
+    test('op null → applied:false', () => {
+        const { scene } = makeMockScene();
+        expect(dispatchBoardEditOp(scene, null)).toEqual({
+            applied: false,
+            inverseOps: []
+        });
+    });
+    test('알 수 없는 op → applied:false', () => {
+        const { scene } = makeMockScene();
+        expect(dispatchBoardEditOp(scene, { op: 'unknown' })).toEqual({
+            applied: false,
+            inverseOps: []
+        });
+    });
+});
+//# sourceMappingURL=board-edit-dispatch.test.js.map