diff --git a/src/__tests__/field/captcha/__snapshots__/arkose.test.jsx.snap b/src/__tests__/field/captcha/__snapshots__/arkose.test.jsx.snap index 72aaf6e8b..3cadb335b 100644 --- a/src/__tests__/field/captcha/__snapshots__/arkose.test.jsx.snap +++ b/src/__tests__/field/captcha/__snapshots__/arkose.test.jsx.snap @@ -6,6 +6,7 @@ exports[`Arkose should match the snapshot 1`] = ` >
`; diff --git a/src/__tests__/field/captcha/__snapshots__/auth0_v2.test.jsx.snap b/src/__tests__/field/captcha/__snapshots__/auth0_v2.test.jsx.snap index 71c7e969c..666418dc5 100644 --- a/src/__tests__/field/captcha/__snapshots__/auth0_v2.test.jsx.snap +++ b/src/__tests__/field/captcha/__snapshots__/auth0_v2.test.jsx.snap @@ -6,6 +6,7 @@ exports[`Auth0 V2 should match the snapshot 1`] = ` >
`; diff --git a/src/__tests__/field/captcha/__snapshots__/friendlyCaptcha.test.jsx.snap b/src/__tests__/field/captcha/__snapshots__/friendlyCaptcha.test.jsx.snap index 7236df335..eb15ed5d6 100644 --- a/src/__tests__/field/captcha/__snapshots__/friendlyCaptcha.test.jsx.snap +++ b/src/__tests__/field/captcha/__snapshots__/friendlyCaptcha.test.jsx.snap @@ -6,6 +6,7 @@ exports[`friendly captcha should match the snapshot 1`] = ` >
`; diff --git a/src/__tests__/field/captcha/__snapshots__/hcaptcha.test.jsx.snap b/src/__tests__/field/captcha/__snapshots__/hcaptcha.test.jsx.snap index 737e55e82..3f0b6e773 100644 --- a/src/__tests__/field/captcha/__snapshots__/hcaptcha.test.jsx.snap +++ b/src/__tests__/field/captcha/__snapshots__/hcaptcha.test.jsx.snap @@ -6,6 +6,7 @@ exports[`hCaptcha should match the snapshot 1`] = ` >
`; diff --git a/src/__tests__/field/captcha/__snapshots__/recaptcha_enterprise.test.jsx.snap b/src/__tests__/field/captcha/__snapshots__/recaptcha_enterprise.test.jsx.snap index a69039343..d28757fd7 100644 --- a/src/__tests__/field/captcha/__snapshots__/recaptcha_enterprise.test.jsx.snap +++ b/src/__tests__/field/captcha/__snapshots__/recaptcha_enterprise.test.jsx.snap @@ -6,6 +6,7 @@ exports[`Recaptcha Enterprise should match the snapshot 1`] = ` >
`; diff --git a/src/__tests__/field/captcha/__snapshots__/recaptchav2.test.jsx.snap b/src/__tests__/field/captcha/__snapshots__/recaptchav2.test.jsx.snap index 64bab0465..96117b452 100644 --- a/src/__tests__/field/captcha/__snapshots__/recaptchav2.test.jsx.snap +++ b/src/__tests__/field/captcha/__snapshots__/recaptchav2.test.jsx.snap @@ -6,6 +6,7 @@ exports[`Recaptcha v2 should match the snapshot 1`] = ` >
`; diff --git a/src/__tests__/field/captcha/third_party_captcha.test.jsx b/src/__tests__/field/captcha/third_party_captcha.test.jsx index 5cc1449b3..069c4a99b 100644 --- a/src/__tests__/field/captcha/third_party_captcha.test.jsx +++ b/src/__tests__/field/captcha/third_party_captcha.test.jsx @@ -157,14 +157,24 @@ describe('ThirdPartyCaptcha', () => { }); it('should call render with the correct renderParams', () => { - const renderParams = global.window.hcaptcha.render.mock.calls[0][1]; + const renderCalls = global.window.hcaptcha.render.mock.calls; + const renderParams = renderCalls[0][1]; expect(renderParams).toEqual({ sitekey: 'mySiteKey', callback: expect.any(Function), 'expired-callback': expect.any(Function), 'error-callback': expect.any(Function) }); + expect(renderCalls.length).toEqual(1); }); + + it('should call render on update', () => { + act(() => { + wrapper.setState(); + const renderCalls = global.window.hcaptcha.render.mock.calls; + expect(renderCalls.length).toEqual(1); + }) + }) }); describe('auth0_v2', () => { diff --git a/src/field/captcha/third_party_captcha.jsx b/src/field/captcha/third_party_captcha.jsx index 92c29aeff..97dcf4ff2 100644 --- a/src/field/captcha/third_party_captcha.jsx +++ b/src/field/captcha/third_party_captcha.jsx @@ -72,6 +72,14 @@ const providerDomPrefix = (provider) => { } }; +const providerComponentId = (provider) => { + if (provider === HCAPTCHA_PROVIDER) { + return 'h-captcha'; + } else { + return ''; + } +}; + const loadScript = (url, attributes) => { var script = document.createElement('script'); for (var attr in attributes) { @@ -301,7 +309,7 @@ export class ThirdPartyCaptcha extends React.Component { : `auth0-lock-${providerDomPrefix(this.props.provider)}-block auth0-lock-${providerDomPrefix(this.props.provider)}-block-error` } > -
+
); } @@ -315,9 +323,13 @@ export class ThirdPartyCaptcha extends React.Component { } componentDidUpdate(prevProps, prevState) { + let hCaptchaComponent = document.getElementById("h-captcha"); if (prevProps.value !== this.props.value && this.props.value === '') { this.reset(); } + if (this.props.provider === HCAPTCHA_PROVIDER && hCaptchaComponent && window[this.props.provider]) { + window[this.props.provider].render('h-captcha', this.getRenderParams()); + } } }