Session #5

src/components/Calendar/Calendar.test.js

@@ -0,0 +1,51 @@
+import React from "react";
+import { mount } from "enzyme";
+
+import Calendar from "./Calendar";
+
+describe("<Calendar />", () => {
+  let calendar;
+  const mockClickDone = jest.fn();
+
+  beforeEach(() => {
+    calendar = <Calendar
+      year={2020}
+      month={11}
+      todos={[
+        {
+          id: 1,
+          title: "title 1",
+          content: "content 1",
+          year: 2020,
+          month: 10,
+          date: 9,
+          done: true,
+        },
+        {
+          id: 2,
+          title: "title 2",
+          content: "content 2",
+          year: 2020,
+          month: 10,
+          date: 9,
+          done: false,
+        }
+      ]}
+      clickDone={mockClickDone} />
+  });
+
+  afterEach(jest.clearAllMocks);
+
+  it("should render without errors", () => {
+    const component = mount(calendar);
+    const wrapper = component.find(Calendar);
+    expect(wrapper.length).toBe(1);
+  });
+
+  it("should click todos properly", () => {
+    const component = mount(calendar);
+    const wrapper = component.find(".todoTitle.done");
+    wrapper.simulate("click");
+    expect(mockClickDone).toHaveBeenCalledTimes(1);
+  });
+});

src/containers/TodoCalendar/TodoCalendar.js

