improved tests and improve state management

Author: dhewzulla

.npmignore

@@ -25,4 +25,5 @@ setupJest.js
 webpack.config.babel.js
 testUtil.js
 src/__tests__
+src/testUtil.js
 /package

jest.config.js

@@ -1,6 +1,6 @@
 module.exports = {
     verbose: true,
-    setupFiles:['jest-canvas-mock', "<rootDir>/setupJest.js"],
+    setupFiles:["<rootDir>/setupJest.js"],
     modulePathIgnorePatterns:['<rootDir>/src/__tests__/utils',
     '<rootDir>/package',
     '<rootDir>/dist']

package-lock.json

@@ -59,7 +59,6 @@
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-react": "^7.21.5",
     "eslint-plugin-react-hooks": "^4.2.0",
-    "jest-canvas-mock": "^2.3.0",
     "jest-dom": "^4.0.0",
     "jest": "^26.6.1",
     "prettier": "^2.1.2",
@@ -69,7 +68,7 @@
     "webpack": "^5.2.1"
   },
   "dependencies": {
-    "global-input-message": "^2.0.1",
+    "global-input-message": "^2.0.3",
     "qrcode.react": "^1.0.0"
   }
 }

package.json

@@ -1,82 +1,16 @@
-import { useGlobalInputApp, createMessageConnector, createInputReceivers } from '../index';
+import { useGlobalInputApp, createMessageConnector} from '../index';
 import { renderHook } from '@testing-library/react-hooks'
-
+import * as testUtil from '../testUtil';
 
 /**
  * compare initData to expectedInitData
  * @param {*} initData 
  * @param {*} expectedInitData 
  */
-expect.extend({
-    toBeSameInitData(received, expected) {
-        if (received.action !== expected.action) {
-            return {
-                pass: false,
-                message: () => `action = "${expected.action}" is expected but received "${received.action}" instead`
-            };
-        }
-        if (received.dataType !== expected.dataType) {
-            return {
-                pass: false,
-                message: () => `dataType = "${expected.dataType}" is expected but received "${received.dataType}" instead`
-            };
-        }
-        if (received.form.id !== expected.form.id) {
-            return {
-                pass: false,
-                message: () => `form.id = "${expected.form.id}" is expected but received "${received.form.id}" instead`
-            };
-        }
-        if (received.form.title !== expected.form.title) {
-            return {
-                pass: false,
-                message: () => `form.title = "${expected.form.title}" is expected but received "${received.form.title}" instead`
-            };
-        }
-        if (received.form.label !== expected.form.label) {
-            return {
-                pass: false,
-                message: () => `form.label = "${expected.form.label}" is expected but received "${received.form.label}" instead`
-            };
-        }
-        for (const [index, field] of expected.form.fields.entries()) {
-            if (field.label !== received.form.fields[index].label) {
-                return {
-                    pass: false,
-                    message: () => `form.fields[${index}].label = "${field.label}" is expected but received "${received.form.fields[index].label}" instead`
-                };
-            }
-            if (field.id !== received.form.fields[index].id) {
-                return {
-                    pass: false,
-                    message: () => `form.fields[${index}].id = "${field.id}" is expected but received "${received.form.fields[index].id}" instead`
-                };
-            }
-            if (field.value !== received.form.fields[index].value) {
-                return {
-                    pass: false,
-                    message: () => `form.fields[${index}].value = "${field.value}" is expected but received "${received.form.fields[index].value}" instead`
-                };
-            }
-            if (field.nLines !== received.form.fields[index].nLines) {
-                return {
-                    pass: false,
-                    message: () => `form.fields[${index}].nLines = "${field.nLines}" is expected but received "${received.form.fields[index].nLines}" instead`
-                };
-            }
-        }
-
-        return {
-            pass: true,
-            message: () => `received initData contains the same data as in the expected initData`
-        };
-    }
-});
+expect.extend({toBeSameInitData:testUtil.toBeSameInitData});
 
 it("Device App and Mobile App should be able to communicate", async function () {
 
-
-
     const deviceConfig = {
         initData: {
             action: "input",
@@ -95,7 +29,7 @@ it("Device App and Mobile App should be able to communicate", async function ()
         }
     };
     const deviceApp = {
-        receiver: createInputReceivers(deviceConfig),//message receivers on the device side      
+        receiver: testUtil.createInputReceivers(deviceConfig),//message receivers on the device side      
         ui: deviceConfig.initData,
         hook:renderHook(() => useGlobalInputApp(deviceConfig)) //calls the hook
     }    
@@ -113,7 +47,7 @@ it("Device App and Mobile App should be able to communicate", async function ()
 
     const mobileApp = {
         con: createMessageConnector(), //creates a connector
-        receiver: createInputReceivers(), //create promise objects inside callbacks to make testing more intuitive.
+        receiver: testUtil.createInputReceivers(), //create promise objects inside callbacks to make testing more intuitive.
     };
     const { initData: initDataReceivedByMobile } = await mobileApp.con.connect(mobileApp.receiver.config, connectionCode) //mobile app connects to the device using the connectionCode that is obtained from the QR Code
     mobileApp.ui = initDataReceivedByMobile;  //mobile app display user interface from the initData obtained
@@ -156,7 +90,7 @@ it("Device App and Mobile App should be able to communicate", async function ()
             }
         }
     };
-    deviceApp.receiver = createInputReceivers(deviceConfig2); //create promise objects inside callbacks to make testing more intuitive.
+    deviceApp.receiver = testUtil.createInputReceivers(deviceConfig2); //create promise objects inside callbacks to make testing more intuitive.
     deviceApp.ui = deviceConfig2.initData;
 
     deviceApp.hook.result.current.sendInitData(deviceApp.ui); //device app sends a new mobile user interface