import React from "react";
import { View } from "react-native";
import { renderWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";

import { withRiver } from "../";

const rivers = {
  A123: {
    id: "A123",
  },
  B345: {
    id: "B345",
  },
};

jest.doMock("@applicaster/zapp-react-native-redux/hooks", () => ({
  usePickFromState: jest.fn(() => ({ rivers })),
}));

jest.doMock(
  "@applicaster/zapp-react-native-utils/reactHooks/navigation/usePathname",
  () => ({
    usePathname: jest.fn(() => "/home"),
  })
);

const TestComponent = jest.fn((props) => <View {...props} />);

describe("withRiver HoC", () => {
  const WrappedComponent = withRiver(TestComponent);

  const wrapper = renderWithProviders(
    <WrappedComponent
      testID="test-view"
      screenId="A123"
      otherProp="otherProp"
    />,
    { rivers: rivers }
  );

  it("populates the river prop", () => {
    const targetView = wrapper.getByTestId("test-view");

    expect(targetView.props.river).toEqual(rivers.A123);
    expect(targetView.props.screenData).toEqual(rivers.A123);
  });
});