12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061 |
- 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();
- });
- });
|