@applicaster/quick-brick-core 13.0.0-alpha.3592913150 → 13.0.0-alpha.3637360334

package/App/NavigationProvider/NavigationProvider.tsx

@@ -49,6 +49,7 @@ import { coreAppLogger } from "../logger";
 import {
   getPlatform,
   isTV,
+  isVizioPlatform,
 } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { useConnectionInfo } from "@applicaster/zapp-react-native-utils/reactHooks/connection";
 import {
@@ -67,6 +68,9 @@ import { useModalStore } from "@applicaster/zapp-react-native-utils/modalState";
 import { useSubscriberFor } from "@applicaster/zapp-react-native-utils/reactHooks/useSubscriberFor";
 import { QBUIComponentEvents } from "@applicaster/zapp-react-native-ui-components/events";
 import { Hook } from "@applicaster/zapp-react-native-utils/appUtils/HooksManager/Hook";
+import { URLSchemeContext } from "../DeepLinking/URLSchemeListener/URLSchemeContextProvider";
+
+import { loadingOverlayManager } from "../LoadingOverlay";
 
 const logger = coreAppLogger.addSubsystem("Navigator");
 
@@ -86,6 +90,8 @@ const navigationActions = {
 const platform = getPlatform();
 
 export function NavigationProvider({ children }: Props) {
+  const { url: deepLinkURL } = React.useContext(URLSchemeContext);
+
   const {
     appData: { layoutVersion },
     rivers,
@@ -393,6 +399,8 @@ export function NavigationProvider({ children }: Props) {
     } else {
       dispatch(push(route, { entry: payload, screen: hookPlugin }));
     }
+
+    closeLoadingOverlay();
   };
 
   const handleHookError = ({ error, hookPlugin, callback }, dispose) => {
@@ -411,6 +419,8 @@ export function NavigationProvider({ children }: Props) {
     if (callback && typeof callback === "function") {
       callback();
     }
+
+    closeLoadingOverlay();
   };
 
   const handleHookCancel = ({ hookPlugin, callback }, dispose) => {
@@ -426,6 +436,8 @@ export function NavigationProvider({ children }: Props) {
     } else {
       goBack(true, true);
     }
+
+    closeLoadingOverlay();
   };
 
   const handleHookSuccess = ({ hookPlugin, callback }) => {
@@ -436,6 +448,10 @@ export function NavigationProvider({ children }: Props) {
     }
   };
 
+  const handleBackgroundHook = () => {
+    openLoadingOverlay();
+  };
+
   const checkStartUpHooks = React.useMemo(() => {
     if (!pluginConfigurations) return false;
 
@@ -505,6 +521,8 @@ export function NavigationProvider({ children }: Props) {
       );
 
       callback?.();
+
+      closeLoadingOverlay();
     };
 
   const offlinePlugin = React.useMemo(() => {
@@ -619,6 +637,7 @@ export function NavigationProvider({ children }: Props) {
           .on(HOOKS_EVENTS.ERROR, handleHookError)
           .on(HOOKS_EVENTS.CANCEL, handleHookCancel)
           .on(HOOKS_EVENTS.SUCCESS, handleHookSuccess)
+          .on(HOOKS_EVENTS.START_BACKGROUND_HOOK, handleBackgroundHook)
           .on(
             HOOKS_EVENTS.COMPLETE,
             handleHookComplete(navigationAction, targetRoute, {
@@ -634,6 +653,14 @@ export function NavigationProvider({ children }: Props) {
     },
   });
 
+  const openLoadingOverlay = React.useCallback(() => {
+    deepLinkURL && isVizioPlatform() && loadingOverlayManager.show();
+  }, [deepLinkURL]);
+
+  const closeLoadingOverlay = React.useCallback(() => {
+    loadingOverlayManager.hide();
+  }, []);
+
   const openPiP = React.useCallback(() => {
     dispatch(setVideoPiP());
   }, []);

package/App/NetworkStatusProvider/utils.ts

@@ -1,4 +1,3 @@
-/// <reference types="@types/tizen-tv-webapis" />
 import * as R from "ramda";
 
 import { NetInfoState } from "@react-native-community/netinfo";

package/App/StoreConnector/__tests__/storeConnector.test.js

@@ -1,19 +1,19 @@
 import * as React from "react";
 import * as ReactIs from "react-is";
 import { View, Text } from "react-native";
-import { shallow } from "enzyme";
-import { shallowToJson } from "enzyme-to-json";
+import { render } from "@testing-library/react-native";
 import configureStore from "redux-mock-store";
 
 import { storeConnector } from "../index";
+import { Provider } from "react-redux";
 
 const styles = { foo: "bar" };
 const components = { grid: jest.fn() };
 const rivers = { A123: { name: "home", id: "A123" } };
 const appSettings = { bundleIdentifier: "com.app.test" };
 
-const Component = () => (
-  <View>
+const Component = (props) => (
+  <View testID="test-comp" {...props}>
     <Text>I'm a component</Text>
   </View>
 );
@@ -28,7 +28,6 @@ const store = configureStore()({
 describe("storeConnector", () => {
   it("returns a Component", () => {
     const WrappedComponent = storeConnector(Component);
-
     expect(ReactIs.isValidElementType(WrappedComponent)).toBe(true);
 
     expect(WrappedComponent).toEqual(
@@ -41,12 +40,19 @@ describe("storeConnector", () => {
 
   it("passes the props to the component", () => {
     const WrappedComponent = storeConnector(Component);
-    const wrapper = shallow(<WrappedComponent store={store} />).dive();
-    const wrapperProps = wrapper.first().props();
 
-    expect(shallowToJson(wrapper)).toMatchSnapshot();
-    expect(wrapperProps).toHaveProperty("components", components);
-    expect(wrapperProps).toHaveProperty("rivers", rivers);
-    expect(wrapperProps).toHaveProperty("appSettings", appSettings);
+    const { getByText, getByTestId } = render(
+      <Provider store={store}>
+        <WrappedComponent />
+      </Provider>
+    );
+
+    expect(getByText("I'm a component")).toBeTruthy();
+
+    expect(getByTestId("test-comp").props).toMatchObject({
+      appSettings,
+      components,
+      rivers,
+    });
   });
 });

package/App/appLifeCycleManager/__tests__/appLifeCycleManager.test.tsx

@@ -0,0 +1,146 @@
+import * as React from "react";
+import { View, Text } from "react-native";
+import { render, waitFor } from "@testing-library/react-native";
+import thunk from "redux-thunk";
+import configureStore from "redux-mock-store";
+
+let mocked_items: Record<string, any> = {};
+
+import { appLifeCycleManager } from "../";
+
+const mock_actions = {};
+
+jest.mock("@applicaster/zapp-react-native-redux/AppData", () => ({
+  loadAppData: jest.fn(() => () => Promise.resolve()),
+}));
+
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/actions", () => ({
+  useActions: jest.fn(() => ({ actions: mock_actions })),
+}));
+
+jest.mock(
+  "@applicaster/zapp-react-native-bridge/ZappStorage/LocalStorage",
+  () => ({
+    localStorage: {
+      getAllItems: jest.fn(() => Promise.resolve(mocked_items)),
+      setItem: jest.fn((key, value) => {
+        mocked_items[key] = JSON.stringify(value);
+
+        return Promise.resolve(true);
+      }),
+      getItem: jest.fn((key) => {
+        if (mocked_items[key]) {
+          if (typeof mocked_items[key] === "string") {
+            return Promise.resolve(JSON.parse(mocked_items[key]));
+          } else {
+            return Promise.resolve(mocked_items[key]);
+          }
+        } else {
+          return Promise.resolve([]);
+        }
+      }),
+      __reset() {
+        mocked_items = {};
+      },
+    },
+  })
+);
+
+const Component = () => (
+  <View>
+    <Text>I'm a component</Text>
+  </View>
+);
+
+const QuickBrickManager = {
+  sendQuickBrickEvent: jest.fn(),
+};
+
+const LOADING_ERROR = new Error("loading failed");
+
+const appLoader = jest.fn((_dispatch, _getState) => {
+  if (_getState().shouldFail) return Promise.reject(LOADING_ERROR);
+
+  return Promise.resolve();
+});
+
+const store = configureStore([thunk])({});
+const dispatch = store.dispatch;
+
+const state = {
+  rivers: {},
+  plugins: {},
+  appSettings: { runtimeConfigurationUrls: { rivers: "http://rivers.url" } },
+};
+
+const QUICK_BRICK_READY_EVENT = "quickBrickReady";
+
+describe("appLifeCycleManager", () => {
+  const decorator = appLifeCycleManager(appLoader, QuickBrickManager);
+  const DecoratedComponent = decorator(Component);
+
+  beforeEach(() => {
+    appLoader.mockClear();
+    QuickBrickManager.sendQuickBrickEvent.mockClear();
+  });
+
+  it("returns a function to decorate a component", () => {
+    expect(decorator).toBeDefined();
+  });
+
+  it("runs the loaders, then sends quickBrickReady event", async () => {
+    const testCallback = jest.fn(() => {});
+
+    render(
+      <DecoratedComponent
+        dispatch={dispatch}
+        {...state}
+        testCallback={testCallback}
+      />
+    );
+
+    await waitFor(() => {
+      return expect(testCallback).toHaveBeenCalled();
+    });
+
+    const actions = store.getActions();
+
+    expect(actions[0]).toMatchObject({ type: "SET_APP_READY" });
+
+    expect(QuickBrickManager.sendQuickBrickEvent).toHaveBeenCalledWith(
+      QUICK_BRICK_READY_EVENT
+    );
+
+    expect(appLoader).toHaveBeenCalled();
+  });
+
+  it("sends the quickBrickReady event when a loader doesn't resolves", async () => {
+    const testCallback = jest.fn(() => {});
+
+    render(
+      <DecoratedComponent
+        dispatch={dispatch}
+        {...state}
+        shouldFail
+        testCallback={testCallback}
+      />
+    );
+
+    const actions = store.getActions();
+
+    await waitFor(() => {
+      return expect(testCallback).toHaveBeenCalled();
+    });
+
+    expect(actions[0]).toMatchObject({ type: "SET_APP_READY" });
+    expect(actions[1]).toMatchObject({ type: "SET_APP_LAUNCHED" });
+
+    expect(QuickBrickManager.sendQuickBrickEvent).toHaveBeenCalledWith(
+      QUICK_BRICK_READY_EVENT
+    );
+
+    expect(testCallback).toHaveBeenCalled();
+
+    expect(appLoader).toHaveBeenCalled();
+  });
+});

package/App/appLifeCycleManager/index.tsx

@@ -131,9 +131,8 @@ export function appLifeCycleManager(appLoader, QuickBrickManager) {
             )
             .map((plugin: any) => plugin.module?.getLoginProtocol?.());
 
-          const loginProtocols: LoginProtocol[] = await Promise.all(
-            promiseProtocols
-          );
+          const loginProtocols: LoginProtocol[] =
+            await Promise.all(promiseProtocols);
 
           // Await all does not work here
           for (const protocol of loginProtocols) {
@@ -183,13 +182,13 @@ export function appLifeCycleManager(appLoader, QuickBrickManager) {
             data: { error },
           });
         }
-
-        makeAppReady();
-        checkStoredContextKeys();
       };
 
       React.useLayoutEffect(() => {
-        prepareApp();
+        prepareApp().then(() => {
+          makeAppReady();
+          checkStoredContextKeys();
+        });
       }, []);
 
       return <Component {...props} />;

package/App/index.tsx

@@ -1,3 +1,7 @@
+// Disable logs popups(RN68)
+import { LogBox } from "react-native";
+LogBox.ignoreAllLogs();
+
 import * as React from "react";
 import * as R from "ramda";
 import {
@@ -29,6 +33,7 @@ import { appRemoteDataLoader } from "./appRemoteDataLoader";
 import { withActionExecutor } from "@applicaster/zapp-react-native-utils/actionsExecutor/ActionExecutorContext";
 import { withScreenDataContextProvider } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenDataContext";
 import { LogicAggregatorContainer } from "./LogicAggregatorContainer";
+import { LoadingOverlay } from "./LoadingOverlay";
 
 interface AppOptions {
   Layout: React.ComponentType;
@@ -71,10 +76,11 @@ const App = ({
                 </SplashLoader>
                 <ModalProvider />
               </URLSchemeListener>
-              <LogicAggregatorContainer
-                components={[InteractionManager, ApplyScreenHooks]}
-              />
+              <LoadingOverlay />
             </ErrorBoundary>
+            <LogicAggregatorContainer
+              components={[InteractionManager, ApplyScreenHooks]}
+            />
           </AppContainer>
         </SafeAreaProvider>
       </ThemeManager>

package/App/remoteContextReloader/__tests__/remoteContextReloader.test.js

@@ -1,7 +1,6 @@
 import * as React from "react";
 import { View, Text } from "react-native";
-import { shallow } from "enzyme";
-import { shallowToJson } from "enzyme-to-json";
+import { render } from "@testing-library/react-native";
 
 import { remoteContextReloader } from "../index";
 import * as ContextReloader from "../getRemoteContextData";
@@ -25,19 +24,21 @@ const dispatch = jest.fn();
 
 describe("remoteContextReloader", () => {
   const WrappedComponent = remoteContextReloader(Component);
+  let rendered;
+
+  beforeEach(() => {
+    rendered = render(
+      <WrappedComponent {...{ appSettings, plugins, dispatch }} />
+    );
+  });
 
   afterEach(() => {
     jest.clearAllMocks();
   });
 
-  it("adds a componentDidMount method", () => {
-    const wrapper = shallow(
-      <WrappedComponent {...{ appSettings, plugins, dispatch }} />
-    );
-
-    expect(shallowToJson(wrapper)).toMatchSnapshot();
-    expect(wrapper.instance()).toHaveProperty("componentDidMount");
-    expect(wrapper.instance().componentDidMount).toBeFunction();
+  it("calls componentDidMount and renders correctly", () => {
+    const { getByText } = rendered;
+    expect(getByText("I'm a component")).toBeTruthy();
   });
 
   describe("when in __DEV__", () => {
@@ -47,11 +48,6 @@ describe("remoteContextReloader", () => {
     });
 
     it("doesn't invoke the context reloader", () => {
-      const wrapper = shallow(
-        <WrappedComponent {...{ appSettings, plugins, dispatch }} />
-      );
-
-      expect(shallowToJson(wrapper)).toMatchSnapshot();
       expect(spy).not.toHaveBeenCalled();
     });
   });
@@ -62,12 +58,6 @@ describe("remoteContextReloader", () => {
     });
 
     it("invokes the context reloader", () => {
-      const wrapper = shallow(
-        <WrappedComponent {...{ appSettings, plugins, dispatch }} />
-      );
-
-      expect(shallowToJson(wrapper)).toMatchSnapshot();
-
       expect(spy).toHaveBeenCalledWith(
         dispatch,
         appSettings.runtimeConfigurationUrls,

package/App/remoteContextReloader/getRemoteContextData/getNativeRemoteContextData.ts

@@ -1,4 +1,5 @@
 import * as R from "ramda";
+import isEmpty from "lodash/isEmpty";
 import { Dimensions, NativeModules } from "react-native";
 import { loadAppContextData } from "@applicaster/zapp-react-native-redux";
 import { isTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
@@ -10,6 +11,7 @@ import { logger } from "@applicaster/zapp-react-native-utils/logger";
 import { ACTIVE_LAYOUT_ID_STORAGE_KEY } from "../consts";
 const { AppLoaderBridge } = NativeModules;
 import { localStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/LocalStorage";
+import { useErrorStore } from "../../ErrorBoundary/store";
 
 export async function getNativeRemoteContextData(
   dispatch,
@@ -58,6 +60,18 @@ export async function getNativeRemoteContextData(
 
   const layout = await getPromiseForType("layout");
 
+  const layoutLoadingErrorMessage = "Failed to load layout data";
+
+  if (isEmpty(layout)) {
+    useErrorStore
+      .getState()
+      .setError(
+        new Error(layoutLoadingErrorMessage),
+        layoutLoadingErrorMessage,
+        false
+      );
+  }
+
   const apiVersion = layout?.layout?.["api_version"]; // Taken from remote configuration
 
   dispatch(appDataActions.merge({ layoutVersion: apiVersion || "v1" }));

package/createZappApp/__tests__/__snapshots__/createZappApp.test.js.snap

@@ -1,132 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`createZappApp has a <Provider /> component with an initialized store 1`] = `
-{
-  "appData": {
-    "countryLocale": "GB",
-    "languageLocale": "en",
-    "layoutVersion": "v1",
-    "quickBrickEvent": [MockFunction],
-  },
-  "appSettings": {
-    "runtimeConfigurationUrls": {},
-  },
-  "appState": {
-    "appLaunched": false,
-    "appReady": false,
-    "appState": {
-      "currentState": null,
-      "eventType": null,
-      "isAvailable": null,
-      "nextState": null,
-    },
-  },
-  "cellStyles": {},
-  "components": {
-    "AppContainer": [Function],
-    "ContentScreen": [Function],
-    "HookRenderer": [Function],
-    "ModalComponent": [Function],
-    "PlayerContainer": {
-      "$$typeof": Symbol(react.memo),
-      "WrappedComponent": {
-        "$$typeof": Symbol(react.memo),
-        "compare": null,
-        "type": [Function],
-      },
-      "compare": null,
-      "type": [Function],
-    },
-    "QBImage": [Function],
-    "River": {
-      "$$typeof": Symbol(react.memo),
-      "WrappedComponent": [Function],
-      "compare": null,
-      "type": [Function],
-    },
-    "TextInputTv": {
-      "$$typeof": Symbol(react.forward_ref),
-      "render": [Function],
-    },
-    "Touchable": [Function],
-  },
-  "contentTypes": null,
-  "localizations": {},
-  "pipesEndpoints": null,
-  "pluginConfigurations": {
-    "pc1": {
-      "configuration_json": null,
-      "plugin": {
-        "api": {},
-        "identifier": "pc1",
-      },
-    },
-    "pc2": {
-      "configuration_json": {
-        "foo": "bar",
-      },
-      "plugin": {
-        "api": {},
-        "identifier": "pc2",
-      },
-    },
-  },
-  "plugins": [
-    {
-      "configuration": null,
-      "identifier": "pc1",
-      "module": [MockFunction],
-      "name": "Plugin1",
-      "type": "general",
-    },
-    {
-      "configuration": {
-        "foo": "bar",
-      },
-      "identifier": "pc2",
-      "module": [MockFunction],
-      "name": "Plugin2",
-      "type": "general",
-    },
-  ],
-  "presetsMapping": {},
-  "remoteConfigurations": {
-    "localizations": {},
-  },
-  "rivers": {},
-  "styles": {},
-  "zappPipes": {},
-}
-`;
-
 exports[`createZappApp renders the provided React App 1`] = `
-<Provider
-  store={
-    {
-      "@@observable": [Function],
-      "dispatch": [Function],
-      "getState": [Function],
-      "replaceReducer": [Function],
-      "subscribe": [Function],
-    }
-  }
->
-  <EmptyZappApp />
-</Provider>
-`;
-
-exports[`createZappApp returns a react component 1`] = `
-<Provider
-  store={
-    {
-      "@@observable": [Function],
-      "dispatch": [Function],
-      "getState": [Function],
-      "replaceReducer": [Function],
-      "subscribe": [Function],
-    }
-  }
->
-  <EmptyZappApp />
-</Provider>
+<View>
+  <Text>
+    Welcome to the QuickBrick App
+  </Text>
+</View>
 `;

package/createZappApp/__tests__/createZappApp.test.js

@@ -1,7 +1,6 @@
 import * as React from "react";
 import { View, Text } from "react-native";
-import { shallow } from "enzyme";
-import { shallowToJson } from "enzyme-to-json";
+import { render, screen } from "@testing-library/react-native";
 import QuickBrickComponents from "@applicaster/zapp-react-native-ui-components";
 import { Provider } from "react-redux";
 
@@ -77,27 +76,17 @@ jest.mock("@applicaster/zapp-react-native-bridge/QuickBrick", () => ({
 }));
 
 describe("createZappApp", () => {
-  it("returns a react component", () => {
-    const ZappApp = createZappApp({});
-    const wrapper = shallow(<ZappApp />);
-
-    expect(shallowToJson(wrapper)).toMatchSnapshot();
-  });
-
   it("renders the provided React App", () => {
     const ZappApp = createZappApp({ App });
-    const wrapper = shallow(<ZappApp />);
-
-    expect(shallowToJson(wrapper)).toMatchSnapshot();
+    render(<ZappApp />);
+    expect(screen.toJSON()).toMatchSnapshot();
   });
 
-  it("has a <Provider /> component with an initialized store", () => {
+  it("has a Provider component with an initialized store", () => {
     const ZappApp = createZappApp(zappAppConfig);
-    const wrapper = shallow(<ZappApp />);
-
-    const providerNode = wrapper.find(Provider);
-    const store = providerNode.prop("store");
-    expect(providerNode.length).toBe(1);
+    const { UNSAFE_root } = render(<ZappApp />);
+    const providerInstance = UNSAFE_root.findByType(Provider);
+    const store = providerInstance.props.store;
 
     expect(store).toEqual(
       expect.objectContaining({
@@ -108,8 +97,6 @@ describe("createZappApp", () => {
       })
     );
 
-    expect(store.getState()).toMatchSnapshot();
-
     expect(store.getState()).toEqual(
       expect.objectContaining({
         styles: expect.any(Object),

package/defaults/__tests__/defaults.test.js

@@ -1,11 +1,10 @@
 import React from "react";
+import { render } from "@testing-library/react-native";
 import { EmptyZappApp } from "../index";
-import { shallow } from "enzyme";
-import { shallowToJson } from "enzyme-to-json";
 
 describe("<EmptyZappApp />", () => {
   it("renders correctly", () => {
-    const wrapper = shallow(<EmptyZappApp />);
-    expect(shallowToJson(wrapper)).toMatchSnapshot();
+    const { toJSON } = render(<EmptyZappApp />);
+    expect(toJSON()).toMatchSnapshot();
   });
 });

package/index.d.ts

@@ -24,7 +24,7 @@ type AnyValue = void | string | number | boolean | AnyArray | AnyRecord;
 declare type ReducerAction<
   T extends string = string,
   P extends AnyValue = AnyValue,
-  M extends AnyRecord = AnyRecord
+  M extends AnyRecord = AnyRecord,
 > = {
   type: T;
   payload?: P;