[IAMRISK-2603] Add support for Arkose (#2455)

src/__tests__/field/captcha.test.jsx

@@ -6,11 +6,11 @@ import CaptchaPane from '../../field/captcha/captcha_pane';
 import { ThirdPartyCaptcha } from '../../field/captcha/third_party_captcha';
 import CaptchaInput from '../../ui/input/captcha_input';
 
-const createLockMock = ({ provider = 'auth0', required = true, siteKey = '' } = {}) =>
+const createLockMock = ({ provider = 'auth0', required = true, siteKey = '', clientSubdomain = '' } = {}) =>
   I.fromJS({
     id: '__lock-id__',
     core: {
-      captcha: { provider, siteKey, required: required }
+      captcha: { provider, siteKey, clientSubdomain, required: required }
     }
   });
 
@@ -121,4 +121,31 @@ describe('CaptchaPane', () => {
       expect(wrapper.find(ThirdPartyCaptcha).props().sitekey).toBe('mySiteKey');
     });
   });
+
+  describe('Arkose', () => {
+    let wrapper;
+    beforeAll(() => {
+      const lockMock = createLockMock({
+        provider: 'arkose',
+        siteKey: 'mySiteKey',
+        clientSubdomain:'client-api'
+      });
+      const i8nMock = createI18nMock();
+      const onReloadMock = jest.fn();
+
+      wrapper = mount(<CaptchaPane lock={lockMock} onReload={onReloadMock} i18n={i8nMock} />);
+    });
+
+    it('should render ThirdPartyCaptcha if provider is Arkose', () => {
+      expect(wrapper.find(ThirdPartyCaptcha)).toHaveLength(1);
+    });
+
+    it('should pass the sitekey', () => {
+      expect(wrapper.find(ThirdPartyCaptcha).props().sitekey).toBe('mySiteKey');
+    });
+
+    it('should pass the clientSubdomain', () => {
+      expect(wrapper.find(ThirdPartyCaptcha).props().clientSubdomain).toBe('client-api');
+    });
+  });
 });

src/__tests__/field/captcha/__snapshots__/arkose.test.jsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Arkose should match the snapshot 1`] = `
+<div
+  className="auth0-lock-arkose-block auth0-lock-arkose-block-error"
+>
+  <div
+    className="auth0-lock-arkose"
+  />
+</div>
+`;

src/__tests__/field/captcha/__snapshots__/friendlyCaptcha.test.jsx.snap

@@ -1,3 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`friendly captcha should match the snapshot 1`] = `ShallowWrapper {}`;
+exports[`friendly captcha should match the snapshot 1`] = `
+<div
+  className="auth0-lock-friendly-captcha-block auth0-lock-friendly-captcha-block-error"
+>
+  <div
+    className="auth0-lock-friendly-captcha"
+  />
+</div>
+`;

src/__tests__/field/captcha/__snapshots__/hcaptcha.test.jsx.snap

@@ -1,3 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`hCaptcha should match the snapshot 1`] = `ShallowWrapper {}`;
+exports[`hCaptcha should match the snapshot 1`] = `
+<div
+  className="auth0-lock-hcaptcha-block auth0-lock-hcaptcha-block-error"
+>
+  <div
+    className="auth0-lock-hcaptcha"
+  />
+</div>
+`;

src/__tests__/field/captcha/__snapshots__/recaptcha_enterprise.test.jsx.snap

@@ -1,3 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Recaptcha Enterprise should match the snapshot 1`] = `ShallowWrapper {}`;
+exports[`Recaptcha Enterprise should match the snapshot 1`] = `
+<div
+  className="auth0-lock-recaptcha-block auth0-lock-recaptcha-block-error"
+>
+  <div
+    className="auth0-lock-recaptchav2"
+  />
+</div>
+`;

src/__tests__/field/captcha/__snapshots__/recaptchav2.test.jsx.snap

