Tldraw/packages/tlschema/src/migrations.test.ts

import { createRecordType, Migrations, Store } from '@tldraw/tlstore'
import { structuredClone } from '@tldraw/utils'
import fs from 'fs'
import { imageAssetMigrations } from './assets/TLImageAsset'
import { videoAssetMigrations } from './assets/TLVideoAsset'
import { instanceTypeMigrations } from './records/TLInstance'
import { instancePageStateMigrations } from './records/TLInstancePageState'
import { rootShapeTypeMigrations, TLShape } from './records/TLShape'
import { userDocumentTypeMigrations, userDocumentVersions } from './records/TLUserDocument'
import { userPresenceTypeMigrations } from './records/TLUserPresence'
import { storeMigrations } from './schema'
import { arrowShapeMigrations } from './shapes/TLArrowShape'
import { bookmarkShapeMigrations } from './shapes/TLBookmarkShape'
import { drawShapeMigrations } from './shapes/TLDrawShape'
import { embedShapeMigrations } from './shapes/TLEmbedShape'
import { geoShapeMigrations } from './shapes/TLGeoShape'
import { imageShapeMigrations } from './shapes/TLImageShape'
import { noteShapeMigrations } from './shapes/TLNoteShape'
import { textShapeMigrations } from './shapes/TLTextShape'
import { videoShapeMigrations } from './shapes/TLVideoShape'

const assetModules = fs
	.readdirSync('src/assets')
	.filter((n) => n.match(/^TL.*\.ts$/))
	.map((f) => [f, require(`./assets/${f.slice(0, -3)}`)])
const shapeModules = fs
	.readdirSync('src/shapes')
	.filter((n) => n.match(/^TL.*\.ts$/))
	.map((f) => [f, require(`./shapes/${f.slice(0, -3)}`)])
const recordModules = fs
	.readdirSync('src/records')
	.filter((n) => n.match(/^TL.*\.ts$/))
	.map((f) => [f, require(`./records/${f.slice(0, -3)}`)])

const allModules = [
	...assetModules,
	...shapeModules,
	...recordModules,
	['schema.ts', require('./schema')],
]

const allMigrators: Array<{
	fileName: string
	version: number
	up: jest.SpyInstance
	down: jest.SpyInstance
}> = []

for (const [fileName, module] of allModules) {
	const migrationsKey = Object.keys(module).find((k) => k.endsWith('igrations'))

	if (!migrationsKey) continue

	const migrations: Migrations = module[migrationsKey]

	for (const version of Object.keys(migrations.migrators)) {
		const originalUp = migrations.migrators[version as any].up
		const originalDown = migrations.migrators[version as any].down
		const up = jest
			.spyOn(migrations.migrators[version as any], 'up')
			.mockImplementation((initialRecord) => {
				if (initialRecord instanceof Store) return originalUp(initialRecord)

				const clonedRecord = structuredClone(initialRecord)
				const result = originalUp(initialRecord)
				// mutations should never mutate their input
				expect(initialRecord).toEqual(clonedRecord)
				return result
			})
		const down = jest
			.spyOn(migrations.migrators[version as any], 'down')
			.mockImplementation((initialRecord) => {
				if (initialRecord instanceof Store) return originalDown(initialRecord)

				const clonedRecord = structuredClone(initialRecord)
				const result = originalDown(initialRecord)
				// mutations should never mutate their input
				expect(initialRecord).toEqual(clonedRecord)
				return result
			})
		allMigrators.push({
			fileName,
			version: Number(version),
			up,
			down,
		})
	}
}

test('all modules export migrations', () => {
	const modulesWithoutMigrations = allModules
		.filter(([, module]) => !Object.keys(module).find((k) => k.endsWith('igrations')))
		.map(([fileName]) => fileName)

	// IF THIS LINE IS FAILING YOU NEED TO MAKE SURE THE MIGRATIONS ARE EXPORTED
	expect(modulesWithoutMigrations).toHaveLength(0)
})

/* ---  PUT YOUR MIGRATIONS TESTS BELOW HERE --- */

