import React from "react";
import { View } from "react-native";

import * as mock_fixtures from "./fixtures";
import { renderWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";

const mockUsePipesContexts = () => ({
  entry: mock_fixtures.entryContext,
  screen: mock_fixtures.screenContext,
  search: mock_fixtures.searchContext,
});

const mockDispatchLoadPipesData = jest.fn();

jest.mock(
  "@applicaster/zapp-react-native-utils/reactHooks/feed/useLoadPipesDataDispatch",
  () => ({
    useLoadPipesDataDispatch: jest.fn(() => mockDispatchLoadPipesData),
  })
);

jest.mock(
  "@applicaster/zapp-react-native-utils/reactHooks/navigation/useRoute",
  () => ({
    useRoute: jest.fn(() => ({ screenData: mock_fixtures.screenData })),
  })
);

jest.mock(
  "@applicaster/zapp-react-native-utils/reactHooks/navigation/useNavigation",
  () => ({
    useNavigation: jest.fn(() => mock_fixtures.navigator),
  })
);

jest.mock("../utils", () => ({
  ...jest.requireActual("../utils"),
  usePipesContexts: mockUsePipesContexts,
}));

const River = function (props) {
  return <View {...props} />;
};

const riverProps = {
  river: mock_fixtures.river,
  dispatch: jest.fn(),
};

const { WithRiverFeedLoader } = require("..");

describe("WithRiverFeedLoader", () => {
  const DecoratedRiver = WithRiverFeedLoader(River);
  const wrapper = renderWithProviders(<DecoratedRiver {...riverProps} />);

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

  it("collects the datasources in the screen and loads them", () => {
    expect(mockDispatchLoadPipesData).toHaveBeenCalledTimes(23);

    expect(mockDispatchLoadPipesData).toHaveBeenLastCalledWith(
      "http://datasource24",
      {},
      { withResolvers: true, withScreenRouteMapping: true }
    );
  });
});