@applicaster/zapp-react-native-ui-components/Components/River/__tests__/componentsMap.test.js

Applicaster Zapp React Native ui components for the Quick Brick App

import React from "react";
import { cleanup, render } from "@testing-library/react-native";
import { Provider } from "react-redux";
import configureStore from "redux-mock-store";

import * as themeUtils from "@applicaster/zapp-react-native-utils/theme";

// silences the errors related to React-native-gesture-handler in tests
jest.mock(
  "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation",
  () => () => null
);

jest.mock("react-native-safe-area-context", () => ({
  useSafeAreaInsets: () => ({ top: 50 }),
}));

jest.mock("react-native", () => {
  const RN = jest.genMockFromModule("react-native");
  const actualRN = jest.requireActual("react-native");

  const Dims = {
    get: jest
      .fn()
      .mockReturnValue({ width: 100, height: 100, scale: 1, fontScale: 1 }),
    addEventListener: jest.fn(),
    removeEventListener: jest.fn(),
  };

  const Easing = {
    in: jest.fn(),
    bezier: jest.fn(),
  };

  return {
    ...RN,
    Platform: { OS: "ios" },
    NativeModules: { QuickBrickCommunicationModule: {}, UIManager: {} },
    StyleSheet: { create: jest.fn((x) => x) },
    FlatList: actualRN.FlatList,
    View: actualRN.View,
    Dimensions: Dims,
    ActivityIndicator: actualRN.ActivityIndicator,
    Animated: {
      timing: jest.fn(() => ({ start: jest.fn() })),
      Value: function AnimatedValue() {
        return {};
      },
      View: actualRN.Animated.View,
    },
    findNodeHandle: jest.fn(),
    NativeEventEmitter: jest.fn(),
    requireNativeComponent: jest.fn(),
    Easing,
  };
});

const mock_rtl_flag = false;

const riverComponents = [
  {
    id: "A1",
    component_type: "hero",
    styles: {
      cell_styles: ["some", "obsolete", "ids"],
    },
  },
  {
    id: "A2",
    component_type: "grid",
    styles: {
      master_cell_id: "uuid-5678-B",
    },
  },
];

const mockScreenData = {
  ui_components: riverComponents,
  rules: { pull_to_refresh_enabled: false },
  id: "A1234",
};

jest.mock("@applicaster/zapp-react-native-redux/AppStore", () => ({
  appStore: {
    get: jest.fn((prop) => mockStore[prop]),
    getState: jest.fn(),
  },
}));

jest.mock("@applicaster/zapp-react-native-utils/localizationUtils", () => ({
  useIsRTL: jest.fn(() => mock_rtl_flag),
}));

jest.mock(
  "@applicaster/zapp-react-native-utils/reactHooks/navigation/useNavigation",
  () => ({
    useNavigation: jest.fn(() => ({ currentRoute: "/river/A1234" })),
  })
);

jest.mock(
  "@applicaster/zapp-react-native-utils/reactHooks/navigation/useRoute",
  () => ({
    useRoute: jest.fn(() => ({
      pathname: "/river/A1234",
      screenData: mockScreenData,
    })),
  })
);

jest.mock(
  "@applicaster/zapp-react-native-utils/reactHooks/navigation/useIsScreenActive",
  () => ({
    useIsScreenActive: jest.fn().mockReturnValue(true),
  })
);

jest.mock(
  "@applicaster/zapp-react-native-utils/reactHooks/screen/useCurrentScreenData",
  () => ({
    useCurrentScreenData: jest.fn(() => mockScreenData),
  })
);

jest.mock(
  "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenData",
  () => ({
    useScreenData: jest.fn(() => mockScreenData),
  })
);

jest.mock(
  "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext",
  () => ({
    ...jest.requireActual(
      "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext"
    ),
    useScreenContext: jest.fn(() => mockScreenData),
  })
);

const { View } = require("react-native");
const { ComponentsMap } = require("../ComponentsMap/ComponentsMap");
const theme = require("./theme-mock.json");

const mockStore = configureStore();

const components = {
  Hero: jest.fn(() => <View />),
  Grid: jest.fn(() => <View />),
};

const cellStyles = {
  "uuid-1234-A": {},
  "uuid-5678-B": {},
};

const plugins = [];
const navigation = {};

const props = { components, cellStyles, riverComponents, navigation };

const store = mockStore({
  components,
  cellStyles,
  plugins,
  getState: jest.fn(),
});

jest.useFakeTimers();

describe("componentsMap", () => {
  let themeSpy;

  afterEach(() => {
    themeSpy.mockClear();
    cleanup();
  });

  it("renders renders components map correctly", () => {
    themeSpy = jest
      .spyOn(themeUtils, "useTheme")
      .mockImplementation(() => () => theme);

    const { toJSON } = render(
      <Provider store={store}>
        <ComponentsMap {...props} />
      </Provider>
    );

    expect(toJSON()).toMatchSnapshot();
  });
});