describe('TLVideoAsset AddIsAnimated', () => {
	const oldAsset = {
		id: '1',
		type: 'video',
		props: {
			src: 'https://www.youtube.com/watch?v=1',
			name: 'video',
			width: 100,
			height: 100,
			mimeType: 'video/mp4',
		},
	}

	const newAsset = {
		id: '1',
		type: 'video',
		props: {
			src: 'https://www.youtube.com/watch?v=1',
			name: 'video',
			width: 100,
			height: 100,
			mimeType: 'video/mp4',
			isAnimated: false,
		},
	}

	const { up, down } = videoAssetMigrations.migrators[1]

	test('up works as expected', () => {
		expect(up(oldAsset)).toEqual(newAsset)
	})
	test('down works as expected', () => {
		expect(down(newAsset)).toEqual(oldAsset)
	})
})

describe('TLImageAsset AddIsAnimated', () => {
	const oldAsset = {
		id: '1',
		type: 'image',
		props: {
			src: 'https://www.youtube.com/watch?v=1',
			name: 'image',
			width: 100,
			height: 100,
			mimeType: 'image/gif',
		},
	}

	const newAsset = {
		id: '1',
		type: 'image',
		props: {
			src: 'https://www.youtube.com/watch?v=1',
			name: 'image',
			width: 100,
			height: 100,
			mimeType: 'image/gif',
			isAnimated: false,
		},
	}

	const { up, down } = imageAssetMigrations.migrators[1]

	test('up works as expected', () => {
		expect(up(oldAsset)).toEqual(newAsset)
	})
	test('down works as expected', () => {
		expect(down(newAsset)).toEqual(oldAsset)
	})
})

const ShapeRecord = createRecordType('shape', {
	validator: { validate: (record) => record as TLShape },
	scope: 'document',
})

describe('Store removing Icon and Code shapes', () => {
	test('up works as expected', () => {
		const snapshot = Object.fromEntries(
			[
				ShapeRecord.create({
					type: 'icon',
					parentId: 'page:any',
					index: 'a0',
					props: { name: 'a' },
				} as any),
				ShapeRecord.create({
					type: 'icon',
					parentId: 'page:any',
					index: 'a0',
					props: { name: 'b' },
				} as any),
				ShapeRecord.create({
					type: 'code',
					parentId: 'page:any',
					index: 'a0',
					props: { name: 'c' },
				} as any),
				ShapeRecord.create({
					type: 'code',
					parentId: 'page:any',
					index: 'a0',
					props: { name: 'd' },
				} as any),
				ShapeRecord.create({
					type: 'geo',
					parentId: 'page:any',
					index: 'a0',
					props: { geo: 'rectangle', w: 1, h: 1, growY: 1, text: '' },
				} as any),
			].map((shape) => [shape.id, shape])
		)
		const fixed = storeMigrations.migrators[1].up(snapshot)
		expect(Object.entries(fixed)).toHaveLength(1)
	})

	test('down works as expected', () => {
		const snapshot = Object.fromEntries(
			[
				ShapeRecord.create({
					type: 'geo',
					parentId: 'page:any',
					index: 'a0',
					props: { geo: 'rectangle', name: 'e', w: 1, h: 1, growY: 1, text: '' },
				} as any),
			].map((shape) => [shape.id, shape])
		)

		storeMigrations.migrators[1].down(snapshot)
		expect(Object.entries(snapshot)).toHaveLength(1)
	})
})

describe('Adding export background', () => {
	const { up, down } = instanceTypeMigrations.migrators[1]
	test('up works as expected', () => {
		const before = {}
		const after = { exportBackground: true }
		expect(up(before)).toStrictEqual(after)
	})

	test('down works as expected', () => {
		const before = { exportBackground: true }
		const after = {}
		expect(down(before)).toStrictEqual(after)
	})
})

describe('Removing dialogs from instance', () => {
	const { up, down } = instanceTypeMigrations.migrators[2]
	test('up works as expected', () => {
		const before = { dialog: null }
		const after = {}
		expect(up(before)).toStrictEqual(after)
	})

	test('down works as expected', () => {
		const before = {}
		const after = { dialog: null }
		expect(down(before)).toStrictEqual(after)
	})
})

describe('Adding snap mode', () => {
	const { up, down } = userDocumentTypeMigrations.migrators[1]
	test('up works as expected', () => {
		const before = {}
		const after = { isSnapMode: false }
		expect(up(before)).toStrictEqual(after)
	})

	test('down works as expected', () => {
		const before = { isSnapMode: false }
		const after = {}
		expect(down(before)).toStrictEqual(after)
	})
})

