Client side pagination gap detection

__mocks__/@react-navigation/native/index.ts

@@ -1,9 +1,65 @@
-import {useIsFocused as realUseIsFocused, useTheme as realUseTheme} from '@react-navigation/native';
+/* eslint-disable import/prefer-default-export, import/no-import-module-exports */
+import type * as ReactNavigation from '@react-navigation/native';
+import createAddListenerMock from '../../../tests/utils/createAddListenerMock';
 
-// We only want these mocked for storybook, not jest
-const useIsFocused: typeof realUseIsFocused = process.env.NODE_ENV === 'test' ? realUseIsFocused : () => true;
+const isJestEnv = process.env.NODE_ENV === 'test';
 
-const useTheme = process.env.NODE_ENV === 'test' ? realUseTheme : () => ({});
+const realReactNavigation = isJestEnv ? jest.requireActual<typeof ReactNavigation>('@react-navigation/native') : (require('@react-navigation/native') as typeof ReactNavigation);
+
+const useIsFocused = isJestEnv ? realReactNavigation.useIsFocused : () => true;
+const useTheme = isJestEnv ? realReactNavigation.useTheme : () => ({});
+
+const {triggerTransitionEnd, addListener} = isJestEnv
+    ? createAddListenerMock()
+    : {
+          triggerTransitionEnd: () => {},
+          addListener: () => {},
+      };
+
+const useNavigation = () => ({
+    ...realReactNavigation.useNavigation,
+    navigate: jest.fn(),
+    getState: () => ({
+        routes: [],
+    }),
+    addListener,
+});
+
+type NativeNavigationMock = typeof ReactNavigation & {
+    triggerTransitionEnd: () => void;
+};
 
 export * from '@react-navigation/core';
-export {useIsFocused, useTheme};
+const Link = realReactNavigation.Link;
+const LinkingContext = realReactNavigation.LinkingContext;
+const NavigationContainer = realReactNavigation.NavigationContainer;
+const ServerContainer = realReactNavigation.ServerContainer;
+const DarkTheme = realReactNavigation.DarkTheme;
+const DefaultTheme = realReactNavigation.DefaultTheme;
+const ThemeProvider = realReactNavigation.ThemeProvider;
+const useLinkBuilder = realReactNavigation.useLinkBuilder;
+const useLinkProps = realReactNavigation.useLinkProps;
+const useLinkTo = realReactNavigation.useLinkTo;
+const useScrollToTop = realReactNavigation.useScrollToTop;
+export {
+    // Overriden modules
+    useIsFocused,
+    useTheme,
+    useNavigation,
+    triggerTransitionEnd,
+
+    // Theme modules are left alone
+    Link,
+    LinkingContext,
+    NavigationContainer,
+    ServerContainer,
+    DarkTheme,
+    DefaultTheme,
+    ThemeProvider,
+    useLinkBuilder,
+    useLinkProps,
+    useLinkTo,
+    useScrollToTop,
+};
+
+export type {NativeNavigationMock};

__mocks__/react-native.ts

