@applicaster/zapp-react-native-ui-components/Components/ComponentResolver/__tests__/componentResolver.test.js

Applicaster Zapp React Native ui components for the Quick Brick App

import * as React from "react";
import { View } from "react-native";
import { shallow } from "enzyme";
import { shallowToJson } from "enzyme-to-json";
import configureStore from "redux-mock-store";

const logger = {
  warning: jest.fn(),
};

jest.mock("../../../Helpers/logger", () => ({
  componentsLogger: {
    addSubsystem: jest.fn(() => logger),
  },
}));

jest.mock("../../default-cell-renderer", () =>
  jest.fn((prop) => <View whoAmI="default renderer" someProp={prop} />)
);

const mock_rtl_flag = false;

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

const { ComponentResolverComponent } = require("../ComponentResolver");
const { ComponentResolver } = require("../index");

const SomeComponent = jest.fn((props) => <View {...props} />);
const components = { SomeComponent };
const plugins = [];
const styles = {};
const cellStyles = {};

const store = configureStore()({
  components,
  plugins,
  styles,
  cellStyles,
});

const component = { component_type: "some_component" };
const decorators = jest.fn((x) => x);
const renderFunction = jest.fn((Comp) => <Comp rendered />);

function clearAllMocks() {
  SomeComponent.mockClear();
  decorators.mockClear();
  renderFunction.mockClear();
  logger.warning.mockClear();
}

describe("ComponentResolver", () => {
  beforeEach(clearAllMocks);

  it("renders correctly", () => {
    const wrapper = shallow(
      <ComponentResolver
        component={component}
        decorators={decorators}
        store={store}
      />
    );

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

describe("ComponentResolverComponent", () => {
  beforeEach(clearAllMocks);

  const getWrapper = (component, plugins) =>
    shallow(
      <ComponentResolverComponent
        components={components}
        component={component}
        decorators={decorators}
        plugins={plugins}
        styles={styles}
        cellStyles={cellStyles}
      >
        {renderFunction}
      </ComponentResolverComponent>
    );

  it("renders the Component if it exists", () => {
    const wrapper = getWrapper(component, plugins);

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

    expect(renderFunction).toHaveBeenCalledWith(
      SomeComponent,
      expect.any(Object)
    );
  });

  it("returns null if the component doesn't exist", () => {
    const wrapper = getWrapper({ component_type: "foo" }, plugins);

    const warningMessage =
      "Component foo cannot be found - it is skipped from rendering";

    expect(shallowToJson(wrapper)).toMatchSnapshot();
    expect(wrapper.isEmptyRender()).toBe(true);

    expect(logger.warning).toHaveBeenCalledTimes(2);

    expect(logger.warning).toHaveBeenNthCalledWith(
      1,
      expect.objectContaining({
        message: "Could not resolve cell builder plugin",
      })
    );

    expect(logger.warning).toHaveBeenNthCalledWith(
      2,
      expect.objectContaining({
        message: warningMessage,
      })
    );
  });

  it("initializes the cell renderer plugin module if matching plugin exists", () => {
    const plugins = [];

    const wrapper = getWrapper(component, plugins);

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

    expect(renderFunction).toHaveBeenCalledWith(
      SomeComponent,
      expect.any(Object)
    );
  });
});