describe('Adding url props', () => {
	for (const [name, { up, down }] of [
		['video shape', videoShapeMigrations.migrators[1]],
		['note shape', noteShapeMigrations.migrators[1]],
		['geo shape', geoShapeMigrations.migrators[1]],
		['image shape', imageShapeMigrations.migrators[1]],
	] as const) {
		test(`${name}: up works as expected`, () => {
			const before = { props: {} }
			const after = { props: { url: '' } }
			expect(up(before)).toStrictEqual(after)
		})

		test(`${name}: down works as expected`, () => {
			const before = { props: { url: '' } }
			const after = { props: {} }
			expect(down(before)).toStrictEqual(after)
		})
	}
})

describe('Bookmark null asset id', () => {
	const { up, down } = bookmarkShapeMigrations.migrators[1]
	test('up works as expected', () => {
		const before = { props: {} }
		const after = { props: { assetId: null } }
		expect(up(before)).toStrictEqual(after)
	})

	test('down works as expected', () => {
		const before = { props: { assetId: null } }
		const after = { props: {} }
		expect(down(before)).toStrictEqual(after)
	})
})

describe('Renaming asset props', () => {
	for (const [name, { up, down }] of [
		['image shape', imageAssetMigrations.migrators[2]],
		['video shape', videoAssetMigrations.migrators[2]],
	] as const) {
		test(`${name}: up works as expected`, () => {
			const before = { props: { width: 100, height: 100 } }
			const after = { props: { w: 100, h: 100 } }
			expect(up(before)).toStrictEqual(after)
		})

		test(`${name}: down works as expected`, () => {
			const before = { props: { w: 100, h: 100 } }
			const after = { props: { width: 100, height: 100 } }
			expect(down(before)).toStrictEqual(after)
		})
	}
})

describe('Adding the missing isMobileMode', () => {
	const { up, down } = userDocumentTypeMigrations.migrators[2]
	test('up works as expected', () => {
		expect(up({})).toMatchObject({ isMobileMode: false })
		expect(up({ isMobileMode: true })).toMatchObject({ isMobileMode: true })
	})

	test('down works as expected', () => {
		expect(down({ isMobileMode: true })).toStrictEqual({})
		expect(down({ isMobileMode: false })).toStrictEqual({})
	})
})

describe('Adding instance.isToolLocked', () => {
	const { up, down } = instanceTypeMigrations.migrators[3]
	test('up works as expected', () => {
		expect(up({})).toMatchObject({ isToolLocked: false })
		expect(up({ isToolLocked: true })).toMatchObject({ isToolLocked: false })
	})

	test('down works as expected', () => {
		expect(down({ isToolLocked: true })).toStrictEqual({})
		expect(down({ isToolLocked: false })).toStrictEqual({})
	})
})

describe('Cleaning up junk data in instance.propsForNextShape', () => {
	const { up, down } = instanceTypeMigrations.migrators[4]
	test('up works as expected', () => {
		expect(up({ propsForNextShape: { color: 'red', unknown: 'gone' } })).toEqual({
			propsForNextShape: {
				color: 'red',
			},
		})
	})

	test('down works as expected', () => {
		const instance = { propsForNextShape: { color: 'red' } }
		expect(down(instance)).toBe(instance)
	})
})

describe('Generating original URL from embed URL in GenOriginalUrlInEmbed', () => {
	const { up, down } = embedShapeMigrations.migrators[1]
	test('up works as expected', () => {
		expect(up({ props: { url: 'https://codepen.io/Rplus/embed/PWZYRM' } })).toEqual({
			props: {
				url: 'https://codepen.io/Rplus/pen/PWZYRM',
				tmpOldUrl: 'https://codepen.io/Rplus/embed/PWZYRM',
			},
		})
	})

	test('invalid up works as expected', () => {
		expect(up({ props: { url: 'https://example.com' } })).toEqual({
			props: {
				url: '',
				tmpOldUrl: 'https://example.com',
			},
		})
	})

	test('down works as expected', () => {
		const instance = {
			props: {
				url: 'https://codepen.io/Rplus/pen/PWZYRM',
				tmpOldUrl: 'https://codepen.io/Rplus/embed/PWZYRM',
			},
		}
		expect(down(instance)).toEqual({ props: { url: 'https://codepen.io/Rplus/embed/PWZYRM' } })
	})

	test('invalid down works as expected', () => {
		const instance = {
			props: {
				url: 'https://example.com',
				tmpOldUrl: '',
			},
		}
		expect(down(instance)).toEqual({ props: { url: '' } })
	})
})

