chore: fix jest unit tests (#917)

* chore: Fix frontend unit tests

* WIP fix unit tests for API

* cleaup and finish test fixes

* fix typescript fussiness

* Add github action to run Jest unit tests

* BUuld translations in CI

* Fix commented out tests

.github/workflows/android.yml

@@ -30,6 +30,26 @@ jobs:
         run: |
           cd src/backend
           npm test
+  frontend-tests:
+    if: github.event.pull_request.draft == false
+    name: frontend tests
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+      - name: Node
+        uses: actions/setup-node@v2
+        with:
+          node-version: "12.16.3"
+      - name: Npm Install
+        run: |
+          npm ci
+      - name: Build translations
+        run: |
+          npm run build:translations
+      - name: Frontend Tests
+        run: |
+          npm test
   e2e-build:
     if: github.event.pull_request.draft == false
     name: e2e build

__mocks__/@bugsnag/react-native.js

@@ -0,0 +1,9 @@
+export default {
+  start: jest.fn(),
+  leaveBreadcrumb: jest.fn((...args) => {
+    // console.log.apply(console, ["leaveBreadcrumb", ...args])
+  }),
+  notify: jest.fn((...args) => {
+    // console.log.apply(console, ["notify", ...args]);
+  }),
+};

__mocks__/nodejs-mobile-react-native.js

@@ -1,6 +1,8 @@
-module.exports = {
-  channel: {
-    addListener: () => {},
-    removeListener: () => {}
-  }
+import EventEmitter from "react-native/Libraries/vendor/emitter/EventEmitter";
+
+export default {
+  start: jest.fn(),
+  channel: Object.assign(new EventEmitter(), {
+    post: jest.fn(),
+  }),
 };

__mocks__/react-native-fs.js

@@ -1,14 +1,18 @@
 /* eslint-env jest/globals */
 const mockedRNFS = {
-  unlink: jest.fn()
+  unlink: jest.fn(),
 };
 
 Object.defineProperty(mockedRNFS, "ExternalDirectoryPath", {
-  get: jest.fn(() => "__ExternalDirectoryPath__")
+  get: jest.fn(() => "__ExternalDirectoryPath__"),
 });
 
 Object.defineProperty(mockedRNFS, "DocumentDirectoryPath", {
-  get: jest.fn(() => "__DocumentDirectoryPath__")
+  get: jest.fn(() => "__DocumentDirectoryPath__"),
+});
+
+Object.defineProperty(mockedRNFS, "CachesDirectoryPath", {
+  get: jest.fn(() => "__CachesDirectoryPath__"),
 });
 
 module.exports = mockedRNFS;

jest/setup.js

@@ -1,5 +1,5 @@
 /* eslint-env jest/globals */
-
+import mockRNDeviceInfo from "react-native-device-info/jest/react-native-device-info-mock";
 import "react-native-gesture-handler/jestSetup";
 
 jest.mock("react-native-reanimated", () => {
@@ -12,8 +12,10 @@ jest.mock("react-native-reanimated", () => {
   return Reanimated;
 });
 
-// Silence the warning: Animated: `useNativeDriver` is not supported because the native animated module is missing
-jest.mock("react-native/Libraries/Animated/src/NativeAnimatedHelper");
-
 // As of react-native@0.64.X file has moved
 // jest.mock("react-native/Libraries/Animated/NativeAnimatedHelper");
+
+jest.mock("react-native-device-info", () => mockRNDeviceInfo);
+jest.mock("../src/frontend/lib/AppInfo.ts");
+jest.mock("@bugsnag/react-native");
+jest.mock("ky");

package.json

@@ -68,6 +68,7 @@
     "mapeo-schema": "^2.0.2",
     "nodejs-mobile-react-native": "^0.6.3",
     "p-is-promise": "^4.0.0",
+    "p-timeout": "^4.1.0",
     "patch-package": "^6.4.7",
     "path": "^0.12.7",
     "prop-types": "^15.7.2",
@@ -116,6 +117,7 @@
     "@digidem/extract-react-intl-messages": "^2.0.2",
     "@react-native-community/cli": "^6.2.0",
     "@react-native-community/eslint-config": "^2.0.0",
+    "@sinonjs/fake-timers": "^8.1.0",
     "@storybook/addon-actions": "^5.3.19",
     "@storybook/addon-info": "^5.3.19",
     "@storybook/addon-links": "^5.3.19",
@@ -138,6 +140,7 @@
     "@types/react-native-vector-icons": "^6.4.8",
     "@types/react-test-renderer": "^17.0.1",
     "@types/shallowequal": "^1.1.1",
+    "@types/sinonjs__fake-timers": "^8.1.1",
     "@types/utm": "^1.1.1",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^26.6.3",

src/frontend/AppLoading.tsx

@@ -28,13 +28,13 @@ export const AppLoading = ({ children }: React.PropsWithChildren<{}>) => {
   const serverStatus = useServerStatus();
 
   React.useEffect(() => {
-    const timeoutId = window.setTimeout(() => {
+    const timeoutId = setTimeout(() => {
       SplashScreen.hide();
       log("hiding splashscreen");
     }, 1000);
 
     return () => {
-      window.clearTimeout(timeoutId);
+      clearTimeout(timeoutId);
       SplashScreen.hide();
     };
   }, []);

src/frontend/__mocks__/api.js

@@ -30,5 +30,5 @@ export default {
   getConfigMessages: () => {
     return jest.fn(() => Promise.resolve());
   },
-  getObservations: jest.fn(() => Promise.resolve([])),
+  getObservations: () => jest.fn(() => Promise.resolve([])),
 };