bak

src/devtools/tests.ts

@@ -0,0 +1,525 @@
+import { useSceneStore } from '@/stores/scene'
+import { sampleLayer, lerpColor } from '@/lib/interpolate'
+import { snapToCandidates } from '@/lib/timelineSnap'
+import {
+  generateBundledScript,
+  generateRuntimeScript,
+  generateSceneScript,
+} from '@/lib/exportPlayer'
+import { ProjectFileError, parseProject, serializeProject } from '@/lib/projectFile'
+import { expect, suite, test } from './testRunner'
+
+function makeFreshStore() {
+  const s = useSceneStore()
+  s.$reset()
+  return s
+}
+
+function tick(ms = 40): Promise<void> {
+  return new Promise((r) => setTimeout(r, ms))
+}
+
+export function registerAllTests(): void {
+  suite('scene store — defaults', () => {
+    test('starts with empty scene, playhead 0, not playing', () => {
+      const s = makeFreshStore()
+      expect(s.scene.layers).toHaveLength(0)
+      expect(s.scene.assets).toHaveLength(0)
+      expect(s.playhead).toBe(0)
+      expect(s.playing).toBe(false)
+      expect(s.scene.duration).toBe(10)
+      expect(s.scene.fps).toBe(60)
+      expect(s.selectedLayerId).toBeNull()
+    })
+  })
+
+  suite('scene store — playhead', () => {
+    test('setPlayhead clamps to [0, duration]', async () => {
+      const s = makeFreshStore()
+      s.setPlayhead(-5)
+      await tick()
+      expect(s.playhead).toBe(0)
+      s.setPlayhead(999)
+      await tick()
+      expect(s.playhead).toBe(s.scene.duration)
+      s.setPlayhead(3.5)
+      await tick()
+      expect(s.playhead).toBe(3.5)
+    })
+
+    test('setDuration pulls playhead back if past end', async () => {
+      const s = makeFreshStore()
+      s.setPlayhead(9)
+      await tick()
+      s.setDuration(5)
+      await tick()
+      expect(s.playhead).toBe(5)
+    })
+
+    test('setDuration clamps to min 0.1', () => {
+      const s = makeFreshStore()
+      s.setDuration(0)
+      expect(s.scene.duration).toBe(0.1)
+    })
+  })
+
+  suite('scene store — layers & selection', () => {
+    test('addLayer with rect asset creates layer + initial keyframe + selects it', async () => {
+      const s = makeFreshStore()
+      const asset = s.addAsset({
+        kind: 'rect',
+        name: 'TestRect',
+        width: 200,
+        height: 100,
+        fill: '#ff4455',
+      })
+      await tick()
+      const layer = s.addLayer(asset.id)
+      await tick()
+      expect(s.scene.layers).toHaveLength(1)
+      expect(s.selectedLayerId).toBe(layer.id)
+      expect(layer.keyframes).toHaveLength(1)
+      expect(layer.keyframes[0].time).toBe(0)
+      expect(layer.offsetX).toBe(100)
+      expect(layer.offsetY).toBe(50)
+      expect(layer.base.fill).toBe('#ff4455')
+    })
+
+    test('removeLayer deselects if it was selected', async () => {
+      const s = makeFreshStore()
+      const a = s.addAsset({ kind: 'circle', name: 'TestCircle', radius: 40, fill: '#44aaff' })
+      const l = s.addLayer(a.id)
+      await tick()
+      s.removeLayer(l.id)
+      await tick()
+      expect(s.scene.layers).toHaveLength(0)
+      expect(s.selectedLayerId).toBeNull()
+    })
+
+    test('selectLayer toggles with null', async () => {
+      const s = makeFreshStore()
+      const a = s.addAsset({ kind: 'circle', name: 'SelC', radius: 30, fill: '#00cc88' })
+      const l = s.addLayer(a.id)
+      await tick()
+      s.selectLayer(null)
+      await tick()
+      expect(s.selectedLayerId).toBeNull()
+      s.selectLayer(l.id)
+      await tick()
+      expect(s.selectedLayerId).toBe(l.id)
+    })
+  })
+
+  suite('scene store — keyframes', () => {
+    test('upsertKeyframe adds new keyframe sorted by time', async () => {
+      const s = makeFreshStore()
+      const a = s.addAsset({ kind: 'rect', name: 'Kfs', width: 80, height: 80, fill: '#ffa500' })
+      const l = s.addLayer(a.id)
+      await tick()
+      s.upsertKeyframe(l.id, 2, { x: 600 })
+      await tick()
+      s.upsertKeyframe(l.id, 1, { x: 300 })
+      await tick()
+      const times = l.keyframes.map((k) => k.time)
+      expect(times).toEqual([0, 1, 2])
+    })
+
+    test('upsertKeyframe updates existing keyframe within epsilon', async () => {
+      const s = makeFreshStore()
+      const a = s.addAsset({ kind: 'rect', name: 'Upd', width: 80, height: 80, fill: '#aa44ff' })
+      const l = s.addLayer(a.id)
+      s.upsertKeyframe(l.id, 1, { x: 500 })
+      await tick()
+      const before = l.keyframes.length
+      s.upsertKeyframe(l.id, 1.0000001, { x: 900 })
+      await tick()
+      expect(l.keyframes).toHaveLength(before)
+      const kf = l.keyframes.find((k) => Math.abs(k.time - 1) < 0.01)!
+      expect(kf.props.x).toBe(900)
+    })
+
+    test('setKeyframeTime clamps and sorts', async () => {
+      const s = makeFreshStore()
+      const a = s.addAsset({ kind: 'rect', name: 'Clamp', width: 60, height: 60, fill: '#ff8844' })
+      const l = s.addLayer(a.id)
+      s.upsertKeyframe(l.id, 3, { x: 400 })
+      s.upsertKeyframe(l.id, 5, { x: 800 })
+      await tick()
+      const target = l.keyframes.find((k) => k.time === 5)!
+      s.setKeyframeTime(l.id, target.id, -1)
+      await tick()
+      expect(target.time).toBe(0)
+      const times = l.keyframes.map((k) => k.time).sort((a, b) => a - b)
+      expect(times).toEqual(l.keyframes.map((k) => k.time))
+    })
+
+    test('setKeyframeTime clamps to duration upper bound', async () => {
+      const s = makeFreshStore()
+      const a = s.addAsset({ kind: 'rect', name: 'Dur', width: 60, height: 60, fill: '#44ffaa' })
+      const l = s.addLayer(a.id)
+      s.upsertKeyframe(l.id, 2, { x: 400 })
+      await tick()
+      const k = l.keyframes[l.keyframes.length - 1]
+      s.setKeyframeTime(l.id, k.id, 999)
+      await tick()
+      expect(k.time).toBe(s.scene.duration)
+    })
+
+    test('removeKeyframe removes by id', async () => {
+      const s = makeFreshStore()
+      const a = s.addAsset({ kind: 'rect', name: 'Rm', width: 50, height: 50, fill: '#ee4488' })
+      const l = s.addLayer(a.id)
+      s.upsertKeyframe(l.id, 2, { x: 500 })
+      await tick()
+      const k = l.keyframes.find((k) => k.time === 2)!
+      s.removeKeyframe(l.id, k.id)
+      await tick()
+      expect(l.keyframes.find((x) => x.id === k.id)).toBe(undefined)
+    })
+
+    test('duplicateKeyframe creates offset copy', async () => {
+      const s = makeFreshStore()
+      const a = s.addAsset({ kind: 'rect', name: 'Dup', width: 50, height: 50, fill: '#22aaee' })
+      const l = s.addLayer(a.id)
+      s.upsertKeyframe(l.id, 1, { x: 400 })
+      await tick()
+      const src = l.keyframes.find((k) => k.time === 1)!
+      const newId = s.duplicateKeyframe(l.id, src.id)
+      await tick()
+      expect(newId).toBeTruthy()
+      const dup = l.keyframes.find((k) => k.id === newId)!
+      expect(dup.props.x).toBe(400)
+      expect(dup.time).toBeGreaterThan(1)
+    })
+
+    test('setKeyframeEasing updates easing field', async () => {
+      const s = makeFreshStore()
+      const a = s.addAsset({ kind: 'rect', name: 'Ease', width: 50, height: 50, fill: '#88cc44' })
+      const l = s.addLayer(a.id)
+      s.upsertKeyframe(l.id, 1, { x: 400 })
+      await tick()
+      const k = l.keyframes[l.keyframes.length - 1]
+      s.setKeyframeEasing(l.id, k.id, 'easeInOut')
+      expect(k.easing).toBe('easeInOut')
+    })
+  })
+
+  suite('scene store — separated tracks', () => {
+    test('setLayerSeparated splits x/y and rotation into dedicated tracks', async () => {
+      const s = makeFreshStore()
+      const a = s.addAsset({ kind: 'rect', name: 'Sep', width: 60, height: 60, fill: '#ee66aa' })
+      const l = s.addLayer(a.id)
+      s.upsertKeyframe(l.id, 1, { x: 400, y: 200, rotation: 45, opacity: 0.5 })
+      await tick()
+      s.setLayerSeparated(l.id, true)
+      await tick()
+      expect(l.separated).toBe(true)
+      expect((l.positionKeyframes ?? []).length).toBeGreaterThan(0)
+      expect((l.rotationKeyframes ?? []).length).toBeGreaterThan(0)
+      for (const k of l.keyframes) {
+        expect((k.props as Record<string, unknown>).x).toBe(undefined)
+        expect((k.props as Record<string, unknown>).y).toBe(undefined)
+        expect((k.props as Record<string, unknown>).rotation).toBe(undefined)
+      }
+    })
+
+    test('setLayerSeparated(false) merges tracks back together', async () => {
+      const s = makeFreshStore()
+      const a = s.addAsset({ kind: 'rect', name: 'Merge', width: 60, height: 60, fill: '#66ccee' })
+      const l = s.addLayer(a.id)
+      s.upsertKeyframe(l.id, 1, { x: 400, y: 200, rotation: 45, opacity: 0.5 })
+      await tick()
+      s.setLayerSeparated(l.id, true)
+      await tick()
+      s.setLayerSeparated(l.id, false)
+      await tick()
+      expect(l.separated).toBe(false)
+      expect(l.positionKeyframes).toBe(undefined)
+      expect(l.rotationKeyframes).toBe(undefined)
+      const at1 = l.keyframes.find((k) => Math.abs(k.time - 1) < 0.001)!
+      expect((at1.props as Record<string, number>).x).toBe(400)
+      expect((at1.props as Record<string, number>).rotation).toBe(45)
+    })
+  })
+
+  suite('interpolation — sampleLayer', () => {
+    test('no keyframes → returns base', () => {
+      const s = makeFreshStore()
+      const a = s.addAsset({ kind: 'rect', name: 'R', width: 10, height: 10, fill: '#000' })
+      const l = s.addLayer(a.id)
+      l.keyframes = []
+      const p = sampleLayer(l, 0.5)
+      expect(p.x).toBe(l.base.x)
+      expect(p.y).toBe(l.base.y)
+    })
+
+    test('linear midpoint is halfway', () => {
+      const s = makeFreshStore()
+      const a = s.addAsset({ kind: 'rect', name: 'R', width: 10, height: 10, fill: '#000' })
+      const l = s.addLayer(a.id)
+      l.keyframes = [
+        { id: 'k1', time: 0, props: { x: 0 }, easing: 'linear' },
+        { id: 'k2', time: 2, props: { x: 100 }, easing: 'linear' },
+      ]
+      l.base = { ...l.base, x: 0, y: 0 }
+      const p = sampleLayer(l, 1)
+      expect(p.x).toBeCloseTo(50, 2)
+    })
+
+    test('easeIn midpoint is below linear midpoint', () => {
+      const s = makeFreshStore()
+      const a = s.addAsset({ kind: 'rect', name: 'R', width: 10, height: 10, fill: '#000' })
+      const l = s.addLayer(a.id)
+      l.base = { ...l.base, x: 0 }
+      l.keyframes = [
+        { id: 'k1', time: 0, props: { x: 0 }, easing: 'linear' },
+        { id: 'k2', time: 2, props: { x: 100 }, easing: 'easeIn' },
+      ]
+      const p = sampleLayer(l, 1)
+      expect(p.x).toBeLessThan(50)
+      expect(p.x).toBeGreaterThan(0)
+    })
+
+    test('clamps before first kf to first props, after last to last props', () => {
+      const s = makeFreshStore()
+      const a = s.addAsset({ kind: 'rect', name: 'R', width: 10, height: 10, fill: '#000' })
+      const l = s.addLayer(a.id)
+      l.base = { ...l.base, x: 0 }
+      l.keyframes = [
+        { id: 'k1', time: 1, props: { x: 10 }, easing: 'linear' },
+        { id: 'k2', time: 2, props: { x: 20 }, easing: 'linear' },
+      ]
+      expect(sampleLayer(l, 0).x).toBe(10)
+      expect(sampleLayer(l, 5).x).toBe(20)
+    })
+  })
+
+  suite('interpolation — color', () => {
+    test('lerpColor 0 returns start', () => {
+      expect(lerpColor('#000000', '#ffffff', 0)).toBe('#000000')
+    })
+    test('lerpColor 1 returns end', () => {
+      expect(lerpColor('#000000', '#ffffff', 1)).toBe('#ffffff')
+    })
+    test('lerpColor 0.5 is around middle gray', () => {
+      const mid = lerpColor('#000000', '#ffffff', 0.5)
+      expect(mid).toBe('#808080')
+    })
+  })
+
+  suite('timeline snap', () => {
+    test('disabled: returns t unchanged', () => {
+      const r = snapToCandidates(1.7, [2.0], {
+        enabled: false,
+        pxPerSec: 100,
+        pixelThreshold: 8,
+        duration: 10,
+      })
+      expect(r).toBe(1.7)
+    })
+
+    test('enabled: snaps to nearest candidate within threshold', () => {
+      const r = snapToCandidates(1.95, [2.0, 5.0], {
+        enabled: true,
+        pxPerSec: 100,
+        pixelThreshold: 8,
+        duration: 10,
+      })
+      expect(r).toBe(2.0)
+    })
+
+    test('enabled: leaves t alone if all candidates are outside threshold', () => {
+      const r = snapToCandidates(1.0, [2.0], {
+        enabled: true,
+        pxPerSec: 100,
+        pixelThreshold: 8,
+        duration: 10,
+      })
+      expect(r).toBe(1.0)
+    })
+
+    test('clamps result to [0, duration]', () => {
+      const r = snapToCandidates(15, [], {
+        enabled: true,
+        pxPerSec: 100,
+        pixelThreshold: 8,
+        duration: 10,
+      })
+      expect(r).toBe(10)
+    })
+  })
+
+  suite('export — runtime & scene split', () => {
+    test('generateRuntimeScript exposes AnimatrPlayer', () => {
+      const r = generateRuntimeScript()
+      expect(r).toContain('window.AnimatrPlayer')
+      expect(r).toContain('function mount')
+      expect(r).toContain('__animatrPending')
+    })
+
+    test('generateSceneScript embeds scene JSON and uses AnimatrPlayer', () => {
+      const s = makeFreshStore()
+      const a = s.addAsset({ kind: 'rect', name: 'UniqRect77', width: 10, height: 10, fill: '#abc' })
+      s.addLayer(a.id)
+      const src = generateSceneScript(s.scene)
+      expect(src).toContain('AnimatrPlayer.mount')
+      expect(src).toContain('UniqRect77')
+      expect(src).toContain('__animatrPending')
+    })
+
+    test('scene script does NOT inline the mount implementation', () => {
+      const s = makeFreshStore()
+      const src = generateSceneScript(s.scene)
+      expect(src.indexOf('function mount')).toBe(-1)
+    })
+
+    test('generateBundledScript contains runtime + scene boot', () => {
+      const s = makeFreshStore()
+      const a = s.addAsset({ kind: 'rect', name: 'BundlR', width: 10, height: 10, fill: '#123' })
+      s.addLayer(a.id)
+      const src = generateBundledScript(s.scene)
+      expect(src).toContain('function mount')
+      expect(src).toContain('AnimatrPlayer.mount')
+      expect(src).toContain('BundlR')
+    })
+  })
+
+  suite('playback — transport', () => {
+    test('togglePlay toggles playing state', async () => {
+      const s = makeFreshStore()
+      const a = s.addAsset({ kind: 'rect', name: 'Play', width: 60, height: 60, fill: '#55cc66' })
+      const l = s.addLayer(a.id)
+      s.upsertKeyframe(l.id, 2, { x: 500 })
+      await tick()
+      s.togglePlay()
+      await tick()
+      expect(s.playing).toBe(true)
+      s.togglePlay()
+      await tick()
+      expect(s.playing).toBe(false)
+    })
+
+    test('togglePlay rewinds if at end', async () => {
+      const s = makeFreshStore()
+      const a = s.addAsset({ kind: 'rect', name: 'Rew', width: 60, height: 60, fill: '#cc5555' })
+      const l = s.addLayer(a.id)
+      s.upsertKeyframe(l.id, 2, { x: 600 })
+      s.setPlayhead(s.effectiveEnd)
+      await tick()
+      s.togglePlay()
+      expect(s.playhead).toBe(0)
+      expect(s.playing).toBe(true)
+      s.pause()
+      await tick()
+    })
+
+    test('tick advances playhead while playing', async () => {
+      const s = makeFreshStore()
+      const a = s.addAsset({ kind: 'rect', name: 'Tk', width: 60, height: 60, fill: '#9977dd' })
+      const l = s.addLayer(a.id)
+      s.upsertKeyframe(l.id, 5, { x: 800 })
+      s.play()
+      s.tick(1)
+      s.pause()
+      expect(s.playhead).toBeCloseTo(1, 3)
+      await tick()
+    })
+
+    test('tick stops at effectiveEnd', async () => {
+      const s = makeFreshStore()
+      const a = s.addAsset({ kind: 'rect', name: 'End', width: 60, height: 60, fill: '#dd7799' })
+      const l = s.addLayer(a.id)
+      s.upsertKeyframe(l.id, 2, { x: 400 })
+      s.play()
+      await tick()
+      s.tick(10)
+      await tick()
+      expect(s.playing).toBe(false)
+      expect(s.playhead).toBe(s.effectiveEnd)
+    })
+  })
+
+  suite('project file — save & load roundtrip', () => {
+    test('serialize + parse roundtrip preserves scene', async () => {
+      const s = makeFreshStore()
+      const a = s.addAsset({ kind: 'rect', name: 'PF', width: 80, height: 60, fill: '#66ddaa' })
+      const l = s.addLayer(a.id)
+      s.upsertKeyframe(l.id, 1, { x: 400, rotation: 30 })
+      s.setDuration(7)
+      await tick()
+      const text = serializeProject(s.scene)
+      const parsed = parseProject(text)
+      expect(parsed.duration).toBe(7)
+      expect(parsed.layers).toHaveLength(1)
+      expect(parsed.assets).toHaveLength(1)
+      expect(parsed.layers[0].keyframes.find((k) => k.time === 1)?.props.x).toBe(400)
+    })
+
+    test('loadScene replaces store state visibly', async () => {
+      const s = makeFreshStore()
+      const a = s.addAsset({ kind: 'rect', name: 'L1', width: 80, height: 60, fill: '#aa6666' })
+      s.addLayer(a.id)
+      await tick()
+      const dump = serializeProject(s.scene)
+      s.$reset()
+      await tick()
+      s.loadScene(parseProject(dump))
+      await tick()
+      expect(s.scene.layers).toHaveLength(1)
+      expect(s.scene.assets).toHaveLength(1)
+      expect(s.selectedLayerId).toBeNull()
+      expect(s.playhead).toBe(0)
+      expect(s.playing).toBe(false)
+    })
+
+    test('parseProject rejects non-JSON', () => {
+      let caught: unknown = null
+      try {
+        parseProject('not json at all')
+      } catch (e) {
+        caught = e
+      }
+      expect(caught instanceof ProjectFileError).toBe(true)
+    })
+
+    test('parseProject rejects foreign JSON without magic', () => {
+      let caught: unknown = null
+      try {
+        parseProject(JSON.stringify({ foo: 'bar' }))
+      } catch (e) {
+        caught = e
+      }
+      expect(caught instanceof ProjectFileError).toBe(true)
+    })
+
+    test('parseProject rejects missing scene fields', () => {
+      let caught: unknown = null
+      try {
+        parseProject(JSON.stringify({ magic: 'animatr-project', fileVersion: 1, scene: {} }))
+      } catch (e) {
+        caught = e
+      }
+      expect(caught instanceof ProjectFileError).toBe(true)
+    })
+  })
+
+  suite('app smoke — live DOM', () => {
+    test('app root, topbar, timeline, stage are mounted', () => {
+      expect(document.querySelector('.app')).toBeTruthy()
+      expect(document.querySelector('.topbar')).toBeTruthy()
+      expect(document.querySelector('.timeline')).toBeTruthy()
+      expect(document.querySelector('.stage')).toBeTruthy()
+    })
+
+    test('timeline snap toggle button is present', () => {
+      expect(document.querySelector('.snap-btn')).toBeTruthy()
+    })
+
+    test('topbar has save & recents buttons', () => {
+      const saveBtn = document.querySelector('button[title^="Projekt speichern"]')
+      const recentsBtn = document.querySelector('button[title="Zuletzt verwendete Projekte"]')
+      expect(saveBtn).toBeTruthy()
+      expect(recentsBtn).toBeTruthy()
+    })
+  })
+}