@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 { renderWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";

const pluginConfiguration = { foo: "bar" };

const MockModuleView = (testID) => {
  // eslint-disable-next-line react/display-name
  return function (props) {
    return <View testID={testID} {...props} />;
  };
};

const ScreenType1 = MockModuleView("screen_type_1");
const ScreenType2 = MockModuleView("screen_type_2");
const PlayerController = MockModuleView("player_controller");

const mockScreenType3 = {
  module: MockModuleView("screen_type_3"),
  name: "ScreenType3",
  type: "screen_type_3",
  configuration: pluginConfiguration,
};

const mockScreenType4 = {
  module: MockModuleView("screen_type_4"),
  name: "ScreenType4",
  type: "screen_type_4",
};

const mockPlayerPlugin = {
  module: MockModuleView("player_plugin"),
  name: "playerPlugin",
  type: "player",
};

const mockScreenPlugin = {
  module: MockModuleView("screen_plugin"),
  type: "general",
  name: "Screen plugin",
  identifier: "screen-plugin",
};

const mockPluginWithConfig = {
  module: MockModuleView("plugin_with_config"),
  type: "general",
  name: "Plugin with config",
  identifier: "plugin-with-config",
  configuration: pluginConfiguration,
};

const mockComponents = { ScreenType1, ScreenType2, PlayerController };

const mockState = {
  components: mockComponents,
  plugins: [
    mockScreenType3,
    mockScreenType4,
    mockPlayerPlugin,
    mockScreenPlugin,
    mockPluginWithConfig,
  ],
  rivers: {
    A1234: {},
  },
};

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

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

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

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

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

  return {
    PlayerContainer: (props) => (
      <View {...props}>
        <props.Player />
      </View>
    ),
  };
});

const getWrapper = (screenId, screenType, screenData) => {
  const ScreenResolver = require("../").ScreenResolverComponent;

  return renderWithProviders(
    <ScreenResolver
      {...{
        screenId,
        screenType,
        screenData,
      }}
    />,
    mockState
  );
};

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

    expect(wrapper.getByTestId("screen_type_1")).toBeDefined();
  });

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

    expect(wrapper.getByTestId("screen_type_3")).toBeDefined();
  });

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

    expect(wrapper.getByTestId("screen_plugin")).toBeDefined();
  });

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

    expect(wrapper.getByTestId("screen_type_2")).toBeDefined();
  });

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

    const screenWrapper = wrapper.getByTestId("screen_type_3");

    expect(screenWrapper.props).toMatchObject({
      screenId: "A1234",
      screenData: "foo",
    });
  });

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

    expect(wrapper.queryAllByTestId("screen_type_5")).toBeEmpty();
  });

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

    const screenWrapper = wrapper.getByTestId("plugin_with_config");

    expect(screenWrapper.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", {});

    const screenWrapper = wrapper.getByTestId("screen_type_3");

    expect(screenWrapper.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(wrapper.getByTestId("player_plugin")).toBeDefined();
  });
});