@internetarchive/recaptcha-manager - npm Package Compare versions

Comparing version 0.0.1-alpha.4 to 0.1.0

demo/app-root.ts

@@ -16,3 +16,3 @@ import { html, css, LitElement } from 'lit';
   private recaptchaManager: RecaptchaManagerInterface = new RecaptchaManager({
-    defaultSiteKey: '6LeTUvYUAAAAAPTvW98MaXyS8c6vxk4-9n8DI1ve',
+    defaultSiteKey: '<your-site-key>',
   });
@@ -72,3 +72,3 @@
     this.recaptcha2 = await this.recaptchaManager?.getRecaptchaWidget({
-      siteKey: '6LfDgOgeAAAAAEIzkbGeW4N_yQoN3PxhUYdkxbS6',
+      siteKey: '<your-site-key>',
     });
@@ -75,0 +75,0 @@ }

dist/demo/app-root.js

@@ -9,3 +9,3 @@ import { __decorate } from "tslib";
         this.recaptchaManager = new RecaptchaManager({
-            defaultSiteKey: '6LeTUvYUAAAAAPTvW98MaXyS8c6vxk4-9n8DI1ve',
+            defaultSiteKey: '<your-site-key>',
         });
@@ -58,3 +58,3 @@ }
         this.recaptcha2 = await ((_a = this.recaptchaManager) === null || _a === void 0 ? void 0 : _a.getRecaptchaWidget({
-            siteKey: '6LfDgOgeAAAAAEIzkbGeW4N_yQoN3PxhUYdkxbS6',
+            siteKey: '<your-site-key>',
         }));
@@ -61,0 +61,0 @@ }

dist/index.d.ts

 export { RecaptchaManager, RecaptchaManagerInterface, } from './src/recaptcha-manager';
-export { RecaptchaWidget, RecaptchaWidgetInterface, } from './src/recaptcha-widget';
+export { RecaptchaWidget, RecaptchaWidgetInterface, RecaptchaWidgetConfig, } from './src/recaptcha-widget';

dist/src/recaptcha-manager.js

@@ -16,3 +16,3 @@ import { LazyLoaderService, } from '@internetarchive/lazy-loader-service';
         if (!key) {
-            throw new Error('RecaptchaManager requires a site key');
+            throw new Error('The reCaptcha widget requires a site key');
         }
@@ -19,0 +19,0 @@ const cached = this.recaptchaCache[key];

dist/src/recaptcha-widget.js