describe('Adding isPen prop', () => {
	const { up, down } = drawShapeMigrations.migrators[1]

	test('up works as expected with a shape that is not a pen shape', () => {
		expect(
			up({
				props: {
					segments: [
						{
							type: 'free',
							points: [
								{ x: 0, y: 0, z: 0.5 },
								{ x: 1, y: 1, z: 0.5 },
							],
						},
					],
				},
			})
		).toEqual({
			props: {
				isPen: false,
				segments: [
					{
						type: 'free',
						points: [
							{ x: 0, y: 0, z: 0.5 },
							{ x: 1, y: 1, z: 0.5 },
						],
					},
				],
			},
		})
	})

	test('up works as expected when converting to pen', () => {
		expect(
			up({
				props: {
					segments: [
						{
							type: 'free',
							points: [
								{ x: 0, y: 0, z: 0.2315 },
								{ x: 1, y: 1, z: 0.2421 },
							],
						},
					],
				},
			})
		).toEqual({
			props: {
				isPen: true,
				segments: [
					{
						type: 'free',
						points: [
							{ x: 0, y: 0, z: 0.2315 },
							{ x: 1, y: 1, z: 0.2421 },
						],
					},
				],
			},
		})
	})

	test('down works as expected', () => {
		expect(down({ props: { isPen: false } })).toEqual({
			props: {},
		})
	})
})

describe('Adding isLocked prop', () => {
	const { up, down } = rootShapeTypeMigrations.migrators[1]

	test('up works as expected', () => {
		expect(up({})).toEqual({ isLocked: false })
	})

	test('down works as expected', () => {
		expect(down({ isLocked: false })).toEqual({})
	})
})

describe('Adding labelColor prop to geo / arrow shapes', () => {
	for (const [name, { up, down }] of [
		['arrow shape', arrowShapeMigrations.migrators[1]],
		['geo shape', geoShapeMigrations.migrators[2]],
	] as const) {
		test(`${name}: up works as expected`, () => {
			expect(up({ props: { color: 'red' } })).toEqual({
				props: { color: 'red', labelColor: 'black' },
			})
		})

		test(`${name}: down works as expected`, () => {
			expect(down({ props: { color: 'red', labelColor: 'blue' } })).toEqual({
				props: { color: 'red' },
			})
		})
	}
})

describe('Adding labelColor prop to propsForNextShape', () => {
	const { up, down } = instanceTypeMigrations.migrators[5]
	test('up works as expected', () => {
		expect(up({ propsForNextShape: { color: 'red' } })).toEqual({
			propsForNextShape: { color: 'red', labelColor: 'black' },
		})
	})

	test('down works as expected', () => {
		expect(down({ propsForNextShape: { color: 'red', labelColor: 'blue' } })).toEqual({
			propsForNextShape: { color: 'red' },
		})
	})
})

describe('Adding croppingId to instancePageState', () => {
	const { up, down } = instancePageStateMigrations.migrators[1]
	test('up works as expected', () => {
		expect(up({})).toEqual({
			croppingId: null,
		})
	})

	test('down works as expected', () => {
		expect(down({ croppingId: null })).toEqual({})
	})
})

describe('Adding followingUserId prop to instance', () => {
	const { up, down } = instanceTypeMigrations.migrators[6]
	test('up works as expected', () => {
		expect(up({})).toEqual({ followingUserId: null })
	})

	test('down works as expected', () => {
		expect(down({ followingUserId: '123' })).toEqual({})
	})
})

describe('Adding viewportPageBounds prop to user presence', () => {
	const { up, down } = userPresenceTypeMigrations.migrators[1]
	test('up works as expected', () => {
		expect(up({})).toEqual({ viewportPageBounds: { x: 0, y: 0, w: 1, h: 1 } })
	})

	test('down works as expected', () => {
		expect(down({ viewportPageBounds: { x: 1, y: 2, w: 3, h: 4 } })).toEqual({})
	})
})

