unittest-tut

src/components/Calendar/Calendar.js

@@ -64,7 +64,7 @@ const renderCalenderBody = (dates, todos, clickDone) => {
 }
 
 const renderCalendar = (dates, todos, clickDone) => (
-  <Table striped style={{"height": "600px", "width": "600px"}}>
+  <Table striped style={{"height": "600px", "width": "600px"}} className="CalendarTable">
     {CALENDAR_HEADER}
     {renderCalenderBody(dates, todos, clickDone)}
   </Table>

src/components/Calendar/Calendar.test.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import { shallow, mount } from 'enzyme';
+import Calendar from './Calendar';
+
+
+const mockTodos = [
+    {
+        id: 1, title: 'TEST_TITLE_1', done: true,
+        year: 2019,
+        month: 9,
+        date: 1,
+    },
+    {
+        id: 2, title: 'TEST_TITLE_2', done: false,
+        year: 2019,
+        month: 9,
+        date: 2,
+    },
+    {
+        id: 3, title: 'TEST_TITLE_3', done: true,
+        year: 2019,
+        month: 10,
+        date: 1,
+    }
+];
+
+describe('<Calendar />', () => {
+  it('should render without errors', () => {
+    const component = shallow(<Calendar />);
+    const wrapper = component.find('.CalendarTable');
+    expect(wrapper.length).toBe(1);
+  });
+
+  it('should render table without errors', () => {
+    const component = shallow(<Calendar />);
+    let wrapper = component.find("Table");
+    expect(wrapper.length).toBe(1);
+  });
+
+  it('should render done for true', () => {
+    const component = shallow(<Calendar year={2019} month={10} todos={mockTodos}/>);
+    let wrapper = component.find('.done');
+    expect(wrapper.length).toBe(1);
+  });
+
+  it('should render notdone for false', () => {
+    const component = shallow(<Calendar year={2019} month={10} todos={mockTodos}/>);
+    const wrapper = component.find('.notdone');
+    expect(wrapper.length).toBe(1);
+  });
+
+  it('should handle clicks without errors', () => {
+    const mockClickDone = jest.fn();
+    const component = shallow(<Calendar year={2019} month={10} clickDone={mockClickDone} todos={mockTodos}/>);
+    const wrapper = component.find('.done').first();
+    wrapper.simulate('click');
+    expect(mockClickDone).toHaveBeenCalledTimes(1);
+  });
+});

src/containers/TodoCalendar/TodoCalendar.test.js

@@ -0,0 +1,84 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import TodoCalendar from './TodoCalendar';
+import { getMockStore } from '../../test-utils/mocks';
+import { history } from '../../store/store';
+import { Provider } from 'react-redux';
+import { ConnectedRouter } from 'connected-react-router';
+import { Route, Switch } from 'react-router-dom';
+import * as actionCreators from '../../store/actions/todo';
+
+const stubInitialState = {
+    todos: [
+        {
+            id: 1, title: 'TEST_TITLE_1', done: true,
+            year: 2019,
+            month: 9,
+            date: 1,
+        },
+        {
+            id: 2, title: 'TEST_TITLE_2', done: false,
+            year: 2019,
+            month: 9,
+            date: 2,
+        },
+        {
+            id: 3, title: 'TEST_TITLE_3', done: true,
+            year: 2019,
+            month: 10,
+            date: 1,
+        }
+    ],
+    selectedTodo: null,
+};
+
+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('.link');
+        expect(wrapper.length).toBe(1);
+        const wrapper2 = component.find('.header');
+        expect(wrapper2.length).toBe(1);
+        const wrapper3 = component.find('Calendar')
+        expect(wrapper3.length).toBe(1);
+    });
+
+    it('should click prev/next buttons', () => {
+        const component = mount(todoCalendar);
+        const wrapper = component.find('button');
+        wrapper.at(0).simulate('click');
+        const wrapper2 = component.find('.header');
+        let month = wrapper2.children().at(3).text();
+        expect(month).toBe('9');
+        wrapper.at(1).simulate('click');
+        const wrapper3 = component.find('.header');
+        month = wrapper3.children().at(3).text();
+        expect(month).toBe('10');
+    });
+
+    it('should clickDone work', () => {
+        const spyToggleTodo = jest.spyOn(actionCreators, 'toggleTodo')
+            .mockImplementation(id => { return dispatch => {}; });
+        const component = mount(todoCalendar);
+        const wrapper = component.find('.done').at(0);
+        wrapper.simulate('click');
+        expect(spyToggleTodo).toBeCalledTimes(1);
+    });
+
+}); 

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(),
       },
     })
