@applicaster/quick-brick-core 15.1.4 → 16.0.0-alpha.1042942411

package/App/NotificationToastRenderer/__tests__/NotificationToastRenderer.web.test.tsx

@@ -0,0 +1,90 @@
+import React from "react";
+import { Text } from "react-native";
+import TestRenderer, { act } from "react-test-renderer";
+
+import { notificationToastManager } from "../NotificationToastManager";
+import { NotificationToastRenderer } from "../NotificationToastRenderer.web";
+
+// This variant renders plain DOM tags (div/h2/h4) for web, which
+// @testing-library/react-native's `render` cannot host-detect, so it is
+// exercised directly with react-test-renderer instead.
+describe("NotificationToastRenderer (web)", () => {
+  beforeAll(() => {
+    jest.spyOn(console, "log").mockImplementation(() => {});
+  });
+
+  afterAll(() => {
+    (console.log as jest.Mock).mockRestore();
+  });
+
+  afterEach(() => {
+    for (let i = 0; i < 10; i++) {
+      notificationToastManager.dismiss();
+    }
+
+    jest.restoreAllMocks();
+    jest.spyOn(console, "log").mockImplementation(() => {});
+  });
+
+  const createRenderer = (element: React.ReactElement) => {
+    let renderer;
+
+    act(() => {
+      renderer = TestRenderer.create(element);
+    });
+
+    return renderer;
+  };
+
+  it("renders its children", () => {
+    const renderer = createRenderer(
+      <NotificationToastRenderer>
+        <Text>child content</Text>
+      </NotificationToastRenderer>
+    );
+
+    expect(renderer.root.findByType(Text).props.children).toBe("child content");
+  });
+
+  it("renders nothing for the toast body until a toast is shown", () => {
+    const renderer = createRenderer(<NotificationToastRenderer />);
+
+    expect(
+      renderer.root.findAll(
+        (node) =>
+          node.props["data-testid"] === "NotificationToastRenderer-touchable"
+      )
+    ).toHaveLength(0);
+  });
+
+  it("shows the toast message once the manager emits one", () => {
+    const renderer = createRenderer(<NotificationToastRenderer />);
+
+    act(() => {
+      notificationToastManager.showToast({ message: "You are offline" });
+    });
+
+    const message = renderer.root.find(
+      (node) =>
+        node.props["data-testid"] === "NotificationToastRenderer-message"
+    );
+
+    expect(message.props.children).toBe("You are offline");
+  });
+
+  it("dismisses the toast when the root element is clicked", () => {
+    const dismissSpy = jest.spyOn(notificationToastManager, "dismiss");
+
+    const renderer = createRenderer(<NotificationToastRenderer />);
+
+    const root = renderer.root.find(
+      (node) => node.props["data-testid"] === "NotificationToastRenderer"
+    );
+
+    act(() => {
+      root.props.onClick();
+    });
+
+    expect(dismissSpy).toHaveBeenCalled();
+  });
+});

package/App/NotificationToastRenderer/__tests__/useNotificationHeight.test.tsx

@@ -0,0 +1,53 @@
+import { renderHook } from "@testing-library/react-native";
+
+let mockInsets = { top: 0 };
+
+jest.mock("react-native-safe-area-context", () => ({
+  useSafeAreaInsets: () => mockInsets,
+}));
+
+jest.mock("@applicaster/zapp-react-native-utils/reactUtils", () => ({
+  ...jest.requireActual("@applicaster/zapp-react-native-utils/reactUtils"),
+  platformSelect: jest.fn(({ ios, android }) => ({ ios, android })),
+}));
+
+import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
+import { useNotificationHeight } from "../useNotificationHeight";
+
+describe("useNotificationHeight", () => {
+  beforeEach(() => {
+    (platformSelect as jest.Mock).mockClear();
+  });
+
+  it("adds the safe area top inset to the platform nav bar height", () => {
+    mockInsets = { top: 44 };
+    (platformSelect as jest.Mock).mockReturnValueOnce(56);
+
+    const { result } = renderHook(() => useNotificationHeight());
+
+    expect(result.current).toEqual({
+      statusHeight: 44,
+      notificationHeight: 100,
+    });
+  });
+
+  it("falls back to a 0 status height when there is no top inset", () => {
+    mockInsets = { top: 0 };
+    (platformSelect as jest.Mock).mockReturnValueOnce(44);
+
+    const { result } = renderHook(() => useNotificationHeight());
+
+    expect(result.current).toEqual({
+      statusHeight: 0,
+      notificationHeight: 44,
+    });
+  });
+
+  it("selects the nav bar height per platform via platformSelect", () => {
+    mockInsets = { top: 20 };
+
+    renderHook(() => useNotificationHeight());
+
+    expect(platformSelect).toHaveBeenCalledWith({ ios: 44, android: 56 });
+  });
+});

