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

Applicaster Zapp React Native ui components for the Quick Brick App

/* eslint-disable react/prop-types */
import * as React from "react";
import { View } from "react-native";
import { shallow } from "enzyme";
import { callOnChildren, isInViewport } from "../utils";

describe("callOnChildren", () => {
  const arg1 = "arg1";
  const arg2 = "arg2";

  const TestComponent = ({ children, isMounted }) => {
    React.useEffect(() => {
      callOnChildren(children, "testMethod", arg1, arg2);
      isMounted();
    }, []);

    return <View>{children}</View>;
  };

  const TestChild = () => {
    return <View />;
  };

  const testMethod = jest.fn();

  beforeEach(() => {
    testMethod.mockClear();
  });

  it("calls the method on the child component's props if it exists", () => {
    shallow(
      <TestComponent
        isMounted={() => {
          expect(testMethod).toHaveBeenCalledWith(arg1, arg2);
        }}
      >
        <TestChild testMethod={testMethod} />
      </TestComponent>
    );
  });

  it("fails silently if the child component doesn't have any prop", () => {
    shallow(
      <TestComponent
        isMounted={() => {
          expect(testMethod).not.toHaveBeenCalled();
        }}
      >
        <TestChild />
      </TestComponent>
    );
  });
});

describe("isInViewport", () => {
  describe("when preTriggerRatio is null", () => {
    const preTriggerRatio = null;
    const viewportOffset = 0;
    const viewportSize = 1920;
    const elementSize = 400;

    it("returns true when the element is in the viewport", () => {
      const elementOffset = 200;

      const inViewport = isInViewport(
        viewportOffset,
        viewportSize,
        elementOffset,
        elementSize,
        preTriggerRatio
      );

      expect(inViewport).toBe(true);
    });

    it("returns true when the element is overlapping the viewport", () => {
      const elementOffset = 1800;

      const inViewport = isInViewport(
        viewportOffset,
        viewportSize,
        elementOffset,
        elementSize,
        preTriggerRatio
      );

      expect(inViewport).toBe(true);
    });

    it("returns false when the element is outside of the viewport", () => {
      const elementOffset = 2000;

      const inViewport = isInViewport(
        viewportOffset,
        viewportSize,
        elementOffset,
        elementSize,
        preTriggerRatio
      );

      expect(inViewport).toBe(false);
    });

    it("returns false when the element is before the viewport", () => {
      const elementOffset = -500;

      const inViewport = isInViewport(
        viewportOffset,
        viewportSize,
        elementOffset,
        elementSize,
        preTriggerRatio
      );

      expect(inViewport).toBe(false);
    });
  });

  describe("when preTriggerRatio is not null", () => {
    const preTriggerRatio = 0.1;
    const viewportOffset = 0;
    const viewportSize = 1920;
    const elementSize = 400;

    it("returns true when the element is inside the viewport", () => {
      const elementOffset = 100;

      const inViewport = isInViewport(
        viewportOffset,
        viewportSize,
        elementOffset,
        elementSize,
        preTriggerRatio
      );

      expect(inViewport).toBe(true);
    });

    it("returns true when the element is overlapping the viewport", () => {
      const elementOffset = 1800;

      const inViewport = isInViewport(
        viewportOffset,
        viewportSize,
        elementOffset,
        elementSize,
        preTriggerRatio
      );

      expect(inViewport).toBe(true);
    });

    it("returns true when the element is outside the viewport, but within the preTrigger area", () => {
      const elementOffset = viewportSize * (1 + preTriggerRatio) - 100;

      const inViewport = isInViewport(
        viewportOffset,
        viewportSize,
        elementOffset,
        elementSize,
        preTriggerRatio
      );

      expect(inViewport).toBe(true);
    });

    it("returns false when the element is outside the preTrigger area", () => {
      const elementOffset = viewportSize * (1 + preTriggerRatio) + 100;

      const inViewport = isInViewport(
        viewportOffset,
        viewportSize,
        elementOffset,
        elementSize,
        preTriggerRatio
      );

      expect(inViewport).toBe(false);
    });

    it("returns false when the element is before the viewport & the pretrigger area", () => {
      const elementOffset = -(500 + viewportSize * preTriggerRatio);

      const inViewport = isInViewport(
        viewportOffset,
        viewportSize,
        elementOffset,
        elementSize,
        preTriggerRatio
      );

      expect(inViewport).toBe(false);
    });
  });
});