@applicaster/quick-brick-core 16.0.0-rc.10 → 16.0.0-rc.101

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

@@ -0,0 +1,237 @@
+import {
+  notificationToastManager,
+  NOTIFICATION_TOAST_EVENTS,
+  DEFAULT_TOAST_TIMEOUT,
+} from "../NotificationToastManager";
+import { postEvent } from "@applicaster/zapp-react-native-utils/reactHooks/useSubscriberFor";
+
+jest.useFakeTimers();
+
+// notificationToastManager is a module-level singleton with a private
+// queue/isShowing/nextId, so every test must register its handlers through
+// `on()` (tracked below for cleanup) and fully drain the queue afterwards -
+// otherwise state leaks into the next test.
+describe("NotificationToastManager", () => {
+  let registered: Array<[string, (...args: any[]) => void]> = [];
+
+  const on = (event: string, handler: (...args: any[]) => void) => {
+    notificationToastManager.on(event, handler);
+    registered.push([event, handler]);
+  };
+
+  beforeAll(() => {
+    jest.spyOn(console, "log").mockImplementation(() => {});
+  });
+
+  afterAll(() => {
+    (console.log as jest.Mock).mockRestore();
+  });
+
+  afterEach(() => {
+    registered.forEach(([event, handler]) =>
+      notificationToastManager.removeHandler(event, handler)
+    );
+
+    registered = [];
+
+    // drain whatever is left showing/queued so the next test starts clean
+    notificationToastManager.reset();
+
+    jest.clearAllTimers();
+    jest.restoreAllMocks();
+    jest.spyOn(console, "log").mockImplementation(() => {});
+  });
+
+  it("emits SHOW with the toast payload when showToast is called", () => {
+    const onShow = jest.fn();
+    on(NOTIFICATION_TOAST_EVENTS.SHOW, onShow);
+
+    notificationToastManager.showToast({ id: "t1", message: "hello" });
+
+    expect(onShow).toHaveBeenCalledWith(
+      expect.objectContaining({ id: "t1", message: "hello" }),
+      expect.any(Function)
+    );
+  });
+
+  it("auto-generates distinct ids for payloads that don't provide one", () => {
+    const onShow = jest.fn();
+    on(NOTIFICATION_TOAST_EVENTS.SHOW, onShow);
+
+    notificationToastManager.showToast({ message: "first" });
+    const firstId = onShow.mock.calls[0][0].id;
+
+    notificationToastManager.dismiss();
+
+    notificationToastManager.showToast({ message: "second" });
+    const secondId = onShow.mock.calls[1][0].id;
+
+    expect(typeof firstId).toBe("string");
+    expect(firstId).not.toEqual(secondId);
+  });
+
+  it("keeps a caller-provided id instead of generating one", () => {
+    const onShow = jest.fn();
+    on(NOTIFICATION_TOAST_EVENTS.SHOW, onShow);
+
+    notificationToastManager.showToast({ id: "custom-id", message: "hi" });
+
+    expect(onShow).toHaveBeenCalledWith(
+      expect.objectContaining({ id: "custom-id" }),
+      expect.any(Function)
+    );
+  });
+
+  it("queues a second toast and shows it only after the first is dismissed", () => {
+    const onShow = jest.fn();
+    on(NOTIFICATION_TOAST_EVENTS.SHOW, onShow);
+
+    notificationToastManager.showToast({ id: "a", message: "first" });
+    notificationToastManager.showToast({ id: "b", message: "second" });
+
+    expect(onShow).toHaveBeenCalledTimes(1);
+
+    expect(onShow).toHaveBeenCalledWith(
+      expect.objectContaining({ id: "a" }),
+      expect.any(Function)
+    );
+
+    notificationToastManager.dismiss();
+
+    expect(onShow).toHaveBeenCalledTimes(2);
+
+    expect(onShow).toHaveBeenLastCalledWith(
+      expect.objectContaining({ id: "b" }),
+      expect.any(Function)
+    );
+  });
+
+  it("auto-hides after the timeout and advances to the next queued toast", () => {
+    const onShow = jest.fn();
+    const onHide = jest.fn();
+    on(NOTIFICATION_TOAST_EVENTS.SHOW, onShow);
+    on(NOTIFICATION_TOAST_EVENTS.HIDE, onHide);
+
+    notificationToastManager.showToast({
+      id: "a",
+      message: "first",
+      timeout: 1000,
+    });
+
+    notificationToastManager.showToast({ id: "b", message: "second" });
+
+    jest.advanceTimersByTime(1000);
+
+    expect(onHide).toHaveBeenCalledTimes(1);
+
+    expect(onShow).toHaveBeenLastCalledWith(
+      expect.objectContaining({ id: "b" }),
+      expect.any(Function)
+    );
+  });
+
+  it("does nothing when dismiss is called with no toast showing", () => {
+    const onHide = jest.fn();
+    on(NOTIFICATION_TOAST_EVENTS.HIDE, onHide);
+
+    notificationToastManager.dismiss();
+
+    expect(onHide).not.toHaveBeenCalled();
+  });
+
+  it("updates a still-queued (not yet shown) toast in place instead of duplicating it", () => {
+    const onShow = jest.fn();
+    on(NOTIFICATION_TOAST_EVENTS.SHOW, onShow);
+
+    notificationToastManager.showToast({ id: "a", message: "first" });
+    notificationToastManager.showToast({ id: "b", message: "second" });
+    notificationToastManager.showToast({ id: "b", message: "second updated" });
+
+    notificationToastManager.dismiss();
+
+    expect(onShow).toHaveBeenCalledTimes(2);
+
+    expect(onShow).toHaveBeenLastCalledWith(
+      expect.objectContaining({ id: "b", message: "second updated" }),
+      expect.any(Function)
+    );
+  });
+
+  it("swaps the content of the currently visible toast when re-shown with the same id", () => {
+    const onShow = jest.fn();
+    on(NOTIFICATION_TOAST_EVENTS.SHOW, onShow);
+
+    notificationToastManager.showToast({
+      id: "a",
+      message: "first",
+      timeout: 5000,
+    });
+
+    notificationToastManager.showToast({ id: "a", message: "first updated" });
+
+    expect(onShow).toHaveBeenCalledTimes(2);
+
+    expect(onShow).toHaveBeenLastCalledWith(
+      expect.objectContaining({ id: "a", message: "first updated" }),
+      expect.any(Function)
+    );
+
+    // old timer must have been cleared, not still pending
+    jest.advanceTimersByTime(5000);
+    expect(onShow).toHaveBeenCalledTimes(2);
+  });
+
+  it("routes cross-package showToast events via the shared event bus", () => {
+    const onShow = jest.fn();
+    on(NOTIFICATION_TOAST_EVENTS.SHOW, onShow);
+
+    postEvent(NOTIFICATION_TOAST_EVENTS.SHOW_TOAST, [
+      { id: "bus", message: "from event bus" },
+    ]);
+
+    expect(onShow).toHaveBeenCalledWith(
+      expect.objectContaining({ id: "bus", message: "from event bus" }),
+      expect.any(Function)
+    );
+  });
+
+  it("stops emitting to a handler after it has been removed", () => {
+    const onShow = jest.fn();
+    notificationToastManager.on(NOTIFICATION_TOAST_EVENTS.SHOW, onShow);
+
+    notificationToastManager.removeHandler(
+      NOTIFICATION_TOAST_EVENTS.SHOW,
+      onShow
+    );
+
+    notificationToastManager.showToast({
+      id: "removed-handler",
+      message: "hello",
+    });
+
+    expect(onShow).not.toHaveBeenCalled();
+  });
+
+  it("defaults timeout to DEFAULT_TOAST_TIMEOUT (4000ms) when omitted and auto-hides", () => {
+    const onShow = jest.fn();
+    const onHide = jest.fn();
+    on(NOTIFICATION_TOAST_EVENTS.SHOW, onShow);
+    on(NOTIFICATION_TOAST_EVENTS.HIDE, onHide);
+
+    notificationToastManager.showToast({
+      message: "Added to queue",
+    });
+
+    expect(onShow).toHaveBeenCalledWith(
+      expect.objectContaining({
+        message: "Added to queue",
+        timeout: DEFAULT_TOAST_TIMEOUT,
+      }),
+      expect.any(Function)
+    );
+
+    jest.advanceTimersByTime(DEFAULT_TOAST_TIMEOUT);
+
+    expect(onHide).toHaveBeenCalledTimes(1);
+  });
+});

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

