Mocking grecaptcha in tests about vue-recaptcha

[DanSnow]

@aphofstede Can you help me to test it?
Just download and copy dist/vue-recaptcha.js to your project.

[DanSnow]

Thanks.
This will include in next release.
I'll close this issue.

[DanSnow]

It is because vue-recaptcha will keep a reference to window.grecaptcha.
How about reset the mock by calling execute.resetHistory ?

[aphofstede]

Aren't all Vue instances (and their references) cleared automatically after each test?
I tried using the reset methods from sinon, but the problem is that the stub gets bypassed by the existing reference that vue-recaptcha still seems to hold.. Looking at vue-recaptcha.js, I can't quite figure out which var to nuke to make it reconfigure itself with the new window object.

[DanSnow]

Briefly, it's keep the reference in a global variable but not in the component instance.
So I think that using the reset methods should be the solution.
Are you loading the real recaptcha in test environment?
vue-recaptcha will load the first grecaptcha object which it found.
Maybe remove the real recaptcha, configure the mock, and call window.vueRecaptchaApiLoaded to tell vue-recaptcha to load the grecaptcha then it will work.

Another way is using the test keys.
https://developers.google.com/recaptcha/docs/faq#id-like-to-run-automated-tests-with-recaptcha-v2-what-should-i-do
But in my experience, it will only pass the captcha at the first time with the same recaptcha instance.
Not like the document said that it will always pass.
Also you can't configure it that make it will pass or not.

[aphofstede]

Thanks for your response @DanSnow !

I don't pass any key in the frontend component test since I stub all the functions it doesn't communicate with Google at all.
I guess I don't strictly need to verify that the stub was called; since onVerify() on my own component does get called successfully each run, but it might indicate something is not "clean" with this (sub)component.

Note: I'm cleaning up in afterEach() and reconstructing everything from scratch in beforeEach().
Using window.vueRecaptchaApiLoaded() didn't help. I also tried constructing the component before grecaptcha is added to the window object, but it didn't make a difference.

[DanSnow]

OK. I'll remove the reference of window.grecaptcha and always use window.grecaptcha directly.

[aphofstede]

Works!