lab

src/components/Calendar/Calendar.js

@@ -39,6 +39,7 @@ const renderCalenderBody = (dates, todos, clickDone) => {
                 return (
                   <div
                     key={todo.id}
+                    id="todoTitle"
                     className={`todoTitle ${todo.done ? 'done':'notdone'}`}
                     onClick={() => clickDone(todo.id)}>
                     {todo.title}

src/components/Calendar/Calendar.test.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { shallow, mount } from 'enzyme';
+
+import { Table } from 'semantic-ui-react'
+import Calendar from './Calendar';
+import { bindActionCreators } from 'redux';
+
+const stub_todos = [
+    { id: "todo1", title: 'TODO_TEST_TITLE_1', content: 'content1', done: true, year: 2020, month: 1, date: 1 },
+    { id: "todo2", title: 'TODO_TEST_TITLE_2', content: 'content2', done: false, year: 2020, month: 1, date: 1 },
+    { id: "todo3", title: 'TODO_TEST_TITLE_3', content: 'content3', done: false, year: 2020, month: 1, date: 20 },
+]
+
+describe('<Calendar />', () => {
+    it('should render Calendar', () => {
+        const component = shallow(<Calendar />)
+        const wrapper = component.find(Table)
+        expect(wrapper.length).toBe(1);
+    })
+
+    it('should change by click', () => {
+        const mockClickDone = jest.fn();
+        const component = shallow(<Calendar
+            year="2020"
+            month="1"
+            date="1"
+            todos={stub_todos}
+            clickDone={mockClickDone} />
+        )
+        component.debug();
+        const wrapper = component.find("#todoTitle".WrappedConponent).instance();
+        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 id="prevMon" onClick={this.handleClickPrev}> prev month </button>
           {this.state.year}.{this.state.month}
-          <button onClick={this.handleClickNext}> next month </button>
+          <button id="nextMon" onClick={this.handleClickNext}> next month </button>
         </div>
         <Calendar
           year={this.state.year}

src/containers/TodoCalendar/TodoCalendar.test.js

@@ -0,0 +1,80 @@
+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';
+
+jest.mock('../../components/Calendar/Calendar', () => {
+  return jest.fn(props => {
+    return (
+      < div className="spyCalendar"
+        year={props.year}
+        month={props.month}
+        todos={props.storedTodos}>
+        </div>
+    )
+  })
+})
+
+const stubInitialState = {
+  todos: [
+    { id: 1, title: 'TODO_TEST_TITLE_1', done: false, year: 2020, month: 1, date: 1 },
+    { id: 2, title: 'TODO_TEST_TITLE_2', done: false, year: 2020, month: 2, date: 10 },
+    { id: 3, title: 'TODO_TEST_TITLE_3', done: false, year: 2020, month: 5, date: 20 },
+  ],
+  selectedTodo: null,
+};
+
+const mockStore = getMockStore(stubInitialState);
+
+describe('<TodoCalendar />', () => {
+  let todoCalendar, spyGetTodos;
+
+  beforeEach(() => {
+    todoCalendar = (
+      < Provider store={mockStore} >
+        <ConnectedRouter history={history}>
+          <Switch>
+            <Route path='/' exact render={() => <TodoCalendar />} />
+          </Switch>
+        </ConnectedRouter>
+      </Provider >
+    )
+    spyGetTodos = jest.spyOn(actionCreators, 'getTodos')
+      .mockImplementation(() => { return dispatch => {}; });
+  })
+
+  it('should render TodoCalendar', () => {
+    const component = mount(todoCalendar);
+    const wrapper = component.find('.spyCalendar');
+    expect(wrapper.length).toBe(1);
+  });
+
+  it('should call handleClickPrev', () => {
+    const component = mount(todoCalendar);
+    const wrapper = component.find('#prevMon');
+    const todoCalendarInstance = component.find(TodoCalendar.WrappedComponent).instance();
+    for (let i = 0; i < 12; i++) {
+      wrapper.simulate('click');
+    }
+    expect(todoCalendarInstance.state.year).toEqual(2018);
+    expect(todoCalendarInstance.state.month).toEqual(10);
+  });
+
+  it('should call handleClickNext', () => {
+    const component = mount(todoCalendar);
+    const wrapper = component.find('#nextMon');
+    const todoCalendarInstance = component.find(TodoCalendar.WrappedComponent).instance();
+    for (let i = 0; i < 12; i++) {
+      wrapper.simulate('click');
+    }
+    expect(todoCalendarInstance.state.year).toEqual(2020);
+    expect(todoCalendarInstance.state.month).toEqual(10);
+
+  });
+})

src/containers/TodoList/NewTodo/NewTodo.js

@@ -39,31 +39,35 @@ class NewTodo extends Component {
         <h1>Add a New Todo!</h1>
         <label>Title</label>
         <input
+          id="title"
           type="text"
           value={this.state.title}
           onChange={(event) => this.setState({ title: event.target.value })}
         ></input>
         <label>Content</label>
-        <textarea rows="4" type="text" value={this.state.content}
+        <textarea id="content" rows="4" type="text" value={this.state.content}
           onChange={(event) => this.setState({ content: event.target.value })}
         >
         </textarea>
         <label>Due Date</label>
         year <input
+          id="year"
           type="text"
           value={this.state.dueDate.year}
           onChange={(event) => this.setState({
             dueDate: {...this.state.dueDate, year: event.target.value }
           })}
         ></input>
         month <input
+          id="month"
           type="text"
           value={this.state.dueDate.month}
           onChange={(event) => this.setState({
             dueDate: {...this.state.dueDate, month: event.target.value }
           })}
         ></input>
         date <input
+          id="date"
           type="text"
           value={this.state.dueDate.date}
           onChange={(event) => this.setState({

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

@@ -53,17 +53,47 @@ 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 = 2020
+    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 = 1
+    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.content).toEqual('');
+  });
+
+  it(`should set state properly on date input`, () => {
+    const date = 1
+    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.content).toEqual('');
+  });
+
   it(`should set state properly on content input`, () => {
     const content = 'TEST_CONTENT'
     const component = mount(newTodo);
-    const wrapper = component.find('textarea');
+    const wrapper = component.find('#content');
     wrapper.simulate('change', { target: { value: content } });
     const newTodoInstance = component.find(NewTodo.WrappedComponent).instance();
     expect(newTodoInstance.state.title).toEqual('');

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: 1,
+    date: 1,
+  }
 };
 
 describe('ActionCreators', () => {