Bug fix refactor

auth0 · Jun 14, 2024 · 92faa29 · 92faa29
1 parent 3576c07
commit 92faa29
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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`
         }
       >
-        <div className={`auth0-lock-${providerDomPrefix(this.props.provider) === 'recaptcha' ? 'recaptchav2' : providerDomPrefix(this.props.provider)}`} ref={this.ref} />
+        <div className={`auth0-lock-${providerDomPrefix(this.props.provider) === 'recaptcha' ? 'recaptchav2' : providerDomPrefix(this.props.provider)}`} id={this.props.provider === HCAPTCHA_PROVIDER ? 'h-captcha' : ''} ref={this.ref} />
       </div>
     );
   }
@@ -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());
+    }
   }
 }