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 0000000..9f197c2 Binary files /dev/null and b/test/__image_snapshots__/rect-test-tsx-test-rect-test-tsx-should-receive-click-event-1-snap.png differ 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 0000000..2297c2e Binary files /dev/null and b/test/__image_snapshots__/rect-test-tsx-test-rect-test-tsx-should-receive-click-event-2-snap.png differ 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 ', async () => { const canvas = new Canvas(150, 100); @@ -13,3 +14,52 @@ test('should render ', 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 ( + { + setColor('blue'); + event = e; + }} + /> + ); + } + + const root = render(, 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', );