@applicaster/quick-brick-core/App/__tests__/createQuickBrickApp.test.js

Core package for Applicaster's Quick Brick App

/* eslint-disable indent */
import * as React from "react";
import { render } from "@testing-library/react-native";
import { Provider } from "react-redux";
import thunk from "redux-thunk";
import configureStore from "redux-mock-store";

jest.mock(
  "@applicaster/zapp-react-native-utils/appUtils/orientationHelper",
  () => ({
    allowedOrientationsForScreen: jest.fn(),
  })
);

// This is meant to silence errors with react-native-gesture-handler
jest.mock("../ModalProvider/ModalBottomSheet", () => () => null);

jest.mock(
  "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation",
  () => () => null
);

jest.mock("react-native-safe-area-context", () => ({
  SafeAreaProvider: jest.fn(
    () =>
      ({ children }) =>
        children
  ),
  initialWindowMetrics: {},
}));

jest.mock(
  "@applicaster/zapp-react-native-bridge/ZappStorage/SessionStorage",
  () => ({
    sessionStorage: {
      setItem: jest.fn(() => Promise.resolve()),
    },
  })
);

jest.mock("../AppStateDecorator", () => ({
  withAppManager: (Comp) => Comp,
}));

jest.mock(
  "@applicaster/zapp-react-native-utils/reactHooks/layout/useDimensions",
  () => ({
    useDimensions: jest.fn(() => ({ width: 375, height: 800 })),
  })
);

jest.mock("react-native", () => {
  const RNMock = jest.genMockFromModule("react-native");
  const { View } = jest.requireActual("react-native");

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

  const Linking = {
    addEventListener: jest.fn(),
    removeEventListener: jest.fn(),
    getInitialURL: jest.fn(() => Promise.resolve()),
    canOpenURL: jest.fn(() => Promise.resolve()),
  };

  const NativeModules = {
    QuickBrickCommunicationModule: {
      languageLocale: "en",
      countryLocale: "EN-US",
    },
  };

  const Platform = {
    OS: "ios",
    isTV: false,
  };

  const StyleSheet = {
    create: jest.fn((x) => x),
  };

  return {
    ...RNMock,
    Linking,
    NativeModules,
    Platform,
    StyleSheet,
    View,
    Easing,
    requireNativeComponent: jest.fn(),
  };
});

jest.mock("../NavigationProvider", () => ({
  withNavigationProvider: jest.fn((Comp) => Comp),
}));

const { createQuickBrickApp } = require("../index");
const { View } = require("react-native");

function createComponentMock(mockName, hasChildren = false) {
  return hasChildren
    ? jest.fn(({ children }) => (
        <View comp={mockName}>
          {typeof children === "function" ? children() : children}
        </View>
      ))
    : jest.fn(() => <View comp={mockName} />);
}

function createDecoratorMock({ mockName, mockProps = {} }) {
  return jest.fn((Component) =>
    jest.fn((props) => (
      <View comp={mockName}>
        <Component {...props} {...mockProps} />
      </View>
    ))
  );
}

const Layout = createComponentMock("Layout");
const Router = createComponentMock("Router", true);
const useLocation = jest.fn(() => ({ pathname: "foo" }));
const useHistory = jest.fn();

const navigations = { Router, useLocation, useHistory };

const InteractionManager = createDecoratorMock({
  mockName: "interactionManager",
});

const QuickBrickManager = {
  sendQuickBrickEvent: jest.fn(),
};

const ContextProvider = {
  withProvider: createDecoratorMock({ mockName: "withProvider" }),
};

const ContextProviders = [ContextProvider.withProvider];

const options = {
  InteractionManager,
  Layout,
  navigations,
  QuickBrickManager,
  ContextProviders,
};

const initialState = {
  styles: {},
  remoteConfigurations: {
    styles: {},
  },
  components: {
    River: createComponentMock("river"),
    AppContainer: createComponentMock("appContainer", true),
    DisplayError: createComponentMock("displayError"),
  },
  rivers: [{ id: "A1234", home: true }],
  appSettings: {},
  plugins: [],
  appState: { appReady: true },
};

const store = configureStore([thunk])(initialState);

describe("createQuickBrickApp", () => {
  it("is a function", () => {
    expect(createQuickBrickApp).toBeFunction();
  });

  it("returns a react component and it renders correctly", () => {
    const QuickBrickApp = createQuickBrickApp(options);

    const { toJSON } = render(
      <Provider store={store}>
        <QuickBrickApp store={store} />
      </Provider>
    );

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

  describe("with no InteractionManager", () => {
    it("renders correctly", () => {
      // eslint-disable-next-line unused-imports/no-unused-vars
      const { InteractionManager, ...otherOptions } = options;
      const QuickBrickApp = createQuickBrickApp(otherOptions);

      const { toJSON } = render(
        <Provider store={store}>
          <QuickBrickApp store={store} />
        </Provider>
      );

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

  describe("with no ContextProviders", () => {
    it("renders correctly", () => {
      // eslint-disable-next-line unused-imports/no-unused-vars
      const { ContextProviders, ...otherOptions } = options;
      const QuickBrickApp = createQuickBrickApp(otherOptions);

      const { toJSON } = render(
        <Provider store={store}>
          <QuickBrickApp store={store} />
        </Provider>
      );

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