@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 { render } from "@testing-library/react-native";
import configureStore from "redux-mock-store";

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

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

jest.mock("../../default-cell-renderer", () => {
  const View = jest.requireActual("react-native").View;

  return 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 = (x) => x;
const renderFunction = jest.fn((Comp) => <Comp rendered />);

function clearAllMocks() {
  jest.clearAllMocks();
}

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

  it("renders correctly", () => {
    const { toJSON } = render(
      <ComponentResolver
        component={component}
        decorators={decorators}
        store={store}
      >
        {() => null}
      </ComponentResolver>
    );

    expect(toJSON()).toBeNull();
  });
});

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

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

  it("renders the Component if it exists", () => {
    const { toJSON } = renderComponent(component, plugins);

    expect(toJSON()).not.toBeNull();

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

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

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

    expect(UNSAFE_root.children.length).toBe(0);
    expect(mockLogger.warning).toHaveBeenCalledTimes(2);

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

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

  it("initializes the cell renderer plugin module if matching plugin exists", () => {
    const { toJSON } = renderComponent(component, plugins);

    expect(toJSON()).toMatchSnapshot();

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