@@ -42,6 +42,7 @@ class NewTodo extends Component {
           type="text"
           value={this.state.title}
           onChange={(event) => this.setState({ title: event.target.value })}
+          className="title"
         ></input>
         <label>Content</label>
         <textarea rows="4" type="text" value={this.state.content}
@@ -55,20 +56,23 @@ class NewTodo extends Component {
           onChange={(event) => this.setState({
             dueDate: {...this.state.dueDate, year: event.target.value }
           })}
+          className="year"
         ></input>
         month <input
           type="text"
           value={this.state.dueDate.month}
           onChange={(event) => this.setState({
             dueDate: {...this.state.dueDate, month: event.target.value }
           })}
+          className="month"
         ></input>
         date <input
           type="text"
           value={this.state.dueDate.date}
           onChange={(event) => this.setState({
             dueDate: {...this.state.dueDate, date: event.target.value }
           })}
+          className="date"
         ></input>
         <button onClick={() => this.postTodoHandler()}>Submit</button>
       </div>

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

@@ -53,13 +53,45 @@ describe('<NewTodo />', () => {
   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('.title');
     wrapper.simulate('change', { target: { value: title } });
     const newTodoInstance = component.find(NewTodo.WrappedComponent).instance();
     expect(newTodoInstance.state.title).toEqual(title);
     expect(newTodoInstance.state.content).toEqual('');
   });
 
+  it(`should set state properly on year input`, () => {
+    const year = 'TEST_YEAR'
+    const component = mount(newTodo);
+    const wrapper = component.find('.year');
+    wrapper.simulate('change', { target: { value: year } });
+    const newTodoInstance = component.find(NewTodo.WrappedComponent).instance();
+    expect(newTodoInstance.state.dueDate.year).toEqual(year);
+    // expect(newTodoInstance.state.content).toEqual('');
+  });
+
+  it(`should set state properly on month input`, () => {
+    const month = 'TEST_MONTH'
+    const component = mount(newTodo);
+    const wrapper = component.find('.month');
+    wrapper.simulate('change', { target: { value: month } });
+    const newTodoInstance = component.find(NewTodo.WrappedComponent).instance();
+    expect(newTodoInstance.state.dueDate.month).toEqual(month);
+    // expect(newTodoInstance.state.title).toEqual(title);
+    // expect(newTodoInstance.state.content).toEqual('');
+  });
+
+  it(`should set state properly on date input`, () => {
+    const date = 'TEST_DATE'
+    const component = mount(newTodo);
+    const wrapper = component.find('.date');
+    wrapper.simulate('change', { target: { value: date } });
+    const newTodoInstance = component.find(NewTodo.WrappedComponent).instance();
+    expect(newTodoInstance.state.dueDate.date).toEqual(date);
+    // expect(newTodoInstance.state.title).toEqual(title);
+    // expect(newTodoInstance.state.content).toEqual('');
+  });
+
   it(`should set state properly on content input`, () => {
     const content = 'TEST_CONTENT'
     const component = mount(newTodo);

src/store/actions/todo.js

@@ -46,7 +46,6 @@ export const postTodo = (td) => {
     ...td,
     dueDate: {
       ...td.dueDate,
-      month: td.dueDate.month - 1,
     },
   }
   return (dispatch) => {