From 3576c077fce26deac62e5a5f66e8c6a4fbb16e37 Mon Sep 17 00:00:00 2001 From: Tre Moore Date: Fri, 14 Jun 2024 13:29:22 -0700 Subject: [PATCH 1/4] hcaptcha bug fix --- src/__tests__/field/captcha/hcaptcha.test.jsx | 4 ++++ src/field/captcha/third_party_captcha.jsx | 3 +++ 2 files changed, 7 insertions(+) diff --git a/src/__tests__/field/captcha/hcaptcha.test.jsx b/src/__tests__/field/captcha/hcaptcha.test.jsx index d94846579..8f49c9aef 100644 --- a/src/__tests__/field/captcha/hcaptcha.test.jsx +++ b/src/__tests__/field/captcha/hcaptcha.test.jsx @@ -13,4 +13,8 @@ describe('hCaptcha', () => { const script = [...window.document.querySelectorAll('script')].find(s => s.src.startsWith("https://js.hcaptcha.com/1/api.js")); expect(script).not.toBeUndefined(); }); + + it('resets the window element', () => { + expect(window?.hcaptcha).toBeUndefined(); + }) }); diff --git a/src/field/captcha/third_party_captcha.jsx b/src/field/captcha/third_party_captcha.jsx index cfe3eee66..e7483e5fd 100644 --- a/src/field/captcha/third_party_captcha.jsx +++ b/src/field/captcha/third_party_captcha.jsx @@ -316,6 +316,9 @@ export class ThirdPartyCaptcha extends React.Component { } componentDidUpdate(prevProps, prevState) { + if (this.props.provider === HCAPTCHA_PROVIDER) { + window[this.props.provider] = undefined; + } if (prevProps.value !== this.props.value && this.props.value === '') { this.reset(); } From 92faa29bfc27d9f8bb3c9d00d27134accec5b243 Mon Sep 17 00:00:00 2001 From: Tre Moore Date: Fri, 14 Jun 2024 15:56:54 -0700 Subject: [PATCH 2/4] Bug fix refactor --- src/__tests__/field/captcha/hcaptcha.test.jsx | 4 ---- .../field/captcha/third_party_captcha.test.jsx | 12 +++++++++++- src/field/captcha/third_party_captcha.jsx | 9 +++++---- 3 files changed, 16 insertions(+), 9 deletions(-) diff --git a/src/__tests__/field/captcha/hcaptcha.test.jsx b/src/__tests__/field/captcha/hcaptcha.test.jsx index 8f49c9aef..d94846579 100644 --- a/src/__tests__/field/captcha/hcaptcha.test.jsx +++ b/src/__tests__/field/captcha/hcaptcha.test.jsx @@ -13,8 +13,4 @@ describe('hCaptcha', () => { const script = [...window.document.querySelectorAll('script')].find(s => s.src.startsWith("https://js.hcaptcha.com/1/api.js")); expect(script).not.toBeUndefined(); }); - - it('resets the window element', () => { - expect(window?.hcaptcha).toBeUndefined(); - }) }); diff --git a/src/__tests__/field/captcha/third_party_captcha.test.jsx b/src/__tests__/field/captcha/third_party_captcha.test.jsx index fcff12d97..32cf3ae42 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 e7483e5fd..76b5afdc1 100644 --- a/src/field/captcha/third_party_captcha.jsx +++ b/src/field/captcha/third_party_captcha.jsx @@ -302,7 +302,7 @@ export class ThirdPartyCaptcha extends React.Component { : `auth0-lock-${providerDomPrefix(this.props.provider)}-block auth0-lock-${providerDomPrefix(this.props.provider)}-block-error` } > -
+
); } @@ -316,12 +316,13 @@ export class ThirdPartyCaptcha extends React.Component { } componentDidUpdate(prevProps, prevState) { - if (this.props.provider === HCAPTCHA_PROVIDER) { - window[this.props.provider] = undefined; - } + 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()); + } } } From 4f67b88956eda9583e2564de3261bd5e78db64e2 Mon Sep 17 00:00:00 2001 From: Tre Moore Date: Fri, 14 Jun 2024 16:02:24 -0700 Subject: [PATCH 3/4] Updated Snapshots --- src/__tests__/field/captcha/__snapshots__/arkose.test.jsx.snap | 1 + src/__tests__/field/captcha/__snapshots__/auth0_v2.test.jsx.snap | 1 + .../field/captcha/__snapshots__/friendlyCaptcha.test.jsx.snap | 1 + src/__tests__/field/captcha/__snapshots__/hcaptcha.test.jsx.snap | 1 + .../captcha/__snapshots__/recaptcha_enterprise.test.jsx.snap | 1 + .../field/captcha/__snapshots__/recaptchav2.test.jsx.snap | 1 + 6 files changed, 6 insertions(+) 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`] = ` >
`; From 121e73ae7c1240fff90627678eb39c922ae664d3 Mon Sep 17 00:00:00 2001 From: Tre Moore Date: Mon, 17 Jun 2024 09:40:49 -0700 Subject: [PATCH 4/4] Refactor ID determination --- src/field/captcha/third_party_captcha.jsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/field/captcha/third_party_captcha.jsx b/src/field/captcha/third_party_captcha.jsx index 76b5afdc1..d2f006b98 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) { @@ -302,7 +310,7 @@ export class ThirdPartyCaptcha extends React.Component { : `auth0-lock-${providerDomPrefix(this.props.provider)}-block auth0-lock-${providerDomPrefix(this.props.provider)}-block-error` } > -
+
); }