refac: cleaning round for image cropping/resizing

web/src/components/__tests__/ImageUploaderCropAndResize.spec.ts

@@ -340,6 +340,56 @@ describe('Arrow keys move the crop frame and Shift+arrow keys resize it', () =>
 	})
 })
 
+describe('Dragging the crop frame moves it, and dragging a corner handle resizes it', () => {
+	it('clamps the dragged rect inside the image bounds', async () => {
+		const wrapper = mountUploader()
+		await openModal(wrapper)
+		await chooseFile(north_wall())
+		await selectRatioPill('1:1')
+		const uploader = wrapper.findComponent(ImageUploader).vm as unknown as {
+			cropRect: CropRect
+		}
+		const before = { ...uploader.cropRect }
+
+		cropFrame().dispatchEvent(
+			new MouseEvent('mousedown', { clientX: 0, clientY: 0, bubbles: true }),
+		)
+		window.dispatchEvent(new MouseEvent('mousemove', { clientX: 100, clientY: 40 }))
+		window.dispatchEvent(new MouseEvent('mouseup'))
+		await nextTick()
+
+		expect(uploader.cropRect.x).toBe(before.x + 100)
+		expect(uploader.cropRect.y).toBe(before.y)
+		expect(uploader.cropRect.width).toBe(before.width)
+		expect(uploader.cropRect.height).toBe(before.height)
+
+		window.dispatchEvent(new MouseEvent('mousemove', { clientX: 999, clientY: 0 }))
+		await nextTick()
+
+		expect(uploader.cropRect.x).toBe(before.x + 100)
+
+		const handle = document.body.querySelectorAll<HTMLElement>(
+			'[data-testid="crop-handle"]',
+		)[3]!
+		handle.dispatchEvent(new MouseEvent('mousedown', { clientX: 0, clientY: 0, bubbles: true }))
+		const afterMove = { ...uploader.cropRect }
+		window.dispatchEvent(new MouseEvent('mousemove', { clientX: -50, clientY: -50 }))
+		window.dispatchEvent(new MouseEvent('mouseup'))
+		await nextTick()
+
+		expect(uploader.cropRect.width).toBe(afterMove.width - 50)
+		expect(uploader.cropRect.height).toBe(afterMove.height - 50)
+		expect(uploader.cropRect.x).toBe(afterMove.x)
+		expect(uploader.cropRect.y).toBe(afterMove.y)
+
+		window.dispatchEvent(new MouseEvent('mousemove', { clientX: -9999, clientY: 0 }))
+		await nextTick()
+
+		expect(uploader.cropRect.width).toBe(afterMove.width - 50)
+		wrapper.unmount()
+	})
+})
+
 describe('Rotate cycles the image in 90° steps and Reset returns to the opened defaults', () => {
 	it('rotates then resets', async () => {
 		const wrapper = mountUploader()