@@ -0,0 +1,233 @@
+import React from "react";
+import { Text } from "react-native";
+import { act, fireEvent, render } from "@testing-library/react-native";
+import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
+
+import {
+  CONFIRMATION_TOAST_SOURCE,
+  notificationToastManager,
+} from "../NotificationToastManager";
+import { NotificationToastRenderer } from "../NotificationToastRenderer";
+
+jest.mock("react-native-safe-area-context", () => ({
+  useSafeAreaInsets: () => ({ top: 44 }),
+}));
+
+jest.mock("@applicaster/zapp-react-native-utils/theme", () => ({
+  useTheme: jest.fn(),
+}));
+
+jest.mock("react-native-gesture-handler", () => {
+  const RN = require("react-native");
+  const ReactActual = require("react");
+  const actual = jest.requireActual("react-native-gesture-handler");
+
+  const GestureDetector = ReactActual.forwardRef(
+    ({ gesture, children }: any, ref: any) => {
+      const onEnd = gesture?.handlers?.onEnd;
+
+      return (
+        <RN.View
+          ref={ref}
+          testID="NotificationToastRenderer-fling-handler"
+          accessibilityState={{ disabled: gesture?.config?.enabled === false }}
+          // drive Gesture.Fling().onEnd via a test-only event
+          onEnd={() => onEnd?.({}, true)}
+          onEndFailed={() => onEnd?.({}, false)}
+        >
+          {children}
+        </RN.View>
+      );
+    }
+  );
+
+  return {
+    __esModule: true,
+    ...actual,
+    GestureDetector,
+  };
+});
+
+const mockedUseTheme = useTheme as jest.MockedFunction<typeof useTheme>;
+
+const confirmationTheme: Partial<BaseThemePropertiesMobile> = {
+  confirmation_toast_style_background_color: "#0188FF",
+  confirmation_toast_style_color: "#EFEFEF",
+  confirmation_toast_style_ios_font_family: "SFProText-Semibold",
+  confirmation_toast_style_android_font_family: "Roboto-Medium",
+  confirmation_toast_style_ios_font_size: 14,
+  confirmation_toast_style_android_font_size: 14,
+  confirmation_toast_style_ios_line_height: 44,
+  confirmation_toast_style_android_line_height: 44,
+  confirmation_toast_style_ios_letter_spacing: -1.4,
+  confirmation_toast_style_android_letter_spacing: -1.4,
+};
+
+describe("NotificationToastRenderer", () => {
+  beforeAll(() => {
+    jest.spyOn(console, "log").mockImplementation(() => {});
+  });
+
+  afterAll(() => {
+    (console.log as jest.Mock).mockRestore();
+  });
+
+  beforeEach(() => {
+    mockedUseTheme.mockReturnValue(
+      confirmationTheme as BaseThemePropertiesMobile
+    );
+  });
+
+  afterEach(() => {
+    // drain whatever is left showing/queued so the next test starts clean
+    for (let i = 0; i < 10; i++) {
+      notificationToastManager.dismiss();
+    }
+
+    jest.restoreAllMocks();
+    jest.spyOn(console, "log").mockImplementation(() => {});
+  });
+
+  it("renders its children", () => {
+    const { getByText } = render(
+      <NotificationToastRenderer>
+        <Text>child content</Text>
+      </NotificationToastRenderer>
+    );
+
+    expect(getByText("child content")).toBeTruthy();
+  });
+
+  it("shows no message before any toast is emitted", () => {
+    const { getByTestId } = render(<NotificationToastRenderer />);
+
+    expect(
+      getByTestId("NotificationToastRenderer-message").props.children
+    ).toBeUndefined();
+  });
+
+  it("displays the message from a toast emitted by the manager", () => {
+    const { getByTestId } = render(<NotificationToastRenderer />);
+
+    act(() => {
+      notificationToastManager.showToast({ message: "You are offline" });
+    });
+
+    expect(
+      getByTestId("NotificationToastRenderer-message").props.children
+    ).toBe("You are offline");
+  });
+
+  it("applies the toast's style to the message text", () => {
+    const { getByTestId } = render(<NotificationToastRenderer />);
+
+    act(() => {
+      notificationToastManager.showToast({
+        message: "styled",
+        style: { color: "#123456", fontSize: 20 },
+      });
+    });
+
+    expect(
+      getByTestId("NotificationToastRenderer-message").props.style
+    ).toEqual(expect.objectContaining({ color: "#123456", fontSize: 20 }));
+  });
+
+  it("applies Theme confirmation styles when source is confirmation", () => {
+    const { getByTestId } = render(<NotificationToastRenderer />);
+
+    act(() => {
+      notificationToastManager.showToast({
+        message: "Added to queue",
+        source: CONFIRMATION_TOAST_SOURCE,
+      });
+    });
+
+    expect(
+      getByTestId("NotificationToastRenderer-message").props.style
+    ).toEqual(
+      expect.objectContaining({
+        color: "#EFEFEF",
+        fontSize: 14,
+        lineHeight: 44,
+        letterSpacing: -1.4,
+      })
+    );
+  });
+
+  it("shallow-merges style overrides onto Theme confirmation defaults", () => {
+    const { getByTestId } = render(<NotificationToastRenderer />);
+
+    act(() => {
+      notificationToastManager.showToast({
+        message: "Playlist created",
+        source: CONFIRMATION_TOAST_SOURCE,
+        style: { backgroundColor: "#00FF00", fontSize: 20 },
+      });
+    });
+
+    expect(
+      getByTestId("NotificationToastRenderer-message").props.style
+    ).toEqual(
+      expect.objectContaining({
+        color: "#EFEFEF",
+        fontSize: 20,
+        lineHeight: 44,
+      })
+    );
+  });
+
+  it("does not apply Theme confirmation styles for non-confirmation toasts", () => {
+    const { getByTestId } = render(<NotificationToastRenderer />);
+
+    act(() => {
+      notificationToastManager.showToast({
+        message: "You are offline",
+        style: { color: "#abcdef" },
+      });
+    });
+
+    expect(
+      getByTestId("NotificationToastRenderer-message").props.style
+    ).toEqual(
+      expect.objectContaining({
+        color: "#abcdef",
+      })
+    );
+
+    expect(
+      getByTestId("NotificationToastRenderer-message").props.style.fontSize
+    ).toBeUndefined();
+  });
+
+  it("dismisses the toast on a successful upward fling", () => {
+    const dismissSpy = jest.spyOn(notificationToastManager, "dismiss");
+
+    const { getByTestId } = render(<NotificationToastRenderer />);
+
+    act(() => {
+      notificationToastManager.showToast({ message: "Added to queue" });
+    });
+
+    fireEvent(getByTestId("NotificationToastRenderer-fling-handler"), "end");
+
+    expect(dismissSpy).toHaveBeenCalled();
+  });
+
+  it("does not dismiss when the fling ends unsuccessfully", () => {
+    const dismissSpy = jest.spyOn(notificationToastManager, "dismiss");
+
+    const { getByTestId } = render(<NotificationToastRenderer />);
+
+    act(() => {
+      notificationToastManager.showToast({ message: "Added to queue" });
+    });
+
+    fireEvent(
+      getByTestId("NotificationToastRenderer-fling-handler"),
+      "endFailed"
+    );
+
+    expect(dismissSpy).not.toHaveBeenCalled();
+  });
+});

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__/resolveConfirmationToastStyle.test.ts

