Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

executeAsync: Promised based execution GH-72 #163

Merged
merged 7 commits into from Jun 6, 2020
Merged

executeAsync: Promised based execution GH-72 #163

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
9f6172c
implement executeAsync to allow for promise based execution dozoisch/…
stemsmit Jan 17, 2020
78c9729
spaces
stemsmit Jan 17, 2020
5fda0cd
fixes for linting issues
stemsmit Feb 2, 2020
567b9f5
Update test/recaptcha.spec.js
stemsmit Feb 4, 2020
5e30a76
fix autocommit issue
stemsmit Feb 4, 2020
7e3a58d
update readme with executeAsync
stemsmit Feb 4, 2020
b41e8dd
add test for resolved value of executeAsync
stemsmit Feb 4, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
26 changes: 24 additions & 2 deletions src/recaptcha.js
View file
Open in desktop
Expand Up @@ -34,6 +34,14 @@ export default class ReCAPTCHA extends React.Component {
}
}

executeAsync() {
return new Promise((resolve, reject) => {
this.executionResolve = resolve;
this.executionReject = reject;
this.execute();
});
}

reset() {
if (this.props.grecaptcha && this._widgetId !== undefined) {
this.props.grecaptcha.reset(this._widgetId);
Expand All @@ -49,11 +57,25 @@ export default class ReCAPTCHA extends React.Component {
}

handleErrored() {
if (this.props.onErrored) this.props.onErrored();
if (this.props.onErrored) {
this.props.onErrored();
}
if (this.executionReject) {
this.executionReject();
delete this.executionResolve;
delete this.executionReject;
}
}

handleChange(token) {
if (this.props.onChange) this.props.onChange(token);
if (this.props.onChange) {
this.props.onChange(token);
}
if (this.executionResolve) {
this.executionResolve(token);
delete this.executionReject;
delete this.executionResolve;
}
}

explicitRender() {
Expand Down
64 changes: 64 additions & 0 deletions test/recaptcha.spec.js
View file
Open in desktop
Expand Up @@ -88,6 +88,70 @@ describe("ReCAPTCHA", () => {
instance._internalRef.current.execute();
expect(grecaptchaMock.execute).toBeCalledWith(WIDGET_ID);
});
it("executeAsync, should call grecaptcha.execute with the widget id", () => {
const WIDGET_ID = "someWidgetId";
const grecaptchaMock = {
render() {
return WIDGET_ID;
},
execute: jest.fn(),
};
// wrapping component example that applies a ref to ReCAPTCHA
class WrappingComponent extends React.Component {
constructor(props) {
super(props);
this._internalRef = React.createRef();
}
render() {
return (
<div>
<ReCAPTCHA
sitekey="xxx"
size="invisible"
grecaptcha={grecaptchaMock}
onChange={jest.fn()}
ref={this._internalRef}
/>
</div>
);
}
}
const instance = ReactTestUtils.renderIntoDocument(React.createElement(WrappingComponent));
instance._internalRef.current.execute();
stemsmit marked this conversation as resolved.
Show resolved Hide resolved
expect(grecaptchaMock.execute).toBeCalledWith(WIDGET_ID);
});
it("executeAsync, should return a promise", () => {
const WIDGET_ID = "someWidgetId";
const grecaptchaMock = {
render() {
return WIDGET_ID;
},
execute: jest.fn(),
};
// wrapping component example that applies a ref to ReCAPTCHA
class WrappingComponent extends React.Component {
constructor(props) {
super(props);
this._internalRef = React.createRef();
}
render() {
return (
<div>
<ReCAPTCHA
sitekey="xxx"
size="invisible"
grecaptcha={grecaptchaMock}
onChange={jest.fn()}
ref={this._internalRef}
/>
</div>
);
}
}
const instance = ReactTestUtils.renderIntoDocument(React.createElement(WrappingComponent));
let result = instance._internalRef.current.executeAsync();
expect(result).toBeInstanceOf(Promise);
Copy link
Collaborator

@hartzis hartzis Feb 3, 2020 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💭 add an additional expect to test that the resolved value should be the token?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm, sorry if I am missing something, how would I get the test value of token to compare against?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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);

Copy link
Contributor Author

@stemsmit stemsmit Feb 4, 2020 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

});
describe("Expired", () => {
it("should call onChange with null when response is expired", () => {
const WIDGET_ID = "someWidgetId";
Expand Down