@applicaster/zapp-react-native-ui-components/Components/ScreenResolver/__tests__/screenResolver.test.js

Applicaster Zapp React Native ui components for the Quick Brick App

import React from "react";
import { View } from "react-native";
import { shallow } from "enzyme";
import { shallowToJson } from "enzyme-to-json";
import { connect as realConnect } from "react-redux";

const pluginConfiguration = { foo: "bar" };

const ScreenType1 = jest.fn(() => <View />);
const ScreenType2 = jest.fn(() => <View />);

const ScreenType3 = {
  module: jest.fn(() => <View />),
  name: "ScreenType3",
  type: "screen_type_3",
  configuration: pluginConfiguration,
};

const ScreenType4 = {
  module: jest.fn(() => <View />),
  name: "ScreenType4",
  type: "screen_type_4",
};

const PlayerController = jest.fn(() => <View />);

const playerPlugin = {
  module: jest.fn(() => <View />),
  name: "playerPlugin",
  type: "player",
};

const ScreenPlugin = {
  module: jest.fn(() => <View />),
  type: "general",
  name: "Screen plugin",
  identifier: "screen-plugin",
};

const PluginWithConfig = {
  module: jest.fn(() => <View />),
  type: "general",
  name: "Plugin with config",
  identifier: "plugin-with-config",
  configuration: pluginConfiguration,
};

const components = { ScreenType1, ScreenType2, PlayerController };

const plugins = {
  ScreenType3,
  ScreenType4,
  playerPlugin,
  ScreenPlugin,
  PluginWithConfig,
};

const withAnalytics = {
  sendOnClickEvent: jest.fn(),
  sendMenuClickEvent: jest.fn(),
  sendMenuToggleEvent: jest.fn(),
  sendBackButtonClickEvent: jest.fn(),
  sendOnNavItemClickEvent: jest.fn(),
  sendHeaderClickEvent: jest.fn(),
  sendHardwareBackButtonClickEvent: jest.fn(),
  sendScreenEvent: jest.fn(),
};

jest.mock("@applicaster/zapp-react-native-utils/analyticsUtils", () => ({
  useAnalytics: jest.fn().mockReturnValue(withAnalytics),
}));

jest.mock("@applicaster/zapp-react-native-redux/hooks", () => ({
  usePickFromState: jest.fn(() => ({ components, plugins })),
}));

jest.mock(
  "@applicaster/zapp-react-native-utils/analyticsUtils/helpers/hooks",
  () => ({
    useScreenAnalytics: jest.fn(() => {}),
  })
);

jest.mock("react-redux", () => ({
  useDispatch: jest.fn(() => () => {}),
  connect: realConnect,
}));

jest.mock("@applicaster/zapp-react-native-utils/reactHooks", () => ({
  useNavigation: jest.fn(() => ({
    videoModalState: {
      mode: "test",
    },
  })),
  useRoute: jest.fn(() => ({ screenId: "1234" })),
}));

const { ScreenResolverComponent: ScreenResolver } = require("..");

const getWrapper = (screenId, screenType, screenData) =>
  shallow(
    <ScreenResolver
      {...{
        screenId,
        screenType,
        screenData,
      }}
    />
  );

describe("<ScreenResolver />", () => {
  it("renders correctly", () => {
    const wrapper = getWrapper("1234", "screen_type_1", {});

    expect(shallowToJson(wrapper)).toMatchSnapshot();
  });

  it("picks screen from plugins if it exists", () => {
    const wrapper = getWrapper("A1234", "screen_type_3", {});

    expect(wrapper.find(ScreenType3.module)).toHaveProperty("length", 1);
  });

  it("picks the screen from its identifier if it exists", () => {
    const wrapper = getWrapper("A1234", "screen-plugin", {});

    expect(wrapper.find(ScreenPlugin.module)).toHaveProperty("length", 1);
  });

  it("picks screen from components if it doesn't exist in plugins", () => {
    const wrapper = getWrapper("A1234", "screen_type_2", {});

    expect(wrapper.find(ScreenType2)).toHaveProperty("length", 1);
  });

  it("renders the screen and passes screenId & locationState as props", () => {
    const wrapper = getWrapper("A1234", "screen_type_3", "foo");

    const screenWrapper = wrapper.find(ScreenType3.module);

    expect(screenWrapper.prop("screenId")).toEqual("A1234");
    expect(screenWrapper.prop("screenData")).toEqual("foo");
  });

  it("renders null if the screen is not found", () => {
    const wrapper = getWrapper(null, "screen_type_5", {});

    expect(wrapper.getElement()).toBe(null);
  });

  it("injects the plugin configuration if it exists", () => {
    const wrapper = getWrapper("A1234", "plugin-with-config", {});

    expect(wrapper.find(PluginWithConfig.module).props()).toHaveProperty(
      "configuration",
      expect.objectContaining(pluginConfiguration)
    );
  });

  it("injects the plugin configuration if it exists, even when plugin is resolved by type", () => {
    const wrapper = getWrapper("A1234", "screen_type_3", {});

    expect(wrapper.find(ScreenType3.module).props()).toHaveProperty(
      "configuration",
      expect.objectContaining(pluginConfiguration)
    );
  });

  it("wraps the player with the playerController component when the screenType is playable", () => {
    const wrapper = getWrapper("A1234", "playable", {});
    expect(shallowToJson(wrapper)).toMatchSnapshot();
  });
});