@applicaster/zapp-react-native-ui-components/Components/ZappUIComponent/__tests__/ZappUIComponent.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 { ZappUIComponent } from "../index";

const onLoadFinished = jest.fn();

const zappPipesData_loading = {
  loading: true,
};

const zappPipesData_error = {
  loading: false,
  error: { message: "oups" },
};

const zappPipesData_success = {
  loading: false,
  data: { type: { value: "feed" } },
};

const MockComponent = (props) => <View {...props} />;

export const ReactContext = {
  Provider: jest.fn(({ children }) => children),
};

const Component = (props: { component: React.ReactNode }) => (
  <ReactContext.Provider value={props.component}>
    <MockComponent name="success" {...props} />
  </ReactContext.Provider>
);

const ErrorComponent = (props) => <MockComponent name="error" {...props} />;
const LoadingComponent = (props) => <MockComponent name="loading" {...props} />;

function getProps(zappPipesData) {
  return { onLoadFinished, zappPipesData };
}

function getWrapper({ error, loading, props }) {
  const WrappedComponent = ZappUIComponent({
    Component,
    ErrorComponent: error ? ErrorComponent : null,
    LoadingComponent: loading ? LoadingComponent : null,
  });

  return shallow(<WrappedComponent {...props} />);
}

describe("ZappUIComponent", () => {
  describe("when zapp pipes data is loading", () => {
    const props = getProps(zappPipesData_loading);

    it("renders null if no loading component is provided", () => {
      const wrapper = getWrapper({ props });
      expect(shallowToJson(wrapper)).toMatchSnapshot();
    });

    it("renders correctly otherwise", () => {
      const wrapper = getWrapper({ props, loading: true });
      expect(shallowToJson(wrapper)).toMatchSnapshot();
    });
  });

  describe("whenn zapp pipes data returns with error", () => {
    const props = getProps(zappPipesData_error);

    it("renders null if no error component is provided", () => {
      const wrapper = getWrapper({ props });
      expect(shallowToJson(wrapper)).toMatchSnapshot();
    });

    it("renders correctly otherwise", () => {
      const wrapper = getWrapper({ props, error: true });
      expect(shallowToJson(wrapper)).toMatchSnapshot();
    });
  });

  describe("when zapp pipes data returns properly", () => {
    const props = getProps(zappPipesData_success);

    it("renders correctly", () => {
      const wrapper = getWrapper({ props });
      expect(shallowToJson(wrapper)).toMatchSnapshot();
    });
  });
});