Passed tests

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 className="Calendar" striped style={{"height": "600px", "width": "600px"}}>
     {CALENDAR_HEADER}
     {renderCalenderBody(dates, todos, clickDone)}
   </Table>

src/components/Calendar/Calendar.test.js

@@ -0,0 +1,51 @@
+import React, { Component } from 'react';
+import { shallow, mount } from 'enzyme';
+import { Table } from 'semantic-ui-react'
+import Calendar from './Calendar';
+
+
+it('should render Calendar', () => {
+    const component = shallow(<Calendar/>);
+    const wrapper = component.find('.Calendar');
+    expect(wrapper.length).toBe(1);
+});
+
+it('should build dates properly', () => {
+    const component = shallow(Calendar({
+        year: 2020,
+        month: 10,
+        todos: [],
+    }));
+    const wrapper = component.find('.date');
+    expect(wrapper.length).toBe(31);
+});
+
+it('should handle clicks for done todos', () => {
+    const mockClickDone = jest.fn();
+    const component = shallow(Calendar({
+        year: 2020,
+        month: 10,
+        todos: [{id: 1, year: 2020, month: 9, date: 8, done: true,},
+                {id: 2, year: 2020, month: 9, date: 8, done: false,},
+            ],
+        clickDone: mockClickDone,
+    }))
+    const wrapper = component.find('.done');
+    wrapper.simulate('click');
+    expect(mockClickDone).toHaveBeenCalledTimes(1);
+});
+
+it('should handle clicks for undone todos', () => {
+    const mockClickDone = jest.fn();
+    const component = shallow(Calendar({
+        year: 2020,
+        month: 10,
+        todos: [{id: 1, year: 2020, month: 9, date: 8, done: true,},
+                {id: 2, year: 2020, month: 9, date: 8, done: false,},
+            ],
+        clickDone: mockClickDone,
+    }))
+    const wrapper = component.find('.notdone');
+    wrapper.simulate('click');
+    expect(mockClickDone).toHaveBeenCalledTimes(1);
+});

src/containers/TodoCalendar/TodoCalendar.js

@@ -35,12 +35,12 @@ class TodoCalendar extends Component {
 
   render() {
     return (
-      <div>
+      <div className="TodoCalendar">
         <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,84 @@
+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 Calendar from '../../components/Calendar/Calendar';
+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>
+                <div className = "year">{props.year}</div>
+                <div className = "month">{props.month}</div>
+                <div>{props.todos}</div>
+                <div className = "clickDone" onClick = {props.clickDone}/>
+            </div>
+        );
+    });
+});
+
+const stubInitialState = {
+    year: 2019,
+    month: 10,
+}
+
+const mockStore = getMockStore(stubInitialState);
+
+describe('<TodoCalendar />', () => {
+    let todoCalendar;
+
+    beforeEach(() => {
+        todoCalendar = (
+            <Provider store = {mockStore}>
+                <ConnectedRouter history = {history}>
+                    <Switch>
+                        <Route path = '/' exact render = {() => <TodoCalendar/>}/>
+                    </Switch>
+                </ConnectedRouter>
+            </Provider>
+        );
+    });
+
+    it('should render TodoCalendar', () => {
+        const component = mount(todoCalendar);
+        const wrapper = component.find('.TodoCalendar');
+        expect(wrapper.length).toBe(1);
+    });
+
+    it('should call handleClickPrev', () => {
+        const component = mount(todoCalendar);
+        const wrapper = component.find('.clickPrev');
+        for(let i=0; i<12; i++) {
+            wrapper.simulate('click');
+        }
+        const year = parseInt(component.find(Calendar).find('.year').text());
+        expect(year).toBe(stubInitialState.year - 1);
+    });
+
+    it('should call handleClickNext', () => {
+        const component = mount(todoCalendar);
+        const wrapper = component.find('.clickNext');
+        for(let i=0; i<12; i++) {
+            wrapper.simulate('click');
+        }
+        const year = parseInt(component.find(Calendar).find('.year').text());
+        expect(year).toBe(stubInitialState.year + 1);
+    });
+
+    it('should call clickDone', () => {
+        const spyToggleTodo = jest.spyOn(actionCreators, 'toggleTodo')
+        .mockImplementation(id => { 
+            return dispatch => {}; 
+        });
+        const component = mount(todoCalendar);
+        const wrapper = component.find('.clickDone').at(0);
+        wrapper.simulate('click');
+        expect(spyToggleTodo).toHaveBeenCalledTimes(1);
+    });
+});

src/containers/TodoList/NewTodo/NewTodo.js

@@ -39,31 +39,35 @@ 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 })}
         ></input>
         <label>Content</label>
-        <textarea rows="4" type="text" value={this.state.content}
+        <textarea className="content" rows="4" type="text" value={this.state.content}
           onChange={(event) => this.setState({ content: event.target.value })}
         >
         </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 }
           })}
         ></input>
         month <input
+          className="month"
           type="text"
           value={this.state.dueDate.month}
           onChange={(event) => this.setState({
             dueDate: {...this.state.dueDate, month: event.target.value }
           })}
         ></input>
         date <input
+        className="date"
           type="text"
           value={this.state.dueDate.date}
           onChange={(event) => this.setState({

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

@@ -53,7 +53,7 @@ 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);
@@ -63,11 +63,42 @@ describe('<NewTodo />', () => {
   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('');
     expect(newTodoInstance.state.content).toEqual(content);
+    //expect().toHaveBeenCalledTimes(1);
+  });
+
+  it(`should set state properly on year input`, () => {
+    const year = 2000
+    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 = 8
+    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 = 10
+    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('');
   });
 });
 

src/store/actions/todo.test.js

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