test: [IOCOM-1830] fimsHistoryNonEmptyContent tests

jestSetup.js

@@ -12,6 +12,7 @@ import mockRNDeviceInfo from "react-native-device-info/jest/react-native-device-
 import mockZendesk from "./ts/__mocks__/io-react-native-zendesk.ts";
 
 import "react-native-get-random-values";
+require("@shopify/flash-list/jestSetup");
 
 jest.mock("@pagopa/io-react-native-zendesk", () => mockZendesk);
 jest.mock("@react-native-async-storage/async-storage", () => mockAsyncStorage);

ts/features/fims/history/components/FimsHistoryNonEmptyContent.tsx

@@ -1,29 +1,28 @@
-import { Divider, IOStyles } from "@pagopa/io-app-design-system";
+import { Divider, FooterActions, IOStyles } from "@pagopa/io-app-design-system";
 import { FlashList } from "@shopify/flash-list";
 import { AccessHistoryPage } from "../../../../../definitions/fims_history/AccessHistoryPage";
-import * as RemoteValue from "../../../../common/model/RemoteValue";
-import { FooterActions } from "../../../../components/ui/FooterActions";
 import { useFooterActionsMeasurements } from "../../../../hooks/useFooterActionsMeasurements";
 import I18n from "../../../../i18n";
 import { useIOSelector } from "../../../../store/hooks";
-import { LoadingFimsHistoryItemsFooter } from "../components/FimsHistoryLoaders";
 import { useFimsHistoryExport } from "../hooks/useFimsHistoryResultToasts";
 import {
-  fimsHistoryExportStateSelector,
+  isFimsHistoryExportingSelector,
   isFimsHistoryLoadingSelector
 } from "../store/selectors";
 import { FimsHistoryHeaderComponent } from "./FimsHistoryHeaderComponent";
 import { FimsHistoryListItemPicker } from "./FimsHistoryListItemPicker";
