@applicaster/zapp-react-native-ui-components 16.0.0-rc.8 → 16.0.0-rc.80

package/Components/PlayerContainer/PlayerContainer.tsx

@@ -9,6 +9,7 @@ import {
   platformSelect,
   isAndroidTVPlatform,
   isTvOSPlatform,
+  isApplePlatform,
 } from "@applicaster/zapp-react-native-utils/reactUtils";
 import {
   isAudioItem,
@@ -60,6 +61,7 @@ import {
   PlayerNativeSendCommand,
 } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/playerNativeCommand";
 import { useAppData } from "@applicaster/zapp-react-native-redux";
+import { PLAYER_EVENTS } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/const";
 
 type Props = {
   Player: React.ComponentType<any>;
@@ -188,12 +190,10 @@ const renderApplePlayer = ({
     return null;
   }
 
-  const { title, summary } = item || {};
-
+  // Title/Subtitle are not resolved here: `ProgramInfo` reads them from the
+  // player manager's content channel via `usePlayerContent`.
   return (
     <ProgramInfo
-      title={title}
-      subtitle={summary}
       plugin_configuration={pluginConfiguration}
       videoStyle={videoStyle}
     />
@@ -265,14 +265,12 @@ const PlayerContainerComponent = (props: Props) => {
     navigator.goBack();
   }, [isModal, state.playerId, showNavBar, navigator]);
 
-  const pluginConfiguration = React.useMemo(() => {
-    return (
-      playerManager.getPluginConfiguration() ||
-      R.prop("__plugin_configuration", Player)
-    );
-  }, [playerManager.isRegistered()]);
+  const pluginConfiguration = React.useMemo(
+    () => player?.getPluginConfiguration(),
+    [player]
+  );
 
-  const playEntry = (entry) => navigator.replaceTop(entry, { mode });
+  const playEntry = (entry: ZappEntry) => navigator.replaceTop(entry, { mode });
 
   const onPlayNextPerformNextVideoPlay = React.useCallback(() => {
     if (!playNextOverlayState.entry) {
@@ -284,12 +282,16 @@ const PlayerContainerComponent = (props: Props) => {
     }
 
     log_debug(
-      `onPlayNextPerformNextVideoPlay: delay completed, replaceTop to item: ${playNextOverlayState.entry.title}, id: ${playNextOverlayState.entry.id}`
+      `onPlayNextPerformNextVideoPlay: delay completed, replaceTop to item: ${playNextOverlayState.entry.title}, id: ${playNextOverlayState.entry.id}, outgoing item id: ${item?.id}`
     );
 
+    playNextOverlayState.hidePlayNext();
+
+    playerEvent(PLAYER_EVENTS.PlayNextTriggered, { id: item?.id });
+
     setIsLoadingNextVideo(true);
     playEntry(playNextOverlayState.entry);
-  }, [playNextOverlayState]);
+  }, [playNextOverlayState, item?.id]);
 
   const playNextData: Nullable<PlayNextData> = React.useMemo(() => {
     if (!playNextOverlayState) {
@@ -346,11 +348,15 @@ const PlayerContainerComponent = (props: Props) => {
     setIsLoadingNextVideo(false);
 
     const resumeTime = Number(item?.extensions?.resumeTime);
+    const activePlayer = playerManager.getActivePlayer();
 
-    // Сhecking that the player itself knows where to start playing, and there is no need to call seekTo after returning from the Сhromecast
+    // Сhecking that the player itself knows where to start playing, and there is no need to call seekTo after returning from the Сhromecast.
+    // Live streams and a missing/zero resume position are skipped: seeking to 0 on
+    // a live stream pulls playback off the live edge into a buffer-starvation seek loop.
     if (
-      !playerManager.getActivePlayer()?.hasResumePosition() &&
-      !isNaN(resumeTime)
+      !activePlayer?.hasResumePosition() &&
+      resumeTime > 0 &&
+      !activePlayer?.isLive()
     ) {
       player?.seekTo(resumeTime);
     }
@@ -468,6 +474,8 @@ const PlayerContainerComponent = (props: Props) => {
     if (isModal && mode === VideoModalMode.MAXIMIZED) {
       if (disableMiniPlayer) {
         navigator.closeVideoModal();
+      } else {
+        navigator.minimiseVideoModal();
       }
     }
 
@@ -491,7 +499,7 @@ const PlayerContainerComponent = (props: Props) => {
   const isAudioContent = isAudioItem(item);
 
   useEffect(() => {
-    if (!isAudioContent) {
+    if (!isAudioContent && isApplePlatform()) {
       sendQuickBrickEvent(
         QUICK_BRICK_EVENTS.IDLE_TIMER_DISABLED as QuickBrickEvent,
         {

package/Components/PlayerContainer/ProgramInfo/index.tsx

@@ -7,12 +7,11 @@ import * as React from "react";
 import { Text, TextStyle, View, ViewStyle } from "react-native";
 import { QBImage as Image } from "@applicaster/zapp-react-native-ui-components/Components/Image";
 
+import { usePlayerContent } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayerContent";
 import * as programStyles from "./styles";
 
 type Props = {
   logo?: string;
-  title: string;
-  subtitle: string;
   isAudioContent: boolean;
   styles: {};
   plugin_configuration: {
@@ -28,13 +27,13 @@ const defaultColor = "#EFEFEF";
 
 function ProgramInfoComponent({
   logo,
-  title = "",
-  subtitle = "",
   isAudioContent,
   styles,
   plugin_configuration = {},
   videoStyle = {},
 }: Props) {
+  const { title = "", summary: subtitle = "" } = usePlayerContent();
+
   const platformKey = styleKeys.style_namespace;
 
   const colorTitle =

package/Components/PlayerContainer/__tests__/PlayerContainer.test.tsx

@@ -0,0 +1,337 @@
+import * as React from "react";
+import { render } from "@testing-library/react-native";
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/appUtils/playerManager",
+  () => ({
+    playerManager: {
+      invokeHandler: jest.fn(),
+      getPluginConfiguration: jest.fn(() => ({})),
+      isRegistered: jest.fn(() => true),
+      on: jest.fn().mockReturnThis(),
+      removeHandler: jest.fn().mockReturnThis(),
+      getActivePlayer: jest.fn(() => null),
+      closeNativePlayer: jest.fn(),
+    },
+  })
+);
+
+jest.mock("@applicaster/zapp-react-native-utils/reactUtils", () => ({
+  // Defaults to `false` for the hardware-back-handling tests below, which
+  // key off `isTV`. The ProgramInfo/content-context describe block below
+  // overrides this per test (`isTV()` is also what PlayerContainer's
+  // `playerContentValue` uses to pick TV vs mobile data keys, decoupled
+  // from `isTvOSPlatform` below).
+  isTV: jest.fn(() => false),
+  isAndroidTVPlatform: jest.fn(() => false),
+  // `isTvOSPlatform` backs a module-level constant in PlayerContainer.tsx that
+  // is read once at import time, so it must already be `true` here in order
+  // to exercise `renderApplePlayer`'s tvOS-only ProgramInfo branch in this
+  // test file. It does not affect the hardware-back-handling tests below,
+  // which key off `isTV` instead.
+  isTvOSPlatform: jest.fn(() => true),
+  isApplePlatform: jest.fn(() => true),
+  platformSelect: jest.fn(({ native }) => native),
+}));
+
+jest.mock("@applicaster/zapp-react-native-utils/playerUtils", () => {
+  // Keep the real data-key resolver (createConfigValueGetter,
+  // resolvePlayerContentText, VIDEO_PLAYER_CONTENT_DATA_KEYS) so the tvOS
+  // ProgramInfo data-key tests exercise actual resolution logic, not a stub.
+  const actual = jest.requireActual(
+    "@applicaster/zapp-react-native-utils/playerUtils"
+  );
+
+  return {
+    ...actual,
+    isAudioItem: jest.fn(() => false),
+    isInlineTV: jest.fn(() => false),
+  };
+});
+
+jest.mock(
+  "@applicaster/zapp-react-native-tvos-ui-components/Components/TVEventHandlerComponent",
+  () => ({
+    TVEventHandlerComponent: ({ children }) => children,
+  })
+);
+
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/utils", () => ({
+  usePrevious: jest.fn(),
+}));
+
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks", () => {
+  const navigator = {
+    closeVideoModal: jest.fn(),
+    minimiseVideoModal: jest.fn(),
+    maximiseVideoModal: jest.fn(),
+    fullscreenVideoModal: jest.fn(),
+    isVideoModalDocked: jest.fn(() => false),
+    goBack: jest.fn(),
+    replaceTop: jest.fn(),
+    push: jest.fn(),
+    setPlayNextOverlay: jest.fn(),
+    currentRoute: "/playable/entry-1",
+  };
+
+  const backHandlerRef: { current: (() => boolean) | null } = {
+    current: null,
+  };
+
+  return {
+    useBackHandler: jest.fn((cb) => {
+      backHandlerRef.current = cb;
+    }),
+    useNavigation: jest.fn(() => navigator),
+    __navigator: navigator,
+    __backHandlerRef: backHandlerRef,
+  };
+});
+
+jest.mock("@applicaster/zapp-react-native-bridge/QuickBrick", () => ({
+  QUICK_BRICK_EVENTS: {
+    IDLE_TIMER_DISABLED: "IDLE_TIMER_DISABLED",
+    MOVE_APP_TO_BACKGROUND: "MOVE_APP_TO_BACKGROUND",
+  },
+  sendQuickBrickEvent: jest.fn(),
+}));
+
+// Stubbed so PlayerContainer can render without ProgramInfo's own
+// redux/style plumbing. It no longer needs to capture Title/Subtitle: those
+// come from the player manager's content channel, and the key-set selection
+// they depend on is covered directly in
+// `playerManager/__tests__/playerContent.test.ts`.
+jest.mock("../ProgramInfo", () => ({
+  ProgramInfo: () => null,
+}));
+
+jest.mock("../../AudioPlayer", () => ({
+  AudioPlayer: () => null,
+}));
+
+jest.mock("../logger", () => ({
+  log_debug: jest.fn(),
+  log_info: jest.fn(),
+  log_warning: jest.fn(),
+  playerContainerLogger: { error: jest.fn() },
+}));
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayer",
+  () => {
+    const player = {
+      addListener: jest.fn(),
+      removeListener: jest.fn(),
+      isPaused: jest.fn(() => false),
+      isAd: jest.fn(() => false),
+      seekTo: jest.fn(),
+      getPluginConfiguration: jest.fn(() => ({})),
+      getOverlayObservable: jest.fn(() => ({ getPlayNextEntry: () => null })),
+    };
+
+    return {
+      usePlayer: jest.fn(() => player),
+      __player: player,
+    };
+  }
+);
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayNextOverlay",
+  () => ({
+    usePlayNextOverlay: jest.fn(() => null),
+  })
+);
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/appUtils/playerManager/playerNativeCommand",
+  () => ({
+    PlayerNativeCommandTypes: { clearPlayerData: "clearPlayerData" },
+    PlayerNativeSendCommand: jest.fn(),
+  })
+);
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext",
+  () => ({
+    useSetNavbarState: jest.fn(() => ({ setVisible: jest.fn() })),
+  })
+);
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/screen/useTargetScreenData",
+  () => ({
+    useTargetScreenData: jest.fn(() => ({ id: "screen-id", styles: {} })),
+  })
+);
+
+jest.mock("../PlayerContainerContext", () => {
+  const ReactActual = require("react");
+
+  const PlayerContainerContext = ReactActual.createContext({
+    isLanguageOverlayVisible: false,
+    bottomFocusableId: "bottom",
+    showComponentsContainer: false,
+    refs: null,
+  });
+
+  return {
+    PlayerContainerContext,
+    // Mirrors just enough of the real provider for these tests: renders an
+    // actual `PlayerContainerContext.Provider` so the real
+    // `PlayerContainerContext.Consumer` inside PlayerContainer.tsx sees the
+    // container fields a real provider would give it, instead of a bare
+    // `({ children }) => children` passthrough.
+    PlayerContainerContextProvider: ({ children }: any) =>
+      ReactActual.createElement(
+        PlayerContainerContext.Provider,
+        {
+          value: {
+            isLanguageOverlayVisible: false,
+            bottomFocusableId: "bottom",
+            showComponentsContainer: false,
+            refs: null,
+          },
+        },
+        children
+      ),
+  };
+});
+
+jest.mock(
+  "@applicaster/zapp-react-native-ui-components/Components/FocusableGroup",
+  () => ({
+    FocusableGroup: ({ children }) => children,
+  })
+);
+
+jest.mock("../WappersView/PlayerFocusableWrapperView", () => ({
+  PlayerFocusableWrapperView: ({ children }) => children,
+}));
+
+jest.mock("../WappersView/ComponentFocusableWrapperView", () => ({
+  ComponentFocusableWrapperView: () => null,
+}));
+
+jest.mock("../index", () => ({
+  FocusableGroupMainContainerId: "player-container-general",
+}));
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/navigationUtils/itemTypeMatchers",
+  () => ({
+    isPlayable: jest.fn(() => true),
+  })
+);
+
+jest.mock("../../GeneralContentScreen", () => ({
+  GeneralContentScreen: () => null,
+}));
+
+jest.mock("@applicaster/zapp-react-native-redux", () => ({
+  useAppData: jest.fn(() => ({ isTabletPortrait: false })),
+}));
+
+import { PlayerContainer, VideoModalMode } from "../PlayerContainer";
+
+const { __navigator: mockNavigator, __backHandlerRef: mockBackHandlerRef } =
+  jest.requireMock("@applicaster/zapp-react-native-utils/reactHooks");
+
+const { playerManager: mockPlayerManager } = jest.requireMock(
+  "@applicaster/zapp-react-native-utils/appUtils/playerManager"
+);
+
+const { __player: mockPlayer } = jest.requireMock(
+  "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayer"
+);
+
+const { isTV: mockIsTV } = jest.requireMock(
+  "@applicaster/zapp-react-native-utils/reactUtils"
+);
+
+// Renders children so that `renderApplePlayer`'s returned <ProgramInfo>
+// element (passed as this component's `children` prop) actually mounts —
+// otherwise React never invokes the ProgramInfo function component at all.
+const Player = React.forwardRef((props: any, _ref) => props.children ?? null);
+
+const item = {
+  id: "entry-1",
+  title: "Test entry",
+  summary: "",
+  content: { src: "https://example.com/video.m3u8" },
+  extensions: {},
+} as any;
+
+const renderPlayerContainer = (props = {}) =>
+  render(
+    <PlayerContainer
+      Player={Player}
+      item={item}
+      style={{}}
+      loadPipesData={jest.fn()}
+      isModal={true}
+      mode={VideoModalMode.MAXIMIZED}
+      {...props}
+    />
+  );
+
+const pressHardwareBack = () => {
+  if (!mockBackHandlerRef.current) {
+    throw new Error("back handler was not registered via useBackHandler");
+  }
+
+  return mockBackHandlerRef.current();
+};
+
+describe("PlayerContainer hardware back handling", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockIsTV.mockReturnValue(false);
+    mockBackHandlerRef.current = null;
+    mockPlayer.getPluginConfiguration.mockReturnValue({});
+    mockPlayer.isPaused.mockReturnValue(false);
+    mockPlayer.isAd.mockReturnValue(false);
+
+    mockPlayer.getOverlayObservable.mockReturnValue({
+      getPlayNextEntry: () => null,
+    });
+
+    mockPlayerManager.getPluginConfiguration.mockReturnValue({});
+    mockPlayerManager.on.mockReturnThis();
+    mockPlayerManager.removeHandler.mockReturnThis();
+  });
+
+  it("minimises the video modal on back press when mini player is enabled", () => {
+    renderPlayerContainer();
+
+    const handled = pressHardwareBack();
+
+    expect(mockNavigator.minimiseVideoModal).toHaveBeenCalled();
+    expect(mockNavigator.closeVideoModal).not.toHaveBeenCalled();
+    expect(handled).toBe(true);
+  });
+
+  it("closes the video modal on back press when mini player is disabled", () => {
+    mockPlayer.getPluginConfiguration.mockReturnValue({
+      disable_mini_player_when_inline: true,
+    });
+
+    renderPlayerContainer();
+
+    const handled = pressHardwareBack();
+
+    expect(mockNavigator.closeVideoModal).toHaveBeenCalled();
+    expect(mockNavigator.minimiseVideoModal).not.toHaveBeenCalled();
+    expect(handled).toBe(true);
+  });
+
+  it("does not handle back press when the player is already minimised", () => {
+    renderPlayerContainer({ mode: VideoModalMode.MINIMIZED });
+
+    const handled = pressHardwareBack();
+
+    expect(handled).toBe(false);
+    expect(mockNavigator.minimiseVideoModal).not.toHaveBeenCalled();
+    expect(mockNavigator.closeVideoModal).not.toHaveBeenCalled();
+  });
+});

package/Components/PreloaderWrapper/index.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 type PreloaderWrapperProps = {
   showPreloader?: boolean;
-  children?: React.ReactNode;
+  children: React.ReactElement | null;
 };
 
 export const PreloaderWrapper: React.FC<PreloaderWrapperProps> = ({

package/Components/River/ComponentsMap/ComponentsMap.tsx

@@ -9,7 +9,7 @@ import { useScreenConfiguration } from "../useScreenConfiguration";
 import { RefreshControl } from "../RefreshControl";
 import { ifEmptyUseFallback } from "@applicaster/zapp-react-native-utils/cellUtils";
 import {
-  usePipesCacheReset,
+  useMarkPipesDataStale,
   useProfilerLogging,
 } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { useLoadingState } from "./hooks/useLoadingState";
@@ -154,7 +154,7 @@ function ComponentsMapComponent(props: Props) {
     [flatListHeight]
   );
 
-  usePipesCacheReset(riverId, riverComponents);
+  useMarkPipesDataStale(riverId, riverComponents);
 
   const refreshControl = React.useMemo(
     () => (pullToRefreshEnabled ? <RefreshControl /> : null),

package/Components/River/__tests__/__snapshots__/componentsMap.test.js.snap

@@ -10,11 +10,7 @@ exports[`componentsMap renders renders components map correctly 1`] = `
 >
   <View
     onLayout={[Function]}
-    style={
-      {
-        "flex": 1,
-      }
-    }
+    style={{}}
   >
     <RCTScrollView
       ListFooterComponent={
@@ -167,11 +163,7 @@ exports[`componentsMap renders renders components map correctly 1`] = `
         >
           <View
             onLayout={[Function]}
-            style={
-              {
-                "flex": 1,
-              }
-            }
+            style={{}}
           >
             <View />
           </View>
@@ -183,11 +175,7 @@ exports[`componentsMap renders renders components map correctly 1`] = `
         >
           <View
             onLayout={[Function]}
-            style={
-              {
-                "flex": 1,
-              }
-            }
+            style={{}}
           />
         </View>
         <View

package/Components/Screen/index.tsx

@@ -18,10 +18,13 @@ import {
   useScreenData,
 } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { getNavigationPluginModule } from "@applicaster/zapp-react-native-app/App/Layout/layoutHelpers";
+import {
+  isValidColor,
+  isTransparentColor,
+} from "@applicaster/zapp-react-native-utils/colorUtils";
 
 import { RouteManager } from "../RouteManager";
 import { useScreenConfiguration } from "../River/useScreenConfiguration";
-import { isValidColor } from "./utils";
 import { useWaitForValidOrientation } from "./hooks";
 
 const screenStyles = {
@@ -82,9 +85,10 @@ export function Screen(_props: Props) {
   const style = React.useMemo(
     () => ({
       ...screenStyles,
-      backgroundColor: isValidColor(backgroundColor)
-        ? backgroundColor
-        : theme.app_background_color,
+      backgroundColor:
+        isValidColor(backgroundColor) && !isTransparentColor(backgroundColor)
+          ? backgroundColor
+          : theme.app_background_color,
     }),
     [theme.app_background_color, backgroundColor]
   );

package/Components/ScreenFeedLoader/ScreenFeedLoader.tsx

@@ -8,9 +8,11 @@ import { componentsLogger } from "../../Helpers/logger";
 const logger = componentsLogger.addSubsystem("ScreenFeedLoader");
 
 /** Loads and provides `feedData` and store to  */
-export const ScreenFeedLoader: React.FC<
-  React.PropsWithChildren<{ id: string; feedData: any }>
-> = ({ id, feedData, children }) => {
+export const ScreenFeedLoader: React.FC<{
+  id: string;
+  feedData: any;
+  children: React.ReactElement | null;
+}> = ({ id, feedData, children }) => {
   const { source: feedUrl, mapping } = feedData;
 
   const { data, loading, error } = useFeedLoader({

package/Components/ScreenResolverFeedProvider/ScreenResolverFeedProvider.tsx

@@ -8,7 +8,7 @@ export const ScreenResolverFeedProvider = ({
   useFeedData,
 }: {
   id: string;
-  children: React.ReactNode;
+  children: React.ReactElement | null;
   useFeedData: (id: string) => Option<ZappDataSource>;
 }) => {
   const feedData = useFeedData(id);

package/Components/ScreenRevealManager/ScreenRevealManager.ts

@@ -42,9 +42,25 @@ export class ScreenRevealManager {
   private subject$ = new Subject<void>();
   private subscription: Subscription;
 
-  constructor(componentsToRender: ZappUIComponent[], callback: Callback) {
+  /**
+   * @param initialNumberToLoad how many components to wait for before revealing
+   * the screen. Staggering exists so a screen full of network-backed components
+   * does not load them all at once. A caller that has nothing to stagger - see
+   * `disableIncrementalLoading` on the HOC - passes the full count here so the
+   * reveal waits for exactly what gets rendered. Omitted, the count is derived
+   * from the components themselves.
+   */
+  constructor(
+    componentsToRender: ZappUIComponent[],
+    callback: Callback,
+    initialNumberToLoad?: number
+  ) {
     this.numberOfComponentsWaitToLoadBeforePresent =
-      getNumberOfComponentsWaitToLoadBeforePresent(componentsToRender);
+      initialNumberToLoad == null
+        ? getNumberOfComponentsWaitToLoadBeforePresent(componentsToRender)
+        : // Clamped like the computed path: waiting for components that do not
+          // exist would hold the screen behind its overlay until the timeout.
+          Math.min(initialNumberToLoad, componentsToRender.length);
 
     this.renderingState = makeListOf<ComponentLoadingState>(
       COMPONENT_LOADING_STATE.UNKNOWN,

package/Components/ScreenRevealManager/__tests__/ScreenRevealManager.test.ts

@@ -22,6 +22,42 @@ import { makeListOf } from "@applicaster/zapp-react-native-utils/arrayUtils";
 import { isFirstComponentGallery } from "@applicaster/zapp-react-native-utils/componentsUtils";
 import { withTimeout$ } from "@applicaster/zapp-react-native-utils/idleUtils";
 
+describe("ScreenRevealManager explicit component count", () => {
+  beforeEach(() => {
+    (isFirstComponentGallery as jest.Mock).mockReturnValue(false);
+
+    (makeListOf as jest.Mock).mockImplementation((value, length) =>
+      Array(length).fill(value)
+    );
+
+    (withTimeout$ as jest.Mock).mockReturnValue(new Subject());
+  });
+
+  it("waits for the number of components it is given, not the computed default", () => {
+    const components = Array(6).fill({}) as any;
+
+    const manager = new ScreenRevealManager(components, jest.fn(), 6);
+
+    expect(manager.numberOfComponentsWaitToLoadBeforePresent).toBe(6);
+  });
+
+  it("never waits for more components than it was handed", () => {
+    const components = Array(3).fill({}) as any;
+
+    const manager = new ScreenRevealManager(components, jest.fn(), 10);
+
+    expect(manager.numberOfComponentsWaitToLoadBeforePresent).toBe(3);
+  });
+
+  it("falls back to the computed default when given no explicit count", () => {
+    const components = Array(6).fill({}) as any;
+
+    const manager = new ScreenRevealManager(components, jest.fn());
+
+    expect(manager.numberOfComponentsWaitToLoadBeforePresent).toBe(3);
+  });
+});
+
 describe("ScreenRevealManager", () => {
   let mockCallback: jest.Mock;
   let timeout$: Subject<void>;