executeAsync: Promised based execution GH-72 #163
Conversation
|
Worth noting that |
|
+1 |
|
What's the status of this PR? Looks like a couple of linting fixes only? |
test/recaptcha.spec.js
Outdated
| } | ||
| const instance = ReactTestUtils.renderIntoDocument(React.createElement(WrappingComponent)); | ||
| let result = instance._internalRef.current.executeAsync(); | ||
| expect(result).toBeInstanceOf(Promise); |
There was a problem hiding this comment.
💭 add an additional expect to test that the resolved value should be the token?
There was a problem hiding this comment.
Hmm, sorry if I am missing something, how would I get the test value of token to compare against?
There was a problem hiding this comment.
Hey @stemsmit , looks like there should be a couple different ways via the jest docs.
async/await should work too, but i think i see what you're talking about. We'll need to setup a slightly sophisticated grecaptchaMock...
const WIDGET_ID = "someWidgetId";
const TOKEN = "someToken";
const grecaptchaMock = {
render(_, { callback }) {
this.callback = callback;
return WIDGET_ID;
},
execute() { this.callback(TOKEN) },
};
...
let result = instance._internalRef.current.executeAsync();
const retrievedToken = await result;
expect(retrievedToken).toBe(TOKEN);
There was a problem hiding this comment.
I attempted to use async / await but ran into an issue with regeneratorRuntime rather than make changes to fix that issue I set it up to return the promise with the expect inside a then callback.
Co-Authored-By: Brian Emil Hartz <brianhartz@gmail.com>
Readme changes added. |
| ```jsx | ||
| import ReCAPTCHA from "react-google-recaptcha"; | ||
|
|
||
|
|
||
| const ReCAPTCHAForm = (props) => { | ||
| const recaptchaRef = React.useRef(); | ||
|
|
||
| const onSubmitWithReCAPTCHA = async () => { | ||
| const token = await recaptchaRef.current.executeAsync(); | ||
|
|
||
| // apply to form data | ||
| } | ||
|
|
||
| return ( | ||
| <form onSubmit={onSubmitWithReCAPTCHA}> | ||
| <ReCAPTCHA | ||
| ref={recaptchaRef} | ||
| size="invisible" | ||
| sitekey="Your client site key" | ||
| /> | ||
| </form> | ||
| ) | ||
|
|
||
| } | ||
|
|
||
| ReactDOM.render( | ||
| <ReCAPTCHAForm />, | ||
| document.body | ||
| ); |
|
When do you think this could be merged ? This is very cool! |
|
I'll try to merge this, this weekend, sorry for the delay. |
|
This feature looks pretty useful. May I ask when will you be able to release this feature? |
|
please include this PR in the project already) just do it |
|
@dozoisch Can we help in any way to get this moving along? Looks like it has been sitting in a ready-to-merge state for the last 4 months or so. |
|
2.1 published |
|
Amazing. Thanks! |
|
|
|
🎉 Nice. Also updated the "invisible" example to showcase the new https://codesandbox.io/s/gifted-cache-10q74jj593?file=/src/index.js |
Addresses #72, adds
executeAsyncto return a promise which resolves and rejects based onhandleChangeandhandleErrored