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

Applicaster Zapp React Native ui components for the Quick Brick App

import * as React from "react";
import { act, render } from "@testing-library/react-native";
import { ViewportEvents } from "../../ViewportEvents";
import ReactNative from "react-native";

const { ScrollView } = ReactNative;

const TestComponent = () => <ScrollView />;

jest.spyOn(ReactNative, "findNodeHandle").mockImplementation(() => 1234);

ReactNative.UIManager.measureLayout = jest.fn(
  (handle, parent, error, success) => {
    success(100, 100, 400, 400);
  }
);

const viewportEventsManager = new ViewportEvents(true);

const { ViewportTracker } = require("../index");
const viewportEventSpy = jest.spyOn(viewportEventsManager, "notify");

const event = {
  nativeEvent: {
    layout: { width: 100, height: 100 },
    contentOffset: { x: 100, y: 100 },
  },
};

describe("<ViewportTracker />", () => {
  beforeEach(() => {
    viewportEventSpy.mockClear();
  });

  it("renders correctly", () => {
    // eslint-disable-next-line react/prop-types
    const ReactWrapper = ({ children }) => (
      <ViewportTracker viewportEventsManager={viewportEventsManager}>
        <ScrollView>{children}</ScrollView>
      </ViewportTracker>
    );

    const wrapper = render(
      <ReactWrapper>
        <TestComponent />
      </ReactWrapper>
    );

    const scrollView = wrapper.UNSAFE_getByType(ScrollView);

    expect(wrapper.toJSON()).toMatchSnapshot();
    expect(scrollView.props).toMatchSnapshot();
  });

  it("notifies viewport listeners when layout changes", () => {
    // eslint-disable-next-line react/prop-types
    const ReactWrapper = ({ children }) => (
      <ViewportTracker viewportEventsManager={viewportEventsManager}>
        <ScrollView>{children}</ScrollView>
      </ViewportTracker>
    );

    const wrapper = render(
      <ReactWrapper>
        <TestComponent />
      </ReactWrapper>
    );

    const scrollView = wrapper.UNSAFE_getByType(ScrollView);

    act(() => {
      scrollView.props.onLayout(event);
    });

    expect(viewportEventSpy).toHaveBeenCalledWith(
      expect.objectContaining({
        width: event.nativeEvent.layout.width,
        height: event.nativeEvent.layout.height,
        parentHandle: 1234,
        offsetX: 0,
        offsetY: 0,
        shouldMeasureLayout: true,
      })
    );
  });

  it("notifies viewport listeners when content scrolls", () => {
    // eslint-disable-next-line react/prop-types
    const ReactWrapper = ({ children }) => (
      <ViewportTracker viewportEventsManager={viewportEventsManager}>
        <ScrollView>{children}</ScrollView>
      </ViewportTracker>
    );

    const wrapper = render(
      <ReactWrapper>
        <TestComponent />
      </ReactWrapper>
    );

    const scrollView = wrapper.UNSAFE_getByType(ScrollView);

    act(() => {
      scrollView.props.onLayout(event);
      scrollView.props.onScroll(event);
    });

    expect(viewportEventSpy).toHaveBeenCalled();
  });

  it("notifies viewport listeners when content size changes", () => {
    // eslint-disable-next-line react/prop-types
    const ReactWrapper = ({ children }) => (
      <ViewportTracker viewportEventsManager={viewportEventsManager}>
        <ScrollView>{children}</ScrollView>
      </ViewportTracker>
    );

    const wrapper = render(
      <ReactWrapper>
        <TestComponent />
      </ReactWrapper>
    );

    const scrollView = wrapper.UNSAFE_getByType(ScrollView);

    act(() => {
      scrollView.props.onLayout(event);
      scrollView.props.onContentSizeChange(100, 100);
    });

    expect(viewportEventSpy).toHaveBeenCalled();
  });
});