import * as React from "react";
import { Provider } from "react-redux";
import { renderHook } from "@testing-library/react-hooks";
import configureStore from "redux-mock-store";
import thunk from "redux-thunk";

const mockStore = configureStore([thunk]);

const river_id_2: ZappRiver = {
  name: "River 2",
  id: "A1234",
  home: false,
  home_offline: false,
  supports_offline: false,
  navigations: [],
  hooks: { preload_plugins: [] },
};

jest.mock("../useScreenContext", () => ({
  useScreenContext: () => ({
    screen: river_id_2,
  }),
}));

const { useCurrentScreenData } = require("../useCurrentScreenData");

describe("useScreenData", () => {
  const river_id_1 = { id: "B5678" };

  const store = mockStore({
    rivers: { river_id_1, river_id_2 },
  });

  const wrapper: React.FC<any> = ({ children }) => (
    <Provider store={store}>{children}</Provider>
  );

  it("should return river data for the current screen/route", () => {
    const { result } = renderHook(() => useCurrentScreenData(), { wrapper });

    expect(result.current).toBe(river_id_2);
  });
});