search

agilgur5 / react-signature-canvas

A React wrapper component around signature_pad (in < 150 LoC). Unopinionated and heavily updated fork of react-signature-pad
https://agilgur5.github.io/react-signature-canvas/
Other
528 stars 115 forks source link

`onBegin` not called when `fromData` invoked #82

Closed AndrewOttavianoAbb closed 2 years ago

AndrewOttavianoAbb commented 2 years ago

I am trying to test some buttons that I am enabling when onBegin is called. My problem is that it is generally quite difficult to make a test runner scribble a line across the canvas. To get around this, I attempted to use fromData as done in this repository's tests thinking that if data was added to the canvas, surely onBegin would be called.

So I'm logging this issue because of my testing issue but also thought it kind of weird that onBegin isn't called and was curious about the reasoning behind that. Also would appreciate any advice on how to test my onBegin handler 😉

agilgur5 commented 2 years ago

but also thought it kind of weird that onBegin isn't called and was curious about the reasoning behind that.

Per the description of this library, it is but a wrapper around signature_pad, so this behavior is entirely controlled by signature_pad. You'll also notice that the tests and source code don't mention onBegin as it's just passed through to the signature_pad instance directly (that will change slightly with signature_pad v4 though, per #68).

So this kind of question really belongs upstream rather than here, although support questions are generally discouraged from issues by volunteer maintainers; StackOverflow etc exist for that.

I can only speculate as to why, but I do believe not calling event handlers on fromData makes sense. onBegin etc are explicitly defined as mouse event handlers, so one could very well consider it erroneous behavior if they were called during fromData, as no mouse event occurred. As fromData is also an instance method, that means the developer (not the end-user) called it and so the developer could also feed the data into their own callbacks directly if they so desired.

Also would appreciate any advice on how to test my onBegin handler 😉

I was able to workaround this in the test suite here as react-signature-canvas just passes the handlers through, but I remember thinking about this issue too (also for trim-canvas's test suite in https://github.com/agilgur5/trim-canvas/pull/9). Back then I was imagining simulating clicks on the canvas. I believe one click should be enough to generate data.

I'm not sure if that'll work within the confines of jsdom / node-canvas (I haven't tried), but if not, can try @jest-runner/electron or Cypress if a real browser is needed. I have some comparisons in a different library of mine here: https://github.com/agilgur5/physijs-webpack/pull/15 / https://github.com/agilgur5/physijs-webpack/pull/16 (I prefer the former, which sometimes even has better performance than jsdom too)