@applicaster/quick-brick-core 15.0.0-rc.8 → 15.0.0-rc.80

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

@@ -1,13 +1,16 @@
 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";
-// @TODO @szhigunov to complete the migration to @testing-library/react-native
-// import { act, waitFor } from "@testing-library/react-native";
+import { renderWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";
+import { act } from "@testing-library/react-native";
+
+jest.useFakeTimers({
+  legacyFakeTimers: true,
+});
 
 const rivers = {
   A1234: {
@@ -27,20 +30,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: {
@@ -81,13 +84,9 @@ const rivers = {
   },
 };
 
-jest.mock("@applicaster/zapp-react-native-redux/hooks", () => ({
-  usePickFromState: jest.fn(() => ({
-    appData: { layoutVersion: "v2" },
-    rivers,
-    plugins: [],
-    appState: { appLaunched: true },
-  })),
+jest.mock("@applicaster/zapp-react-native-redux", () => ({
+  ...jest.requireActual("@applicaster/zapp-react-native-redux"),
+  usePickFromState: jest.fn(() => ({})),
   useContentTypes: jest.fn(() => ({})),
 }));
 
@@ -107,8 +106,6 @@ 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") {
@@ -154,18 +151,13 @@ const failingHook = {
   name: "failing hook",
 };
 
-// const store = {
-//   rivers,
-//   plugins: [hookPlugin, hookPlugin2, failingHook],
-// };
-
-const store = createStore(() => ({
+const store = {
   appData: { layoutVersion: "v1" },
-  contentTypes: null,
+  contentTypes: {},
   rivers,
   plugins: [hookPlugin, hookPlugin2, failingHook],
   appState: { appLaunched: true },
-}));
+};
 
 const ContextConsumer = () => {
   const { state, ...navigator } = useNavigation();
@@ -173,6 +165,7 @@ const ContextConsumer = () => {
   let renderHook;
 
   if (navigator.currentRoute.includes("/hooks/")) {
+    // @ts-ignore
     const { hookPlugin, payload, callback } = navigator.screenData;
     const Component = hookPlugin.module.Component;
 
@@ -192,18 +185,21 @@ const ContextConsumer = () => {
 
 const consoleSpy = jest.spyOn(console, "error").mockImplementation(() => {});
 
-// const renderContextConsumer = (_store = store) => {
-//   return renderWithProviders(<ContextConsumer />, _store);
-// };
-
-const renderContextConsumer = (_store = store) => {
-  return create(
-    <Provider store={store}>
-      <NavigationProvider>
-        <ContextConsumer />
-      </NavigationProvider>
-    </Provider>
+const renderContextConsumer = (_store = store) =>
+  renderWithProviders(
+    <NavigationProvider>
+      <ContextConsumer />
+    </NavigationProvider>,
+    _store
   );
+
+const getNavigatorValues = (wrapper) => {
+  const view = getByTestId(wrapper, "WrapperView");
+  const navigator = view.props.navigator;
+
+  const state = view.props.state;
+
+  return { navigator, state };
 };
 
 afterAll(() => {
@@ -213,14 +209,12 @@ afterAll(() => {
 describe("<NavigationProvider />", () => {
   let wrapper;
 
-  it("navigator contains expected properties", () => {
-    act(() => {
-      wrapper = renderContextConsumer();
-    });
-
-    const view = getByTestId(wrapper, "WrapperView");
+  beforeEach(() => {
+    wrapper = renderContextConsumer();
+  });
 
-    const { navigator } = view.props;
+  it("navigator contains expected properties", () => {
+    const { navigator } = getNavigatorValues(wrapper);
     expect(navigator.activeRiver).toEqual(rivers.B4567);
     expect(navigator.currentRoute).toEqual("/river/B4567");
     expect(navigator.previousAction).toEqual("REPLACE");
@@ -236,148 +230,131 @@ describe("<NavigationProvider />", () => {
     });
   });
 
-  describe("pushing a new route", () => {
+  it("pushing a new route sets the data to that route", async () => {
     act(() => {
-      wrapper = renderContextConsumer();
+      getNavigatorValues(wrapper).navigator.push(rivers.A1234);
     });
 
-    it("sets the data to that route", async () => {
-      const view = getByTestId(wrapper, "WrapperView");
+    const { navigator, state } = getNavigatorValues(wrapper);
 
-      act(() => view.props.navigator.push(rivers.A1234));
+    expect(navigator).toHaveProperty("activeRiver", rivers.A1234);
 
-      expect(view.props.navigator).toHaveProperty("activeRiver", rivers.A1234);
+    expect(navigator).toHaveProperty(
+      "currentRoute",
+      "/river/B4567/river/A1234"
+    );
 
-      expect(view.props.navigator).toHaveProperty(
-        "currentRoute",
-        "/river/B4567/river/A1234"
-      );
-
-      expect(view.props.navigator.screenData).toEqual({
-        ...rivers.A1234,
-        targetScreen: rivers.A1234,
-      });
-
-      expect(view.props.state.stack.mainStack).toHaveLength(2);
+    expect(navigator.screenData).toEqual({
+      ...rivers.A1234,
+      targetScreen: rivers.A1234,
     });
+
+    expect(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(() => view.props.navigator.replace(rivers.A1234));
-      expect(view.props.navigator).toHaveProperty("activeRiver", rivers.A1234);
+      act(() => getNavigatorValues(wrapper).navigator.replace(rivers.A1234));
+      const { navigator, state } = getNavigatorValues(wrapper);
+      expect(navigator).toHaveProperty("activeRiver", rivers.A1234);
 
-      expect(view.props.navigator).toHaveProperty(
-        "currentRoute",
-        "/river/A1234"
-      );
+      expect(navigator).toHaveProperty("currentRoute", "/river/A1234");
 
-      expect(view.props.navigator.screenData).toEqual({
+      expect(navigator.screenData).toEqual({
         ...rivers.A1234,
         targetScreen: rivers.A1234,
       });
 
-      expect(view.props.state.stack.mainStack).toHaveLength(1);
+      expect(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 = view.props.navigator.canGoBack();
+          result = getNavigatorValues(wrapper).navigator.canGoBack();
         });
 
         expect(result).toBe(false);
       });
 
       it("stays on the current route", () => {
-        act(() => view.props.navigator.goBack());
+        act(() => getNavigatorValues(wrapper).navigator.goBack());
+        const { navigator, state } = getNavigatorValues(wrapper);
 
-        expect(view.props.navigator).toHaveProperty(
-          "activeRiver",
-          rivers.B4567
-        );
+        expect(navigator).toHaveProperty("activeRiver", rivers.B4567);
 
-        expect(view.props.navigator).toHaveProperty(
-          "currentRoute",
-          "/river/B4567"
-        );
+        expect(navigator).toHaveProperty("currentRoute", "/river/B4567");
 
-        expect(view.props.navigator.screenData).toEqual({
+        expect(navigator.screenData).toEqual({
           ...rivers.B4567,
           targetScreen: rivers.B4567,
         });
 
-        expect(view.props.state.stack.mainStack).toHaveLength(1);
+        expect(state.stack.mainStack).toHaveLength(1);
       });
     });
 
     describe("when there is one route and we're going in a hook", () => {
-      act(() => {
-        wrapper = renderContextConsumer();
+      beforeEach(() => {
+        getNavigatorValues(wrapper).navigator.replace(rivers.A1234);
       });
 
-      const view = getByTestId(wrapper, "WrapperView");
-      act(() => view.props.navigator.replace(rivers.A1234));
+      it.skip("returns true when calling goBack()", () => {
+        wrapper = renderContextConsumer();
+
+        act(() => {
+          getNavigatorValues(wrapper).navigator.replace(rivers.A1234);
+          getNavigatorValues(wrapper).navigator.push(rivers.C0987);
+        });
 
-      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);
+        const { navigator, state } = getNavigatorValues(wrapper);
+
+        expect(state.stack.mainStack.length).toBeGreaterThan(1);
+        expect(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", () => {
-        act(() => view.props.navigator.replace(rivers.A1234));
-        act(() => view.props.navigator.push(rivers.D6543));
+        wrapper = renderContextConsumer();
 
-        expect(view.props.navigator).toHaveProperty(
-          "activeRiver",
-          rivers.A1234
-        );
+        act(() => {
+          getNavigatorValues(wrapper).navigator.replace(rivers.A1234);
+          getNavigatorValues(wrapper).navigator.push(rivers.D6543);
+        });
 
-        expect(view.props.navigator).toHaveProperty(
-          "currentRoute",
-          "/river/A1234"
-        );
+        const { navigator, state } = getNavigatorValues(wrapper);
 
-        expect(view.props.navigator.screenData).toEqual(rivers.A1234);
-        expect(view.props.state.stack.mainStack).toHaveLength(1);
+        expect(navigator).toHaveProperty("activeRiver", rivers.A1234);
+
+        expect(navigator).toHaveProperty("currentRoute", "/river/A1234");
+
+        expect(navigator.screenData).toEqual(rivers.A1234);
+        expect(state.stack.mainStack).toHaveLength(1);
       });
     });
 
     describe("when there is a previous route", () => {
-      act(() => {
-        wrapper = renderContextConsumer();
+      beforeEach(() => {
+        act(() => getNavigatorValues(wrapper).navigator.push(rivers.A1234));
+
+        act(() =>
+          getNavigatorValues(wrapper).navigator.push({
+            ...rivers.B4567,
+            id: "B4567-1",
+          })
+        );
       });
 
-      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 = view.props.navigator.canGoBack();
+          result = getNavigatorValues(wrapper).navigator.canGoBack();
         });
 
         expect(result).toBeTruthy();
@@ -387,74 +364,86 @@ describe("<NavigationProvider />", () => {
         let result;
 
         act(() => {
-          result = view.props.navigator.canGoBack(false, "B4567-1");
+          result = getNavigatorValues(wrapper).navigator.canGoBack(
+            false,
+            "B4567-1"
+          );
         });
 
         expect(result).toBeTruthy();
 
         act(() => {
-          result = view.props.navigator.canGoBack(false, "A1234");
+          result = getNavigatorValues(wrapper).navigator.canGoBack(
+            false,
+            "A1234"
+          );
         });
 
         expect(result).toBeTruthy();
       });
 
       it("returns to the previous route", () => {
-        expect(view.props.state.stack.mainStack).toHaveLength(3);
+        expect(getNavigatorValues(wrapper).state.stack.mainStack).toHaveLength(
+          3
+        );
 
-        act(() => view.props.navigator.goBack());
+        act(() => getNavigatorValues(wrapper).navigator.goBack());
 
-        expect(view.props.navigator).toHaveProperty(
+        expect(getNavigatorValues(wrapper).navigator).toHaveProperty(
           "activeRiver",
           rivers.A1234
         );
 
-        expect(view.props.navigator).toHaveProperty(
+        expect(getNavigatorValues(wrapper).navigator).toHaveProperty(
           "currentRoute",
           "/river/B4567/river/A1234"
         );
 
-        expect(view.props.navigator.screenData).toEqual({
+        expect(getNavigatorValues(wrapper).navigator.screenData).toEqual({
           ...rivers.A1234,
           targetScreen: rivers.A1234,
         });
 
-        expect(view.props.state.stack.mainStack).toHaveLength(2);
+        expect(getNavigatorValues(wrapper).state.stack.mainStack).toHaveLength(
+          2
+        );
       });
     });
 
     describe("when there is a previous route and there are hooks", () => {
-      act(() => {
+      beforeEach(() => {
         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(view.props.state.stack.mainStack).toHaveLength(3);
+        expect(getNavigatorValues(wrapper).state.stack.mainStack).toHaveLength(
+          3
+        );
 
-        expect(view.props.navigator).toHaveProperty(
+        expect(getNavigatorValues(wrapper).navigator).toHaveProperty(
           "currentRoute",
           "/river/B4567/river/A1234/river/C0987"
         );
 
-        expect(view.props.navigator.screenData).toMatchObject({
+        expect(getNavigatorValues(wrapper).navigator.screenData).toMatchObject({
           ...rivers.C0987,
           targetScreen: rivers.C0987,
         });
 
-        act(() => view.props.navigator.goBack());
+        act(() => getNavigatorValues(wrapper).navigator.goBack());
 
-        expect(view.props.state.stack.mainStack).toHaveLength(2);
+        expect(getNavigatorValues(wrapper).state.stack.mainStack).toHaveLength(
+          2
+        );
 
-        expect(view.props.navigator).toHaveProperty(
+        expect(getNavigatorValues(wrapper).navigator).toHaveProperty(
           "currentRoute",
           "/river/B4567/river/A1234"
         );
 
-        expect(view.props.navigator.screenData).toMatchObject({
+        expect(getNavigatorValues(wrapper).navigator.screenData).toMatchObject({
           ...rivers.A1234,
           targetScreen: rivers.A1234,
         });

package/App/NavigationProvider/navigator/selectors.ts

@@ -2,6 +2,7 @@ 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");
@@ -56,11 +57,26 @@ export const previousStackEntriesSelector = createSelector(
   )
 );
 
-export const lastEntrySelector = createSelector<
-  unknown,
-  unknown,
-  NavigationScreenState
->(
+export const lastEntrySelector = createSelector(
   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 { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import { usePlugins } from "@applicaster/zapp-react-native-redux";
 import {
   callAllWith,
   getNetworkHooks,
@@ -29,7 +29,7 @@ export const NetworkStatusProvider = ({
 }: {
   children: React.ReactNode;
 }) => {
-  const { plugins } = usePickFromState("plugins");
+  const plugins = usePlugins();
   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-hooks";
+import { renderHook, act } from "@testing-library/react-native";
 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", function () {
+  it("should call onConnectionLost callback when connection type changes to none", async 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", function () {
+  it("should call onConnectionRestored callback when connection type switches from none", async 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", function () {
+  it("should call onConnectionTypeChanged callback when connection type changes", async 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 { AnyAction, Dispatch } from "@reduxjs/toolkit";
+import { UnknownAction, 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<AnyAction>,
+      dispatch: Dispatch<UnknownAction>,
       state
     ) => {
       if (!__DEV__ || process.env.ENABLE_REMOTE_DATA_IN_DEV === "true") {

package/App/components/ZappAppWrapper.web.ts

@@ -1,3 +1,3 @@
-import { View } from "react-native";
+import { Fragment } from "react";
 
-export const ZappAppWrapper = View;
+export const ZappAppWrapper = Fragment;

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(
+export async function getPromiseForType<T = FileResponse>(
   key: string
-): Promise<FileResponse | never> {
+): Promise<T | 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.8",
+  "version": "15.0.0-rc.80",
   "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.8",
-    "@applicaster/quick-brick-core-plugins": "15.0.0-rc.8",
-    "@applicaster/zapp-pipes-v2-client": "15.0.0-rc.8",
-    "@applicaster/zapp-react-native-bridge": "15.0.0-rc.8",
-    "@applicaster/zapp-react-native-redux": "15.0.0-rc.8",
-    "@applicaster/zapp-react-native-ui-components": "15.0.0-rc.8",
-    "@applicaster/zapp-react-native-utils": "15.0.0-rc.8",
+    "@applicaster/applicaster-types": "15.0.0-rc.80",
+    "@applicaster/quick-brick-core-plugins": "15.0.0-rc.80",
+    "@applicaster/zapp-pipes-v2-client": "15.0.0-rc.80",
+    "@applicaster/zapp-react-native-bridge": "15.0.0-rc.80",
+    "@applicaster/zapp-react-native-redux": "15.0.0-rc.80",
+    "@applicaster/zapp-react-native-ui-components": "15.0.0-rc.80",
+    "@applicaster/zapp-react-native-utils": "15.0.0-rc.80",
     "atob": "^2.1.2",
     "axios": "^0.28.0",
     "btoa": "^1.2.1",