@@ -25,2 +25,3 @@ /**
         }
+        this.isExecuting = true;
         return new Promise((resolve, reject) => {
@@ -27,0 +28,0 @@ this.executionSuccessBlock = (token) => {

dist/test/mock-grecaptcha.js

@@ -1,99 +0,62 @@
-"use strict";
-// /* eslint-disable camelcase */
-// /* eslint-disable @typescript-eslint/no-explicit-any */
-// /* eslint-disable @typescript-eslint/no-unused-vars */
-// export enum MockGrecaptchaMode {
-//   Success,
-//   Expired,
-//   Error,
-// }
-// export class MockGrecaptcha implements ReCaptchaV2.ReCaptcha {
-//   renderCalled = false;
-//   executeCalled = false;
-//   resetCalled = false;
-//   getResponseCalled = false;
-//   mode: MockGrecaptchaMode;
-//   addDelay: boolean;
-//   callback?: (response: string) => void;
-//   'expired-callback'?: () => void;
-//   'error-callback'?: () => void;
-//   render(
-//     container: string | HTMLElement,
-//     parameters?: ReCaptchaV2.Parameters | undefined,
-//     inherit?: boolean | undefined,
-//   ): number {
-//     this.callback = parameters?.callback?.bind(this);
-//     this['error-callback'] = parameters?.['error-callback']?.bind(this);
-//     this['expired-callback'] = parameters?.['expired-callback']?.bind(this);
-//     this.renderCalled = true;
-//     return 1;
-//   }
-//   reset(opt_widget_id?: number | undefined): void {
-//     this.resetCalled = true;
-//   }
-//   getResponse(opt_widget_id?: number | undefined): string {
-//     this.getResponseCalled = true;
-//     return 'foo';
-//   }
-//   // execute(opt_widget_id?: number): void {
-//   //   this.executeCalled = true;
-//   //   if (this.addDelay) {
-//   //     setTimeout(this.callCallback, 100);
-//   //   } else {
-//   //     this.callCallback();
-//   //   }
-//   // }
-//   // /**
-//   //  * Programatically invoke the reCAPTCHA check. Used if the invisible reCAPTCHA is on a div instead of a button.
-//   //  * @param siteKey the key of your site
-//   //  * @param action the action
-//   //  *
-//   //  * @return a promise-like object containing the token
-//   //  */
-//   // async execute(siteKey: string, action: ReCaptchaV2.Action): Promise<string> {
-//   //   return '';
-//   // }
-//   // execute(opt_widget_id?: number): void {
-//   //   this.executeCalled = true;
-//   //   if (this.addDelay) {
-//   //     setTimeout(this.callCallback, 100);
-//   //   } else {
-//   //     this.callCallback();
-//   //   }
-//   // }
-//   // execute(opt_widget_id?: number): void {
-//   // }
-//   // async execute(siteKey: string, action: ReCaptchaV2.Action): PromiseLike<string> {
-//   //   return '';
-//   // }
-//   // async execute(siteKey?: any, action?: any): void | PromiseLike<string> {
-//   // }
-//   ready(callback: () => void): void {
-//   }
-//   private callCallback(): void {
-//     switch (this.mode) {
-//       case MockGrecaptchaMode.Success:
-//         if (this.callback) {
-//           this.callback('foo');
-//         }
-//         break;
-//       case MockGrecaptchaMode.Error:
-//         if (this['error-callback']) {
-//           this['error-callback']();
-//         }
-//         break;
-//       case MockGrecaptchaMode.Expired:
-//         if (this['expired-callback']) {
-//           this['expired-callback']();
-//         }
-//         break;
-//       default:
-//         break;
-//     }
-//   }
-//   constructor(mode: MockGrecaptchaMode, addDelay = false) {
-//     this.mode = mode;
-//     this.addDelay = addDelay;
-//   }
-// }
+/* eslint-disable camelcase */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+export class MockGrecaptcha {
+    constructor(options) {
+        var _a;
+        this.response = 'foo';
+        this.renderCalled = false;
+        this.executeCalled = false;
+        this.resetCallCount = 0;
+        this.getResponseCalled = false;
+        this.mode = options.mode;
+        this.addDelay = (_a = options.addDelay) !== null && _a !== void 0 ? _a : false;
+    }
+    render(container, parameters, inherit) {
+        var _a, _b, _c;
+        this.callback = (_a = parameters === null || parameters === void 0 ? void 0 : parameters.callback) === null || _a === void 0 ? void 0 : _a.bind(this);
+        this['error-callback'] = (_b = parameters === null || parameters === void 0 ? void 0 : parameters['error-callback']) === null || _b === void 0 ? void 0 : _b.bind(this);
+        this['expired-callback'] = (_c = parameters === null || parameters === void 0 ? void 0 : parameters['expired-callback']) === null || _c === void 0 ? void 0 : _c.bind(this);
+        this.renderCalled = true;
+        return 1;
+    }
+    reset(opt_widget_id) {
+        this.resetCallCount += 1;
+    }
+    getResponse(opt_widget_id) {
+        this.getResponseCalled = true;
+        return 'foo';
+    }
+    execute(opt_widget_id) {
+        this.executeCalled = true;
+        if (this.addDelay) {
+            setTimeout(this.callCallback.bind(this), 100);
+        }
+        else {
+            this.callCallback();
+        }
+    }
+    ready(callback) { }
+    callCallback() {
+        switch (this.mode) {
+            case 'success':
+                if (this.callback) {
+                    this.callback('foo');
+                }
+                break;
+            case 'error':
+                if (this['error-callback']) {
+                    this['error-callback']();
+                }
+                break;
+            case 'expired':
+                if (this['expired-callback']) {
+                    this['expired-callback']();
+                }
+                break;
+            default:
+                break;
+        }
+    }
+}
 //# sourceMappingURL=mock-grecaptcha.js.map

dist/test/recaptcha-manager.test.js