package/App/NotificationToastRenderer/__tests__/useNotificationToastState.test.ts

@@ -0,0 +1,112 @@
+import { act, renderHook } from "@testing-library/react-native";
+
+import { notificationToastManager } from "../NotificationToastManager";
+import { useNotificationToastState } from "../useNotificationToastState";
+
+jest.useFakeTimers();
+
+describe("useNotificationToastState", () => {
+  beforeAll(() => {
+    jest.spyOn(console, "log").mockImplementation(() => {});
+  });
+
+  afterAll(() => {
+    (console.log as jest.Mock).mockRestore();
+  });
+
+  afterEach(() => {
+    // drain whatever is left showing/queued so the next test starts clean;
+    // the hook's own effect cleanup (on unmount) removes its SHOW/HIDE
+    // handlers automatically via RNTL's auto-cleanup.
+    for (let i = 0; i < 10; i++) {
+      notificationToastManager.dismiss();
+    }
+
+    jest.restoreAllMocks();
+    jest.spyOn(console, "log").mockImplementation(() => {});
+  });
+
+  it("starts with no toast", () => {
+    const { result } = renderHook(() => useNotificationToastState());
+
+    expect(result.current).toBeNull();
+  });
+
+  it("reflects the toast emitted by the manager's SHOW event", () => {
+    const { result } = renderHook(() => useNotificationToastState());
+
+    act(() => {
+      notificationToastManager.showToast({ message: "hello" });
+    });
+
+    expect(result.current).toEqual(
+      expect.objectContaining({ message: "hello" })
+    );
+  });
+
+  it("clears the toast when the manager emits HIDE", () => {
+    const { result } = renderHook(() => useNotificationToastState());
+
+    act(() => {
+      notificationToastManager.showToast({ message: "hello" });
+    });
+
+    expect(result.current).not.toBeNull();
+
+    act(() => {
+      notificationToastManager.dismiss();
+    });
+
+    expect(result.current).toBeNull();
+  });
+
+  it("stops updating after unmount", () => {
+    const { result, unmount } = renderHook(() => useNotificationToastState());
+
+    unmount();
+
+    act(() => {
+      notificationToastManager.showToast({ message: "after unmount" });
+    });
+
+    expect(result.current).toBeNull();
+  });
+
+  it("subscribes on mount and disposes the subscription on unmount", () => {
+    const dispose = jest.fn();
+
+    const subscribeSpy = jest
+      .spyOn(notificationToastManager, "subscribe")
+      .mockReturnValue(dispose);
+
+    const { unmount } = renderHook(() => useNotificationToastState());
+
+    expect(subscribeSpy).toHaveBeenCalledWith(expect.any(Function));
+    expect(dispose).not.toHaveBeenCalled();
+
+    unmount();
+
+    expect(dispose).toHaveBeenCalledTimes(1);
+  });
+
+  it("subscribe registers SHOW/HIDE handlers and its disposer removes them", () => {
+    const callback = jest.fn();
+
+    const dispose = notificationToastManager.subscribe(callback);
+
+    act(() => {
+      notificationToastManager.showToast({ message: "hello" }); // emits SHOW
+    });
+
+    expect(callback).toHaveBeenCalled();
+
+    callback.mockClear();
+    dispose();
+
+    act(() => {
+      notificationToastManager.showToast({ message: "again" }); // emits SHOW
+    });
+
+    expect(callback).not.toHaveBeenCalled();
+  });
+});

