tldraw 3.16.0-canary.ffdf566dd0a8 → 3.16.0-internal.71f83a8a571b

package/src/test/__snapshots__/groups.test.tsx.snap

@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`creating new shapes pencil lines will reisze the group appropriately if the new shape changes the group bounds: box shape after second resize 1`] = `
+exports[`creating new shapes > pencil > lines > will reisze the group appropriately if the new shape changes the group bounds > box shape after second resize 1`] = `
 {
   "h": 40,
   "w": 40,
@@ -9,7 +9,7 @@ exports[`creating new shapes pencil lines will reisze the group appropriately if
 }
 `;
 
-exports[`creating new shapes pencil lines will reisze the group appropriately if the new shape changes the group bounds: group shape after second resize 1`] = `
+exports[`creating new shapes > pencil > lines > will reisze the group appropriately if the new shape changes the group bounds > group shape after second resize 1`] = `
 {
   "h": 120,
   "w": 120,
@@ -18,7 +18,7 @@ exports[`creating new shapes pencil lines will reisze the group appropriately if
 }
 `;
 
-exports[`creating new shapes pencil lines will reisze the group appropriately if the new shape changes the group bounds: group with line shape 1`] = `
+exports[`creating new shapes > pencil > lines > will reisze the group appropriately if the new shape changes the group bounds > group with line shape 1`] = `
 Box {
   "h": 110,
   "w": 110,
@@ -27,7 +27,7 @@ Box {
 }
 `;
 
-exports[`creating new shapes pencil lines works if the shape drawing begins outside of the current group bounds: box shape after resize 1`] = `
+exports[`creating new shapes > pencil > lines > works if the shape drawing begins outside of the current group bounds > box shape after resize 1`] = `
 {
   "h": 50,
   "w": 50,
@@ -36,7 +36,7 @@ exports[`creating new shapes pencil lines works if the shape drawing begins outs
 }
 `;
 
-exports[`creating new shapes pencil lines works if the shape drawing begins outside of the current group bounds: group with line 1`] = `
+exports[`creating new shapes > pencil > lines > works if the shape drawing begins outside of the current group bounds > group with line 1`] = `
 {
   "h": 200,
   "w": 200,

package/src/test/__snapshots__/resizing.test.ts.snap

@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`When resizing a shape with children Resizes a rotated draw shape: draw shape after rotating 1`] = `
+exports[`When resizing a shape with children > Resizes a rotated draw shape > draw shape after rotating 1`] = `
 {
   "id": "shape:lineA",
   "index": "a3",

package/src/test/arrows-megabus.test.tsx

@@ -1,4 +1,5 @@
 import { TLArrowShape, TLShapeId, Vec, createShapeId } from '@tldraw/editor'
+import { vi } from 'vitest'
 import { getArrowBindings } from '../lib/shapes/arrow/shared'
 import { TestEditor } from './TestEditor'
 import { TL } from './test-jsx'
@@ -208,7 +209,7 @@ describe('When binding an arrow to a shape', () => {
 
 		editor.keyUp('Control')
 		expect(bindings().end).toBeUndefined() // there's a short delay here, it should still be a point
-		jest.advanceTimersByTime(1000) // once the timer runs out...
+		vi.advanceTimersByTime(1000) // once the timer runs out...
 		expect(bindings().end).toBeDefined()
 
 		editor.keyDown('Control') // no delay when pressing control again though
@@ -216,7 +217,7 @@ describe('When binding an arrow to a shape', () => {
 
 		editor.keyUp('Control')
 		editor.pointerUp()
-		jest.advanceTimersByTime(1000) // once the timer runs out...
+		vi.advanceTimersByTime(1000) // once the timer runs out...
 		expect(bindings().end).toBeUndefined() // still a point because interaction ended before timer ended
 	})
 
@@ -237,7 +238,7 @@ describe('When binding an arrow to a shape', () => {
 		// Releasing ctrl should restore binding (after timer)
 		editor.keyUp('Control')
 		expect(bindings().end).toBeUndefined() // Still no binding immediately
-		jest.advanceTimersByTime(1000)
+		vi.advanceTimersByTime(1000)
 		expect(bindings().end).toBeDefined()
 	})
 })
@@ -409,7 +410,7 @@ describe('When starting an arrow inside of multiple shapes', () => {
 		editor.pointerDown(20, 20) // upper left
 		expect(editor.getCurrentPageShapes().length).toBe(1)
 		expect(arrow()).toBe(null)
-		jest.advanceTimersByTime(1000)
+		vi.advanceTimersByTime(1000)
 		editor.pointerMove(25, 20)
 		expect(editor.getCurrentPageShapes().length).toBe(2)
 		expect(arrow()).toMatchObject({ x: 20, y: 20 })

package/src/test/bindings.test.tsx

@@ -11,6 +11,7 @@ import {
 	createBindingId,
 	createShapeId,
 } from '@tldraw/editor'
+import { vi } from 'vitest'
 import { TestEditor } from './TestEditor'
 import { TL } from './test-jsx'
 
@@ -23,37 +24,19 @@ const ids = {
 	box4: createShapeId('box4'),
 }
 
-const mockOnOperationComplete = jest.fn() as jest.Mock<void, []>
-const mockOnBeforeDelete = jest.fn() as jest.Mock<void, [BindingOnDeleteOptions<TLUnknownBinding>]>
-const mockOnAfterDelete = jest.fn() as jest.Mock<void, [BindingOnDeleteOptions<TLUnknownBinding>]>
-const mockOnBeforeFromShapeDelete = jest.fn() as jest.Mock<
-	void,
-	[BindingOnShapeDeleteOptions<TLUnknownBinding>]
->
-const mockOnBeforeToShapeDelete = jest.fn() as jest.Mock<
-	void,
-	[BindingOnShapeDeleteOptions<TLUnknownBinding>]
->
-const mockOnBeforeFromShapeIsolate = jest.fn() as jest.Mock<
-	void,
-	[BindingOnShapeIsolateOptions<TLUnknownBinding>]
->
-const mockOnBeforeToShapeIsolate = jest.fn() as jest.Mock<
-	void,
-	[BindingOnShapeIsolateOptions<TLUnknownBinding>]
->
-const mockOnBeforeCreate = jest.fn() as jest.Mock<void, [BindingOnCreateOptions<TLUnknownBinding>]>
-const mockOnAfterCreate = jest.fn() as jest.Mock<void, [BindingOnCreateOptions<TLUnknownBinding>]>
-const mockOnBeforeChange = jest.fn() as jest.Mock<void, [BindingOnChangeOptions<TLUnknownBinding>]>
-const mockOnAfterChange = jest.fn() as jest.Mock<void, [BindingOnChangeOptions<TLUnknownBinding>]>
-const mockOnAfterChangeFromShape = jest.fn() as jest.Mock<
-	void,
-	[BindingOnShapeChangeOptions<TLUnknownBinding>]
->
-const mockOnAfterChangeToShape = jest.fn() as jest.Mock<
-	void,
-	[BindingOnShapeChangeOptions<TLUnknownBinding>]
->
+const mockOnOperationComplete = vi.fn()
+const mockOnBeforeDelete = vi.fn()
+const mockOnAfterDelete = vi.fn()
+const mockOnBeforeFromShapeDelete = vi.fn()
+const mockOnBeforeToShapeDelete = vi.fn()
+const mockOnBeforeFromShapeIsolate = vi.fn()
+const mockOnBeforeToShapeIsolate = vi.fn()
+const mockOnBeforeCreate = vi.fn()
+const mockOnAfterCreate = vi.fn()
+const mockOnBeforeChange = vi.fn()
+const mockOnAfterChange = vi.fn()
+const mockOnAfterChangeFromShape = vi.fn()
+const mockOnAfterChangeToShape = vi.fn()
 
 const calls: string[] = []
 
@@ -273,9 +256,11 @@ test('copying the to shape on its own does trigger the unbind operation', () =>
 })
 
 test('cascading deletes in beforeFromShapeDelete are handled correctly', () => {
-	mockOnBeforeFromShapeDelete.mockImplementation((options) => {
-		editor.deleteShape(options.binding.toId)
-	})
+	mockOnBeforeFromShapeDelete.mockImplementation(
+		(options: BindingOnShapeDeleteOptions<TLUnknownBinding>) => {
+			editor.deleteShape(options.binding.toId)
+		}
+	)
 
 	bindShapes(ids.box1, ids.box2)
 	bindShapes(ids.box2, ids.box3)
@@ -316,9 +301,11 @@ test('cascading deletes in beforeFromShapeDelete are handled correctly', () => {
 })
 
 test('cascading deletes in beforeToShapeDelete are handled correctly', () => {
-	mockOnBeforeToShapeDelete.mockImplementation((options) => {
-		editor.deleteShape(options.binding.fromId)
-	})
+	mockOnBeforeToShapeDelete.mockImplementation(
+		(options: BindingOnShapeDeleteOptions<TLUnknownBinding>) => {
+			editor.deleteShape(options.binding.fromId)
+		}
+	)
 
 	bindShapes(ids.box1, ids.box2)
 	bindShapes(ids.box2, ids.box3)

package/src/test/bookmark-shapes.test.ts

@@ -1,8 +1,5 @@
 import { TLBookmarkShape, createShapeId } from '@tldraw/editor'
-import {
-	BookmarkShapeUtil,
-	getHumanReadableAddress,
-} from '../lib/shapes/bookmark/BookmarkShapeUtil'
+import { getHumanReadableAddress } from '../lib/shapes/bookmark/BookmarkShapeUtil'
 import { TestEditor } from './TestEditor'
 
 let editor: TestEditor
@@ -14,10 +11,6 @@ afterEach(() => {
 	editor?.dispose()
 })
 
-describe(BookmarkShapeUtil, () => {
-	return
-})
-
 describe('The URL formatter', () => {
 	it('Formats URLs as human-readable', () => {
 		const ids = {

package/src/test/commands/__snapshots__/getSvgString.test.ts.snap

@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Matches a snapshot: Basic SVG 1`] = `
+exports[`Matches a snapshot > Basic SVG 1`] = `
 <wrapper>
   <svg
     class="tl-container tl-theme__force-sRGB tl-theme__light"
@@ -64,6 +64,13 @@ exports[`Matches a snapshot: Basic SVG 1`] = `
           y="0"
         />
       </pattern>
+      <style>
+        @font-face {
+  font-family: "tldraw_draw";
+  font-weight: normal;
+  src: url("data:font/woff2;base64,") format(woff2);
+}
+      </style>
     </defs>
     <g
       opacity="1"
@@ -83,14 +90,15 @@ exports[`Matches a snapshot: Basic SVG 1`] = `
         y="0"
       >
         <div
-          style="display: flex; font-family: 'tldraw_draw', sans-serif; height: 100%; justify-content: center; align-items: center; padding: 16px 16px 16px 16px; visibility: visible;"
+          style="display: block; font-family: serif; height: 0px; justify-content: center; align-items: center; padding: 0px; position: static; width: 0px; margin: 0px; border: 0px; font-size: 16px; line-height: normal; color: rgb(0, 0, 0); background-color: rgba(0, 0, 0, 0);"
           xmlns="http://www.w3.org/1999/xhtml"
         >
           <div
-            style="font-size: 22px; color: rgb(29, 29, 29); line-height: 1.35; text-align: center; width: 100%; word-wrap: break-word; overflow-wrap: break-word; white-space: pre-wrap; text-shadow: var(--tl-text-outline);"
+            style="font-size: 22px; color: rgb(0, 0, 0); line-height: 1.35; text-align: center; width: 0px; word-wrap: break-word; overflow-wrap: break-word; white-space: pre-wrap; text-shadow: var(--tl-text-outline); position: static; height: 0px; margin: 0px; padding: 0px; border: 0px;"
           >
             <p
               dir="auto"
+              style="position: static; width: 0px; height: 0px; margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 0);"
             >
               Hello world
             </p>
@@ -132,7 +140,7 @@ exports[`Matches a snapshot: Basic SVG 1`] = `
 </wrapper>
 `;
 
-exports[`Returns all shapes when no ids are provided: All shapes 1`] = `
+exports[`Returns all shapes when no ids are provided > All shapes 1`] = `
 <wrapper>
   <svg
     class="tl-container tl-theme__force-sRGB tl-theme__light"
@@ -196,6 +204,13 @@ exports[`Returns all shapes when no ids are provided: All shapes 1`] = `
           y="0"
         />
       </pattern>
+      <style>
+        @font-face {
+  font-family: "tldraw_draw";
+  font-weight: normal;
+  src: url("data:font/woff2;base64,") format(woff2);
+}
+      </style>
     </defs>
     <g
       opacity="1"
@@ -215,14 +230,15 @@ exports[`Returns all shapes when no ids are provided: All shapes 1`] = `
         y="0"
       >
         <div
-          style="display: flex; font-family: 'tldraw_draw', sans-serif; height: 100%; justify-content: center; align-items: center; padding: 16px 16px 16px 16px; visibility: visible;"
+          style="display: block; font-family: serif; height: 0px; justify-content: center; align-items: center; padding: 0px; position: static; width: 0px; margin: 0px; border: 0px; font-size: 16px; line-height: normal; color: rgb(0, 0, 0); background-color: rgba(0, 0, 0, 0);"
           xmlns="http://www.w3.org/1999/xhtml"
         >
           <div
-            style="font-size: 22px; color: rgb(29, 29, 29); line-height: 1.35; text-align: center; width: 100%; word-wrap: break-word; overflow-wrap: break-word; white-space: pre-wrap; text-shadow: var(--tl-text-outline);"
+            style="font-size: 22px; color: rgb(0, 0, 0); line-height: 1.35; text-align: center; width: 0px; word-wrap: break-word; overflow-wrap: break-word; white-space: pre-wrap; text-shadow: var(--tl-text-outline); position: static; height: 0px; margin: 0px; padding: 0px; border: 0px;"
           >
             <p
               dir="auto"
+              style="position: static; width: 0px; height: 0px; margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 0);"
             >
               Hello world
             </p>

package/src/test/commands/__snapshots__/packShapes.test.ts.snap

@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`editor.packShapes packs rotated shapes: packed shapes 1`] = `
+exports[`editor.packShapes > packs rotated shapes > packed shapes 1`] = `
 [
   {
     "id": "shape:boxA",
@@ -116,7 +116,7 @@ exports[`editor.packShapes packs rotated shapes: packed shapes 1`] = `
 ]
 `;
 
-exports[`editor.packShapes packs shapes using the adjacent shape margin option: packed shapes 1`] = `
+exports[`editor.packShapes > packs shapes > packed shapes 1`] = `
 [
   {
     "id": "shape:boxA",
@@ -152,7 +152,7 @@ exports[`editor.packShapes packs shapes using the adjacent shape margin option:
     "rotation": 0,
     "type": "geo",
     "typeName": "shape",
-    "x": 99,
+    "x": 84,
     "y": 200,
   },
   {
@@ -226,13 +226,13 @@ exports[`editor.packShapes packs shapes using the adjacent shape margin option:
     "rotation": 0,
     "type": "geo",
     "typeName": "shape",
-    "x": 301,
+    "x": 316,
     "y": 200,
   },
 ]
 `;
 
-exports[`editor.packShapes packs shapes: packed shapes 1`] = `
+exports[`editor.packShapes > packs shapes using the adjacent shape margin option > packed shapes 1`] = `
 [
   {
     "id": "shape:boxA",
@@ -268,7 +268,7 @@ exports[`editor.packShapes packs shapes: packed shapes 1`] = `
     "rotation": 0,
     "type": "geo",
     "typeName": "shape",
-    "x": 84,
+    "x": 99,
     "y": 200,
   },
   {
@@ -342,7 +342,7 @@ exports[`editor.packShapes packs shapes: packed shapes 1`] = `
     "rotation": 0,
     "type": "geo",
     "typeName": "shape",
-    "x": 316,
+    "x": 301,
     "y": 200,
   },
 ]

package/src/test/commands/__snapshots__/zoomToFit.test.ts.snap

@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`converts correctly: Zoom to Fit Camera 1`] = `
+exports[`converts correctly > Zoom to Fit Camera 1`] = `
 {
   "id": "static",
   "meta": {},

package/src/test/commands/alignShapes.test.tsx

@@ -1,11 +1,12 @@
 import { Box, PI, TLShapeId } from '@tldraw/editor'
+import { vi } from 'vitest'
 import { TestEditor } from '../TestEditor'
 import { TL } from '../test-jsx'
 
 let editor: TestEditor
 let ids: Record<string, TLShapeId>
 
-jest.useFakeTimers()
+vi.useFakeTimers()
 
 beforeEach(() => {
 	editor = new TestEditor()
@@ -22,10 +23,10 @@ describe('when less than two shapes are selected', () => {
 	it('does nothing', () => {
 		editor.setSelectedShapes([ids.boxB])
 
-		const fn = jest.fn()
+		const fn = vi.fn()
 		editor.store.listen(fn)
 		editor.alignShapes(editor.getSelectedShapeIds(), 'top')
-		jest.advanceTimersByTime(1000)
+		vi.advanceTimersByTime(1000)
 		expect(fn).not.toHaveBeenCalled()
 	})
 })
@@ -34,7 +35,7 @@ describe('when multiple shapes are selected', () => {
 	it('does, undoes and redoes command', () => {
 		editor.markHistoryStoppingPoint('align')
 		editor.alignShapes(editor.getSelectedShapeIds(), 'top')
-		jest.advanceTimersByTime(1000)
+		vi.advanceTimersByTime(1000)
 
 		editor.expectShapeToMatch({ id: ids.boxB, y: 0 })
 		editor.undo()
@@ -45,7 +46,7 @@ describe('when multiple shapes are selected', () => {
 
 	it('aligns top', () => {
 		editor.alignShapes(editor.getSelectedShapeIds(), 'top')
-		jest.advanceTimersByTime(1000)
+		vi.advanceTimersByTime(1000)
 
 		editor.expectShapeToMatch(
 			{ id: ids.boxA, y: 0 },
@@ -56,7 +57,7 @@ describe('when multiple shapes are selected', () => {
 
 	it('aligns right', () => {
 		editor.alignShapes(editor.getSelectedShapeIds(), 'right')
-		jest.advanceTimersByTime(1000)
+		vi.advanceTimersByTime(1000)
 
 		editor.expectShapeToMatch(
 			{ id: ids.boxA, x: 400 },
@@ -67,7 +68,7 @@ describe('when multiple shapes are selected', () => {
 
 	it('aligns bottom', () => {
 		editor.alignShapes(editor.getSelectedShapeIds(), 'bottom')
-		jest.advanceTimersByTime(1000)
+		vi.advanceTimersByTime(1000)
 
 		editor.expectShapeToMatch(
 			{ id: ids.boxA, y: 400 },
@@ -78,7 +79,7 @@ describe('when multiple shapes are selected', () => {
 
 	it('aligns left', () => {
 		editor.alignShapes(editor.getSelectedShapeIds(), 'left')
-		jest.advanceTimersByTime(1000)
+		vi.advanceTimersByTime(1000)
 
 		editor.expectShapeToMatch(
 			{ id: ids.boxA, x: 0 },
@@ -89,7 +90,7 @@ describe('when multiple shapes are selected', () => {
 
 	it('aligns center horizontal', () => {
 		editor.alignShapes(editor.getSelectedShapeIds(), 'center-horizontal')
-		jest.advanceTimersByTime(1000)
+		vi.advanceTimersByTime(1000)
 
 		editor.expectShapeToMatch(
 			{ id: ids.boxA, x: 200 },
@@ -100,7 +101,7 @@ describe('when multiple shapes are selected', () => {
 
 	it('aligns center vertical', () => {
 		editor.alignShapes(editor.getSelectedShapeIds(), 'center-vertical')
-		jest.advanceTimersByTime(1000)
+		vi.advanceTimersByTime(1000)
 
 		editor.expectShapeToMatch(
 			{ id: ids.boxA, y: 200 },
@@ -129,9 +130,9 @@ describe('when multiple shapes are selected', () => {
 		])
 
 		editor.alignShapes(editor.getSelectedShapeIds(), 'center-vertical')
-		jest.advanceTimersByTime(1000)
+		vi.advanceTimersByTime(1000)
 		editor.alignShapes(editor.getSelectedShapeIds(), 'center-horizontal')
-		jest.advanceTimersByTime(1000)
+		vi.advanceTimersByTime(1000)
 
 		const commonBounds = Box.Common([
 			editor.getShapePageBounds(ids.boxA)!,
@@ -168,9 +169,9 @@ describe('when multiple shapes are selected', () => {
 		])
 
 		editor.alignShapes(editor.getSelectedShapeIds(), 'top')
-		jest.advanceTimersByTime(1000)
+		vi.advanceTimersByTime(1000)
 		editor.alignShapes(editor.getSelectedShapeIds(), 'left')
-		jest.advanceTimersByTime(1000)
+		vi.advanceTimersByTime(1000)
 
 		const commonBounds = Box.Common([
 			editor.getShapePageBounds(ids.boxA)!,
@@ -208,9 +209,9 @@ describe('when multiple shapes are selected', () => {
 
 		editor.setSelectedShapes([ids.boxA, ids.boxB, ids.boxC])
 		editor.alignShapes(editor.getSelectedShapeIds(), 'bottom')
-		jest.advanceTimersByTime(1000)
+		vi.advanceTimersByTime(1000)
 		editor.alignShapes(editor.getSelectedShapeIds(), 'right')
-		jest.advanceTimersByTime(1000)
+		vi.advanceTimersByTime(1000)
 
 		const commonBounds = Box.Common([
 			editor.getShapePageBounds(ids.boxA)!,
@@ -251,9 +252,9 @@ describe('When shapes are parented to other shapes...', () => {
 		])
 
 		editor.alignShapes(editor.getSelectedShapeIds(), 'top')
-		jest.advanceTimersByTime(1000)
+		vi.advanceTimersByTime(1000)
 		editor.alignShapes(editor.getSelectedShapeIds(), 'left')
-		jest.advanceTimersByTime(1000)
+		vi.advanceTimersByTime(1000)
 
 		const commonBoundsAfter = Box.Common([
 			editor.getShapePageBounds(ids.boxC)!,
@@ -273,9 +274,9 @@ describe('When shapes are parented to other shapes...', () => {
 		])
 
 		editor.alignShapes(editor.getSelectedShapeIds(), 'bottom')
-		jest.advanceTimersByTime(1000)
+		vi.advanceTimersByTime(1000)
 		editor.alignShapes(editor.getSelectedShapeIds(), 'right')
-		jest.advanceTimersByTime(1000)
+		vi.advanceTimersByTime(1000)
 
 		const commonBoundsAfter = Box.Common([
 			editor.getShapePageBounds(ids.boxC)!,
@@ -339,9 +340,9 @@ describe('When shapes are parented to a rotated shape...', () => {
 		])
 
 		editor.alignShapes(editor.getSelectedShapeIds(), 'top')
-		jest.advanceTimersByTime(1000)
+		vi.advanceTimersByTime(1000)
 		editor.alignShapes(editor.getSelectedShapeIds(), 'left')
-		jest.advanceTimersByTime(1000)
+		vi.advanceTimersByTime(1000)
 
 		const commonBoundsAfter = Box.Common([
 			editor.getShapePageBounds(ids.boxC)!,
@@ -367,9 +368,9 @@ describe('When shapes are parented to a rotated shape...', () => {
 		])
 
 		editor.alignShapes(editor.getSelectedShapeIds(), 'bottom')
-		jest.advanceTimersByTime(1000)
+		vi.advanceTimersByTime(1000)
 		editor.alignShapes(editor.getSelectedShapeIds(), 'right')
-		jest.advanceTimersByTime(1000)
+		vi.advanceTimersByTime(1000)
 
 		const commonBoundsAfter = Box.Common([
 			editor.getShapePageBounds(ids.boxC)!,

package/src/test/commands/animationSpeed.test.ts

@@ -1,3 +1,4 @@
+import { vi } from 'vitest'
 import { TestEditor } from '../TestEditor'
 
 let editor: TestEditor
@@ -6,7 +7,7 @@ beforeEach(() => {
 	editor = new TestEditor()
 })
 
-jest.useFakeTimers()
+vi.useFakeTimers()
 
 it('zooms in gradually when duration is present and animtion speed is default', () => {
 	expect(editor.getZoomLevel()).toBe(1)

package/src/test/commands/centerOnPoint.test.ts

@@ -1,3 +1,4 @@
+import { vi } from 'vitest'
 import { TestEditor } from '../TestEditor'
 
 let editor: TestEditor
@@ -14,9 +15,9 @@ it('centers on the point', () => {
 it('centers on the point with animation', () => {
 	editor.centerOnPoint({ x: 400, y: 400 }, { animation: { duration: 200 } })
 	expect(editor.getViewportPageCenter()).not.toMatchObject({ x: 400, y: 400 })
-	jest.advanceTimersByTime(100)
+	vi.advanceTimersByTime(100)
 	expect(editor.getViewportPageCenter()).not.toMatchObject({ x: 400, y: 400 })
-	jest.advanceTimersByTime(200)
+	vi.advanceTimersByTime(200)
 	expect(editor.getViewportPageCenter()).toMatchObject({ x: 400, y: 400 })
 })
 

package/src/test/commands/clipboard.test.ts

@@ -1,4 +1,5 @@
 import { createShapeId, TLArrowShape } from '@tldraw/editor'
+import { vi } from 'vitest'
 import { getArrowBindings } from '../../lib/shapes/arrow/shared'
 import { TestEditor } from '../TestEditor'
 
@@ -27,13 +28,13 @@ const doMockClipboard = () => {
 
 	Object.assign(window.navigator, {
 		clipboard: {
-			write: jest.fn((content: any) => {
+			write: vi.fn((content: any) => {
 				context.current = content
 			}),
 		},
 	})
 
-	globalThis.ClipboardItem = jest.fn((payload: any) => payload) as any
+	globalThis.ClipboardItem = vi.fn((payload: any) => payload) as any
 
 	return context
 }

package/src/test/commands/createShapes.test.ts

@@ -1,4 +1,5 @@
 import { DefaultColorStyle, TLArrowShape, TLGeoShape, createShapeId } from '@tldraw/editor'
+import { vi } from 'vitest'
 import { TestEditor } from '../TestEditor'
 
 let editor: TestEditor
@@ -126,7 +127,7 @@ it('Throws out all shapes if any shape is invalid', () => {
 
 	expect(editor.getCurrentPageShapeIds().size).toBe(n + 1)
 
-	console.error = jest.fn()
+	console.error = vi.fn()
 
 	// But these will need to be thrown out
 	expect(() => {

package/src/test/commands/deleteShapes.test.ts

@@ -1,4 +1,5 @@
 import { createBindingId, createShapeId } from '@tldraw/editor'
+import { vi } from 'vitest'
 import { getArrowBindings } from '../../lib/shapes/arrow/shared'
 import { TestEditor } from '../TestEditor'
 
@@ -12,7 +13,7 @@ const ids = {
 	arrow1: createShapeId('arrow1'),
 }
 
-jest.useFakeTimers()
+vi.useFakeTimers()
 
 beforeEach(() => {
 	editor = new TestEditor()