@@ -0,0 +1,118 @@
+import { resolveConfirmationToastStyle } from "../resolveConfirmationToastStyle";
+
+jest.mock("@applicaster/zapp-react-native-utils/reactUtils", () => ({
+  // manifestKeyParser captures currentPlatform at module load from this map
+  platformSelect: jest.fn((platforms) => {
+    if (platforms?.ios === "ios" && platforms?.android === "android") {
+      return "ios";
+    }
+
+    return platforms?.default;
+  }),
+}));
+
+describe("resolveConfirmationToastStyle", () => {
+  const theme = {
+    confirmation_toast_style_background_color: "#0188FF",
+    confirmation_toast_style_color: "#EFEFEF",
+    confirmation_toast_style_ios_font_family: "SFProText-Semibold",
+    confirmation_toast_style_android_font_family: "Roboto-Medium",
+    confirmation_toast_style_ios_font_size: 14,
+    confirmation_toast_style_android_font_size: 16,
+    confirmation_toast_style_ios_line_height: 44,
+    confirmation_toast_style_android_line_height: 40,
+    confirmation_toast_style_ios_letter_spacing: -1.4,
+    confirmation_toast_style_android_letter_spacing: -0.5,
+  };
+
+  it("maps Theme confirmation_toast_style_* keys via getAllSpecificStyles (iOS platform)", () => {
+    expect(resolveConfirmationToastStyle(theme)).toEqual({
+      backgroundColor: "#0188FF",
+      color: "#EFEFEF",
+      fontFamily: "SFProText-Semibold",
+      fontSize: 14,
+      lineHeight: 44,
+      letterSpacing: -1.4,
+    });
+  });
+
+  it("ignores other-platform keys for the current platform", () => {
+    const result = resolveConfirmationToastStyle(theme);
+
+    expect(result.fontFamily).toBe("SFProText-Semibold");
+    expect(result.fontSize).toBe(14);
+
+    expect(result).not.toEqual(
+      expect.objectContaining({
+        fontFamily: "Roboto-Medium",
+        fontSize: 16,
+      })
+    );
+  });
+
+  it("shallow-merges override style on top of Theme defaults", () => {
+    expect(
+      resolveConfirmationToastStyle(theme, {
+        backgroundColor: "#00FF00",
+        fontSize: 20,
+      })
+    ).toEqual({
+      backgroundColor: "#00FF00",
+      color: "#EFEFEF",
+      fontFamily: "SFProText-Semibold",
+      fontSize: 20,
+      lineHeight: 44,
+      letterSpacing: -1.4,
+    });
+  });
+
+  it("returns override fields when Theme is missing", () => {
+    expect(resolveConfirmationToastStyle(undefined, { color: "#fff" })).toEqual(
+      {
+        color: "#fff",
+      }
+    );
+  });
+});
+
+describe("resolveConfirmationToastStyle (android platform)", () => {
+  it("maps android platform Theme keys", () => {
+    jest.resetModules();
+
+    jest.doMock("@applicaster/zapp-react-native-utils/reactUtils", () => ({
+      platformSelect: jest.fn((platforms) => {
+        if (platforms?.ios === "ios" && platforms?.android === "android") {
+          return "android";
+        }
+
+        return platforms?.default;
+      }),
+    }));
+
+    const {
+      resolveConfirmationToastStyle: resolveAndroid,
+    } = require("../resolveConfirmationToastStyle");
+
+    const theme = {
+      confirmation_toast_style_background_color: "#0188FF",
+      confirmation_toast_style_color: "#EFEFEF",
+      confirmation_toast_style_ios_font_family: "SFProText-Semibold",
+      confirmation_toast_style_android_font_family: "Roboto-Medium",
+      confirmation_toast_style_ios_font_size: 14,
+      confirmation_toast_style_android_font_size: 16,
+      confirmation_toast_style_ios_line_height: 44,
+      confirmation_toast_style_android_line_height: 40,
+      confirmation_toast_style_ios_letter_spacing: -1.4,
+      confirmation_toast_style_android_letter_spacing: -0.5,
+    };
+
+    expect(resolveAndroid(theme)).toEqual({
+      backgroundColor: "#0188FF",
+      color: "#EFEFEF",
+      fontFamily: "Roboto-Medium",
+      fontSize: 16,
+      lineHeight: 40,
+      letterSpacing: -0.5,
+    });
+  });
+});