import React from "react";
// Since we're not testing Redux, but our use of it, we can just use the component
// itself instead of mocking Redux.
import { TodoList } from "./Todos";
import { shallow, configure } from "enzyme";
import Adapter from "enzyme-adapter-react-16";
import toJson from "enzyme-to-json";

configure({ adapter: new Adapter() });

const nullFn = () => null;
const mockSubmitEvent = { preventDefault: nullFn };

// Tests
// - addTodo with button click
// - removeTodo with li click
// - matches snapshot

describe("<TodoList />", () => {
  let mockAdd;
  let mockRemove;

  beforeEach(() => {
    mockAdd = jest.fn();
    mockRemove = jest.fn();
  });

  it("should call addTodo (Redux action creator) with proper values", () => {
    const props = {
      addTodo: mockAdd,
      todos: [],
    };
    const wrapper = shallow(<TodoList {...props} />);
    const expected = "Buy groceries";
    wrapper.find("input").simulate("change", { currentTarget: { value: expected } });
    // We could check the operation of the onChange, BTW.

    const form = wrapper.find("[data-testid='addTodoForm']");
    form.simulate("submit", mockSubmitEvent);
    expect(props.addTodo).toHaveBeenCalledWith({ text: expected });
  });

  it("should call removeTodo (Redux action creator) on li click", () => {
    const props = {
      removeTodo: mockRemove,
      todos: [{ text: "Buy groceries" }, { text: "Change oil" }],
    };
    const wrapper = shallow(<TodoList {...props} />);
    const expectedOffset = 0;
    const li = wrapper.find("li").at(expectedOffset);
    const actualOffset = parseInt(li.key(), 10);
    expect(actualOffset).toBe(expectedOffset);
    li.simulate("click");
    expect(props.removeTodo).toHaveBeenCalledWith(expectedOffset);
  });

  it("should match snapshot", () => {
    const wrapper = shallow(<TodoList todos={[]} />);
    expect(toJson(wrapper)).toMatchSnapshot();
  });
});