import { describe, expect, it } from 'vitest' import { dropTarget, moveTarget } from '../src/page/dnd' import type { DndBlock, DndSlot } from '../src/page/dnd' const r = (y: number, h = 100, x = 0, w = 600) => ({ x, y, w, h }) // page: A (container: a1, a2) , B (container, empty), C (leaf) const blocks: DndBlock[] = [ { id: 'A', container: true, depth: 0, rect: r(0, 300) }, { id: 'a1', parentId: 'A', container: false, depth: 1, rect: r(10, 100, 10, 580) }, { id: 'a2', parentId: 'A', container: false, depth: 1, rect: r(120, 100, 10, 580) }, { id: 'B', container: true, depth: 0, rect: r(310, 100) }, { id: 'C', container: false, depth: 0, rect: r(420, 100) }, ] describe('dropTarget', () => { it('picks the index from the pointer relative to sibling midpoints', () => { expect(dropTarget(blocks, { x: 50, y: 20 }, 'C')).toMatchObject({ parentId: 'A', index: 0 }) expect(dropTarget(blocks, { x: 50, y: 100 }, 'C')).toMatchObject({ parentId: 'A', index: 1 }) expect(dropTarget(blocks, { x: 50, y: 250 }, 'C')).toMatchObject({ parentId: 'A', index: 2 }) }) it('excludes the dragged block from the index maths', () => { // dragging a1 within A: pointer below a2's midpoint -> after a2 = index 1 among [a2] expect(dropTarget(blocks, { x: 50, y: 200 }, 'a1')).toMatchObject({ parentId: 'A', index: 1 }) }) it('drops into an empty container', () => { const t = dropTarget(blocks, { x: 50, y: 350 }, 'C')! expect(t).toMatchObject({ parentId: 'B', index: 0 }) expect(t.line.y).toBeGreaterThanOrEqual(310) }) it('never targets the dragged block or its descendants', () => { expect(dropTarget(blocks, { x: 50, y: 20 }, 'A')?.parentId).toBe('') // A is not a drop target for itself -> page level }) it('page level uses the root sentinel and refuses far-away points', () => { expect(dropTarget(blocks, { x: 50, y: 460 }, 'a1')).toMatchObject({ parentId: '', index: 2 }) expect(dropTarget(blocks, { x: 50, y: 500 }, 'a1')).toMatchObject({ parentId: '', index: 3 }) expect(dropTarget(blocks, { x: 50, y: 900 }, 'a1')).toBeNull() }) }) describe('dropTarget with tagged slots ([data-cms-slot])', () => { // PDP 'p1' (container) with an accessory slot zone holding g1; shop blurb 'C' is a leaf. const pdp: DndBlock[] = [ { id: 'p1', container: true, depth: 0, rect: r(0, 400) }, { id: 'g1', parentId: 'p1', container: false, depth: 1, rect: r(200, 80, 10, 580) }, { id: 'C', container: false, depth: 0, rect: r(420, 100) }, ] const slots: DndSlot[] = [{ handle: '3d-accessories', parentId: 'p1', rect: r(190, 150, 0, 600), kids: ['g1'] }] const acc = (s: DndSlot) => s.handle === '3d-accessories' it('lands in the slot with the handle, indexed among slot members only', () => { expect(dropTarget(pdp, { x: 50, y: 195 }, 'C', undefined, slots, acc)).toMatchObject({ parentId: 'p1', handle: '3d-accessories', index: 0 }) expect(dropTarget(pdp, { x: 50, y: 270 }, 'C', undefined, slots, acc)).toMatchObject({ parentId: 'p1', handle: '3d-accessories', index: 1 }) }) it('drops into an empty slot at index 0', () => { const empty: DndSlot[] = [{ handle: '3d-accessories', parentId: 'p1', rect: r(190, 60, 0, 600), kids: [] }] const t = dropTarget(pdp, { x: 50, y: 200 }, 'C', undefined, empty, acc)! expect(t).toMatchObject({ parentId: 'p1', handle: '3d-accessories', index: 0 }) expect(t.line.y).toBeGreaterThanOrEqual(190) }) it('a refused slot falls back to the plain container', () => { expect(dropTarget(pdp, { x: 50, y: 200 }, 'C', undefined, slots, () => false)).toMatchObject({ parentId: 'p1', index: 0 }) }) it('without an acceptsSlot filter the slot still wins over the container', () => { expect(dropTarget(pdp, { x: 50, y: 200 }, 'C', undefined, slots)).toMatchObject({ parentId: 'p1', handle: '3d-accessories' }) }) it('moveTarget sorts within the dragged block\'s own slot', () => { const two: DndBlock[] = [ { id: 'p1', container: true, depth: 0, rect: r(0, 400) }, { id: 'g1', parentId: 'p1', container: false, depth: 1, rect: r(200, 80, 10, 580) }, { id: 'g2', parentId: 'p1', container: false, depth: 1, rect: r(290, 80, 10, 580) }, ] const s2: DndSlot[] = [{ handle: '3d-accessories', parentId: 'p1', rect: r(190, 200, 0, 600), kids: ['g1', 'g2'] }] expect(moveTarget(two, { x: 50, y: 195 }, { id: 'g2', parentId: 'p1', handle: '3d-accessories' }, { slots: s2 })).toMatchObject({ parentId: 'p1', handle: '3d-accessories', index: 0, }) }) })