Merge a188a9a into d49e44c

antokara · Jun 14, 2020 · e2a7e86 · e2a7e86
2 parents d49e44c + a188a9a
commit e2a7e86
Show file tree

Hide file tree

Showing 13 changed files with 298 additions and 89 deletions.
diff --git a/dev/index.tsx b/dev/index.tsx
@@ -12,6 +12,7 @@ import { render } from 'react-dom';
 
 // app state
 interface IState {
+  providerVisible: boolean;
   v2TokenA: string | undefined;
   v2ExpiredA: boolean;
   v2ErrorA: boolean;
@@ -34,11 +35,13 @@ interface IState {
 class App extends React.PureComponent<{}, IState> {
   public constructor(props: {}) {
     super(props);
+    this.toggleProvider = this.toggleProvider.bind(this);
     this.v2CallbackA = this.v2CallbackA.bind(this);
     this.v2CallbackB = this.v2CallbackB.bind(this);
     this.v3CallbackA = this.v3CallbackA.bind(this);
     this.v3CallbackB = this.v3CallbackB.bind(this);
     this.state = {
+      providerVisible: true,
       v2TokenA: undefined,
       v2ExpiredA: false,
       v2ErrorA: false,
@@ -66,6 +69,7 @@ class App extends React.PureComponent<{}, IState> {
 
   public render(): React.ReactNode {
     const {
+      providerVisible,
       v2TokenA,
       v2ExpiredA,
       v2ErrorA,
@@ -94,56 +98,61 @@ class App extends React.PureComponent<{}, IState> {
     }
 
     return (
-      <ReCaptchaProvider
-        siteKeyV2={process.env.RE_CAPTCHA_V2_SITE_KEY}
-        siteKeyV3={process.env.RE_CAPTCHA_V3_SITE_KEY}
-      >
-        <div data-test="dummy wrapper to demonstrate react context">
-          <h1>my demo app</h1>
-
-          <hr />
-          <h2>ReCaptcha V2 - A</h2>
-          <ReCaptchaV2
-            id="my-id"
-            className="test"
-            data-test-id="my-test-id"
-            callback={this.v2CallbackA}
-            theme={EReCaptchaV2Theme.Light}
-            size={EReCaptchaV2Size.Normal}
-          />
-          <h6>Token: {v2TokenA}</h6>
-          <h6>Expired: {v2ExpiredA ? 'yes' : 'no'}</h6>
-          <h6>Error: {v2ErrorA ? 'yes' : 'no'}</h6>
-
-          <hr />
-          <h2>ReCaptcha V2 - B (delayed render)</h2>
-          {v2VisibleB && (
-            <ReCaptchaV2
-              callback={this.v2CallbackB}
-              theme={EReCaptchaV2Theme.Dark}
-              size={EReCaptchaV2Size.Compact}
-              tabindex={0}
-            />
-          )}
-          <h6>Token: {v2TokenB}</h6>
-          <h6>Expired: {v2ExpiredB ? 'yes' : 'no'}</h6>
-          <h6>Error: {v2ErrorB ? 'yes' : 'no'}</h6>
-
-          <hr />
-          <h2>ReCaptcha V3 - ActionA</h2>
-          <ReCaptchaV3 action="actionA" callback={this.v3CallbackA} />
-          <h3>Retrieving: {v3RetrievingA ? 'yes' : 'no'}</h3>
-          <h6>Token: {v3TokenA}</h6>
-          {RefreshTokenA}
-
-          <hr />
-          <h2>ReCaptcha V3 - ActionB</h2>
-          <ReCaptchaV3 action="actionB" callback={this.v3CallbackB} />
-          <h3>Retrieving: {v3RetrievingB ? 'yes' : 'no'}</h3>
-          <h6>Token: {v3TokenB}</h6>
-          {RefreshTokenB}
-        </div>
-      </ReCaptchaProvider>
+      <>
+        <button onClick={this.toggleProvider}>toggle provider</button>
+        {providerVisible && (
+          <ReCaptchaProvider
+            siteKeyV2={process.env.RE_CAPTCHA_V2_SITE_KEY}
+            siteKeyV3={process.env.RE_CAPTCHA_V3_SITE_KEY}
+          >
+            <div data-test="dummy wrapper to demonstrate react context">
+              <h1>my demo app</h1>
+
+              <hr />
+              <h2>ReCaptcha V2 - A</h2>
+              <ReCaptchaV2
+                id="my-id"
+                className="test"
+                data-test-id="my-test-id"
+                callback={this.v2CallbackA}
+                theme={EReCaptchaV2Theme.Light}
+                size={EReCaptchaV2Size.Normal}
+              />
+              <h6>Token: {v2TokenA}</h6>
+              <h6>Expired: {v2ExpiredA ? 'yes' : 'no'}</h6>
+              <h6>Error: {v2ErrorA ? 'yes' : 'no'}</h6>
+
+              <hr />
+              <h2>ReCaptcha V2 - B (delayed render)</h2>
+              {v2VisibleB && (
+                <ReCaptchaV2
+                  callback={this.v2CallbackB}
+                  theme={EReCaptchaV2Theme.Dark}
+                  size={EReCaptchaV2Size.Compact}
+                  tabindex={0}
+                />
+              )}
+              <h6>Token: {v2TokenB}</h6>
+              <h6>Expired: {v2ExpiredB ? 'yes' : 'no'}</h6>
+              <h6>Error: {v2ErrorB ? 'yes' : 'no'}</h6>
+
+              <hr />
+              <h2>ReCaptcha V3 - ActionA</h2>
+              <ReCaptchaV3 action="actionA" callback={this.v3CallbackA} />
+              <h3>Retrieving: {v3RetrievingA ? 'yes' : 'no'}</h3>
+              <h6>Token: {v3TokenA}</h6>
+              {RefreshTokenA}
+
+              <hr />
+              <h2>ReCaptcha V3 - ActionB</h2>
+              <ReCaptchaV3 action="actionB" callback={this.v3CallbackB} />
+              <h3>Retrieving: {v3RetrievingB ? 'yes' : 'no'}</h3>
+              <h6>Token: {v3TokenB}</h6>
+              {RefreshTokenB}
+            </div>
+          </ReCaptchaProvider>
+        )}
+      </>
     );
   }
 
@@ -220,6 +229,16 @@ class App extends React.PureComponent<{}, IState> {
       });
     }
   }
+
+  /**
+   * toggles the visibility of the provider to trigger unmount/mount on demand for testing
+   */
+  private toggleProvider(): void {
+    const { providerVisible } = this.state;
+    this.setState({
+      providerVisible: !providerVisible
+    });
+  }
 }
 
 render(<App />, document.getElementById('root'));
diff --git a/dev/package-lock.json b/dev/package-lock.json
diff --git a/dev/package.json b/dev/package.json
@@ -37,7 +37,7 @@
     "webpack-dev-server": "^3.11.0"
   },
   "dependencies": {
-    "@types/react": "^16.9.35",
+    "@types/react": "^16.9.36",
     "@types/react-dom": "^16.9.8",
     "react": "^16.13.1",
     "react-dom": "^16.13.1"

diff --git a/examples/javascript/package-lock.json b/examples/javascript/package-lock.json
diff --git a/examples/javascript/package.json b/examples/javascript/package.json
@@ -35,7 +35,7 @@
   },
   "dependencies": {
     "@types/dotenv": "^8.2.0",
-    "@types/react": "^16.9.35",
+    "@types/react": "^16.9.36",
     "@types/react-dom": "^16.9.8",
     "dotenv": "^8.2.0",
     "dotenv-webpack": "^1.8.0",

diff --git a/examples/typescript/package-lock.json b/examples/typescript/package-lock.json
diff --git a/examples/typescript/package.json b/examples/typescript/package.json
@@ -33,7 +33,7 @@
   },
   "dependencies": {
     "@types/dotenv": "^8.2.0",
-    "@types/react": "^16.9.35",
+    "@types/react": "^16.9.36",
     "@types/react-dom": "^16.9.8",
     "dotenv": "^8.2.0",
     "dotenv-webpack": "^1.8.0",

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -49,10 +49,10 @@
     "@semantic-release/git": "^9.0.0",
     "@semantic-release/github": "^7.0.7",
     "@semantic-release/npm": "^7.0.5",
-    "@testing-library/dom": "^7.10.1",
-    "@testing-library/jest-dom": "^5.9.0",
+    "@testing-library/dom": "^7.14.2",
+    "@testing-library/jest-dom": "^5.10.0",
     "@testing-library/react": "^10.2.1",
-    "@types/jest": "^25.2.3",
+    "@types/jest": "^26.0.0",
     "@types/react-dom": "^16.9.8",
     "coveralls": "^3.1.0",
     "jest": "^26.0.1",
@@ -71,7 +71,7 @@
     "webpack-cli": "^3.3.11"
   },
   "dependencies": {
-    "@types/react": "^16.9.35",
+    "@types/react": "^16.9.36",
     "react": "^16.13.1"
   },
   "prettier": {