@@ -1,3 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Recaptcha v2 should match the snapshot 1`] = `ShallowWrapper {}`;
+exports[`Recaptcha v2 should match the snapshot 1`] = `
+<div
+  className="auth0-lock-recaptcha-block auth0-lock-recaptcha-block-error"
+>
+  <div
+    className="auth0-lock-recaptchav2"
+  />
+</div>
+`;

src/__tests__/field/captcha/arkose.test.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { expectComponent } from 'testUtils';
+import { ThirdPartyCaptcha } from '../../../field/captcha/third_party_captcha';
+
+describe('Arkose', () => {
+  const component = <ThirdPartyCaptcha provider={'arkose'} hl='en' sitekey={'mySiteKey'} clientSubdomain={'client-api'} />;
+
+  it('should match the snapshot', () => {
+    expectComponent(component).toMatchSnapshot();
+  });
+
+  it('injects the script', () => {
+    const script = [...window.document.querySelectorAll('script')].find(s => s.src.startsWith("https://client-api.arkoselabs.com/v2/mySiteKey/api.js"));
+    expect(script).not.toBeUndefined();
+  });
+});

src/__tests__/field/captcha/friendlyCaptcha.test.jsx

@@ -1,45 +1,16 @@
 import React from 'react';
-import { shallow } from 'enzyme';
-import I from 'immutable';
-
+import { expectComponent } from 'testUtils';
 import { ThirdPartyCaptcha } from '../../../field/captcha/third_party_captcha';
 
-const createLockMock = ({ provider = 'none', sitekey = '' } = {}) =>
-  I.fromJS({
-    id: '__lock-id__',
-    core: {
-      captcha: { provider, sitekey },
-      transient: {
-        ui: {
-          language: 'en-US'
-        }
-      }
-    }
-  });
-
 describe('friendly captcha', () => {
+  const wrapper = <ThirdPartyCaptcha provider={'friendly_captcha'} hl='en' sitekey={'mySiteKey'} />;
+
   it('should match the snapshot', () => {
-    const mockLock = createLockMock({ provider: 'friendly_captcha', sitekey: 'mySiteKey' });
-    const wrapper = shallow(
-      <ThirdPartyCaptcha provider={'friendly_captcha'} lock={mockLock} sitekey={'mySiteKey'} />
-    );
-
-    expect(wrapper).toMatchSnapshot();
+    expectComponent(wrapper).toMatchSnapshot();
   });
 
-  describe('render', () => {
-    beforeAll(() => {
-      document.body.innerHTML = "<div id='renderTest'></div>";
-    });
-    afterAll(() => {
-      document.getElementById('renderTest').remove();
-    });
-    it('injects the script', () => {
-      ThirdPartyCaptcha.loadScript({ hl: 'en-US', provider: 'friendly_captcha' }, document.body);
-      expect(document.body.innerHTML).toContain('<div id="renderTest">');
-      expect(document.body.innerHTML).toContain(
-        '<script src="https://cdn.jsdelivr.net/npm/[email protected]/widget.min.js'
-      );
-    });
+  it('injects the script', () => {
+    const script = [...window.document.querySelectorAll('script')].find(s => s.src.startsWith("https://cdn.jsdelivr.net/npm/[email protected]/widget.min.js"));
+    expect(script).not.toBeUndefined();
   });
 });

src/__tests__/field/captcha/hcaptcha.test.jsx

@@ -1,45 +1,16 @@
 import React from 'react';
-import { shallow } from 'enzyme';
-import I from 'immutable';
-
+import { expectComponent } from 'testUtils';
 import { ThirdPartyCaptcha } from '../../../field/captcha/third_party_captcha';
 
-const createLockMock = ({ provider = 'none', sitekey = '' } = {}) =>
-  I.fromJS({
-    id: '__lock-id__',
-    core: {
-      captcha: { provider, sitekey },
-      transient: {
-        ui: {
-          language: 'en-US'
-        }
-      }
-    }
-  });
-
 describe('hCaptcha', () => {
+  const component = <ThirdPartyCaptcha provider={'hcaptcha'} hl='en' sitekey={'mySiteKey'} />;
+
   it('should match the snapshot', () => {
-    const mockLock = createLockMock({ provider: 'hcaptcha', sitekey: 'mySiteKey' });
-    const wrapper = shallow(
-      <ThirdPartyCaptcha provider={'hcaptcha'} lock={mockLock} sitekey={'mySiteKey'} />
-    );
-
-    expect(wrapper).toMatchSnapshot();
+    expectComponent(component).toMatchSnapshot();
   });
 
-  describe('render', () => {
-    beforeAll(() => {
-      document.body.innerHTML = "<div id='renderTest'></div>";
-    });
-    afterAll(() => {
-      document.getElementById('renderTest').remove();
-    });
-    it('injects the script', () => {
-      ThirdPartyCaptcha.loadScript({ hl: 'en-US', provider: 'hcaptcha' }, document.body);
-      expect(document.body.innerHTML).toContain('<div id="renderTest">');
-      expect(document.body.innerHTML).toContain(
-        '<script src="https://js.hcaptcha.com/1/api.js?hl=en-US'
-      );
-    });
+  it('injects the script', () => {
+    const script = [...window.document.querySelectorAll('script')].find(s => s.src.startsWith("https://js.hcaptcha.com/1/api.js"));
+    expect(script).not.toBeUndefined();
   });
 });

src/__tests__/field/captcha/recaptcha_enterprise.test.jsx

@@ -1,45 +1,16 @@
 import React from 'react';
-import { shallow } from 'enzyme';
-import I from 'immutable';
-
+import { expectComponent } from 'testUtils';
 import { ThirdPartyCaptcha } from '../../../field/captcha/third_party_captcha';
 
-const createLockMock = ({ provider = 'none', sitekey = '' } = {}) =>
-  I.fromJS({
-    id: '__lock-id__',
-    core: {
-      captcha: { provider, sitekey },
-      transient: {
-        ui: {
-          language: 'en-US'
-        }
-      }
-    }
-  });
-
 describe('Recaptcha Enterprise', () => {
+  const component = <ThirdPartyCaptcha provider={'recaptcha_enterprise'} hl='en' sitekey={'mySiteKey'} />;
+
   it('should match the snapshot', () => {
-    const mockLock = createLockMock({ provider: 'recaptcha_enterprise', sitekey: 'mySiteKey' });
-    const wrapper = shallow(
-      <ThirdPartyCaptcha provider={'recaptcha_enterprise'} lock={mockLock} sitekey={'mySiteKey'} />
-    );
-
-    expect(wrapper).toMatchSnapshot();
+    expectComponent(component).toMatchSnapshot();
   });
 
-  describe('render', () => {
-    beforeAll(() => {
-      document.body.innerHTML = "<div id='renderTest'></div>";
-    });
-    afterAll(() => {
-      document.getElementById('renderTest').remove();
-    });
-    it('injects the script', () => {
-      ThirdPartyCaptcha.loadScript({ hl: 'en-US', provider: 'recaptcha_enterprise' }, document.body);
-      expect(document.body.innerHTML).toContain('<div id="renderTest">');
-      expect(document.body.innerHTML).toContain(
-        '<script src="https://www.recaptcha.net/recaptcha/enterprise.js?render=explicit'
-      );
-    });
+  it('injects the script', () => {
+    const script = [...window.document.querySelectorAll('script')].find(s => s.src.startsWith("https://www.recaptcha.net/recaptcha/enterprise.js"));
+    expect(script).not.toBeUndefined();
   });
 });

src/__tests__/field/captcha/recaptchav2.test.jsx

@@ -1,45 +1,16 @@
 import React from 'react';
-import { shallow } from 'enzyme';
-import I from 'immutable';
-
+import { expectComponent } from 'testUtils';
 import { ThirdPartyCaptcha } from '../../../field/captcha/third_party_captcha';
 
-const createLockMock = ({ provider = 'none', sitekey = '' } = {}) =>
-  I.fromJS({
-    id: '__lock-id__',
-    core: {
-      captcha: { provider, sitekey },
-      transient: {
-        ui: {
-          language: 'en-US'
-        }
-      }
-    }
-  });
-
 describe('Recaptcha v2', () => {
+  const component = <ThirdPartyCaptcha provider={'recaptcha_v2'} hl='en' sitekey={'mySiteKey'} />;
+
   it('should match the snapshot', () => {
-    const mockLock = createLockMock({ provider: 'recaptcha_v2', sitekey: 'mySiteKey' });
-    const wrapper = shallow(
-      <ThirdPartyCaptcha provider={'recaptcha_v2'} lock={mockLock} sitekey={'mySiteKey'} />
-    );
-
-    expect(wrapper).toMatchSnapshot();
+    expectComponent(component).toMatchSnapshot();
   });
 
-  describe('render', () => {
-    beforeAll(() => {
-      document.body.innerHTML = "<div id='renderTest'></div>";
-    });
-    afterAll(() => {
-      document.getElementById('renderTest').remove();
-    });
-    it('injects the script', () => {
-      ThirdPartyCaptcha.loadScript({ hl: 'en-US', provider: 'recaptcha_v2' }, document.body);
-      expect(document.body.innerHTML).toContain('<div id="renderTest">');
-      expect(document.body.innerHTML).toContain(
-        '<script src="https://www.recaptcha.net/recaptcha/api.js?hl=en-US'
-      );
-    });
+  it('injects the script', () => {
+    const script = [...window.document.querySelectorAll('script')].find(s => s.src.startsWith("https://www.recaptcha.net/recaptcha/api.js"));
+    expect(script).not.toBeUndefined();
   });
 });

src/field/captcha/captcha_pane.jsx

@@ -31,6 +31,7 @@ export default class CaptchaPane extends React.Component {
         <ThirdPartyCaptcha
           provider={provider}
           sitekey={captcha.get('siteKey')}
+          clientSubdomain={captcha.get('clientSubdomain')}
           onChange={handleChange}
           onExpired={reset}
           hl={l.ui.language(lock)}