@applicaster/zapp-react-native-ui-components/Components/Viewport/ViewportAware/__tests__/viewportAware.test.js

Applicaster Zapp React Native ui components for the Quick Brick App

/* eslint-disable react/prop-types */

import * as React from "react";

import { shallow } from "enzyme";
import { create, act } from "react-test-renderer";
import { shallowToJson } from "enzyme-to-json";

import { ViewportEvents } from "../../ViewportEvents";

jest.useFakeTimers();

jest.mock("react-native/Libraries/ReactNative/UIManager", () => {
  return {
    ...jest.requireActual("react-native/Libraries/ReactNative/NativeUIManager"),
    measureLayout: (handle, parent, error, success) => {
      success(100, 100, 400, 400);
    },
  };
});

jest.mock("react-native/Libraries/Renderer/shims/ReactNative", () => ({
  ...jest.requireActual("react-native/Libraries/Renderer/shims/ReactNative"),
  findNodeHandle: () => 1234,
}));

const ReactNative = require("react-native");

const { Animated, ScrollView } = ReactNative;

Animated.timing = jest.fn(() => ({ start: jest.fn() }));

const viewportEventsManager = new ViewportEvents(true);

const { ViewportAware } = require("../");
const { ViewportTracker } = require("../../ViewportTracker");

const TestComponent = (props) => {
  const {
    preTriggerRatio,
    onViewportEnter,
    onViewportLeave,
    setTestDimensions,
    testDimensions,
    ...restOfProps
  } = props;

  const [inViewport, setInViewport] = React.useState(false);

  const onEnter = () => {
    onViewportEnter();
    setInViewport(true);
  };

  const onLeave = () => {
    onViewportLeave();
    setInViewport(false);
  };

  const viewportAwareProps = {
    preTriggerRatio,
    onViewportEnter: onEnter,
    onViewportLeave: onLeave,
    setTestDimensions,
    testDimensions,
  };

  return (
    <ViewportAware {...viewportAwareProps}>
      <ScrollView {...restOfProps} testID={`test-component-${inViewport}`} />
    </ViewportAware>
  );
};

function getWrapper(childrenFunc) {
  return (
    <ViewportTracker viewportEventsManager={viewportEventsManager}>
      <ScrollView>{childrenFunc()}</ScrollView>
    </ViewportTracker>
  );
}

describe("<ViewportAware />", () => {
  const onViewportEnter = jest.fn();
  const onViewportLeave = jest.fn();

  beforeEach(() => {
    onViewportEnter.mockClear();
    onViewportLeave.mockClear();
  });

  it("renders its children correctly", () => {
    const wrapper = shallow(
      getWrapper(() => (
        <TestComponent
          preTriggerRatio={0.1}
          onViewportEnter={onViewportEnter}
          onViewportLeave={onViewportLeave}
        />
      ))
    );

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

  it("passes the correct view port flag", () => {
    const wrapper = shallow(
      getWrapper(() => (
        <TestComponent
          preTriggerRatio={0.1}
          onViewportEnter={onViewportEnter}
          onViewportLeave={onViewportLeave}
        />
      ))
    );

    const testComponentWrapper = wrapper.find(TestComponent);
    expect(shallowToJson(testComponentWrapper.shallow())).toMatchSnapshot();
  });

  it("invokes the onViewportEnter function when entering the viewport", () => {
    const wrapper = create(
      getWrapper(() => (
        <TestComponent
          preTriggerRatio={0.1}
          onViewportEnter={onViewportEnter}
          onViewportLeave={onViewportLeave}
        />
      ))
    );

    act(() => {
      viewportEventsManager.notify({
        shouldMeasureLayout: true,
        offsetX: 0,
        offsetY: 0,
        width: 1920,
        height: 1080,
      });

      jest.runAllTimers();
    });

    expect(wrapper.toJSON()).toMatchSnapshot();
    expect(onViewportEnter).toHaveBeenCalled();

    const scrollviews = wrapper.root.findAllByType(ScrollView);
    expect(scrollviews).toBeArray();
    expect(scrollviews).toHaveProperty("length", 2);

    expect(scrollviews[1].props.testID).toEqual(
      expect.stringContaining("true")
    );

    expect(onViewportLeave).not.toHaveBeenCalled();
  });

  it("invokes the onViewportLeave function when leaving the viewport", () => {
    const wrapper = create(
      getWrapper(() => (
        <TestComponent
          preTriggerRatio={0.1}
          onViewportEnter={onViewportEnter}
          onViewportLeave={onViewportLeave}
          testDimensions={{
            componentOffsetX: 100,
            componentOffsetY: 100,
            componentWidth: 400,
            componentHeight: 400,
            inViewport: true,
          }}
        />
      ))
    );

    act(() => {
      viewportEventsManager.notify({
        shouldMeasureLayout: true,
        offsetX: 800,
        offsetY: 800,
        width: 1920,
        height: 1080,
      });
    });

    expect(wrapper.toJSON()).toMatchSnapshot();

    const scrollviews = wrapper.root.findAllByType(ScrollView);
    expect(scrollviews).toBeArray();
    expect(scrollviews).toHaveProperty("length", 2);

    expect(scrollviews[1].props.testID).toEqual(
      expect.stringContaining("false")
    );

    expect(onViewportLeave).toHaveBeenCalled();
  });
});