submit

package.json

@@ -14,7 +14,7 @@
     "react-scripts": "3.1.1",
     "redux": "^4.0.4",
     "redux-thunk": "^2.3.0",
-    "semantic-ui-react": "^0.88.1"
+    "semantic-ui-react": "^2.0.0"
   },
   "scripts": {
     "start": "react-scripts start",

src/components/Calendar/Calendar.js

@@ -18,6 +18,7 @@ const CALENDAR_HEADER = (
 );
 
 const renderCalenderBody = (dates, todos, clickDone) => {
+  console.log(dates);
   let i = 0;
   const rows = [];
   for (let week=0; week<5; week++){
@@ -26,6 +27,7 @@ const renderCalenderBody = (dates, todos, clickDone) => {
     let row = [];
     for (let day=0; day<7; day++) {
       const date = dates[i];
+
       if (date !== undefined && day === date.getDay()) {
         row.push(
           <Table.Cell className={`cell ${day === 0 && 'sunday'}`} key={7*week+day}>
@@ -64,16 +66,18 @@ 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>
 )
 
 const Calendar = (props) => {
+  console.log(props)
   const dates = [];
   const year = props.year;
   const month = props.month - 1;
+  console.log(month);
   let date = 1;
   let maxDate = (new Date(year, month + 1, 0)).getDate();
 

src/components/Calendar/Calendar.test.js

@@ -0,0 +1,56 @@
+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 { Table } from 'semantic-ui-react';
+
+import { getMockStore } from '../../test-utils/mocks';
+import { history } from '../../store/store';
+import * as actionCreators from '../../store/actions/todo';
+
+import Calendar from './Calendar';
+
+const todos =  [
+    {id: 1, title: 'TODO_TEST_TITLE_1', content:'content1', done: true, year: 2019, month: 9, date: 1},
+    {id: 2, title: 'TODO_TEST_TITLE_2', content:'content2', done: false, year: 2019, month: 9, date: 1},
+    {id: 3, title: 'TODO_TEST_TITLE_3', content:'content3', done: false, year: 2019, month: 9, date: 1},
+];
+
+describe('<Calendar />', () => {
+    it('should render without errors', () => {
+        const component = shallow(<Calendar/>);
+        const wrapper = component.find('.calendar')
+        expect(wrapper.length).toBe(1);
+    })
+
+    it('should render cell', () => {
+        const component = shallow(<Calendar year={2019} month={10} todos={todos}/>)
+        const wrapper = component.find('.cell');
+        expect(wrapper.length).toBe(31)
+        expect(wrapper.at(0).find('.todoTitle').length).toBe(3);
+    })
+
+    it('should render if done=true', () => {
+        const component = shallow(<Calendar year={2019} month={10} todos={[todos[0]]}/>)
+        const wrapper = component.find('.cell').at(0).find('.todoTitle');//.find('.cell .todoTitle done')
+        expect(wrapper.length).toBe(1);
+        expect(wrapper.text()).toBe('TODO_TEST_TITLE_1')
+    })
+
+    it('should render if done=true', () => {
+        const component = shallow(<Calendar year={2019} month={10} todos={[todos[1]]}/>)
+        const wrapper = component.find('.cell').at(0).find('.todoTitle');//.find('.cell .todoTitle done')
+        expect(wrapper.length).toBe(1);
+        expect(wrapper.text()).toBe('TODO_TEST_TITLE_2')
+    })
+
+    it('should handle clicks', () => {
+        const mockClickDone = jest.fn();
+        const component = shallow(<Calendar year={2019} month={10} todos={todos} clickDone={mockClickDone}/>);
+        const wrapper = component.find('.cell').at(0).find('.todoTitle').at(0);
+        wrapper.simulate('click');
+        expect(mockClickDone).toHaveBeenCalledTimes(1);
+    })
+})
+

src/containers/TodoCalendar/TodoCalendar.test.js

@@ -0,0 +1,149 @@
+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 { Table } from 'semantic-ui-react';
+
+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', () => {
+    const renderCalenderBody = (dates, todos, clickDone) => {
+        let i = 0;
+        const rows = [];
+        for (let week=0; week<5; week++){
+          let day = 0; // Sunday
+
+          let row = [];
+          for (let day=0; day<7; day++) {
+              const date = dates[i]
+            if (date !== undefined && day === date.getDay()) {
+              row.push(
+                <div className={`cell ${day === 0 && 'sunday'}`} key={7*week+day}>
+                  <div className="date">{date.getDate()}</div>
+                  {
+                    todos.filter(todo => {
+                      return todo.year === date.getFullYear() &&
+                        todo.month === date.getMonth()+1 &&
+                        todo.date === date.getDate();
+                    }).map(todo => {
+                      return (
+                        <div
+                          key={todo.id}
+                          className={`todoTitle ${todo.done ? 'done':'notdone'}`}
+                          onClick={() => clickDone(todo.id)}>
+                          {todo.title}
+                        </div>
+                      )
+                    })
+                  }
+                </div>
+              )
+              i++;
+            } else {
+              row.push(<div key={7*week+day}> </div>)
+            }
+          }
+          rows.push(row);
+        }
+        return (
+            <div>
+              {rows.map((row, i) => (<div key={i}>{row}</div>))}
+            </div>
+          );
+    }
+
+    const renderCalendar = (dates, todos, clickDone) => (
+        <div className='spyCalendar' striped style={{"height": "600px", "width": "600px"}}>
+          {renderCalenderBody(dates, todos, clickDone)}
+        </div>
+    )
+
+    return jest.fn(props => {
+        const dates = [];
+        const year = props.year;
+        const month = props.month - 1;
+        let date = 1;
+        let maxDate = (new Date(year, month + 1, 0)).getDate();
+        for (let date=1; date<=maxDate; date++) {
+          dates.push(new Date(year, month, date));
+        }
+        return renderCalendar(dates, props.todos, props.clickDone);
+    });
+  });
+
+const stubInitialState = {
+    todos: [
+      {id: 1, title: 'TODO_TEST_TITLE_1', content:'content1', done: false, year: 2019, month: 10, date: 1},
+      {id: 2, title: 'TODO_TEST_TITLE_2', content:'content2', done: false, year: 2019, month: 10, date: 1},
+      {id: 3, title: 'TODO_TEST_TITLE_3', content:'content3', done: false, year: 2019, month: 10, date: 1},
+    ],
+    selectedTodo: null,
+};
+
+const mockStore = getMockStore(stubInitialState);
+
+describe('<TodoCalendar/>', () => {
+    let todoCalendar, spyGetTodos;
+    beforeEach(() => {
+        todoCalendar = (
+            <Provider store={mockStore}>
+                <ConnectedRouter history={history}>
+                <Switch>
+                    <Route path='/calendar' exact render={() => <TodoCalendar/>}/>
+                    <Redirect exact from='/' to='calendar' />
+                </Switch>
+                </ConnectedRouter>
+            </Provider>
+        )
+        spyGetTodos = jest.spyOn(actionCreators, 'getTodos')
+            .mockImplementation(() => { return dispatch => {}; });
+    });
+
+    it('should render Calendar', () => {
+        const component = mount(todoCalendar);
+        //console.log(component.debug())
+        const wrapper = component.find('.spyCalendar');
+        //console.log(wrapper);
+        expect(wrapper.length).toBe(1);
+        expect(spyGetTodos).toBeCalledTimes(1);
+    })
+
+    it('should call handleClickPrev', () => {
+        const component = mount(todoCalendar);
+        let newInstance = component.find(TodoCalendar.WrappedComponent).instance()
+        newInstance.setState({month: 1});
+        const wrapper = component.find('.header').find('button').at(0);
+        wrapper.simulate('click');
+        expect(newInstance.state.year).toEqual(2018);
+        expect(newInstance.state.month).toEqual(12);
+        wrapper.simulate('click');
+        expect(newInstance.state.year).toEqual(2018);
+        expect(newInstance.state.month).toEqual(11);
+    })
+    it('should call handleClickNext', () => {
+        const component = mount(todoCalendar);
+        let newInstance = component.find(TodoCalendar.WrappedComponent).instance()
+        newInstance.setState({month: 12});
+        const wrapper = component.find('.header').find('button').at(1);
+        wrapper.simulate('click');
+        expect(newInstance.state.year).toEqual(2020);
+        expect(newInstance.state.month).toEqual(1);
+        wrapper.simulate('click');
+        expect(newInstance.state.year).toEqual(2020);
+        expect(newInstance.state.month).toEqual(2);
+    })
+
+    it('should call clickDone', () => {
+      const spyToggleTodo = jest.spyOn(actionCreators, 'toggleTodo')
+        .mockImplementation(id => {return dispatch => {};});
+      const component = mount(todoCalendar);
+      const wrapper = component.find('.spyCalendar .todoTitle').at(0);
+      wrapper.simulate('click');
+      expect(spyToggleTodo).toBeCalledTimes(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
+          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,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,12 +63,31 @@ 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);
   });
+
+  it('should set state properly on duedate input', () => {
+    const dueDate = {
+      year: 2020,
+      month: 10,
+      date: 8
+    }
+    const component = mount(newTodo);
+    let wrapper = component.find('#year');
+    wrapper.simulate('change', { target: { value:  dueDate.year} });
+    wrapper = component.find('#month');
+    wrapper.simulate('change', { target: { value: dueDate.month} });
+    wrapper = component.find('#date');
+    wrapper.simulate('change', { target: { value: dueDate.date} });
+    const newTodoInstance = component.find(NewTodo.WrappedComponent).instance();
+    expect(newTodoInstance.state.title).toEqual('');
+    expect(newTodoInstance.state.content).toEqual('');
+    expect(newTodoInstance.state.dueDate).toEqual(dueDate);
+  })
 });
 
 

src/containers/TodoList/TodoList.test.js

@@ -53,6 +53,7 @@ describe('<TodoList />', () => {
 
   it('should render Todos', () => {
     const component = mount(todoList);
+    console.log(component.debug())
     const wrapper = component.find('.spyTodo');
     expect(wrapper.length).toBe(3);
     expect(wrapper.at(0).text()).toBe('TODO_TEST_TITLE_1');
@@ -78,7 +79,7 @@ describe('<TodoList />', () => {
     const wrapper = component.find('.spyTodo .deleteButton').at(0);
     wrapper.simulate('click');
     expect(spyDeleteTodo).toHaveBeenCalledTimes(1);
-  });
+  }); 
 
   it(`should call 'clickDone'`, () => {
     const spyToggleTodo = jest.spyOn(actionCreators, 'toggleTodo')

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