@@ -1,69 +0,138 @@
-"use strict";
-// import { html, fixture, expect } from '@open-wc/testing';
-// import { MockGrecaptcha, MockGrecaptchaMode } from './mock-grecaptcha';
-// import { RecaptchaManager } from '../src/recaptcha-manager';
-describe('ReCaptcha Manager', () => {
-    // it('can execute the recaptcha like a Promise', async () => {
-    //   const recaptchaElement = (await fixture(html`
-    //     <div></div>
-    //   `)) as HTMLElement;
-    //   const mockGrecaptcha = new MockGrecaptcha(MockGrecaptchaMode.Success);
-    //   const recaptchaManager = new RecaptchaManager({
-    //     grecaptchaLibrary: mockGrecaptcha,
-    //     siteKey: '123',
-    //   });
-    //   recaptchaManager.setup(recaptchaElement, 1, 'dark', 'image');
-    //   const result = await recaptchaManager.execute();
-    //   expect(result).to.equal('foo');
-    // });
-    // it('can error properly like a Promise', async () => {
-    //   const recaptchaElement = (await fixture(html`
-    //     <div></div>
-    //   `)) as HTMLElement;
-    //   const mockGrecaptcha = new MockGrecaptcha(MockGrecaptchaMode.Error);
-    //   const recaptchaManager = new RecaptchaManager({
-    //     grecaptchaLibrary: mockGrecaptcha,
-    //     siteKey: '123',
-    //   });
-    //   recaptchaManager.setup(recaptchaElement, 1, 'dark', 'image');
-    //   try {
-    //     await recaptchaManager.execute();
-    //     expect.fail('should not get here');
-    //   } catch (error) {
-    //     expect(error).to.equal('error');
-    //   }
-    // });
-    // it('can expire properly like a Promise', async () => {
-    //   const recaptchaElement = (await fixture(html`
-    //     <div></div>
-    //   `)) as HTMLElement;
-    //   const mockGrecaptcha = new MockGrecaptcha(MockGrecaptchaMode.Expired);
-    //   const recaptchaManager = new RecaptchaManager({
-    //     grecaptchaLibrary: mockGrecaptcha,
-    //     siteKey: '123',
-    //   });
-    //   recaptchaManager.setup(recaptchaElement, 1, 'dark', 'image');
-    //   try {
-    //     await recaptchaManager.execute();
-    //     expect.fail('should not get here');
-    //   } catch (error) {
-    //     expect(error).to.equal('expired');
-    //   }
-    // });
-    // it('resets the captcha if execute() gets called more than once', async () => {
-    //   const recaptchaElement = (await fixture(html`
-    //     <div></div>
-    //   `)) as HTMLElement;
-    //   const mockGrecaptcha = new MockGrecaptcha(MockGrecaptchaMode.Success, true);
-    //   const recaptchaManager = new RecaptchaManager({
-    //     grecaptchaLibrary: mockGrecaptcha,
-    //     siteKey: '123',
-    //   });
-    //   recaptchaManager.setup(recaptchaElement, 1, 'dark', 'image');
-    //   recaptchaManager.execute();
-    //   expect(mockGrecaptcha.resetCalled).to.be.false;
-    //   recaptchaManager.execute();
-    //   expect(mockGrecaptcha.resetCalled).to.be.true;
-    // });
+import { expect } from '@open-wc/testing';
+import { MockGrecaptcha } from './mock-grecaptcha';
+import { RecaptchaManager } from '../src/recaptcha-manager';
+import { MockLazyLoaderService } from './mock-lazy-loader';
+const mockLazyLoader = new MockLazyLoaderService();
+describe('ReCaptcha Management', () => {
+    describe('ReCaptcha Manager', () => {
+        it('can return recaptchas', async () => {
+            const mockGrecaptcha = new MockGrecaptcha({
+                mode: 'success',
+            });
+            mockGrecaptcha.response = 'foo';
+            const recaptchaManager = new RecaptchaManager({
+                lazyLoader: mockLazyLoader,
+                grecaptchaLibrary: mockGrecaptcha,
+                defaultSiteKey: '123',
+            });
+            const recaptcha = await recaptchaManager.getRecaptchaWidget();
+            const result = await recaptcha.execute();
+            expect(result).to.equal('foo');
+        });
+        it('throws an error if no site key found', async () => {
+            const mockGrecaptcha = new MockGrecaptcha({
+                mode: 'success',
+            });
+            mockGrecaptcha.response = 'foo';
+            const recaptchaManager = new RecaptchaManager({
+                lazyLoader: mockLazyLoader,
+                grecaptchaLibrary: mockGrecaptcha,
+            });
+            try {
+                await recaptchaManager.getRecaptchaWidget();
+                expect.fail('should not get here');
+            }
+            catch (e) {
+                expect(e.message).to.equal('The reCaptcha widget requires a site key');
+            }
+        });
+        it('returns a cached version if one already exists for a given site key', async () => {
+            const mockGrecaptcha = new MockGrecaptcha({
+                mode: 'success',
+            });
+            mockGrecaptcha.response = 'foo';
+            const recaptchaManager = new RecaptchaManager({
+                lazyLoader: mockLazyLoader,
+                grecaptchaLibrary: mockGrecaptcha,
+                defaultSiteKey: '123',
+            });
+            const recaptcha1 = await recaptchaManager.getRecaptchaWidget();
+            const recaptcha2 = await recaptchaManager.getRecaptchaWidget();
+            expect(recaptcha1).to.equal(recaptcha2);
+        });
+        it('loads the recaptcha library if needed', async () => {
+            const recaptchaManager = new RecaptchaManager({
+                lazyLoader: mockLazyLoader,
+                defaultSiteKey: '123',
+            });
+            await recaptchaManager.getRecaptchaWidget();
+            const loadUrl = mockLazyLoader.loadScriptSrc;
+            expect(loadUrl === null || loadUrl === void 0 ? void 0 : loadUrl.includes('recaptcha/api.js?onload=grecaptchaLoadedCallback')).to.be.true;
+        });
+    });
+    describe('ReCaptcha Widget', () => {
+        it('can error properly like a Promise', async () => {
+            const mockGrecaptcha = new MockGrecaptcha({
+                mode: 'error',
+            });
+            const recaptchaManager = new RecaptchaManager({
+                lazyLoader: mockLazyLoader,
+                grecaptchaLibrary: mockGrecaptcha,
+                defaultSiteKey: '123',
+            });
+            const recaptcha = await recaptchaManager.getRecaptchaWidget();
+            try {
+                await recaptcha.execute();
+                expect.fail('should not get here');
+            }
+            catch (error) {
+                expect(error.message).to.equal('error');
+            }
+        });
+        it('can expire properly like a Promise', async () => {
+            const mockGrecaptcha = new MockGrecaptcha({
+                mode: 'expired',
+            });
+            const recaptchaManager = new RecaptchaManager({
+                lazyLoader: mockLazyLoader,
+                grecaptchaLibrary: mockGrecaptcha,
+                defaultSiteKey: '123',
+            });
+            const recaptcha = await recaptchaManager.getRecaptchaWidget();
+            try {
+                await recaptcha.execute();
+                expect.fail('should not get here');
+            }
+            catch (error) {
+                expect(error.message).to.equal('expired');
+            }
+        });
+        it('resets the captcha after execution', async () => {
+            const mockGrecaptcha = new MockGrecaptcha({
+                mode: 'success',
+                addDelay: true,
+            });
+            const recaptchaManager = new RecaptchaManager({
+                lazyLoader: mockLazyLoader,
+                grecaptchaLibrary: mockGrecaptcha,
+                defaultSiteKey: '123',
+            });
+            const recaptcha = await recaptchaManager.getRecaptchaWidget();
+            expect(mockGrecaptcha.resetCallCount).to.equal(0);
+            await recaptcha.execute();
+            expect(mockGrecaptcha.resetCallCount).to.equal(1);
+            await recaptcha.execute();
+            expect(mockGrecaptcha.resetCallCount).to.equal(2);
+        });
+        // there's no way to know if the user has dismissed the captcha so if another execution
+        // comes through while the captcha is still active, it will be reset
+        it('resets the captcha if another execution gets called', async () => {
+            const mockGrecaptcha = new MockGrecaptcha({
+                mode: 'success',
+                addDelay: true,
+            });
+            const recaptchaManager = new RecaptchaManager({
+                lazyLoader: mockLazyLoader,
+                grecaptchaLibrary: mockGrecaptcha,
+                defaultSiteKey: '123',
+            });
+            const recaptcha = await recaptchaManager.getRecaptchaWidget();
+            expect(mockGrecaptcha.resetCallCount).to.equal(0);
+            recaptcha.execute();
+            expect(mockGrecaptcha.resetCallCount).to.equal(0);
+            await recaptcha.execute();
+            expect(mockGrecaptcha.resetCallCount).to.equal(2);
+        });
+    });
 });
 //# sourceMappingURL=recaptcha-manager.test.js.map

index.ts

@@ -9,2 +9,3 @@ export {
   RecaptchaWidgetInterface,
+  RecaptchaWidgetConfig,
 } from './src/recaptcha-widget';

package.json

 {
   "name": "@internetarchive/recaptcha-manager",
-  "description": "A library that lets you lazy load and interact with reCaptcha more easily.",
+  "description": "A library that lets you lazy load and interact with reCaptcha.",
   "repository": {
@@ -10,3 +10,3 @@ "type": "git",
   "author": "Internet Archive",
-  "version": "0.0.1-alpha.4",
+  "version": "0.1.0",
   "main": "dist/index.js",
@@ -27,3 +27,3 @@ "module": "dist/index.js",
     "@internetarchive/lazy-loader-service": "^0.2.0",
-    "@types/grecaptcha": "^3.0.3"
+    "@types/grecaptcha": "^2"
   },
@@ -46,2 +46,3 @@ "devDependencies": {
     "madge": "^5.0.1",
+    "nanoevents": "^6.0.2",
     "prettier": "^2.4.1",
@@ -48,0 +49,0 @@ "sinon": "^12.0.1",

README.md

@@ -5,4 +5,33 @@ ![Build Status](https://github.com/internetarchive/iaux-recaptcha-manager/actions/workflows/ci.yml/badge.svg)
 
-A library to lazy load and more easily interact with reCaptcha
+A library to lazy load and interact with reCaptcha
 
+## Installation
+
+```shell
+> yarn add @internetarchive/recaptcha-manager
+```
+
+## Usage
+
+```ts
+const recaptchaManager = new RecaptchaManager({
+  defaultSiteKey: 'your-site-key',
+});
+
+// will load recaptcha library if it's not loaded
+const recaptchaWidget = await recaptchaManager.getRecaptchaWidget({
+  recaptchaParams: {
+    tabindex: 0,
+    theme: 'light',
+    type: 'image',
+  },
+});
+
+const token = await recaptchaWidget.execute();
+
+// submit token with your post and validate on the backend
+```
+
+For more usage examples, see `demo/app-root.ts` and `test/recaptcha-manager.test.ts`.
+
 ## Local Demo with `web-dev-server`
@@ -9,0 +38,0 @@ ```bash

src/recaptcha-manager.ts

@@ -41,3 +41,3 @@ import {
     if (!key) {
-      throw new Error('RecaptchaManager requires a site key');
+      throw new Error('The reCaptcha widget requires a site key');
     }
@@ -44,0 +44,0 @@

src/recaptcha-widget.ts

@@ -67,2 +67,4 @@ /**
 
+    this.isExecuting = true;
+
     return new Promise((resolve, reject) => {
@@ -69,0 +71,0 @@ this.executionSuccessBlock = (token: string): void => {

test/mock-grecaptcha.ts

@@ -1,124 +0,87 @@
-// /* eslint-disable camelcase */
-// /* eslint-disable @typescript-eslint/no-explicit-any */
-// /* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable camelcase */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unused-vars */
 
-// export enum MockGrecaptchaMode {
-//   Success,
-//   Expired,
-//   Error,
-// }
+export type MockGrecaptchaMode = 'success' | 'expired' | 'error';
 
-// export class MockGrecaptcha implements ReCaptchaV2.ReCaptcha {
-//   renderCalled = false;
+export class MockGrecaptcha implements ReCaptchaV2.ReCaptcha {
+  response = 'foo';
 
-//   executeCalled = false;
+  renderCalled = false;
 
-//   resetCalled = false;
+  executeCalled = false;
 
-//   getResponseCalled = false;
+  resetCallCount = 0;
 
-//   mode: MockGrecaptchaMode;
+  getResponseCalled = false;
 
-//   addDelay: boolean;
+  mode: MockGrecaptchaMode;
 
-//   callback?: (response: string) => void;
+  addDelay: boolean;
 
-//   'expired-callback'?: () => void;
+  callback?: (response: string) => void;
 
-//   'error-callback'?: () => void;
+  'expired-callback'?: () => void;
 
-//   render(
-//     container: string | HTMLElement,
-//     parameters?: ReCaptchaV2.Parameters | undefined,
-//     inherit?: boolean | undefined,
-//   ): number {
-//     this.callback = parameters?.callback?.bind(this);
-//     this['error-callback'] = parameters?.['error-callback']?.bind(this);
-//     this['expired-callback'] = parameters?.['expired-callback']?.bind(this);
-//     this.renderCalled = true;
-//     return 1;
-//   }
+  'error-callback'?: () => void;
 
-//   reset(opt_widget_id?: number | undefined): void {
-//     this.resetCalled = true;
-//   }
+  render(
+    container: string | HTMLElement,
+    parameters?: ReCaptchaV2.Parameters | undefined,
+    inherit?: boolean | undefined
+  ): number {
+    this.callback = parameters?.callback?.bind(this);
+    this['error-callback'] = parameters?.['error-callback']?.bind(this);
+    this['expired-callback'] = parameters?.['expired-callback']?.bind(this);
+    this.renderCalled = true;
+    return 1;
+  }
 
-//   getResponse(opt_widget_id?: number | undefined): string {
-//     this.getResponseCalled = true;
-//     return 'foo';
-//   }
+  reset(opt_widget_id?: number | undefined): void {
+    this.resetCallCount += 1;
+  }
 
-//   // execute(opt_widget_id?: number): void {
-//   //   this.executeCalled = true;
+  getResponse(opt_widget_id?: number | undefined): string {
+    this.getResponseCalled = true;
+    return 'foo';
+  }
 
-//   //   if (this.addDelay) {
-//   //     setTimeout(this.callCallback, 100);
-//   //   } else {
-//   //     this.callCallback();
-//   //   }
-//   // }
-//   // /**
-//   //  * Programatically invoke the reCAPTCHA check. Used if the invisible reCAPTCHA is on a div instead of a button.
-//   //  * @param siteKey the key of your site
-//   //  * @param action the action
-//   //  *
-//   //  * @return a promise-like object containing the token
-//   //  */
+  execute(opt_widget_id?: number): void {
+    this.executeCalled = true;
 
-//   // async execute(siteKey: string, action: ReCaptchaV2.Action): Promise<string> {
-//   //   return '';
-//   // }
+    if (this.addDelay) {
+      setTimeout(this.callCallback.bind(this), 100);
+    } else {
+      this.callCallback();
+    }
+  }
 
-//   // execute(opt_widget_id?: number): void {
-//   //   this.executeCalled = true;
+  ready(callback: () => void): void {}
 
-//   //   if (this.addDelay) {
-//   //     setTimeout(this.callCallback, 100);
-//   //   } else {
-//   //     this.callCallback();
-//   //   }
-//   // }
+  private callCallback(): void {
+    switch (this.mode) {
+      case 'success':
+        if (this.callback) {
+          this.callback('foo');
+        }
+        break;
+      case 'error':
+        if (this['error-callback']) {
+          this['error-callback']();
+        }
+        break;
+      case 'expired':
+        if (this['expired-callback']) {
+          this['expired-callback']();
+        }
+        break;
+      default:
+        break;
+    }
+  }
 
-//   // execute(opt_widget_id?: number): void {
-
-//   // }
-
-//   // async execute(siteKey: string, action: ReCaptchaV2.Action): PromiseLike<string> {
-//   //   return '';
-//   // }
-
-//   // async execute(siteKey?: any, action?: any): void | PromiseLike<string> {
-
-//   // }
-
-//   ready(callback: () => void): void {
-
-//   }
-
-//   private callCallback(): void {
-//     switch (this.mode) {
-//       case MockGrecaptchaMode.Success:
-//         if (this.callback) {
-//           this.callback('foo');
-//         }
-//         break;
-//       case MockGrecaptchaMode.Error:
-//         if (this['error-callback']) {
-//           this['error-callback']();
-//         }
-//         break;
-//       case MockGrecaptchaMode.Expired:
-//         if (this['expired-callback']) {
-//           this['expired-callback']();
-//         }
-//         break;
-//       default:
-//         break;
-//     }
-//   }
-
-//   constructor(mode: MockGrecaptchaMode, addDelay = false) {
-//     this.mode = mode;
-//     this.addDelay = addDelay;
-//   }
-// }
+  constructor(options: { mode: MockGrecaptchaMode; addDelay?: boolean }) {
+    this.mode = options.mode;
+    this.addDelay = options.addDelay ?? false;
+  }
+}

test/recaptcha-manager.test.ts

@@ -1,68 +0,151 @@
-// import { html, fixture, expect } from '@open-wc/testing';
-// import { MockGrecaptcha, MockGrecaptchaMode } from './mock-grecaptcha';
-// import { RecaptchaManager } from '../src/recaptcha-manager';
+import { expect } from '@open-wc/testing';
+import { MockGrecaptcha } from './mock-grecaptcha';
+import { RecaptchaManager } from '../src/recaptcha-manager';
+import { MockLazyLoaderService } from './mock-lazy-loader';
 
-describe('ReCaptcha Manager', () => {
-  // it('can execute the recaptcha like a Promise', async () => {
-  //   const recaptchaElement = (await fixture(html`
-  //     <div></div>
-  //   `)) as HTMLElement;
-  //   const mockGrecaptcha = new MockGrecaptcha(MockGrecaptchaMode.Success);
-  //   const recaptchaManager = new RecaptchaManager({
-  //     grecaptchaLibrary: mockGrecaptcha,
-  //     siteKey: '123',
-  //   });
-  //   recaptchaManager.setup(recaptchaElement, 1, 'dark', 'image');
-  //   const result = await recaptchaManager.execute();
-  //   expect(result).to.equal('foo');
-  // });
-  // it('can error properly like a Promise', async () => {
-  //   const recaptchaElement = (await fixture(html`
-  //     <div></div>
-  //   `)) as HTMLElement;
-  //   const mockGrecaptcha = new MockGrecaptcha(MockGrecaptchaMode.Error);
-  //   const recaptchaManager = new RecaptchaManager({
-  //     grecaptchaLibrary: mockGrecaptcha,
-  //     siteKey: '123',
-  //   });
-  //   recaptchaManager.setup(recaptchaElement, 1, 'dark', 'image');
-  //   try {
-  //     await recaptchaManager.execute();
-  //     expect.fail('should not get here');
-  //   } catch (error) {
-  //     expect(error).to.equal('error');
-  //   }
-  // });
-  // it('can expire properly like a Promise', async () => {
-  //   const recaptchaElement = (await fixture(html`
-  //     <div></div>
-  //   `)) as HTMLElement;
-  //   const mockGrecaptcha = new MockGrecaptcha(MockGrecaptchaMode.Expired);
-  //   const recaptchaManager = new RecaptchaManager({
-  //     grecaptchaLibrary: mockGrecaptcha,
-  //     siteKey: '123',
-  //   });
-  //   recaptchaManager.setup(recaptchaElement, 1, 'dark', 'image');
-  //   try {
-  //     await recaptchaManager.execute();
-  //     expect.fail('should not get here');
-  //   } catch (error) {
-  //     expect(error).to.equal('expired');
-  //   }
-  // });
-  // it('resets the captcha if execute() gets called more than once', async () => {
-  //   const recaptchaElement = (await fixture(html`
-  //     <div></div>
-  //   `)) as HTMLElement;
-  //   const mockGrecaptcha = new MockGrecaptcha(MockGrecaptchaMode.Success, true);
-  //   const recaptchaManager = new RecaptchaManager({
-  //     grecaptchaLibrary: mockGrecaptcha,
-  //     siteKey: '123',
-  //   });
-  //   recaptchaManager.setup(recaptchaElement, 1, 'dark', 'image');
-  //   recaptchaManager.execute();
-  //   expect(mockGrecaptcha.resetCalled).to.be.false;
-  //   recaptchaManager.execute();
-  //   expect(mockGrecaptcha.resetCalled).to.be.true;
-  // });
+const mockLazyLoader = new MockLazyLoaderService();
+
+describe('ReCaptcha Management', () => {
+  describe('ReCaptcha Manager', () => {
+    it('can return recaptchas', async () => {
+      const mockGrecaptcha = new MockGrecaptcha({
+        mode: 'success',
+      });
+      mockGrecaptcha.response = 'foo';
+      const recaptchaManager = new RecaptchaManager({
+        lazyLoader: mockLazyLoader,
+        grecaptchaLibrary: mockGrecaptcha,
+        defaultSiteKey: '123',
+      });
+      const recaptcha = await recaptchaManager.getRecaptchaWidget();
+      const result = await recaptcha.execute();
+      expect(result).to.equal('foo');
+    });
+
+    it('throws an error if no site key found', async () => {
+      const mockGrecaptcha = new MockGrecaptcha({
+        mode: 'success',
+      });
+      mockGrecaptcha.response = 'foo';
+      const recaptchaManager = new RecaptchaManager({
+        lazyLoader: mockLazyLoader,
+        grecaptchaLibrary: mockGrecaptcha,
+      });
+      try {
+        await recaptchaManager.getRecaptchaWidget();
+        expect.fail('should not get here');
+      } catch (e) {
+        expect((e as Error).message).to.equal(
+          'The reCaptcha widget requires a site key'
+        );
+      }
+    });
+
+    it('returns a cached version if one already exists for a given site key', async () => {
+      const mockGrecaptcha = new MockGrecaptcha({
+        mode: 'success',
+      });
+      mockGrecaptcha.response = 'foo';
+      const recaptchaManager = new RecaptchaManager({
+        lazyLoader: mockLazyLoader,
+        grecaptchaLibrary: mockGrecaptcha,
+        defaultSiteKey: '123',
+      });
+      const recaptcha1 = await recaptchaManager.getRecaptchaWidget();
+      const recaptcha2 = await recaptchaManager.getRecaptchaWidget();
+      expect(recaptcha1).to.equal(recaptcha2);
+    });
+
+    it('loads the recaptcha library if needed', async () => {
+      const recaptchaManager = new RecaptchaManager({
+        lazyLoader: mockLazyLoader,
+        defaultSiteKey: '123',
+      });
+      await recaptchaManager.getRecaptchaWidget();
+      const loadUrl = mockLazyLoader.loadScriptSrc;
+      expect(
+        loadUrl?.includes('recaptcha/api.js?onload=grecaptchaLoadedCallback')
+      ).to.be.true;
+    });
+  });
+
+  describe('ReCaptcha Widget', () => {
+    it('can error properly like a Promise', async () => {
+      const mockGrecaptcha = new MockGrecaptcha({
+        mode: 'error',
+      });
+      const recaptchaManager = new RecaptchaManager({
+        lazyLoader: mockLazyLoader,
+        grecaptchaLibrary: mockGrecaptcha,
+        defaultSiteKey: '123',
+      });
+      const recaptcha = await recaptchaManager.getRecaptchaWidget();
+
+      try {
+        await recaptcha.execute();
+        expect.fail('should not get here');
+      } catch (error) {
+        expect((error as Error).message).to.equal('error');
+      }
+    });
+
+    it('can expire properly like a Promise', async () => {
+      const mockGrecaptcha = new MockGrecaptcha({
+        mode: 'expired',
+      });
+      const recaptchaManager = new RecaptchaManager({
+        lazyLoader: mockLazyLoader,
+        grecaptchaLibrary: mockGrecaptcha,
+        defaultSiteKey: '123',
+      });
+      const recaptcha = await recaptchaManager.getRecaptchaWidget();
+
+      try {
+        await recaptcha.execute();
+        expect.fail('should not get here');
+      } catch (error) {
+        expect((error as Error).message).to.equal('expired');
+      }
+    });
+
+    it('resets the captcha after execution', async () => {
+      const mockGrecaptcha = new MockGrecaptcha({
+        mode: 'success',
+        addDelay: true,
+      });
+      const recaptchaManager = new RecaptchaManager({
+        lazyLoader: mockLazyLoader,
+        grecaptchaLibrary: mockGrecaptcha,
+        defaultSiteKey: '123',
+      });
+      const recaptcha = await recaptchaManager.getRecaptchaWidget();
+
+      expect(mockGrecaptcha.resetCallCount).to.equal(0);
+      await recaptcha.execute();
+      expect(mockGrecaptcha.resetCallCount).to.equal(1);
+      await recaptcha.execute();
+      expect(mockGrecaptcha.resetCallCount).to.equal(2);
+    });
+
+    // there's no way to know if the user has dismissed the captcha so if another execution
+    // comes through while the captcha is still active, it will be reset
+    it('resets the captcha if another execution gets called', async () => {
+      const mockGrecaptcha = new MockGrecaptcha({
+        mode: 'success',
+        addDelay: true,
+      });
+      const recaptchaManager = new RecaptchaManager({
+        lazyLoader: mockLazyLoader,
+        grecaptchaLibrary: mockGrecaptcha,
+        defaultSiteKey: '123',
+      });
+      const recaptcha = await recaptchaManager.getRecaptchaWidget();
+
+      expect(mockGrecaptcha.resetCallCount).to.equal(0);
+      recaptcha.execute();
+      expect(mockGrecaptcha.resetCallCount).to.equal(0);
+      await recaptcha.execute();
+      expect(mockGrecaptcha.resetCallCount).to.equal(2);
+    });
+  });
 });

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

160646

increased by9.61%

Number of package files

50

increased by8.7%

Lines of code

1736

increased by10.64%

Number of lines in readme file

86

increased by50.88%

Worsened metrics

Dev dependency count

20

increased by5.26%

Dependency changes

• + Added@types/grecaptcha@2.0.36(transitive)

• - Removed@types/grecaptcha@3.0.9(transitive)

• Updated@types/grecaptcha@^2