From 1e5408b169329a411dfccf4299414ef1360f5a33 Mon Sep 17 00:00:00 2001
From: Nathan Rajlich <n@n8.io>
Date: Fri, 3 May 2024 00:49:23 -0700
Subject: [PATCH] Add <Rect> "click" event test

---
 ...-tsx-should-receive-click-event-1-snap.png | Bin 0 -> 286 bytes
 ...-tsx-should-receive-click-event-2-snap.png | Bin 0 -> 285 bytes
 test/helpers/event.ts                         |  10 ++++
 test/rect.test.tsx                            |  52 +++++++++++++++++-
 test/text.test.tsx                            |   6 +-
 5 files changed, 64 insertions(+), 4 deletions(-)
 create mode 100644 test/__image_snapshots__/rect-test-tsx-test-rect-test-tsx-should-receive-click-event-1-snap.png
 create mode 100644 test/__image_snapshots__/rect-test-tsx-test-rect-test-tsx-should-receive-click-event-2-snap.png
 create mode 100644 test/helpers/event.ts

diff --git a/test/__image_snapshots__/rect-test-tsx-test-rect-test-tsx-should-receive-click-event-1-snap.png b/test/__image_snapshots__/rect-test-tsx-test-rect-test-tsx-should-receive-click-event-1-snap.png
new file mode 100644
index 0000000000000000000000000000000000000000..9f197c2e72879646167be5792c1a1d6b9048ac52
GIT binary patch
literal 286
zcmeAS@N?(olHy`uVBq!ia0vp^(||aIgAGJRpZox%7>k44ofy`glX(f`uoOFahHwBu
z4M$1`kblC{#WAE}&f7~Hc^eD_SR7~nt2WbRNMc+#^G9=a=5e43Ab4loFSpJx%<_rm
w=OgE1w(qrVs239BOq?h{cY+b(AawEo`<o^|rWEze?O+#sy85}Sb4q9e00DzX8~^|S

literal 0
HcmV?d00001

diff --git a/test/__image_snapshots__/rect-test-tsx-test-rect-test-tsx-should-receive-click-event-2-snap.png b/test/__image_snapshots__/rect-test-tsx-test-rect-test-tsx-should-receive-click-event-2-snap.png
new file mode 100644
index 0000000000000000000000000000000000000000..2297c2e5ac05c457db050ba862c8acdd3cd78efe
GIT binary patch
literal 285
zcmeAS@N?(olHy`uVBq!ia0vp^(||aIgAGJRpZox%7>k44ofy`glX(f`uoOFahHwBu
z4M$1`kbm6M#WAE}&f7~Hc^eD_SR7~nt2WbRNMc+#^G9=a=5e43Ab4loKY!iTvlW+Y
tJ{pJT=JP+8-{R^Np+bKG;v5X}1EY0=A5)5@Yj6Qb&ePS;Wt~$(696X%PwoH!

literal 0
HcmV?d00001

diff --git a/test/helpers/event.ts b/test/helpers/event.ts
new file mode 100644
index 0000000..d8d8eb5
--- /dev/null
+++ b/test/helpers/event.ts
@@ -0,0 +1,10 @@
+export function enableEvents(canvas: any) {
+	const ev = new EventTarget();
+	canvas.addEventListener = ev.addEventListener.bind(ev);
+	canvas.removeEventListener = ev.removeEventListener.bind(ev);
+	canvas.dispatchEvent = ev.dispatchEvent.bind(ev);
+}
+
+export function dispatchEvent(target: any, event: Event) {
+	target.dispatchEvent(event);
+}
diff --git a/test/rect.test.tsx b/test/rect.test.tsx
index 2300585..67efe09 100644
--- a/test/rect.test.tsx
+++ b/test/rect.test.tsx
@@ -1,8 +1,9 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { test, expect } from 'vitest';
 import config, { Canvas } from '@napi-rs/canvas';
 import { Rect } from '../src';
 import { render } from '../src/render';
+import { enableEvents, dispatchEvent } from './helpers/event';
 
 test('should render <Rect>', async () => {
 	const canvas = new Canvas(150, 100);
@@ -13,3 +14,52 @@ test('should render <Rect>', async () => {
 	);
 	expect(canvas.toBuffer('image/png')).toMatchImageSnapshot();
 });
+
+test('should receive "click" event', async () => {
+	const canvas = new Canvas(150, 100);
+	enableEvents(canvas);
+	let event: MouseEvent;
+
+	function ClickRect() {
+		const [color, setColor] = useState('red');
+		return (
+			<Rect
+				x={10}
+				y={10}
+				width={50}
+				height={50}
+				fill={color}
+				onClick={(e) => {
+					setColor('blue');
+					event = e;
+				}}
+			/>
+		);
+	}
+
+	const root = render(<ClickRect />, canvas, config);
+	expect(root.renderCount).toEqual(0);
+
+	// Initial state, Rect is red
+	await root;
+	expect(root.renderCount).toEqual(1);
+	expect(canvas.toBuffer('image/png')).toMatchImageSnapshot();
+
+	// Simulate "click" event
+	dispatchEvent(
+		canvas,
+		Object.assign(new Event('click'), {
+			layerX: 50,
+			layerY: 40,
+		}),
+	);
+
+	// Rect should be blue now
+	await root;
+	expect(root.renderCount).toEqual(2);
+	expect(canvas.toBuffer('image/png')).toMatchImageSnapshot();
+
+	// Check event values
+	expect(event!.layerX).toEqual(40);
+	expect(event!.layerY).toEqual(30);
+});
diff --git a/test/text.test.tsx b/test/text.test.tsx
index 92fc081..ce2292a 100644
--- a/test/text.test.tsx
+++ b/test/text.test.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
+import { join } from 'path';
 import { test, expect } from 'vitest';
-import config, { Canvas } from '@napi-rs/canvas';
+import config, { Canvas, GlobalFonts } from '@napi-rs/canvas';
 import { Text } from '../src';
 import { render } from '../src/render';
-import { join } from 'path';
 
-config.GlobalFonts.registerFromPath(
+GlobalFonts.registerFromPath(
 	join(__dirname, 'Geist-Regular.otf'),
 	'Geist Sans',
 );