bak
This commit is contained in:
th committed
1 parent
94e9846c13
commit
e4aa0dce86
11 files changed
+2227
-32
No files matched your search
@@ -0,0 +1,685 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
|
||||
import { PhArrowClockwise, PhCheck, PhClipboardText, PhWarning, PhX } from '@phosphor-icons/vue'
|
||||
import { useSceneStore } from '@/stores/scene'
|
||||
import { runAll, type TestResult } from './testRunner'
|
||||
import { registerAllTests } from './tests'
|
||||
|
||||
const props = defineProps<{ modelValue: boolean }>()
|
||||
const emit = defineEmits<{ 'update:modelValue': [value: boolean] }>()
|
||||
|
||||
const store = useSceneStore()
|
||||
|
||||
const running = ref(false)
|
||||
const done = ref(0)
|
||||
const total = ref(0)
|
||||
const results = ref<TestResult[]>([])
|
||||
const startedAt = ref(0)
|
||||
const finishedAt = ref(0)
|
||||
const clipboardStatus = ref<'idle' | 'copied' | 'failed'>('idle')
|
||||
const currentSuite = ref('')
|
||||
const currentTest = ref('')
|
||||
|
||||
const progressPct = computed(() =>
|
||||
total.value > 0 ? Math.round((done.value / total.value) * 100) : 0,
|
||||
)
|
||||
const passedSoFar = computed(() => results.value.filter((r) => r.ok).length)
|
||||
const failedSoFar = computed(() => results.value.filter((r) => !r.ok).length)
|
||||
|
||||
function buildReport(): string {
|
||||
const failures = results.value.filter((r) => !r.ok)
|
||||
const pass = results.value.filter((r) => r.ok).length
|
||||
const fail = failures.length
|
||||
const durMs = Math.round(finishedAt.value - startedAt.value)
|
||||
const lines: string[] = []
|
||||
lines.push('# Animatr Test Report')
|
||||
lines.push('')
|
||||
lines.push(`**Run at:** ${new Date().toISOString()}`)
|
||||
lines.push(`**Duration:** ${durMs} ms`)
|
||||
lines.push(`**Result:** ${pass} passed, ${fail} failed / ${results.value.length} total`)
|
||||
lines.push('')
|
||||
lines.push('## Environment')
|
||||
lines.push(`- URL: ${location.href}`)
|
||||
lines.push(`- User Agent: ${navigator.userAgent}`)
|
||||
lines.push(`- Viewport: ${window.innerWidth}×${window.innerHeight}`)
|
||||
lines.push(`- DPR: ${window.devicePixelRatio}`)
|
||||
lines.push(`- Platform: ${navigator.platform}`)
|
||||
lines.push(`- Language: ${navigator.language}`)
|
||||
lines.push('')
|
||||
|
||||
if (fail === 0) {
|
||||
lines.push('All tests passed. ✅')
|
||||
return lines.join('\n')
|
||||
}
|
||||
|
||||
lines.push('## Failures')
|
||||
lines.push('')
|
||||
for (const f of failures) {
|
||||
lines.push(`### [${f.suite}] › ${f.name}`)
|
||||
lines.push(`_${Math.round(f.durationMs)} ms_`)
|
||||
lines.push('')
|
||||
lines.push('```')
|
||||
lines.push(f.error ?? '(no message)')
|
||||
if (f.stack && f.stack.trim()) {
|
||||
lines.push('')
|
||||
lines.push(f.stack)
|
||||
}
|
||||
lines.push('```')
|
||||
lines.push('')
|
||||
}
|
||||
|
||||
lines.push('## Passing suites')
|
||||
const suites = new Map<string, { pass: number; total: number }>()
|
||||
for (const r of results.value) {
|
||||
const s = suites.get(r.suite) ?? { pass: 0, total: 0 }
|
||||
s.total++
|
||||
if (r.ok) s.pass++
|
||||
suites.set(r.suite, s)
|
||||
}
|
||||
for (const [name, s] of suites.entries()) {
|
||||
const mark = s.pass === s.total ? '✅' : '⚠️'
|
||||
lines.push(`- ${mark} ${name} — ${s.pass}/${s.total}`)
|
||||
}
|
||||
return lines.join('\n')
|
||||
}
|
||||
|
||||
async function copyReport() {
|
||||
const report = buildReport()
|
||||
try {
|
||||
if (navigator.clipboard && navigator.clipboard.writeText) {
|
||||
await navigator.clipboard.writeText(report)
|
||||
} else {
|
||||
const ta = document.createElement('textarea')
|
||||
ta.value = report
|
||||
ta.style.position = 'fixed'
|
||||
ta.style.opacity = '0'
|
||||
document.body.appendChild(ta)
|
||||
ta.select()
|
||||
document.execCommand('copy')
|
||||
document.body.removeChild(ta)
|
||||
}
|
||||
clipboardStatus.value = 'copied'
|
||||
} catch (err) {
|
||||
console.error('clipboard copy failed', err)
|
||||
clipboardStatus.value = 'failed'
|
||||
}
|
||||
setTimeout(() => {
|
||||
clipboardStatus.value = 'idle'
|
||||
}, 3000)
|
||||
}
|
||||
|
||||
const grouped = computed(() => {
|
||||
const map = new Map<string, TestResult[]>()
|
||||
for (const r of results.value) {
|
||||
const arr = map.get(r.suite) ?? []
|
||||
arr.push(r)
|
||||
map.set(r.suite, arr)
|
||||
}
|
||||
return Array.from(map.entries()).map(([suite, tests]) => ({
|
||||
suite,
|
||||
tests,
|
||||
ok: tests.every((t) => t.ok),
|
||||
}))
|
||||
})
|
||||
|
||||
const passed = computed(() => results.value.filter((r) => r.ok).length)
|
||||
const failed = computed(() => results.value.filter((r) => !r.ok).length)
|
||||
const totalMs = computed(() =>
|
||||
Math.round(results.value.reduce((a, r) => a + r.durationMs, 0)),
|
||||
)
|
||||
|
||||
async function run() {
|
||||
if (running.value) return
|
||||
running.value = true
|
||||
results.value = []
|
||||
done.value = 0
|
||||
total.value = 0
|
||||
currentSuite.value = ''
|
||||
currentTest.value = ''
|
||||
clipboardStatus.value = 'idle'
|
||||
startedAt.value = performance.now()
|
||||
const snapshot = JSON.parse(JSON.stringify(store.$state))
|
||||
try {
|
||||
results.value = await runAll(registerAllTests, {
|
||||
onProgress: (d, t) => {
|
||||
done.value = d
|
||||
total.value = t
|
||||
},
|
||||
onTestStart: (suiteName, testName) => {
|
||||
currentSuite.value = suiteName
|
||||
currentTest.value = testName
|
||||
},
|
||||
interTestDelayMs: 80,
|
||||
})
|
||||
} finally {
|
||||
store.$state = snapshot
|
||||
finishedAt.value = performance.now()
|
||||
running.value = false
|
||||
}
|
||||
if (results.value.some((r) => !r.ok)) {
|
||||
await copyReport()
|
||||
}
|
||||
}
|
||||
|
||||
function close() {
|
||||
emit('update:modelValue', false)
|
||||
}
|
||||
|
||||
function onKeyDown(e: KeyboardEvent) {
|
||||
if (!props.modelValue) return
|
||||
if (e.key === 'Escape' && !running.value) close()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
document.addEventListener('keydown', onKeyDown)
|
||||
if (props.modelValue) run()
|
||||
})
|
||||
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(v) => {
|
||||
if (v && !running.value) run()
|
||||
},
|
||||
)
|
||||
|
||||
onBeforeUnmount(() => document.removeEventListener('keydown', onKeyDown))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<Transition name="hud-pop">
|
||||
<div v-if="modelValue && running" class="hud" role="status" aria-live="polite">
|
||||
<div class="hud-top">
|
||||
<span class="hud-tag">Tests laufen</span>
|
||||
<span class="hud-counts">
|
||||
<span class="hud-count">{{ done }}/{{ total }}</span>
|
||||
<span class="hud-chip ok" v-if="passedSoFar">{{ passedSoFar }} ✓</span>
|
||||
<span class="hud-chip bad" v-if="failedSoFar">{{ failedSoFar }} ✗</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="hud-current">
|
||||
<span class="hud-suite">{{ currentSuite || '…' }}</span>
|
||||
<span class="hud-sep">›</span>
|
||||
<span class="hud-test">{{ currentTest || '…' }}</span>
|
||||
</div>
|
||||
<div class="hud-bar">
|
||||
<div class="hud-bar-fill" :style="{ width: progressPct + '%' }"></div>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
|
||||
<Transition name="fade">
|
||||
<div v-if="modelValue && !running" class="overlay" @mousedown.self="close">
|
||||
<div class="panel" role="dialog" aria-modal="true">
|
||||
<header class="hdr">
|
||||
<div class="hdr-title">
|
||||
<span>Test Runner</span>
|
||||
<span v-if="results.length" class="hdr-status">
|
||||
<span class="ok-badge" :class="{ bad: failed > 0 }">
|
||||
{{ passed }}/{{ results.length }}
|
||||
</span>
|
||||
<span class="dim">{{ totalMs }} ms</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="hdr-actions">
|
||||
<button
|
||||
class="tbtn"
|
||||
:disabled="!results.length"
|
||||
:title="clipboardStatus === 'copied' ? 'Report kopiert' : 'Report in Zwischenablage kopieren'"
|
||||
:class="{ copied: clipboardStatus === 'copied', failed: clipboardStatus === 'failed' }"
|
||||
@click="copyReport"
|
||||
>
|
||||
<PhClipboardText :size="14" />
|
||||
</button>
|
||||
<button class="tbtn" title="Erneut ausführen" @click="run">
|
||||
<PhArrowClockwise :size="14" />
|
||||
</button>
|
||||
<button class="tbtn" title="Schließen" @click="close">
|
||||
<PhX :size="14" weight="bold" />
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div v-if="clipboardStatus !== 'idle'" class="clip-banner" :class="clipboardStatus">
|
||||
<span v-if="clipboardStatus === 'copied'">
|
||||
Fehlerreport wurde in die Zwischenablage kopiert.
|
||||
</span>
|
||||
<span v-else>
|
||||
Kopieren fehlgeschlagen — Report manuell über das Clipboard-Icon auslösen.
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="body">
|
||||
<div v-if="!results.length" class="empty">
|
||||
Keine Ergebnisse — „Erneut ausführen“ klicken oder <kbd>⌃⇧⌥T</kbd> drücken.
|
||||
</div>
|
||||
<div v-for="g in grouped" :key="g.suite" class="suite">
|
||||
<div class="suite-hdr" :class="{ bad: !g.ok }">
|
||||
<PhCheck v-if="g.ok" :size="12" weight="bold" class="icon ok" />
|
||||
<PhWarning v-else :size="12" weight="fill" class="icon bad" />
|
||||
<span class="suite-name">{{ g.suite }}</span>
|
||||
<span class="suite-count">
|
||||
{{ g.tests.filter((t) => t.ok).length }}/{{ g.tests.length }}
|
||||
</span>
|
||||
</div>
|
||||
<ul class="tests">
|
||||
<li v-for="t in g.tests" :key="t.name" class="test" :class="{ bad: !t.ok }">
|
||||
<span class="test-dot" :class="{ ok: t.ok, bad: !t.ok }"></span>
|
||||
<span class="test-name">{{ t.name }}</span>
|
||||
<span class="test-dur">{{ Math.round(t.durationMs) }}ms</span>
|
||||
<pre v-if="!t.ok" class="test-err">{{ t.error }}</pre>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="ftr">
|
||||
<span class="ftr-item">{{ results.length }} Tests</span>
|
||||
<span class="ftr-item ok" v-if="passed">{{ passed }} grün</span>
|
||||
<span class="ftr-item bad" v-if="failed">{{ failed }} rot</span>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 2000;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
justify-content: flex-end;
|
||||
backdrop-filter: blur(2px);
|
||||
}
|
||||
|
||||
.panel {
|
||||
width: min(640px, 100%);
|
||||
background: var(--panel);
|
||||
border-left: 1px solid var(--border-strong);
|
||||
box-shadow: var(--shadow-md);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.hdr {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px 14px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.hdr-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.hdr-status {
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: var(--text-dim);
|
||||
display: inline-flex;
|
||||
gap: 6px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.hdr-status.running {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.ok-badge {
|
||||
padding: 2px 8px;
|
||||
background: rgba(71, 191, 130, 0.18);
|
||||
color: #47bf82;
|
||||
border-radius: 999px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.ok-badge.bad {
|
||||
background: var(--danger-soft);
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.dim {
|
||||
color: var(--text-dim);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.hdr-actions {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.tbtn {
|
||||
width: 28px;
|
||||
height: 26px;
|
||||
padding: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: transparent;
|
||||
border: 1px solid var(--border);
|
||||
color: var(--text-dim);
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.tbtn:hover:not(:disabled) {
|
||||
background: var(--panel-alt);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.tbtn.copied {
|
||||
background: rgba(71, 191, 130, 0.18);
|
||||
color: #47bf82;
|
||||
border-color: #47bf82;
|
||||
}
|
||||
|
||||
.tbtn.failed {
|
||||
background: var(--danger-soft);
|
||||
color: var(--danger);
|
||||
border-color: var(--danger);
|
||||
}
|
||||
|
||||
.clip-banner {
|
||||
padding: 8px 14px;
|
||||
font-size: 11px;
|
||||
background: rgba(71, 191, 130, 0.14);
|
||||
color: #47bf82;
|
||||
border-bottom: 1px solid rgba(71, 191, 130, 0.3);
|
||||
}
|
||||
|
||||
.clip-banner.failed {
|
||||
background: var(--danger-soft);
|
||||
color: var(--danger);
|
||||
border-bottom-color: var(--danger);
|
||||
}
|
||||
|
||||
.progress {
|
||||
height: 2px;
|
||||
background: var(--border);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
background: var(--accent);
|
||||
transition: width 120ms linear;
|
||||
}
|
||||
|
||||
.body {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
padding: 8px 10px 12px;
|
||||
}
|
||||
|
||||
.empty {
|
||||
color: var(--text-dim);
|
||||
font-size: 12px;
|
||||
padding: 20px 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.empty kbd {
|
||||
background: var(--panel-alt);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 4px;
|
||||
padding: 1px 5px;
|
||||
font-family: ui-monospace, Menlo, monospace;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.suite {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.suite-hdr {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 6px 8px;
|
||||
background: var(--panel-alt);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.suite-hdr.bad {
|
||||
border-color: var(--danger);
|
||||
}
|
||||
|
||||
.suite-name {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.suite-count {
|
||||
font-variant-numeric: tabular-nums;
|
||||
color: var(--text-dim);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.icon.ok {
|
||||
color: #47bf82;
|
||||
}
|
||||
|
||||
.icon.bad {
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.tests {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 4px 0 0 14px;
|
||||
}
|
||||
|
||||
.test {
|
||||
display: grid;
|
||||
grid-template-columns: 12px 1fr auto;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
padding: 3px 4px;
|
||||
font-size: 12px;
|
||||
color: var(--text-dim-strong);
|
||||
}
|
||||
|
||||
.test.bad {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.test-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: var(--border);
|
||||
}
|
||||
|
||||
.test-dot.ok {
|
||||
background: #47bf82;
|
||||
}
|
||||
|
||||
.test-dot.bad {
|
||||
background: var(--danger);
|
||||
}
|
||||
|
||||
.test-dur {
|
||||
font-size: 10px;
|
||||
color: var(--text-dim);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.test-err {
|
||||
grid-column: 2 / -1;
|
||||
margin: 2px 0 4px;
|
||||
padding: 6px 8px;
|
||||
background: var(--danger-soft);
|
||||
color: var(--danger);
|
||||
border-radius: var(--radius-sm);
|
||||
font-family: ui-monospace, Menlo, monospace;
|
||||
font-size: 11px;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.ftr {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
padding: 10px 14px;
|
||||
border-top: 1px solid var(--border);
|
||||
font-size: 11px;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
.ftr-item.ok {
|
||||
color: #47bf82;
|
||||
}
|
||||
|
||||
.ftr-item.bad {
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 140ms var(--ease);
|
||||
}
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.hud {
|
||||
position: fixed;
|
||||
bottom: 240px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 2000;
|
||||
width: min(520px, calc(100vw - 24px));
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--border-strong);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: var(--shadow-md);
|
||||
padding: 10px 12px 8px;
|
||||
pointer-events: none;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.hud-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.hud-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.hud-tag::before {
|
||||
content: '';
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent);
|
||||
animation: hud-pulse 900ms var(--ease) infinite;
|
||||
}
|
||||
|
||||
@keyframes hud-pulse {
|
||||
0%, 100% { opacity: 1; transform: scale(1); }
|
||||
50% { opacity: 0.45; transform: scale(0.7); }
|
||||
}
|
||||
|
||||
.hud-counts {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.hud-count {
|
||||
color: var(--text-dim);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.hud-chip {
|
||||
padding: 1px 6px;
|
||||
border-radius: 999px;
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.hud-chip.ok {
|
||||
background: rgba(71, 191, 130, 0.18);
|
||||
color: #47bf82;
|
||||
}
|
||||
|
||||
.hud-chip.bad {
|
||||
background: var(--danger-soft);
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.hud-current {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 12px;
|
||||
color: var(--text);
|
||||
margin-bottom: 6px;
|
||||
min-height: 16px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.hud-suite {
|
||||
color: var(--text-dim);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.hud-sep {
|
||||
color: var(--text-dim);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.hud-test {
|
||||
color: var(--text);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.hud-bar {
|
||||
height: 3px;
|
||||
background: var(--border);
|
||||
border-radius: 999px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hud-bar-fill {
|
||||
height: 100%;
|
||||
background: var(--accent);
|
||||
border-radius: 999px;
|
||||
transition: width 120ms linear;
|
||||
}
|
||||
|
||||
.hud-pop-enter-active,
|
||||
.hud-pop-leave-active {
|
||||
transition: opacity 140ms var(--ease), transform 160ms var(--ease);
|
||||
}
|
||||
.hud-pop-enter-from,
|
||||
.hud-pop-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(-50%) translateY(8px);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,185 @@
|
||||
export interface TestResult {
|
||||
suite: string
|
||||
name: string
|
||||
ok: boolean
|
||||
error?: string
|
||||
stack?: string
|
||||
durationMs: number
|
||||
}
|
||||
|
||||
interface SuiteDef {
|
||||
name: string
|
||||
tests: { name: string; fn: () => void | Promise<void> }[]
|
||||
beforeEach?: () => void | Promise<void>
|
||||
afterEach?: () => void | Promise<void>
|
||||
}
|
||||
|
||||
const suites: SuiteDef[] = []
|
||||
let current: SuiteDef | null = null
|
||||
|
||||
export function suite(name: string, fn: () => void): void {
|
||||
const prev = current
|
||||
current = { name, tests: [] }
|
||||
try {
|
||||
fn()
|
||||
suites.push(current)
|
||||
} finally {
|
||||
current = prev
|
||||
}
|
||||
}
|
||||
|
||||
export function test(name: string, fn: () => void | Promise<void>): void {
|
||||
if (!current) throw new Error(`test("${name}") called outside of suite()`)
|
||||
current.tests.push({ name, fn })
|
||||
}
|
||||
|
||||
export function beforeEach(fn: () => void | Promise<void>): void {
|
||||
if (!current) throw new Error('beforeEach outside of suite()')
|
||||
current.beforeEach = fn
|
||||
}
|
||||
|
||||
export function afterEach(fn: () => void | Promise<void>): void {
|
||||
if (!current) throw new Error('afterEach outside of suite()')
|
||||
current.afterEach = fn
|
||||
}
|
||||
|
||||
class Expectation {
|
||||
constructor(private value: unknown) {}
|
||||
|
||||
toBe(expected: unknown): void {
|
||||
if (!Object.is(this.value, expected)) {
|
||||
throw new Error(`expected ${this.fmt(expected)}, got ${this.fmt(this.value)}`)
|
||||
}
|
||||
}
|
||||
|
||||
toEqual(expected: unknown): void {
|
||||
const a = JSON.stringify(this.value)
|
||||
const b = JSON.stringify(expected)
|
||||
if (a !== b) throw new Error(`expected ${b}, got ${a}`)
|
||||
}
|
||||
|
||||
toBeCloseTo(expected: number, precision = 4): void {
|
||||
const v = this.value as number
|
||||
const eps = Math.pow(10, -precision) / 2
|
||||
if (Math.abs(v - expected) > eps) {
|
||||
throw new Error(`expected ≈${expected} (p=${precision}), got ${v}`)
|
||||
}
|
||||
}
|
||||
|
||||
toBeTruthy(): void {
|
||||
if (!this.value) throw new Error(`expected truthy, got ${this.fmt(this.value)}`)
|
||||
}
|
||||
|
||||
toBeFalsy(): void {
|
||||
if (this.value) throw new Error(`expected falsy, got ${this.fmt(this.value)}`)
|
||||
}
|
||||
|
||||
toBeNull(): void {
|
||||
if (this.value !== null) throw new Error(`expected null, got ${this.fmt(this.value)}`)
|
||||
}
|
||||
|
||||
toBeDefined(): void {
|
||||
if (this.value === undefined) throw new Error('expected defined value, got undefined')
|
||||
}
|
||||
|
||||
toBeGreaterThan(n: number): void {
|
||||
if (!((this.value as number) > n)) throw new Error(`expected > ${n}, got ${this.value}`)
|
||||
}
|
||||
|
||||
toBeLessThan(n: number): void {
|
||||
if (!((this.value as number) < n)) throw new Error(`expected < ${n}, got ${this.value}`)
|
||||
}
|
||||
|
||||
toContain(sub: string): void {
|
||||
const s = this.value as string
|
||||
if (!s || !s.includes(sub)) {
|
||||
throw new Error(`expected string to contain ${JSON.stringify(sub)}`)
|
||||
}
|
||||
}
|
||||
|
||||
toHaveLength(n: number): void {
|
||||
const l = (this.value as { length: number }).length
|
||||
if (l !== n) throw new Error(`expected length ${n}, got ${l}`)
|
||||
}
|
||||
|
||||
private fmt(v: unknown): string {
|
||||
if (v === undefined) return 'undefined'
|
||||
try {
|
||||
return JSON.stringify(v)
|
||||
} catch {
|
||||
return String(v)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export function expect(value: unknown): Expectation {
|
||||
return new Expectation(value)
|
||||
}
|
||||
|
||||
function cleanStack(stack: string | undefined): string | undefined {
|
||||
if (!stack) return undefined
|
||||
const lines = stack.split('\n')
|
||||
const filtered = lines.filter((l) => {
|
||||
if (l.includes('/testRunner.ts')) return false
|
||||
if (l.includes('/testRunner.js')) return false
|
||||
if (l.includes('node_modules')) return false
|
||||
return true
|
||||
})
|
||||
return filtered.slice(0, 10).join('\n')
|
||||
}
|
||||
|
||||
export interface RunOptions {
|
||||
onProgress?: (done: number, total: number) => void
|
||||
onTestStart?: (suite: string, name: string) => void
|
||||
interTestDelayMs?: number
|
||||
}
|
||||
|
||||
export async function runAll(
|
||||
register: () => void,
|
||||
opts: RunOptions = {},
|
||||
): Promise<TestResult[]> {
|
||||
suites.length = 0
|
||||
register()
|
||||
const total = suites.reduce((a, s) => a + s.tests.length, 0)
|
||||
const results: TestResult[] = []
|
||||
let done = 0
|
||||
const delay = Math.max(0, opts.interTestDelayMs ?? 0)
|
||||
for (const s of suites) {
|
||||
for (const t of s.tests) {
|
||||
opts.onTestStart?.(s.name, t.name)
|
||||
await new Promise((r) => requestAnimationFrame(() => r(null)))
|
||||
const start = performance.now()
|
||||
try {
|
||||
if (s.beforeEach) await s.beforeEach()
|
||||
await t.fn()
|
||||
if (s.afterEach) await s.afterEach()
|
||||
results.push({
|
||||
suite: s.name,
|
||||
name: t.name,
|
||||
ok: true,
|
||||
durationMs: performance.now() - start,
|
||||
})
|
||||
} catch (err) {
|
||||
try {
|
||||
if (s.afterEach) await s.afterEach()
|
||||
} catch {
|
||||
/* ignore cleanup errors if test already failed */
|
||||
}
|
||||
const e = err as Error
|
||||
results.push({
|
||||
suite: s.name,
|
||||
name: t.name,
|
||||
ok: false,
|
||||
error: e.message || String(err),
|
||||
stack: cleanStack(e.stack),
|
||||
durationMs: performance.now() - start,
|
||||
})
|
||||
}
|
||||
done++
|
||||
opts.onProgress?.(done, total)
|
||||
if (delay > 0) await new Promise((r) => setTimeout(r, delay))
|
||||
else await new Promise((r) => setTimeout(r, 0))
|
||||
}
|
||||
}
|
||||
return results
|
||||
}
|
||||
@@ -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()
|
||||
})
|
||||
})
|
||||
}
|
||||
Reference in new issue
Block a user