@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 { ScrollView } from "react-native";
import TestRenderer, { act } from "react-test-renderer";
import { ViewportEvents } from "../../ViewportEvents";

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

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

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 />", () => {
  // eslint-disable-next-line react/prop-types
  const ReactWrapper = ({ children }) => (
    <ViewportTracker viewportEventsManager={viewportEventsManager}>
      <ScrollView>{children}</ScrollView>
    </ViewportTracker>
  );

  const wrapper = TestRenderer.create(
    <ReactWrapper>
      <TestComponent />
    </ReactWrapper>
  );

  const scrollView = wrapper.root.findByType(ScrollView);

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

  it("renders correctly", () => {
    expect(wrapper.toJSON()).toMatchSnapshot();
    expect(scrollView.props).toMatchSnapshot();
  });

  it("notifies viewport listeners when layout changes", () => {
    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", () => {
    act(() => scrollView.props.onScroll(event));
    expect(viewportEventSpy).toHaveBeenCalled();
  });

  it("notifies viewport listeners when content size changes", () => {
    act(() => scrollView.props.onContentSizeChange(100, 100));
    expect(viewportEventSpy).toHaveBeenCalled();
  });
});