package/App/NotificationToastRenderer/index.tsx

@@ -0,0 +1,5 @@
+export { notificationToastManager } from "./NotificationToastManager";
+
+export { NotificationToastRenderer } from "./NotificationToastRenderer";
+
+export { useNotificationHeight } from "./useNotificationHeight";

package/App/NotificationToastRenderer/useNotificationHeight.tsx

@@ -0,0 +1,14 @@
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
+
+export const useNotificationHeight = () => {
+  const insets = useSafeAreaInsets();
+
+  const navBarHeight = platformSelect({ ios: 44, android: 56 });
+
+  const statusHeight = insets.top;
+  const notificationHeight = statusHeight + navBarHeight;
+
+  return { statusHeight, notificationHeight };
+};

package/App/NotificationToastRenderer/useNotificationToastState.tsx

@@ -0,0 +1,12 @@
+import * as React from "react";
+
+import { notificationToastManager } from "./NotificationToastManager";
+
+export const useNotificationToastState = () => {
+  const state = React.useSyncExternalStore(
+    notificationToastManager.subscribe,
+    notificationToastManager.getCurrentState
+  );
+
+  return state;
+};

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/index.tsx

@@ -31,6 +31,7 @@ import { withActionExecutor } from "@applicaster/zapp-react-native-utils/actions
 import { withScreenDataContextProvider } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenDataContext";
 import { LogicAggregatorContainer } from "./LogicAggregatorContainer";
 import { LoadingOverlay } from "./LoadingOverlay";
+import { NotificationToastRenderer } from "./NotificationToastRenderer";
 import { ZappAppWrapper } from "./components/ZappAppWrapper";
 
 interface AppOptions {
@@ -67,11 +68,13 @@ const App = ({
               <ErrorBoundary>
                 <URLSchemeListener>
                   <SplashLoader>
-                    <OfflineHandler>
-                      <Layout>
-                        <RouteManager />
-                      </Layout>
-                    </OfflineHandler>
+                    <NotificationToastRenderer>
+                      <OfflineHandler>
+                        <Layout>
+                          <RouteManager />
+                        </Layout>
+                      </OfflineHandler>
+                    </NotificationToastRenderer>
                   </SplashLoader>
                   <ModalProvider />
                 </URLSchemeListener>

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.1.4",
+  "version": "16.0.0-alpha.1042942411",
   "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.1.4",
-    "@applicaster/quick-brick-core-plugins": "15.1.4",
-    "@applicaster/zapp-pipes-v2-client": "15.1.4",
-    "@applicaster/zapp-react-native-bridge": "15.1.4",
-    "@applicaster/zapp-react-native-redux": "15.1.4",
-    "@applicaster/zapp-react-native-ui-components": "15.1.4",
-    "@applicaster/zapp-react-native-utils": "15.1.4",
+    "@applicaster/applicaster-types": "16.0.0-alpha.1042942411",
+    "@applicaster/quick-brick-core-plugins": "16.0.0-alpha.1042942411",
+    "@applicaster/zapp-pipes-v2-client": "16.0.0-alpha.1042942411",
+    "@applicaster/zapp-react-native-bridge": "16.0.0-alpha.1042942411",
+    "@applicaster/zapp-react-native-redux": "16.0.0-alpha.1042942411",
+    "@applicaster/zapp-react-native-ui-components": "16.0.0-alpha.1042942411",
+    "@applicaster/zapp-react-native-utils": "16.0.0-alpha.1042942411",
     "atob": "^2.1.2",
     "axios": "^0.28.0",
     "btoa": "^1.2.1",

package/App/DeepLinking/URLSchemeHandler/__tests__/__snapshots__/URLSchemeHandler.test.tsx.snap

@@ -1,24 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`URLSchemeHandler renders correctly and invokes the hook 1`] = `
-<View
-  style={
-    [
-      {
-        "alignItems": "center",
-        "flex": 1,
-        "justifyContent": "center",
-      },
-      {
-        "backgroundColor": "white",
-        "height": 1334,
-        "width": 750,
-      },
-    ]
-  }
->
-  <ActivityIndicator
-    size="large"
-  />
-</View>
-`;