describe('Removing align=justify from propsForNextShape', () => {
	const { up, down } = instanceTypeMigrations.migrators[7]
	test('up works as expected', () => {
		expect(up({ propsForNextShape: { color: 'black', align: 'justify' } })).toEqual({
			propsForNextShape: { color: 'black', align: 'start' },
		})
		expect(up({ propsForNextShape: { color: 'black', align: 'end' } })).toEqual({
			propsForNextShape: { color: 'black', align: 'end' },
		})
	})

	test('down works as expected', () => {
		expect(down({ propsForNextShape: { color: 'black', align: 'end' } })).toEqual({
			propsForNextShape: { color: 'black', align: 'end' },
		})
	})
})

describe('Adding zoomBrush prop to instance', () => {
	const { up, down } = instanceTypeMigrations.migrators[8]
	test('up works as expected', () => {
		expect(up({})).toEqual({ zoomBrush: null })
	})

	test('down works as expected', () => {
		expect(down({ zoomBrush: { x: 1, y: 2, w: 3, h: 4 } })).toEqual({})
	})
})

describe('Removing align=justify from shape align props', () => {
	for (const [name, { up, down }] of [
		['text', textShapeMigrations.migrators[1]],
		['note', noteShapeMigrations.migrators[2]],
		['geo', geoShapeMigrations.migrators[3]],
	] as const) {
		test(`${name}: up works as expected`, () => {
			expect(up({ props: { align: 'justify' } })).toEqual({
				props: { align: 'start' },
			})
			expect(up({ props: { align: 'end' } })).toEqual({
				props: { align: 'end' },
			})
		})

		test(`${name}: down works as expected`, () => {
			expect(down({ props: { align: 'start' } })).toEqual({
				props: { align: 'start' },
			})
		})
	}
})

describe('Add crop=null to image shapes', () => {
	const { up, down } = imageShapeMigrations.migrators[2]
	test('up works as expected', () => {
		expect(up({ props: { w: 100 } })).toEqual({
			props: { w: 100, crop: null },
		})
	})

	test('down works as expected', () => {
		expect(down({ props: { w: 100, crop: null } })).toEqual({
			props: { w: 100 },
		})
	})
})

describe('Adding instance_presence to the schema', () => {
	const { up, down } = storeMigrations.migrators[2]

	test('up works as expected', () => {
		expect(up({})).toEqual({})
	})
	test('down works as expected', () => {
		expect(
			down({
				'instance_presence:123': { id: 'instance_presence:123', typeName: 'instance_presence' },
				'instance:123': { id: 'instance:123', typeName: 'instance' },
			})
		).toEqual({
			'instance:123': { id: 'instance:123', typeName: 'instance' },
		})
	})
})

describe('Adding check-box to geo shape', () => {
	const { up, down } = geoShapeMigrations.migrators[4]

	test('up works as expected', () => {
		expect(up({ props: { geo: 'rectangle' } })).toEqual({ props: { geo: 'rectangle' } })
	})
	test('down works as expected', () => {
		expect(down({ props: { geo: 'rectangle' } })).toEqual({ props: { geo: 'rectangle' } })
		expect(down({ props: { geo: 'check-box' } })).toEqual({ props: { geo: 'rectangle' } })
	})
})

describe('Removing isReadOnly from user_document', () => {
	const { up, down } = userDocumentTypeMigrations.migrators[userDocumentVersions.RemoveIsReadOnly]
	const prev = {
		id: 'user_document:123',
		typeName: 'user_document',
		userId: 'user:123',
		isReadOnly: false,
		isPenMode: false,
		isGridMode: false,
		isDarkMode: false,
		isMobileMode: false,
		isSnapMode: false,
		lastUpdatedPageId: null,
		lastUsedTabId: null,
	}

	const next = {
		id: 'user_document:123',
		typeName: 'user_document',
		userId: 'user:123',
		isPenMode: false,
		isGridMode: false,
		isDarkMode: false,
		isMobileMode: false,
		isSnapMode: false,
		lastUpdatedPageId: null,
		lastUsedTabId: null,
	}

	test('up removes the isReadOnly property', () => {
		expect(up(prev)).toEqual(next)
	})
	test('down adds the isReadOnly property', () => {
		expect(down(next)).toEqual(prev)
	})
})

/* ---  PUT YOU

/* ---  PUT YOUR MIGRATIONS TESTS ABOVE HERE --- */

for (const migrator of allMigrators) {
	test(`[${migrator.fileName} v${migrator.version}] up and down migrations have both been tested`, () => {
		expect(migrator.up).toHaveBeenCalled()
		expect(migrator.down).toHaveBeenCalled()
	})
}