@@ -86,7 +86,7 @@ jest.doMock('react-native', () => {
             },
             Dimensions: {
                 ...ReactNative.Dimensions,
-                addEventListener: jest.fn(),
+                addEventListener: jest.fn(() => ({remove: jest.fn()})),
                 get: () => dimensions,
                 set: (newDimensions: Record<string, number>) => {
                     dimensions = newDimensions;
@@ -98,7 +98,10 @@ jest.doMock('react-native', () => {
             // so it seems easier to just run the callback immediately in tests.
             InteractionManager: {
                 ...ReactNative.InteractionManager,
-                runAfterInteractions: (callback: () => void) => callback(),
+                runAfterInteractions: (callback: () => void) => {
+                    callback();
+                    return {cancel: () => {}};
+                },
             },
         },
         ReactNative,

jest/setup.ts

@@ -2,6 +2,7 @@ import '@shopify/flash-list/jestSetup';
 import 'react-native-gesture-handler/jestSetup';
 import type * as RNKeyboardController from 'react-native-keyboard-controller';
 import mockStorage from 'react-native-onyx/dist/storage/__mocks__';
+import type Animated from 'react-native-reanimated';
 import 'setimmediate';
 import mockFSLibrary from './setupMockFullstoryLib';
 import setupMockImages from './setupMockImages';
@@ -21,6 +22,16 @@ jest.mock('react-native-onyx/dist/storage', () => mockStorage);
 // Mock NativeEventEmitter as it is needed to provide mocks of libraries which include it
 jest.mock('react-native/Libraries/EventEmitter/NativeEventEmitter');
 
+// Needed for: https://stackoverflow.com/questions/76903168/mocking-libraries-in-jest
+jest.mock('react-native/Libraries/LogBox/LogBox', () => ({
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    __esModule: true,
+    default: {
+        ignoreLogs: jest.fn(),
+        ignoreAllLogs: jest.fn(),
+    },
+}));
+
 // Turn off the console logs for timing events. They are not relevant for unit tests and create a lot of noise
 jest.spyOn(console, 'debug').mockImplementation((...params: string[]) => {
     if (params[0].startsWith('Timing:')) {
@@ -55,4 +66,10 @@ jest.mock('react-native-share', () => ({
     default: jest.fn(),
 }));
 
+jest.mock('react-native-reanimated', () => ({
+    ...jest.requireActual<typeof Animated>('react-native-reanimated/mock'),
+    createAnimatedPropAdapter: jest.fn,
+    useReducedMotion: jest.fn,
+}));
+
 jest.mock('react-native-keyboard-controller', () => require<typeof RNKeyboardController>('react-native-keyboard-controller/jest'));

package.json

@@ -301,7 +301,7 @@
     "ts-jest": "^29.1.2",
     "ts-node": "^10.9.2",
     "tsconfig-paths": "^4.2.0",
-    "type-fest": "^4.10.2",
+    "type-fest": "4.20.0",
     "typescript": "^5.4.5",
     "wait-port": "^0.2.9",
     "webpack": "^5.76.0",

src/CONST.ts

@@ -5081,6 +5081,9 @@ const CONST = {
 
     SUBSCRIPTION_SIZE_LIMIT: 20000,
 
+    PAGINATION_START_ID: '-1',
+    PAGINATION_END_ID: '-2',
+
     PAYMENT_CARD_CURRENCY: {
         USD: 'USD',
         AUD: 'AUD',

src/ONYXKEYS.ts

@@ -405,6 +405,7 @@ const ONYXKEYS = {
         REPORT_METADATA: 'reportMetadata_',
         REPORT_ACTIONS: 'reportActions_',
         REPORT_ACTIONS_DRAFTS: 'reportActionsDrafts_',
+        REPORT_ACTIONS_PAGES: 'reportActionsPages_',
         REPORT_ACTIONS_REACTIONS: 'reportActionsReactions_',
         REPORT_DRAFT_COMMENT: 'reportDraftComment_',
         REPORT_IS_COMPOSER_FULL_SIZE: 'reportIsComposerFullSize_',
@@ -649,6 +650,7 @@ type OnyxCollectionValuesMapping = {
     [ONYXKEYS.COLLECTION.REPORT_METADATA]: OnyxTypes.ReportMetadata;
     [ONYXKEYS.COLLECTION.REPORT_ACTIONS]: OnyxTypes.ReportActions;
     [ONYXKEYS.COLLECTION.REPORT_ACTIONS_DRAFTS]: OnyxTypes.ReportActionsDrafts;
+    [ONYXKEYS.COLLECTION.REPORT_ACTIONS_PAGES]: OnyxTypes.Pages;
     [ONYXKEYS.COLLECTION.REPORT_ACTIONS_REACTIONS]: OnyxTypes.ReportActionReactions;
     [ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT]: string;
     [ONYXKEYS.COLLECTION.REPORT_IS_COMPOSER_FULL_SIZE]: boolean;
@@ -811,11 +813,12 @@ type OnyxFormDraftKey = keyof OnyxFormDraftValuesMapping;
 type OnyxValueKey = keyof OnyxValuesMapping;
 
 type OnyxKey = OnyxValueKey | OnyxCollectionKey | OnyxFormKey | OnyxFormDraftKey;
+type OnyxPagesKey = typeof ONYXKEYS.COLLECTION.REPORT_ACTIONS_PAGES;
 
 type MissingOnyxKeysError = `Error: Types don't match, OnyxKey type is missing: ${Exclude<AllOnyxKeys, OnyxKey>}`;
 /** If this type errors, it means that the `OnyxKey` type is missing some keys. */
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 type AssertOnyxKeys = AssertTypesEqual<AllOnyxKeys, OnyxKey, MissingOnyxKeysError>;
 
 export default ONYXKEYS;
-export type {OnyxCollectionKey, OnyxCollectionValuesMapping, OnyxFormDraftKey, OnyxFormKey, OnyxFormValuesMapping, OnyxKey, OnyxValueKey, OnyxValues};
+export type {OnyxCollectionKey, OnyxCollectionValuesMapping, OnyxFormDraftKey, OnyxFormKey, OnyxFormValuesMapping, OnyxKey, OnyxPagesKey, OnyxValueKey, OnyxValues};