@applicaster/quick-brick-core 15.0.0-rc.98 → 15.1.0-rc.1

package/App/NavigationProvider/__tests__/navigationProvider.test.tsx

@@ -1,16 +1,13 @@
 import React from "react";
 import { View } from "react-native";
+import { act, create } from "react-test-renderer";
+import { createStore } from "redux";
+import { Provider } from "react-redux";
 
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
-import { NavigationProvider } from "../NavigationProvider";
-
 import { getByTestId } from "@applicaster/zapp-react-native-utils/testUtils/getByTestId";
-import { renderWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";
-import { act } from "@testing-library/react-native";
-
-jest.useFakeTimers({
-  legacyFakeTimers: true,
-});
+// @TODO @szhigunov to complete the migration to @testing-library/react-native
+// import { act, waitFor } from "@testing-library/react-native";
 
 const rivers = {
   A1234: {
@@ -30,20 +27,20 @@ const rivers = {
     ui_components: [],
     hooks: {
       postload_plugins: [],
-      // preload_plugins: [
-      //   {
-      //     screen_id: "hook_screen",
-      //     identifier: "test-hook",
-      //     type: "general",
-      //     weight: 7,
-      //   },
-      //   {
-      //     screen_id: "hook_screen2",
-      //     identifier: "test-hook2",
-      //     type: "general",
-      //     weight: 7,
-      //   },
-      // ],
+      preload_plugins: [
+        {
+          screen_id: "hook_screen",
+          identifier: "test-hook",
+          type: "general",
+          weight: 7,
+        },
+        {
+          screen_id: "hook_screen2",
+          identifier: "test-hook2",
+          type: "general",
+          weight: 7,
+        },
+      ],
     },
   },
   D6543: {
@@ -84,9 +81,13 @@ const rivers = {
   },
 };
 
-jest.mock("@applicaster/zapp-react-native-redux", () => ({
-  ...jest.requireActual("@applicaster/zapp-react-native-redux"),
-  usePickFromState: jest.fn(() => ({})),
+jest.mock("@applicaster/zapp-react-native-redux/hooks", () => ({
+  usePickFromState: jest.fn(() => ({
+    appData: { layoutVersion: "v2" },
+    rivers,
+    plugins: [],
+    appState: { appLaunched: true },
+  })),
   useContentTypes: jest.fn(() => ({})),
 }));
 
@@ -106,6 +107,8 @@ jest.mock("@applicaster/zapp-react-native-utils/reactHooks/connection", () => ({
   })),
 }));
 
+const { NavigationProvider } = require("../NavigationProvider");
+
 // eslint-disable-next-line react/prop-types
 const HookComponent = ({ callback, payload }: Props) => {
   if (payload?.id === "D6543") {
@@ -151,13 +154,18 @@ const failingHook = {
   name: "failing hook",
 };
 
-const store = {
+// const store = {
+//   rivers,
+//   plugins: [hookPlugin, hookPlugin2, failingHook],
+// };
+
+const store = createStore(() => ({
   appData: { layoutVersion: "v1" },
-  contentTypes: {},
+  contentTypes: null,
   rivers,
   plugins: [hookPlugin, hookPlugin2, failingHook],
   appState: { appLaunched: true },
-};
+}));
 
 const ContextConsumer = () => {
   const { state, ...navigator } = useNavigation();
@@ -165,7 +173,6 @@ const ContextConsumer = () => {
   let renderHook;
 
   if (navigator.currentRoute.includes("/hooks/")) {
-    // @ts-ignore
     const { hookPlugin, payload, callback } = navigator.screenData;
     const Component = hookPlugin.module.Component;
 
@@ -185,21 +192,18 @@ const ContextConsumer = () => {
 
 const consoleSpy = jest.spyOn(console, "error").mockImplementation(() => {});
 
-const renderContextConsumer = (_store = store) =>
-  renderWithProviders(
-    <NavigationProvider>
-      <ContextConsumer />
-    </NavigationProvider>,
-    _store
+// const renderContextConsumer = (_store = store) => {
+//   return renderWithProviders(<ContextConsumer />, _store);
+// };
+
+const renderContextConsumer = (_store = store) => {
+  return create(
+    <Provider store={store}>
+      <NavigationProvider>
+        <ContextConsumer />
+      </NavigationProvider>
+    </Provider>
   );
-
-const getNavigatorValues = (wrapper) => {
-  const view = getByTestId(wrapper, "WrapperView");
-  const navigator = view.props.navigator;
-
-  const state = view.props.state;
-
-  return { navigator, state };
 };
 
 afterAll(() => {
@@ -209,12 +213,14 @@ afterAll(() => {
 describe("<NavigationProvider />", () => {
   let wrapper;
 
-  beforeEach(() => {
-    wrapper = renderContextConsumer();
-  });
-
   it("navigator contains expected properties", () => {
-    const { navigator } = getNavigatorValues(wrapper);
+    act(() => {
+      wrapper = renderContextConsumer();
+    });
+
+    const view = getByTestId(wrapper, "WrapperView");
+
+    const { navigator } = view.props;
     expect(navigator.activeRiver).toEqual(rivers.B4567);
     expect(navigator.currentRoute).toEqual("/river/B4567");
     expect(navigator.previousAction).toEqual("REPLACE");
@@ -230,131 +236,148 @@ describe("<NavigationProvider />", () => {
     });
   });
 
-  it("pushing a new route sets the data to that route", async () => {
+  describe("pushing a new route", () => {
     act(() => {
-      getNavigatorValues(wrapper).navigator.push(rivers.A1234);
+      wrapper = renderContextConsumer();
     });
 
-    const { navigator, state } = getNavigatorValues(wrapper);
+    it("sets the data to that route", async () => {
+      const view = getByTestId(wrapper, "WrapperView");
 
-    expect(navigator).toHaveProperty("activeRiver", rivers.A1234);
+      act(() => view.props.navigator.push(rivers.A1234));
 
-    expect(navigator).toHaveProperty(
-      "currentRoute",
-      "/river/B4567/river/A1234"
-    );
+      expect(view.props.navigator).toHaveProperty("activeRiver", rivers.A1234);
 
-    expect(navigator.screenData).toEqual({
-      ...rivers.A1234,
-      targetScreen: rivers.A1234,
-    });
+      expect(view.props.navigator).toHaveProperty(
+        "currentRoute",
+        "/river/B4567/river/A1234"
+      );
 
-    expect(state.stack.mainStack).toHaveLength(2);
+      expect(view.props.navigator.screenData).toEqual({
+        ...rivers.A1234,
+        targetScreen: rivers.A1234,
+      });
+
+      expect(view.props.state.stack.mainStack).toHaveLength(2);
+    });
   });
 
   describe("replacing a current route", () => {
+    act(() => {
+      wrapper = renderContextConsumer();
+    });
+
+    const view = getByTestId(wrapper, "WrapperView");
+
     it("sets the data to that route", () => {
-      act(() => getNavigatorValues(wrapper).navigator.replace(rivers.A1234));
-      const { navigator, state } = getNavigatorValues(wrapper);
-      expect(navigator).toHaveProperty("activeRiver", rivers.A1234);
+      act(() => view.props.navigator.replace(rivers.A1234));
+      expect(view.props.navigator).toHaveProperty("activeRiver", rivers.A1234);
 
-      expect(navigator).toHaveProperty("currentRoute", "/river/A1234");
+      expect(view.props.navigator).toHaveProperty(
+        "currentRoute",
+        "/river/A1234"
+      );
 
-      expect(navigator.screenData).toEqual({
+      expect(view.props.navigator.screenData).toEqual({
         ...rivers.A1234,
         targetScreen: rivers.A1234,
       });
 
-      expect(state.stack.mainStack).toHaveLength(1);
+      expect(view.props.state.stack.mainStack).toHaveLength(1);
     });
   });
 
   describe("going back", () => {
     describe("when there is no previous route", () => {
+      act(() => {
+        wrapper = renderContextConsumer();
+      });
+
+      const view = getByTestId(wrapper, "WrapperView");
+
       it("returns false when calling canGoBack", () => {
         let result;
 
         act(() => {
-          result = getNavigatorValues(wrapper).navigator.canGoBack();
+          result = view.props.navigator.canGoBack();
         });
 
         expect(result).toBe(false);
       });
 
       it("stays on the current route", () => {
-        act(() => getNavigatorValues(wrapper).navigator.goBack());
-        const { navigator, state } = getNavigatorValues(wrapper);
+        act(() => view.props.navigator.goBack());
 
-        expect(navigator).toHaveProperty("activeRiver", rivers.B4567);
+        expect(view.props.navigator).toHaveProperty(
+          "activeRiver",
+          rivers.B4567
+        );
 
-        expect(navigator).toHaveProperty("currentRoute", "/river/B4567");
+        expect(view.props.navigator).toHaveProperty(
+          "currentRoute",
+          "/river/B4567"
+        );
 
-        expect(navigator.screenData).toEqual({
+        expect(view.props.navigator.screenData).toEqual({
           ...rivers.B4567,
           targetScreen: rivers.B4567,
         });
 
-        expect(state.stack.mainStack).toHaveLength(1);
+        expect(view.props.state.stack.mainStack).toHaveLength(1);
       });
     });
 
     describe("when there is one route and we're going in a hook", () => {
-      beforeEach(() => {
-        getNavigatorValues(wrapper).navigator.replace(rivers.A1234);
-      });
-
-      it.skip("returns true when calling goBack()", () => {
+      act(() => {
         wrapper = renderContextConsumer();
+      });
 
-        act(() => {
-          getNavigatorValues(wrapper).navigator.replace(rivers.A1234);
-          getNavigatorValues(wrapper).navigator.push(rivers.C0987);
-        });
-
-        const { navigator, state } = getNavigatorValues(wrapper);
+      const view = getByTestId(wrapper, "WrapperView");
+      act(() => view.props.navigator.replace(rivers.A1234));
 
-        expect(state.stack.mainStack.length).toBeGreaterThan(1);
-        expect(navigator.canGoBack()).toEqual(true);
+      it("returns true when calling goBack()", () => {
+        act(() => view.props.navigator.push(rivers.C0987));
+        expect(view.props.state.stack.mainStack.length).toBeGreaterThan(1);
+        expect(view.props.navigator.canGoBack()).toEqual(true);
       });
 
       // this test is skipped as it doesn't work on this version of react
       // where we can't properly test async actions within components
       it.skip("returns to the previous route when the hook is cancelled", () => {
-        wrapper = renderContextConsumer();
+        act(() => view.props.navigator.replace(rivers.A1234));
+        act(() => view.props.navigator.push(rivers.D6543));
 
-        act(() => {
-          getNavigatorValues(wrapper).navigator.replace(rivers.A1234);
-          getNavigatorValues(wrapper).navigator.push(rivers.D6543);
-        });
-
-        const { navigator, state } = getNavigatorValues(wrapper);
-
-        expect(navigator).toHaveProperty("activeRiver", rivers.A1234);
+        expect(view.props.navigator).toHaveProperty(
+          "activeRiver",
+          rivers.A1234
+        );
 
-        expect(navigator).toHaveProperty("currentRoute", "/river/A1234");
+        expect(view.props.navigator).toHaveProperty(
+          "currentRoute",
+          "/river/A1234"
+        );
 
-        expect(navigator.screenData).toEqual(rivers.A1234);
-        expect(state.stack.mainStack).toHaveLength(1);
+        expect(view.props.navigator.screenData).toEqual(rivers.A1234);
+        expect(view.props.state.stack.mainStack).toHaveLength(1);
       });
     });
 
     describe("when there is a previous route", () => {
-      beforeEach(() => {
-        act(() => getNavigatorValues(wrapper).navigator.push(rivers.A1234));
-
-        act(() =>
-          getNavigatorValues(wrapper).navigator.push({
-            ...rivers.B4567,
-            id: "B4567-1",
-          })
-        );
+      act(() => {
+        wrapper = renderContextConsumer();
       });
 
+      const view = getByTestId(wrapper, "WrapperView");
+
+      act(() => view.props.navigator.push(rivers.A1234));
+
+      act(() => view.props.navigator.push({ ...rivers.B4567, id: "B4567-1" }));
+
       it("returns true when calling canGoBack", () => {
         let result;
 
         act(() => {
-          result = getNavigatorValues(wrapper).navigator.canGoBack();
+          result = view.props.navigator.canGoBack();
         });
 
         expect(result).toBeTruthy();
@@ -364,86 +387,74 @@ describe("<NavigationProvider />", () => {
         let result;
 
         act(() => {
-          result = getNavigatorValues(wrapper).navigator.canGoBack(
-            false,
-            "B4567-1"
-          );
+          result = view.props.navigator.canGoBack(false, "B4567-1");
         });
 
         expect(result).toBeTruthy();
 
         act(() => {
-          result = getNavigatorValues(wrapper).navigator.canGoBack(
-            false,
-            "A1234"
-          );
+          result = view.props.navigator.canGoBack(false, "A1234");
         });
 
         expect(result).toBeTruthy();
       });
 
       it("returns to the previous route", () => {
-        expect(getNavigatorValues(wrapper).state.stack.mainStack).toHaveLength(
-          3
-        );
+        expect(view.props.state.stack.mainStack).toHaveLength(3);
 
-        act(() => getNavigatorValues(wrapper).navigator.goBack());
+        act(() => view.props.navigator.goBack());
 
-        expect(getNavigatorValues(wrapper).navigator).toHaveProperty(
+        expect(view.props.navigator).toHaveProperty(
           "activeRiver",
           rivers.A1234
         );
 
-        expect(getNavigatorValues(wrapper).navigator).toHaveProperty(
+        expect(view.props.navigator).toHaveProperty(
           "currentRoute",
           "/river/B4567/river/A1234"
         );
 
-        expect(getNavigatorValues(wrapper).navigator.screenData).toEqual({
+        expect(view.props.navigator.screenData).toEqual({
           ...rivers.A1234,
           targetScreen: rivers.A1234,
         });
 
-        expect(getNavigatorValues(wrapper).state.stack.mainStack).toHaveLength(
-          2
-        );
+        expect(view.props.state.stack.mainStack).toHaveLength(2);
       });
     });
 
     describe("when there is a previous route and there are hooks", () => {
-      beforeEach(() => {
+      act(() => {
         wrapper = renderContextConsumer();
-        act(() => getNavigatorValues(wrapper).navigator.push(rivers.A1234));
-        act(() => getNavigatorValues(wrapper).navigator.push(rivers.C0987));
       });
 
+      const view = getByTestId(wrapper, "WrapperView");
+      act(() => view.props.navigator.push(rivers.A1234));
+      act(() => view.props.navigator.push(rivers.C0987));
+
       it("returns to the previous entry in the stack which is not a hook", () => {
-        expect(getNavigatorValues(wrapper).state.stack.mainStack).toHaveLength(
-          3
-        );
+        expect(view.props.state.stack.mainStack).toHaveLength(3);
 
-        expect(getNavigatorValues(wrapper).navigator).toHaveProperty(
+        expect(view.props.navigator).toHaveProperty(
           "currentRoute",
           "/river/B4567/river/A1234/river/C0987"
         );
 
-        expect(getNavigatorValues(wrapper).navigator.screenData).toMatchObject({
+        expect(view.props.navigator.screenData).toMatchObject({
           ...rivers.C0987,
           targetScreen: rivers.C0987,
         });
 
-        act(() => getNavigatorValues(wrapper).navigator.goBack());
+        act(() => view.props.navigator.goBack());
 
-        expect(getNavigatorValues(wrapper).state.stack.mainStack).toHaveLength(
-          2
-        );
+        expect(view.props.state.stack.mainStack).toHaveLength(2);
 
-        expect(getNavigatorValues(wrapper).navigator).toHaveProperty(
+        expect(view.props.navigator).toHaveProperty(
           "currentRoute",
           "/river/B4567/river/A1234"
         );
 
-        expect(getNavigatorValues(wrapper).navigator.screenData).toMatchObject({
+        expect(view.props.navigator.screenData).toMatchObject({
           ...rivers.A1234,
           targetScreen: rivers.A1234,
         });

package/App/NavigationProvider/navigator/selectors.ts

@@ -2,7 +2,6 @@ import * as R from "ramda";
 import { createSelector } from "@reduxjs/toolkit";
 
 import { getPathAttributes } from "@applicaster/zapp-react-native-utils/navigationUtils";
-import { selectPluginConfigurations } from "@applicaster/zapp-react-native-redux";
 
 const riverSelector = R.prop("rivers");
 const pathnameSelector = R.prop("pathname");
@@ -57,26 +56,11 @@ export const previousStackEntriesSelector = createSelector(
   )
 );
 
-export const lastEntrySelector = createSelector(
+export const lastEntrySelector = createSelector<
+  unknown,
+  unknown,
+  NavigationScreenState
+>(
   navigationStackSelector,
   R.compose(R.last, R.when(R.has("mainStack"), R.prop("mainStack")))
-) as (state: any) => any; // TODO: tighten type to NavigationScreenState
-
-// Selector extracting identifiers of plugins requiring startup execution
-export const startUpHookPluginIdentifiersSelector = createSelector(
-  selectPluginConfigurations,
-  (pluginConfigurations) => {
-    if (!pluginConfigurations) return [];
-
-    return Object.values(pluginConfigurations)
-      .filter(
-        (item) =>
-          item.plugin?.api &&
-          "require_startup_execution" in item.plugin.api &&
-          item.plugin.api.require_startup_execution === true &&
-          item.plugin.react_native === true &&
-          item.plugin.preload === true
-      )
-      .map((item: any) => item.plugin.identifier);
-  }
 );

package/App/NetworkStatusProvider/NetworkStatusProvider.tsx

@@ -3,7 +3,7 @@ import { Platform } from "react-native";
 import NetInfo, { NetInfoState } from "@react-native-community/netinfo";
 
 import { NetworkStatusContext } from "@applicaster/zapp-react-native-ui-components/Contexts/NetworkStatusContext";
-import { usePlugins } from "@applicaster/zapp-react-native-redux";
+import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import {
   callAllWith,
   getNetworkHooks,
@@ -29,7 +29,7 @@ export const NetworkStatusProvider = ({
 }: {
   children: React.ReactNode;
 }) => {
-  const plugins = usePlugins();
+  const { plugins } = usePickFromState("plugins");
   const [deviceStatus, setDeviceStatus] = React.useState(null);
   const currentNetInfo = NetInfo.useNetInfo();
 

package/App/NetworkStatusProvider/__tests__/NetworkStatusProvider.test.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import * as R from "ramda";
-import { renderHook, act } from "@testing-library/react-native";
+import { renderHook, act } from "@testing-library/react-hooks";
 import { NetworkStatusContext } from "@applicaster/zapp-react-native-ui-components/Contexts/NetworkStatusContext";
 import { NetworkStatusProvider } from "../NetworkStatusProvider";
 import { WrappedWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";
@@ -52,7 +52,7 @@ describe("NetworkStatusProvider", function () {
     expect(result.current).toStrictEqual(NetInfoMock);
   });
 
-  it("should call onConnectionLost callback when connection type changes to none", async function () {
+  it("should call onConnectionLost callback when connection type changes to none", function () {
     const onConnectionLost = jest.fn();
 
     const store = {
@@ -79,7 +79,7 @@ describe("NetworkStatusProvider", function () {
     expect(onConnectionLost).toBeCalledTimes(1);
   });
 
-  it("should call onConnectionRestored callback when connection type switches from none", async function () {
+  it("should call onConnectionRestored callback when connection type switches from none", function () {
     const onConnectionRestored = jest.fn();
 
     const store = {
@@ -116,7 +116,7 @@ describe("NetworkStatusProvider", function () {
     expect(onConnectionRestored).toBeCalledTimes(1);
   });
 
-  it("should call onConnectionTypeChanged callback when connection type changes", async function () {
+  it("should call onConnectionTypeChanged callback when connection type changes", function () {
     const onConnectionTypeChanged = jest.fn();
 
     const store = {

package/App/__tests__/createQuickBrickApp.test.js

@@ -2,7 +2,7 @@
 import * as React from "react";
 import { render } from "@testing-library/react-native";
 import { Provider } from "react-redux";
-import { thunk } from "redux-thunk";
+import thunk from "redux-thunk";
 import configureStore from "redux-mock-store";
 
 jest.mock(

package/App/appRemoteDataLoader/index.tsx

@@ -3,7 +3,7 @@ import * as React from "react";
 import { getRemoteContextData } from "../remoteContextReloader/getRemoteContextData";
 
 import { coreAppLogger } from "../logger";
-import { UnknownAction, Dispatch } from "@reduxjs/toolkit";
+import { AnyAction, Dispatch } from "@reduxjs/toolkit";
 import { isAndroidPlatform } from "@applicaster/zapp-react-native-utils/reactUtils";
 
 const logger = coreAppLogger.addSubsystem("AppRemoteDataLoader");
@@ -27,7 +27,7 @@ export function appRemoteDataLoader(Component: ReactComponent<any>) {
     const [isDataLoaded, setIsDataLoaded] = React.useState(false);
 
     const loadRemoteConfigurationJSONs = async (
-      dispatch: Dispatch<UnknownAction>,
+      dispatch: Dispatch<AnyAction>,
       state
     ) => {
       if (!__DEV__ || process.env.ENABLE_REMOTE_DATA_IN_DEV === "true") {

package/App/remoteContextReloader/getRemoteContextData/getNativeRemoteContextData.ts

@@ -74,7 +74,7 @@ export async function getNativeRemoteContextData(
       );
   }
 
-  const apiVersion = layout?.layout?.api_version; // Taken from remote configuration
+  const apiVersion = layout?.layout?.["api_version"]; // Taken from remote configuration
 
   dispatch(AppData.actions.merge({ layoutVersion: apiVersion || "v1" }));
 

package/App/remoteContextReloader/helpers.ts

@@ -113,15 +113,15 @@ export async function prepareRuntimeConfigurationUrls(
   }
 }
 
-export async function getPromiseForType<T = FileResponse>(
+export async function getPromiseForType(
   key: string
-): Promise<T | never> {
+): Promise<FileResponse | never> {
   try {
     const response = await AppLoaderBridge?.getFile(key, null);
 
     return {
       [key]: JSON.parse(response),
-    } as T;
+    };
   } catch (e) {
     throw new Error("cannot retrieve configuration data for " + key);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-core",
-  "version": "15.0.0-rc.98",
+  "version": "15.1.0-rc.1",
   "description": "Core package for Applicaster's Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,13 +28,13 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "15.0.0-rc.98",
-    "@applicaster/quick-brick-core-plugins": "15.0.0-rc.98",
-    "@applicaster/zapp-pipes-v2-client": "15.0.0-rc.98",
-    "@applicaster/zapp-react-native-bridge": "15.0.0-rc.98",
-    "@applicaster/zapp-react-native-redux": "15.0.0-rc.98",
-    "@applicaster/zapp-react-native-ui-components": "15.0.0-rc.98",
-    "@applicaster/zapp-react-native-utils": "15.0.0-rc.98",
+    "@applicaster/applicaster-types": "15.1.0-rc.1",
+    "@applicaster/quick-brick-core-plugins": "15.1.0-rc.1",
+    "@applicaster/zapp-pipes-v2-client": "15.1.0-rc.1",
+    "@applicaster/zapp-react-native-bridge": "15.1.0-rc.1",
+    "@applicaster/zapp-react-native-redux": "15.1.0-rc.1",
+    "@applicaster/zapp-react-native-ui-components": "15.1.0-rc.1",
+    "@applicaster/zapp-react-native-utils": "15.1.0-rc.1",
     "atob": "^2.1.2",
     "axios": "^0.28.0",
     "btoa": "^1.2.1",