openpencil/tests/engine/io/fig/import/edge-cases.test.ts
Danila Poyarkov aa86873dd7
test: typecheck the test suites and fix what that found (#896)
* build: typecheck the test suites

Tests were in no TypeScript program: no tsconfig included tests/** or
packages/*/tests/**, and bun strips types without checking them, so a
fixture could drop a required field and keep passing until something
read it.

@types/bun moves to the root because it was installed per package only,
and #cli-tests/* joins the paths the root config already carries.

* test: fix the type errors the test suites were hiding

Typechecking the tests turned up 1123 errors. Most were ordinary
strictness, but some were real: `NodeChange` bound to Figma's plugin
typings rather than the Kiwi codec in thirteen .fig tests,
materializeInstance was called with six arguments against five so the
blobs and source children were dropped, CanvasKit pixels were written
to a plain object that never reached WASM, and assertions were made
through accessors that do not exist, so they asserted nothing.

Fixtures that had quietly lost a required field now carry it, nullable
results are narrowed through the existing expectDefined helper rather
than assumed, and stand-ins for CanvasKit and the editor go through one
named helper instead of an unexplained cast at each site.

No test was deleted, skipped, or weakened, and no `any`, non-null
assertion, or ts-expect-error was introduced.

* docs: record what typechecking the tests established

Pins the app program's global types with an assertion rather than a
note, since an unpinned types list lets any root @types package decide
which platform src/** is judged against.

The two environment faults that look like code regressions — Vite's
dependency pre-bundle outliving a package rebuild, and heavy .fig
suites failing under load — go to the development docs, where an
explanation belongs.

* fix: align @types/bun and keep node types resolvable when extended

The root manifest declared a newer @types/bun than every package, which
check:monorepo rejects, and pinning the app program's types left them
unresolvable from a config that extends this one out of tree.

* fix: fail the test typecheck when the compiler itself fails

The gate matched diagnostics by substring, so a compiler or config
failure that named no test file printed a pass while having checked
nothing. Diagnostics are now split by whether they name a file: an
unscoped one is the run failing and stops the gate, a test file's is a
finding, and a source file's stays out by design.

Also drops the parameter planComponentConstruction never read, and
makes the inner-shadow verification script exit non-zero when it
renders no image instead of logging and succeeding.

* chore: merge master into tests-typecheck
2026-10-05 12:42:38 +00:00

546 lines
19 KiB
TypeScript

import { describe, expect, setDefaultTimeout, test } from 'bun:test'
import { type NodeChange, parseFigFile, type SceneNode } from '@open-pencil/core'
import { materializeDocument } from '@open-pencil/fig'
import { expectDefined } from '#tests/helpers/assert'
import { sharedGoldPreviewFixture } from '#tests/helpers/fig/fixtures'
setDefaultTimeout(60_000)
describe('edge cases', () => {
test('non-fig-kiwi bytes throw meaningful error', async () => {
const garbage = new Uint8Array([0, 1, 2, 3, 4, 5, 6, 7, 8, 9])
await expect(parseFigFile(garbage.buffer as ArrayBuffer)).rejects.toThrow()
})
test('invalid zip data throws', async () => {
const garbage = new Uint8Array(50).fill(0xff)
await expect(parseFigFile(garbage.buffer as ArrayBuffer)).rejects.toThrow()
})
test('REMOVED nodes are skipped', () => {
const graph = materializeDocument([
{
guid: { sessionID: 0, localID: 0 },
type: 'DOCUMENT',
name: 'Document',
visible: true,
opacity: 1,
phase: 'CREATED',
transform: { m00: 1, m01: 0, m02: 0, m10: 0, m11: 1, m12: 0 }
},
{
guid: { sessionID: 0, localID: 1 },
parentIndex: { guid: { sessionID: 0, localID: 0 }, position: '!' },
type: 'CANVAS',
name: 'Page',
visible: true,
opacity: 1,
phase: 'CREATED',
transform: { m00: 1, m01: 0, m02: 0, m10: 0, m11: 1, m12: 0 }
},
{
guid: { sessionID: 1, localID: 10 },
parentIndex: { guid: { sessionID: 0, localID: 1 }, position: '!' },
type: 'RECTANGLE',
name: 'Visible',
visible: true,
opacity: 1,
phase: 'CREATED',
size: { x: 100, y: 100 },
transform: { m00: 1, m01: 0, m02: 0, m10: 0, m11: 1, m12: 0 }
},
{
guid: { sessionID: 1, localID: 11 },
parentIndex: { guid: { sessionID: 0, localID: 1 }, position: '"' },
type: 'RECTANGLE',
name: 'Deleted',
visible: true,
opacity: 1,
phase: 'REMOVED',
size: { x: 100, y: 100 },
transform: { m00: 1, m01: 0, m02: 0, m10: 0, m11: 1, m12: 0 }
}
]).graph
const children = graph.getChildren(graph.getPages()[0].id)
expect(children).toHaveLength(1)
expect(children[0].name).toBe('Visible')
})
test('symbolOverrides propagate through nested instances', () => {
// Structure:
// DOCUMENT (0:0)
// └─ CANVAS "Page" (0:1)
// ├─ COMPONENT "Inner" (1:1) ← inner component
// │ └─ TEXT "Label" (1:2) ← default text "Default"
// ├─ COMPONENT "Outer" (1:3) ← outer component
// │ └─ INSTANCE "InnerUse" (1:4) symId=1:1, override: Label→"Changed"
// └─ INSTANCE "OuterUse" (1:5) ← instance of Outer
//
// After import, OuterUse should contain a clone of InnerUse,
// which should contain a Label text with "Changed" (not "Default")
const graph = materializeDocument([
{
guid: { sessionID: 0, localID: 0 },
type: 'DOCUMENT',
name: 'Document',
phase: 'CREATED'
} as NodeChange,
{
guid: { sessionID: 0, localID: 1 },
parentIndex: { guid: { sessionID: 0, localID: 0 }, position: '!' },
type: 'CANVAS',
name: 'Page',
phase: 'CREATED'
} as NodeChange,
// Inner component
{
guid: { sessionID: 1, localID: 1 },
parentIndex: { guid: { sessionID: 0, localID: 1 }, position: '!' },
type: 'SYMBOL',
name: 'Inner',
phase: 'CREATED',
size: { x: 100, y: 40 },
transform: { m00: 1, m01: 0, m02: 0, m10: 0, m11: 1, m12: 0 }
} as NodeChange,
// TEXT child of Inner
{
guid: { sessionID: 1, localID: 2 },
overrideKey: { sessionID: 99, localID: 2 },
parentIndex: { guid: { sessionID: 1, localID: 1 }, position: '!' },
type: 'TEXT',
name: 'Label',
textData: { characters: 'Default' },
phase: 'CREATED',
size: { x: 80, y: 20 },
transform: { m00: 1, m01: 0, m02: 0, m10: 0, m11: 1, m12: 0 }
} as NodeChange,
// Outer component
{
guid: { sessionID: 1, localID: 3 },
parentIndex: { guid: { sessionID: 0, localID: 1 }, position: '"' },
type: 'SYMBOL',
name: 'Outer',
phase: 'CREATED',
size: { x: 200, y: 40 },
transform: { m00: 1, m01: 0, m02: 0, m10: 0, m11: 1, m12: 0 }
} as NodeChange,
// INSTANCE of Inner inside Outer, with symbolOverride on Label
{
guid: { sessionID: 1, localID: 4 },
parentIndex: { guid: { sessionID: 1, localID: 3 }, position: '!' },
type: 'INSTANCE',
name: 'InnerUse',
phase: 'CREATED',
size: { x: 100, y: 40 },
transform: { m00: 1, m01: 0, m02: 0, m10: 0, m11: 1, m12: 0 },
symbolData: {
symbolID: { sessionID: 1, localID: 1 },
symbolOverrides: [
{
guidPath: { guids: [{ sessionID: 99, localID: 2 }] },
textData: { characters: 'Changed' }
}
]
}
} as NodeChange,
// Top-level INSTANCE of Outer on the page
{
guid: { sessionID: 1, localID: 5 },
parentIndex: { guid: { sessionID: 0, localID: 1 }, position: '#' },
type: 'INSTANCE',
name: 'OuterUse',
phase: 'CREATED',
size: { x: 200, y: 40 },
transform: { m00: 1, m01: 0, m02: 0, m10: 0, m11: 1, m12: 0 },
symbolData: {
symbolID: { sessionID: 1, localID: 3 }
}
} as NodeChange
]).graph
const page = graph.getPages()[0]
const outerUse = graph.getChildren(page.id).find((n) => n.name === 'OuterUse')
expect(outerUse).toBeDefined()
expect(expectDefined(outerUse, 'outerUse').type).toBe('INSTANCE')
// Walk down: OuterUse > InnerUse clone > Label clone
const innerClone = graph.getChildren(outerUse?.id ?? '')[0]
expect(innerClone).toBeDefined()
expect(innerClone.name).toBe('InnerUse')
const labelClone = graph.getChildren(innerClone.id)[0]
expect(labelClone).toBeDefined()
expect(labelClone.name).toBe('Label')
expect(labelClone.text).toBe('Changed')
})
test('overriddenSymbolID swaps instance component through nested levels', () => {
// Structure:
// COMPONENT "IconA" (1:1) → VECTOR "PathA"
// COMPONENT "IconB" (1:3) → VECTOR "PathB1", VECTOR "PathB2"
// COMPONENT "Button" (1:5) → INSTANCE "icon" of IconA
// COMPONENT "Toolbar" (1:7) → INSTANCE "btn" of Button, with override swapping icon to IconB
// INSTANCE "ToolbarUse" (1:9) of Toolbar on the page
//
// After import, ToolbarUse > btn clone > icon clone should have IconB's children
const graph = materializeDocument([
{
guid: { sessionID: 0, localID: 0 },
type: 'DOCUMENT',
name: 'Document',
phase: 'CREATED'
} as NodeChange,
{
guid: { sessionID: 0, localID: 1 },
parentIndex: { guid: { sessionID: 0, localID: 0 }, position: '!' },
type: 'CANVAS',
name: 'Page',
phase: 'CREATED'
} as NodeChange,
// IconA component with 1 child
{
guid: { sessionID: 1, localID: 1 },
overrideKey: { sessionID: 90, localID: 1 },
parentIndex: { guid: { sessionID: 0, localID: 1 }, position: '!' },
type: 'SYMBOL',
name: 'IconA',
phase: 'CREATED',
size: { x: 24, y: 24 },
transform: { m00: 1, m01: 0, m02: 0, m10: 0, m11: 1, m12: 0 }
} as NodeChange,
{
guid: { sessionID: 1, localID: 2 },
overrideKey: { sessionID: 90, localID: 2 },
parentIndex: { guid: { sessionID: 1, localID: 1 }, position: '!' },
type: 'VECTOR',
name: 'PathA',
phase: 'CREATED',
size: { x: 24, y: 24 },
transform: { m00: 1, m01: 0, m02: 0, m10: 0, m11: 1, m12: 0 }
} as NodeChange,
// IconB component with 2 children
{
guid: { sessionID: 1, localID: 3 },
overrideKey: { sessionID: 90, localID: 3 },
parentIndex: { guid: { sessionID: 0, localID: 1 }, position: '"' },
type: 'SYMBOL',
name: 'IconB',
phase: 'CREATED',
size: { x: 40, y: 40 },
cornerRadius: 12,
frameMaskDisabled: false,
transform: { m00: 1, m01: 0, m02: 0, m10: 0, m11: 1, m12: 0 }
} as NodeChange,
{
guid: { sessionID: 1, localID: 31 },
overrideKey: { sessionID: 90, localID: 31 },
parentIndex: { guid: { sessionID: 1, localID: 3 }, position: '!' },
type: 'VECTOR',
name: 'PathB1',
phase: 'CREATED',
size: { x: 24, y: 12 },
transform: { m00: 1, m01: 0, m02: 0, m10: 0, m11: 1, m12: 0 }
} as NodeChange,
{
guid: { sessionID: 1, localID: 32 },
overrideKey: { sessionID: 90, localID: 32 },
parentIndex: { guid: { sessionID: 1, localID: 3 }, position: '"' },
type: 'VECTOR',
name: 'PathB2',
phase: 'CREATED',
size: { x: 24, y: 12 },
transform: { m00: 1, m01: 0, m02: 0, m10: 0, m11: 1, m12: 0 }
} as NodeChange,
{
guid: { sessionID: 1, localID: 33 },
parentIndex: { guid: { sessionID: 1, localID: 3 }, position: '#' },
type: 'TEXT',
name: 'Icon label',
textData: { characters: 'Default' },
phase: 'CREATED',
size: { x: 24, y: 12 },
transform: { m00: 1, m01: 0, m02: 0, m10: 0, m11: 1, m12: 0 }
} as NodeChange,
// Button component with instance of IconA
{
guid: { sessionID: 1, localID: 5 },
overrideKey: { sessionID: 90, localID: 5 },
parentIndex: { guid: { sessionID: 0, localID: 1 }, position: '#' },
type: 'SYMBOL',
name: 'Button',
phase: 'CREATED',
size: { x: 40, y: 40 },
transform: { m00: 1, m01: 0, m02: 0, m10: 0, m11: 1, m12: 0 }
} as NodeChange,
{
guid: { sessionID: 1, localID: 62 },
parentIndex: { guid: { sessionID: 1, localID: 5 }, position: '!' },
type: 'FRAME',
name: 'first icon wrapper',
phase: 'CREATED',
size: { x: 24, y: 24 },
transform: { m00: 1, m01: 0, m02: 0, m10: 0, m11: 1, m12: 0 }
} as NodeChange,
{
guid: { sessionID: 1, localID: 63 },
parentIndex: { guid: { sessionID: 1, localID: 5 }, position: '"' },
type: 'FRAME',
name: 'second icon wrapper',
phase: 'CREATED',
size: { x: 24, y: 24 },
transform: { m00: 1, m01: 0, m02: 24, m10: 0, m11: 1, m12: 0 }
} as NodeChange,
{
guid: { sessionID: 1, localID: 6 },
overrideKey: { sessionID: 90, localID: 6 },
parentIndex: { guid: { sessionID: 1, localID: 62 }, position: '!' },
type: 'INSTANCE',
name: 'icon',
phase: 'CREATED',
size: { x: 24, y: 24 },
transform: { m00: 1, m01: 0, m02: 0, m10: 0, m11: 1, m12: 0 },
symbolData: { symbolID: { sessionID: 1, localID: 1 } }
} as NodeChange,
{
guid: { sessionID: 1, localID: 61 },
overrideKey: { sessionID: 90, localID: 61 },
parentIndex: { guid: { sessionID: 1, localID: 63 }, position: '!' },
type: 'INSTANCE',
name: 'icon',
phase: 'CREATED',
size: { x: 24, y: 24 },
transform: { m00: 1, m01: 0, m02: 24, m10: 0, m11: 1, m12: 0 },
symbolData: {
symbolID: { sessionID: 1, localID: 1 },
symbolOverrides: [{ guidPath: { guids: [{ sessionID: 1, localID: 1 }] }, name: 'icon' }]
}
} as NodeChange,
// Toolbar component with instance of Button, swapping icon to IconB
{
guid: { sessionID: 1, localID: 7 },
overrideKey: { sessionID: 90, localID: 7 },
parentIndex: { guid: { sessionID: 0, localID: 1 }, position: '$' },
type: 'SYMBOL',
name: 'Toolbar',
phase: 'CREATED',
size: { x: 200, y: 40 },
transform: { m00: 1, m01: 0, m02: 0, m10: 0, m11: 1, m12: 0 }
} as NodeChange,
{
guid: { sessionID: 1, localID: 8 },
overrideKey: { sessionID: 90, localID: 8 },
parentIndex: { guid: { sessionID: 1, localID: 7 }, position: '!' },
type: 'INSTANCE',
name: 'btn',
phase: 'CREATED',
size: { x: 40, y: 40 },
transform: { m00: 1, m01: 0, m02: 0, m10: 0, m11: 1, m12: 0 },
symbolData: {
symbolID: { sessionID: 1, localID: 5 },
symbolOverrides: [
{
guidPath: { guids: [{ sessionID: 90, localID: 61 }] },
overriddenSymbolID: { sessionID: 1, localID: 3 }
},
{
guidPath: {
guids: [
{ sessionID: 90, localID: 61 },
{ sessionID: 90, localID: 31 }
]
},
fillPaints: [
{
type: 'SOLID',
color: { r: 1, g: 1, b: 1, a: 1 },
colorVar: {
value: { alias: { guid: { sessionID: 2, localID: 5 } } }
}
}
]
},
{
guidPath: {
guids: [
{ sessionID: 90, localID: 61 },
{ sessionID: 1, localID: 33 }
]
},
textData: { characters: 'Changed after swap' }
}
]
}
} as NodeChange,
// Page-level instance of Toolbar
{
guid: { sessionID: 1, localID: 9 },
parentIndex: { guid: { sessionID: 0, localID: 1 }, position: '%' },
type: 'INSTANCE',
name: 'ToolbarUse',
phase: 'CREATED',
size: { x: 200, y: 40 },
transform: { m00: 1, m01: 0, m02: 0, m10: 0, m11: 1, m12: 0 },
symbolData: {
symbolID: { sessionID: 1, localID: 7 }
}
} as NodeChange
]).graph
const page = graph.getPages()[0]
const toolbarUse = graph.getChildren(page.id).find((n) => n.name === 'ToolbarUse')
expect(toolbarUse).toBeDefined()
// ToolbarUse > btn clone > second wrapped repeated icon clone
const btnClone = graph.getChildren(toolbarUse?.id ?? '')[0]
expect(btnClone).toBeDefined()
expect(btnClone.name).toBe('btn')
const buttonChildren = graph.getChildren(btnClone.id)
expect(buttonChildren.map((child) => child.name)).toEqual([
'first icon wrapper',
'second icon wrapper'
])
const iconClone = graph.getChildren(buttonChildren[1].id)[0]
expect(iconClone).toBeDefined()
expect(iconClone.name).toBe('icon')
expect(iconClone.width).toBe(24)
expect(iconClone.height).toBe(24)
expect(iconClone.cornerRadius).toBe(12)
expect(iconClone.clipsContent).toBe(true)
// Icon should have IconB's children, not IconA's child. The later text
// override must resolve through the same path prefix after the swap.
const iconChildren = graph.getChildren(iconClone.id)
expect(iconChildren).toHaveLength(3)
expect(iconChildren.map((c) => c.name).sort()).toEqual(['Icon label', 'PathB1', 'PathB2'])
expect(iconChildren.find((child) => child.name === 'PathB1')?.boundVariables).toMatchObject({
'fills/0/color': '2:5'
})
expect(iconChildren.find((child) => child.name === 'Icon label')?.text).toBe(
'Changed after swap'
)
})
test('component swaps use the component set name for variants', () => {
const graph = materializeDocument([
{
guid: { sessionID: 0, localID: 0 },
type: 'DOCUMENT',
name: 'Document',
phase: 'CREATED'
} as NodeChange,
{
guid: { sessionID: 0, localID: 1 },
parentIndex: { guid: { sessionID: 0, localID: 0 }, position: '!' },
type: 'CANVAS',
name: 'Page',
phase: 'CREATED'
} as NodeChange,
{
guid: { sessionID: 1, localID: 1 },
overrideKey: { sessionID: 90, localID: 1 },
parentIndex: { guid: { sessionID: 0, localID: 1 }, position: '!' },
type: 'SYMBOL',
name: 'Search',
phase: 'CREATED'
} as NodeChange,
{
guid: { sessionID: 1, localID: 2 },
parentIndex: { guid: { sessionID: 0, localID: 1 }, position: '"' },
type: 'FRAME',
name: 'Avatar',
isStateGroup: true,
phase: 'CREATED',
componentPropDefs: [
{
id: { sessionID: 2, localID: 1 },
name: 'Type',
type: 'VARIANT',
initialValue: { textValue: 'Picture' }
}
]
} as NodeChange,
{
guid: { sessionID: 1, localID: 3 },
parentIndex: { guid: { sessionID: 1, localID: 2 }, position: '!' },
type: 'SYMBOL',
name: 'Type=Picture',
phase: 'CREATED'
} as NodeChange,
{
guid: { sessionID: 1, localID: 4 },
parentIndex: { guid: { sessionID: 0, localID: 1 }, position: '#' },
type: 'INSTANCE',
name: 'Search',
phase: 'CREATED',
size: { x: 50, y: 60 },
symbolData: {
symbolID: { sessionID: 1, localID: 1 },
symbolOverrides: [
{
guidPath: { guids: [{ sessionID: 90, localID: 1 }] },
overriddenSymbolID: { sessionID: 1, localID: 3 },
size: { x: 200, y: 200 }
}
]
}
} as NodeChange
]).graph
const instance = graph
.getChildren(graph.getPages()[0].id)
.find((node) => node.type === 'INSTANCE')
expect(instance?.name).toBe('Avatar')
expect(instance?.width).toBe(50)
expect(instance?.height).toBe(60)
})
test('DSD propagates through intermediate clones that are also DSD-targeted', async () => {
const { graph } = await sharedGoldPreviewFixture()
const thumb = [...graph.getAllNodes()].find((n) => n.name === 'Preview Thumbnail')
expect(thumb).toBeDefined()
let overflows = 0
const parentOf = (node: SceneNode): SceneNode | null =>
node.parentId ? (graph.getNode(node.parentId) ?? null) : null
function walk(id: string) {
const node = graph.getNode(id)
if (!node) return
if (node.type === 'VECTOR') {
const parent = parentOf(node)
if (parent?.type === 'INSTANCE' && parent.width > 0 && parent.height > 0) {
// Check visibility
let vis = true
let cur: SceneNode | null = node
while (cur) {
if (!cur.visible) {
vis = false
break
}
cur = parentOf(cur)
}
// Check clipping
let clipped = false
cur = parentOf(parent)
while (cur) {
if (cur.clipsContent) {
clipped = true
break
}
cur = parentOf(cur)
}
if (vis && !clipped && node.width > parent.width * 1.2) {
overflows++
}
}
}
for (const cid of node.childIds) walk(cid)
}
walk(thumb?.id ?? '')
expect(overflows).toBe(0)
})
})