@@ -38,9 +38,9 @@ class TodoCalendar extends Component {
       <div>
         <div className="link"><NavLink to='/todos' exact>See TodoList</NavLink></div>
         <div className="header">
-          <button onClick={this.handleClickPrev}> prev month </button>
+          <button className="prev" onClick={this.handleClickPrev}> prev month </button>
           {this.state.year}.{this.state.month}
-          <button onClick={this.handleClickNext}> next month </button>
+          <button className="next" onClick={this.handleClickNext}> next month </button>
         </div>
         <Calendar
           year={this.state.year}

src/containers/TodoCalendar/TodoCalendar.test.js

@@ -0,0 +1,76 @@
+import React from "react";
+import { mount } from "enzyme";
+import { Provider } from "react-redux";
+import { ConnectedRouter } from 'connected-react-router';
+import { Route, Switch } from 'react-router-dom';
+
+import { getMockStore } from '../../test-utils/mocks';
+import { history } from '../../store/store';
+import TodoCalendar from "./TodoCalendar";
+import * as actionCreators from '../../store/actions/todo';
+
+jest.mock("../../components/Calendar/Calendar", () => {
+  return jest.fn(props => {
+    return (
+      <button className="toggle" onClick={props.clickDone}></button>
+    );
+  });
+});
+
+const stubInitialState = {
+  year: 2020,
+  month: 10,
+};
+
+const mockStore = getMockStore(stubInitialState);
+
+describe("<TodoCalendar />", () => {
+  let todoCalendar;
+
+  beforeEach(() => {
+    todoCalendar = (
+      <Provider store={mockStore}>
+        <ConnectedRouter history={history}>
+          <Switch>
+            <Route path='/' exact component={TodoCalendar} />
+          </Switch>
+        </ConnectedRouter>
+      </Provider>
+    );
+  });
+
+  it("should render without errors", () => {
+    const component = mount(todoCalendar);
+    const wrapper = component.find(TodoCalendar);
+    expect(wrapper.length).toBe(1);
+  });
+
+  it("should properly handle clicking prev month button", () => {
+    const component = mount(todoCalendar);
+    const wrapper = component.find(".prev");
+    for (let i = 0; i < 10; i++)
+      wrapper.simulate("click");
+    const todoCalendarInstance = component.find(TodoCalendar.WrappedComponent).instance();
+    expect(todoCalendarInstance.state.month).toEqual(12);
+  });
+
+  it("should properly handle clicking next month button", () => {
+    const component = mount(todoCalendar);
+    const wrapper = component.find(".next");
+    for (let i = 0; i < 3; i++)
+      wrapper.simulate("click");
+    const todoCalendarInstance = component.find(TodoCalendar.WrappedComponent).instance();
+    expect(todoCalendarInstance.state.month).toEqual(1);
+  });
+
+  it("should toggle todo", () => {
+    const spyToggleTodo = jest.spyOn(actionCreators, 'toggleTodo')
+      .mockImplementation(id => {
+        return dispatch => { };
+      });
+    const component = mount(todoCalendar);
+    const wrapper = component.find(".toggle");
+    wrapper.simulate("click");
+    expect(spyToggleTodo).toHaveBeenCalledTimes(1);
+  });
+});

src/containers/TodoList/NewTodo/NewTodo.js

@@ -39,6 +39,7 @@ class NewTodo extends Component {
         <h1>Add a New Todo!</h1>
         <label>Title</label>
         <input
+          className="title"
           type="text"
           value={this.state.title}
           onChange={(event) => this.setState({ title: event.target.value })}
@@ -50,24 +51,27 @@ class NewTodo extends Component {
         </textarea>
         <label>Due Date</label>
         year <input
+          className="year"
           type="text"
           value={this.state.dueDate.year}
           onChange={(event) => this.setState({
-            dueDate: {...this.state.dueDate, year: event.target.value }
+            dueDate: { ...this.state.dueDate, year: event.target.value }
           })}
         ></input>
         month <input
+          className="month"
           type="text"
           value={this.state.dueDate.month}
           onChange={(event) => this.setState({
-            dueDate: {...this.state.dueDate, month: event.target.value }
+            dueDate: { ...this.state.dueDate, month: event.target.value }
           })}
         ></input>
         date <input
+          className="date"
           type="text"
           value={this.state.dueDate.date}
           onChange={(event) => this.setState({
-            dueDate: {...this.state.dueDate, date: event.target.value }
+            dueDate: { ...this.state.dueDate, date: event.target.value }
           })}
         ></input>
         <button onClick={() => this.postTodoHandler()}>Submit</button>
@@ -79,7 +83,7 @@ class NewTodo extends Component {
 const mapDispatchToProps = dispatch => {
   return {
     onStoreTodo: (title, content, dueDate) =>
-      dispatch(actionCreators.postTodo({ title: title, content: content, dueDate: dueDate})),
+      dispatch(actionCreators.postTodo({ title: title, content: content, dueDate: dueDate })),
   }
 };
 

src/containers/TodoList/NewTodo/NewTodo.test.js

@@ -11,9 +11,9 @@ import * as actionCreators from '../../../store/actions/todo';
 
 const stubInitialState = {
   todos: [
-    {id: 1, title: 'TODO_TEST_TITLE_1', done: false},
-    {id: 2, title: 'TODO_TEST_TITLE_2', done: false},
-    {id: 3, title: 'TODO_TEST_TITLE_3', done: false},
+    { id: 1, title: 'TODO_TEST_TITLE_1', done: false },
+    { id: 2, title: 'TODO_TEST_TITLE_2', done: false },
+    { id: 3, title: 'TODO_TEST_TITLE_3', done: false },
   ],
   selectedTodo: null,
 };
@@ -27,9 +27,9 @@ describe('<NewTodo />', () => {
     newTodo = (
       <Provider store={mockStore}>
         <ConnectedRouter history={history}>
-        <Switch>
-          <Route path='/' exact component={NewTodo} />
-        </Switch>
+          <Switch>
+            <Route path='/' exact component={NewTodo} />
+          </Switch>
         </ConnectedRouter>
       </Provider>
     );
@@ -43,17 +43,17 @@ describe('<NewTodo />', () => {
 
   it(`should call 'postTodo'`, () => {
     const spyPostTodo = jest.spyOn(actionCreators, 'postTodo')
-      .mockImplementation(td => { return dispatch => {}; });
+      .mockImplementation(td => { return dispatch => { }; });
     const component = mount(newTodo);
     const wrapper = component.find('button');
     wrapper.simulate('click');
     expect(spyPostTodo).toHaveBeenCalledTimes(1);
   });
-  
+
   it(`should set state properly on title input`, () => {
     const title = 'TEST_TITLE'
     const component = mount(newTodo);
-    const wrapper = component.find('input');
+    const wrapper = component.find('input.title');
     wrapper.simulate('change', { target: { value: title } });
     const newTodoInstance = component.find(NewTodo.WrappedComponent).instance();
     expect(newTodoInstance.state.title).toEqual(title);
@@ -69,6 +69,21 @@ describe('<NewTodo />', () => {
     expect(newTodoInstance.state.title).toEqual('');
     expect(newTodoInstance.state.content).toEqual(content);
   });
+
+  it(`should set state properly on due date input`, () => {
+    const year = '2021'
+    const month = '12'
+    const date = '25'
+    const component = mount(newTodo);
+    const wrapper_year = component.find('input.year');
+    const wrapper_month = component.find('input.month');
+    const wrapper_date = component.find('input.date');
+    wrapper_year.simulate('change', { target: { value: year } });
+    wrapper_month.simulate('change', { target: { value: month } });
+    wrapper_date.simulate('change', { target: { value: date } });
+    const newTodoInstance = component.find(NewTodo.WrappedComponent).instance();
+    expect(newTodoInstance.state.dueDate).toEqual({ year, month, date });
+  });
 });
 
 

src/store/actions/todo.test.js

@@ -7,7 +7,12 @@ import store from '../store';
 const stubTodo = {
   id: 0,
   title: 'title 1',
-  content: 'content 1'
+  content: 'content 1',
+  dueDate: {
+    year: 2020,
+    month: 10,
+    date: 9,
+  }
 };
 
 describe('ActionCreators', () => {