Add unit tests for the camera (#3814)

It made more sense for me to group the tests via input rather than via
direction of zoom, so I made a test each for pinching and wheel event
zoom. I can change this though if there's some reason for grouping them
that way that I'm missing.

From what I can tell, resetting the zoom happens via the hand tool,
which is already tested, or via the UI, which should be E2E tested.
Couldn't figure out how to write a test for that.


### Change Type

<!-- ❗ Please select a 'Scope' label ❗️ -->

- [ ] `sdk` — Changes the tldraw SDK
- [ ] `dotcom` — Changes the tldraw.com web app
- [ ] `docs` — Changes to the documentation, examples, or templates.
- [ ] `vs code` — Changes to the vscode plugin
- [x] `internal` — Does not affect user-facing stuff

<!-- ❗ Please select a 'Type' label ❗️ -->

- [ ] `bugfix` — Bug fix
- [ ] `feature` — New feature
- [ ] `improvement` — Improving existing features
- [ ] `chore` — Updating dependencies, other boring stuff
- [ ] `galaxy brain` — Architectural changes
- [x] `tests` — Changes to any test code
- [ ] `tools` — Changes to infrastructure, CI, internal scripts,
debugging tools, etc.
- [ ] `dunno` — I don't know

### Release Notes

- Adds unit tests for the camera

packages/tldraw/src/test/commands/setCamera.test.ts

@@ -18,16 +18,96 @@ const wheelEvent = {
 	ctrlKey: false,
 } as const
 
+const pinchEvent = {
+	type: 'pinch',
+	name: 'pinch',
+	delta: new Vec(0, 0, 1),
+	point: new Vec(0, 0),
+	shiftKey: false,
+	altKey: false,
+	ctrlKey: false,
+} as const
+
 describe('With default options', () => {
 	beforeEach(() => {
 		editor.setCameraOptions({ ...DEFAULT_CAMERA_OPTIONS })
 	})
-
+	it('pans', () => {
-	it.todo('pans')
+		expect(editor.getCamera()).toMatchObject({ x: 0, y: 0, z: 1 })
-	it.todo('zooms in')
+		editor.dispatch({
-	it.todo('zooms out')
+			...pinchEvent,
-	it.todo('resets zoom')
+			name: 'pinch_start',
-	it.todo('pans with wheel')
+		})
+		editor.forceTick()
+		editor.dispatch({
+			...pinchEvent,
+			name: 'pinch',
+			delta: new Vec(100, -10),
+		})
+		editor.forceTick()
+		editor.dispatch({
+			...pinchEvent,
+			name: 'pinch_end',
+		})
+		editor.forceTick()
+		expect(editor.getCamera()).toMatchObject({ x: 100, y: -10, z: 1 })
+	})
+	it('pans with wheel', () => {
+		expect(editor.getCamera()).toMatchObject({ x: 0, y: 0, z: 1 })
+		editor.dispatch({ ...wheelEvent, delta: new Vec(5, 10) })
+		editor.forceTick()
+		expect(editor.getCamera()).toMatchObject({ x: 5, y: 10, z: 1 })
+	})
+	it('zooms with wheel', () => {
+		expect(editor.getCamera()).toMatchObject({ x: 0, y: 0, z: 1 })
+		// zoom in 10%
+		editor.dispatch({ ...wheelEvent, delta: new Vec(0, 0, -0.1), ctrlKey: true })
+		editor.forceTick()
+		expect(editor.getCamera()).toMatchObject({ x: 0, y: 0, z: 0.9 })
+		// zoom out 10%
+		editor.dispatch({ ...wheelEvent, delta: new Vec(0, 0, 0.1), ctrlKey: true })
+		editor.forceTick()
+		expect(editor.getCamera()).toMatchObject({ x: 0, y: 0, z: 0.99 })
+	})
+	it('pinch zooms', () => {
+		expect(editor.getCamera()).toMatchObject({ x: 0, y: 0, z: 1 })
+		// zoom in
+		editor.dispatch({
+			...pinchEvent,
+			name: 'pinch_start',
+		})
+		editor.forceTick()
+		editor.dispatch({
+			...pinchEvent,
+			name: 'pinch',
+			point: new Vec(0, 0, 0.5),
+		})
+		editor.forceTick()
+		editor.dispatch({
+			...pinchEvent,
+			name: 'pinch_end',
+		})
+		editor.forceTick()
+		expect(editor.getCamera()).toMatchObject({ x: 0, y: 0, z: 0.5 })
+		// zoom out
+		editor.dispatch({
+			...pinchEvent,
+			name: 'pinch_start',
+		})
+		editor.forceTick()
+		editor.dispatch({
+			...pinchEvent,
+			name: 'pinch',
+			point: new Vec(0, 0, 1),
+		})
+		editor.forceTick()
+		editor.dispatch({
+			...pinchEvent,
+			name: 'pinch_end',
+		})
+		editor.forceTick()
+		expect(editor.getCamera()).toMatchObject({ x: 0, y: 0, z: 1 })
+	})
 })
 
 it('Sets the camera options', () => {