import React from "react";
import { shallow } from "enzyme";
import GuessPane from "../components/screens/GamePanel/GuessPane";

jest.mock("../domain/gameStore");
jest.mock("../domain/geocoding");

import { dispatch } from "../domain/gameStore";
import { reverseGeocode } from "../domain/geocoding";

describe("GuessPane", () => {
  it("renders", () => {
    const rendered = shallow(<GuessPane />);
    expect(rendered).toMatchSnapshot();
  });

  it("resizes to large", () => {
    const handle = shallow(<GuessPane />);
    handle.find("div.resize").first().simulate("click");
    expect(handle).toMatchSnapshot();
  });

  it("resizes to medium", () => {
    const handle = shallow(<GuessPane />);
    handle.find("div.resize--medium").first().simulate("click");
    expect(handle).toMatchSnapshot();
  });

  it("resizes to large on keydown Enter", () => {
    const handle = shallow(<GuessPane />);
    handle.find("div.resize").first().simulate("keydown", { key: "Enter" });
    expect(handle).toMatchSnapshot();
  });

  it("resizes to medium on keydown Enter", () => {
    const handle = shallow(<GuessPane />);
    handle
      .find("div.resize--medium")
      .first()
      .simulate("keydown", { key: "Enter" });
    expect(handle).toMatchSnapshot();
  });

  it("submits", async () => {
    reverseGeocode.mockReturnValue("geocoded");
    const handle = shallow(<GuessPane />);
    handle.find("ClickMarkerMap").first().prop("onMarkerMoved")({
      lat: "lat",
      lng: "lng",
    });
    // check submit enabled
    expect(handle).toMatchSnapshot();
    await handle.find("button").first().simulate("click");
    expect(reverseGeocode).toHaveBeenCalledWith(
      expect.objectContaining({ lat: "lat", lng: "lng" })
    );
    expect(dispatch.submitGuess).toHaveBeenCalledWith(
      expect.objectContaining({
        country: "geocoded",
        lat: "lat",
        lng: "lng",
      })
    );
    // check submit disabled again
    expect(handle).toMatchSnapshot();
  });
});
