unittest practice

src/components/Calendar/Calendar.js

@@ -73,9 +73,9 @@ const renderCalendar = (dates, todos, clickDone) => (
 const Calendar = (props) => {
   const dates = [];
   const year = props.year;
-  const month = props.month - 1;
+  const month = props.month;
   let date = 1;
-  let maxDate = (new Date(year, month + 1, 0)).getDate();
+  let maxDate = (new Date(year, month, 0)).getDate();
 
   for (let date=1; date<=maxDate; date++) {
     dates.push(new Date(year, month, date));

src/components/Calendar/Calendar.test.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import Calendar from './Calendar';
+
+describe('<Calendar />', () => {
+  it('should render without errors', () => {
+    const component = shallow(<Calendar />);
+    let wrapper = component.find('.sunday');
+    expect(wrapper.length).toBe(1);
+  });
+
+  it('should push dates without errors', () => {
+    const component = shallow(<Calendar year={2020} month={10} todos={[]} />);
+    const wrapper = component.find('.date');
+    expect(wrapper.length).toBe((new Date(2020,10,0)).getDate());
+  });
+
+  it('should render todo as done if done = true', () => {
+    const component = shallow(<Calendar year={2020} month={10} todos={[{id: 1, year: 2020, month: 10, date: 20, title: "Um", done: true}]} />);
+    let wrapper = component.find('.todoTitle');
+    expect(wrapper.length).toBe(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='clickPrev' onClick={this.handleClickPrev}> prev month </button>
           {this.state.year}.{this.state.month}
-          <button onClick={this.handleClickNext}> next month </button>
+          <button className='clickNext' onClick={this.handleClickNext}> next month </button>
         </div>
         <Calendar
           year={this.state.year}

src/containers/TodoCalendar/TodoCalendar.test.js

@@ -0,0 +1,73 @@
+import React from 'react';
+import { shallow, mount } from 'enzyme';
+import { Provider } from 'react-redux';
+import { connectRouter, ConnectedRouter } from 'connected-react-router';
+import { Route, Redirect, Switch } from 'react-router-dom';
+
+import TodoCalendar from './TodoCalendar';
+import { getMockStore } from '../../test-utils/mocks';
+import { history } from '../../store/store';
+import * as actionCreators from '../../store/actions/todo';
+
+const stubInitialState = {
+    todos: [
+        {id: 1, title: 'TODO_TEST_TITLE_1', done: false, year:2019, month:10, date: 20},
+        {id: 2, title: 'TODO_TEST_TITLE_2', done: false, year:2019, month:10, date: 30},
+        {id: 3, title: 'TODO_TEST_TITLE_3', done: false, year:2019, month:11, date: 2},
+        {id: 3, title: 'TODO_TEST_TITLE_4', done: false, year:2019, month:9, date: 2}
+      ],
+    selectedTodo: null,
+};
+
+const mockStore = getMockStore(stubInitialState);
+
+describe('<TodoCalendar />', () => {
+  let todoList, spyGetTodos;
+
+  beforeEach(() => {
+    todoList = (
+      <Provider store={mockStore}>
+        <ConnectedRouter history={history}>
+        <Switch>
+          <Route path='/' exact
+            render={() => <TodoCalendar title="TODOCALENDAR_TEST_TITLE" />} />
+        </Switch>
+        </ConnectedRouter>
+      </Provider>
+    );
+    spyGetTodos = jest.spyOn(actionCreators, 'getTodos')
+      .mockImplementation(() => { return dispatch => {}; });
+  })
+
+  it('should render todos', () => {
+    const component = mount(todoList);
+    const wrapper = component.find('.todoTitle');
+    expect(wrapper.length).toBe(2);
+    expect(wrapper.at(0).text()).toBe('TODO_TEST_TITLE_1');
+    expect(wrapper.at(1).text()).toBe('TODO_TEST_TITLE_2');
+    expect(spyGetTodos).toBeCalledTimes(1);
+  });
+
+  it('should handle prevClick', () => {
+    const component = mount(todoList);
+    let wrapper = component.find('.header .clickPrev');
+    wrapper.simulate('click');
+    wrapper = component.find('.todoTitle');
+    expect(wrapper.length).toBe(1);
+
+    expect(wrapper.at(0).text()).toBe('TODO_TEST_TITLE_4');
+    expect(spyGetTodos).toBeCalledTimes(2);
+  });
+
+  it('should handle nextClick', () => {
+    const component = mount(todoList);
+    let wrapper = component.find('.header .clickNext');
+    wrapper.simulate('click');
+    wrapper = component.find('.todoTitle');
+    expect(wrapper.length).toBe(1);
+
+    expect(wrapper.at(0).text()).toBe('TODO_TEST_TITLE_3');
+    expect(spyGetTodos).toBeCalledTimes(3);
+  });
+});
+

src/containers/TodoList/NewTodo/NewTodo.js

@@ -23,7 +23,7 @@ class NewTodo extends Component {
       ...this.state,
       dueDate: {
         year: now.getFullYear(),
-        month: now.getMonth() + 1,
+        month: now.getMonth(),
         date: now.getDate(),
       },
     })

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

@@ -54,7 +54,7 @@ describe('<NewTodo />', () => {
     const title = 'TEST_TITLE'
     const component = mount(newTodo);
     const wrapper = component.find('input');
-    wrapper.simulate('change', { target: { value: title } });
+    wrapper.at(0).simulate('change', { target: { value: title } });
     const newTodoInstance = component.find(NewTodo.WrappedComponent).instance();
     expect(newTodoInstance.state.title).toEqual(title);
     expect(newTodoInstance.state.content).toEqual('');
@@ -69,6 +69,36 @@ describe('<NewTodo />', () => {
     expect(newTodoInstance.state.title).toEqual('');
     expect(newTodoInstance.state.content).toEqual(content);
   });
+
+  it(`should set state properly on year input`, () => {
+    const year = 2020;
+    const component = mount(newTodo);
+    const wrapper = component.find('input');
+    wrapper.at(1).simulate('change', { target: { value: year } });
+    const newTodoInstance = component.find(NewTodo.WrappedComponent).instance();
+    expect(newTodoInstance.state.dueDate.year).toBe(year);
+    expect(newTodoInstance.state.content).toEqual('');
+  });
+
+  it(`should set state properly on month input`, () => {
+    const month = 10;
+    const component = mount(newTodo);
+    const wrapper = component.find('input');
+    wrapper.at(2).simulate('change', { target: { value: month } });
+    const newTodoInstance = component.find(NewTodo.WrappedComponent).instance();
+    expect(newTodoInstance.state.dueDate.month).toBe(month);
+    expect(newTodoInstance.state.content).toEqual('');
+  });
+
+  it(`should set state properly on day input`, () => {
+    const date = 8;
+    const component = mount(newTodo);
+    const wrapper = component.find('input');
+    wrapper.at(3).simulate('change', { target: { value: date } });
+    const newTodoInstance = component.find(NewTodo.WrappedComponent).instance();
+    expect(newTodoInstance.state.dueDate.date).toBe(date);
+    expect(newTodoInstance.state.content).toEqual('');
+  });
 });
 
 

src/store/actions/todo.js

@@ -33,21 +33,16 @@ export const postTodo_ = (td) => {
     id: td.id,
     title: td.title,
     content: td.content,
-    dueDate: {
-      year: td.year,
-      month: td.month,
-      date: td.date,
-    }
+    year: td.year,
+    month: td.month,
+    date: td.date,
   };
 };
 
 export const postTodo = (td) => {
   const todo = {
     ...td,
-    dueDate: {
-      ...td.dueDate,
-      month: td.dueDate.month - 1,
-    },
+    month: td.month -1,
   }
   return (dispatch) => {
     return axios.post('/api/todo/', todo)