+import { LoadingFimsHistoryItemsFooter } from "./FimsHistoryLoaders";
+
+export type FimsHistoryNonEmptyContentProps = {
+  accesses?: AccessHistoryPage;
+  fetchMore: () => void;
+};
 
 export const FimsHistoryNonEmptyContent = ({
   accesses,
   fetchMore
-}: {
-  accesses?: AccessHistoryPage;
-  fetchMore: () => void;
-}) => {
-  const historyExportState = useIOSelector(fimsHistoryExportStateSelector);
-  const isHistoryExporting = RemoteValue.isLoading(historyExportState);
+}: FimsHistoryNonEmptyContentProps) => {
+  const isHistoryExporting = useIOSelector(isFimsHistoryExportingSelector);
   const isHistoryLoading = useIOSelector(isFimsHistoryLoadingSelector);
 
   const { handleExportOnPress } = useFimsHistoryExport();
@@ -60,12 +59,14 @@ export const FimsHistoryNonEmptyContent = ({
       {!shouldHideFooter && (
         <FooterActions
           onMeasure={handleFooterActionsMeasurements}
+          testID="export-footer"
           actions={{
             type: "SingleButton",
             primary: {
               loading: isHistoryExporting,
               label: I18n.t("FIMS.history.exportData.CTA"),
-              onPress: handleExportOnPress
+              onPress: handleExportOnPress,
+              testID: "export-button"
             }
           }}
         />

ts/features/fims/history/components/__mocks__/FimsHistoryListItemPicker.tsx

@@ -0,0 +1,5 @@
+import { Text } from "react-native";
+
+export const FimsHistoryListItemPicker = () => (
+  <Text>TESTING LIST ITEM FROM PICKER</Text>
+);

ts/features/fims/history/components/__mocks__/FimsHistoryLoaders.tsx

@@ -1,3 +1,6 @@
 import { Text } from "react-native";
 
 export const LoadingFimsHistoryListItem = () => <Text>LOADING_LIST_ITEM</Text>;
+export const LoadingFimsHistoryItemsFooter = () => (
+  <Text testID="testing-footer">LOADING_FOOTER</Text>
+);

ts/features/fims/history/components/__tests__/FimsHistoryNonEmptyContent.test.tsx

@@ -0,0 +1,169 @@
+jest.mock("../../hooks/useFimsHistoryResultToasts.tsx");
+jest.mock("../FimsHistoryLoaders.tsx");
+jest.mock("../FimsHistoryListItemPicker.tsx");
+
+import * as pot from "@pagopa/ts-commons/lib/pot";
+import { fireEvent } from "@testing-library/react-native";
+import { createStore } from "redux";
+import { AccessHistoryPage } from "../../../../../../definitions/fims_history/AccessHistoryPage";
+import {
+  remoteLoading,
+  remoteReady
+} from "../../../../../common/model/RemoteValue";
+import { applicationChangeState } from "../../../../../store/actions/application";
+import { appReducer } from "../../../../../store/reducers";
+import { GlobalState } from "../../../../../store/reducers/types";
+import { renderScreenWithNavigationStoreContext } from "../../../../../utils/testWrapper";
+import { FIMS_ROUTES } from "../../../common/navigation";
+import {
+  FimsHistoryNonEmptyContent,
+  FimsHistoryNonEmptyContentProps
+} from "../FimsHistoryNonEmptyContent";
+import * as HOOK from "../../hooks/useFimsHistoryResultToasts";
+
+const mockAccess = {
+  id: "TESTING",
+  redirect: { display_name: "TESTING", uri: "TESTING" },
+  service_id: "TESTING_SID",
+  timestamp: new Date(0)
+};
+
+const mockAccesses: AccessHistoryPage = {
+  data: [mockAccess]
+};
+const mockEmptyAccesses: AccessHistoryPage = {
+  data: []
+};
+
+// ------------------- UTILS
+
+const generateMockStoreForSelectors = (
+  isHistoryLoading: boolean,
+  isHistoryExporting: boolean
+) =>
+  ({
+    features: {
+      fims: {
+        history: {
+          historyExportState: isHistoryExporting
+            ? remoteLoading
+            : remoteReady("SUCCESS"),
+          consentsList: isHistoryLoading ? pot.someLoading({}) : pot.none
+        }
+      }
+    }
+  } as GlobalState);
+const renderComponent = (
+  props: FimsHistoryNonEmptyContentProps,
+  mockState: GlobalState
+) => {
+  const globalState = appReducer(mockState, applicationChangeState("active"));
+
+  return renderScreenWithNavigationStoreContext(
+    () => <FimsHistoryNonEmptyContent {...props} />,
+    FIMS_ROUTES.HISTORY,
+    {},
+    createStore(appReducer, globalState as any)
+  );
+};
+
+// --------------- END UTILS
+
+// eslint-disable-next-line sonarjs/cognitive-complexity
+describe("fimsHistoryNonEmptyContent", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    jest.restoreAllMocks();
+  });
+
+  for (const historyLoading of [true, false]) {
+    for (const historyExporting of [true, false]) {
+      for (const hasAccesses of [true, false]) {
+        const fetchMore = jest.fn();
+        const shouldShowLoadingListFooter = historyLoading;
+        const shouldRenderPageFooter = !historyLoading || hasAccesses; // component logic is !( hLoading && !accesses )
+        const store = generateMockStoreForSelectors(
+          historyLoading,
+          historyExporting
+        );
+
+        const testString = `${+hasAccesses} accesses, historyLoading = ${historyLoading} and historyExporting = ${historyExporting}`;
+
+        it(`should fetch automatically to try and fill the list, and match snapshot for ${testString} `, () => {
+          const component = renderComponent(
+            {
+              accesses: hasAccesses ? mockAccesses : mockEmptyAccesses,
+              fetchMore
+            },
+            store
+          );
+          expect(component).toBeTruthy();
+          expect(component).toMatchSnapshot();
+          expect(fetchMore).toHaveBeenCalledTimes(1);
+        });
+
+        it(`should ${
+          shouldShowLoadingListFooter ? "" : "not"
+        } render list loading footer in case of ${testString} `, () => {
+          const component = renderComponent(
+            {
+              accesses: hasAccesses ? mockAccesses : mockEmptyAccesses,
+              fetchMore
+            },
+            store
+          );
+          if (shouldShowLoadingListFooter) {
+            expect(component.queryByTestId("testing-footer")).toBeTruthy();
+          } else {
+            expect(component.queryByTestId("testing-footer")).toBeNull();
+          }
+        });
+        it(`should
+            ${shouldRenderPageFooter ? "" : "not"}
+            render export footer in case of ${testString} `, () => {
+          const component = renderComponent(
+            {
+              accesses: hasAccesses ? mockAccesses : mockEmptyAccesses,
+              fetchMore
+            },
+            store
+          );
+          if (shouldRenderPageFooter) {
+            expect(component.queryByTestId("export-footer")).toBeTruthy();
+          } else {
+            expect(component.queryByTestId("export-footer")).toBeNull();
+          }
+        });
+
+        if (shouldRenderPageFooter) {
+          const isPageFooterLoading = historyExporting;
+          it(`should ${
+            isPageFooterLoading ? "not" : ""
+          } dispatch the onPress if the user taps the primary action in case of ${testString}`, () => {
+            const mockFetchMore = jest.fn();
+            jest.spyOn(HOOK, "useFimsHistoryExport").mockReturnValue({
+              handleExportOnPress: mockFetchMore
+            });
+
+            const component = renderComponent(
+              {
+                accesses: hasAccesses ? mockAccesses : mockEmptyAccesses,
+                fetchMore
+              },
+              store
+            );
+
+            const renderedComponent = component.getByTestId("export-button");
+            expect(renderedComponent).toBeTruthy();
+
+            fireEvent.press(renderedComponent);
+
+            expect(mockFetchMore).toHaveBeenCalledTimes(
+              isPageFooterLoading ? 0 : 1
+            );
+          });
+        }
+      }
+    }
+  }
+});