import { mount } from "enzyme";
import { useTimer } from "../hooks";

const TestApp = () => {
  const [time, handler] = useTimer();
  return (
    <div>
      <p id="time">{time}</p>
      <p id="state">{handler.running ? "running" : "stopped"}</p>
      <button id="start" onClick={handler.start}></button>
      <button id="stop" onClick={handler.stop}></button>
      <button id="reset" onClick={handler.reset}></button>
      <button id="setTime" onClick={() => handler.setTime(314)}></button>
    </div>
  );
};

describe("timer hook", () => {
  const container = mount(<TestApp />);
  it("renders without error", () => {
    expect(container.html()).toMatchSnapshot();
    expect(container.find("p").length).toEqual(2);
    expect(container.find("button").length).toEqual(4);
  });
  it("starts the timer", () => {
    container.find("#start").simulate("click");
    expect(container.find("#state").prop("children")).toEqual("running");
  });

  it("stops the timer", () => {
    container.find("#stop").simulate("click");
    expect(container.find("#state").prop("children")).toEqual("stopped");
  });

  it("sets the timer", () => {
    container.find("#setTime").simulate("click");
    expect(container.find("#time").prop("children")).toEqual(314);
  });

  it("resets the timer", () => {
    container.find("#reset").simulate("click");
    expect(container.find("#time").prop("children")).toEqual(0);
  });
});
