practice5 finished

src/components/Calendar/Calendar.js

@@ -74,7 +74,7 @@ const Calendar = (props) => {
   const dates = [];
   const year = props.year;
   const month = props.month - 1;
-  let date = 1;
+  //let date = 1;
   let maxDate = (new Date(year, month + 1, 0)).getDate();
 
   for (let date=1; date<=maxDate; date++) {

src/components/Calendar/Calendar.test.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { shallow, mount } from 'enzyme';
+import { Table } from 'semantic-ui-react'
+import Calendar from './Calendar';
+
+const todos= [
+      {id: 1, title: 'TODO_TEST_TITLE_1', content: 'test1', year: 2020, month: 10, date: 9, done: true},
+      {id: 2, title: 'TODO_TEST_TITLE_2', content: 'test2', year: 2020, month: 10, date: 9, done: false},
+      {id: 3, title: 'TODO_TEST_TITLE_3', content: 'test3', year: 2020, month: 9, date: 9, done: false},
+];
+
+
+const year = 2020;
+const month = 11;
+const date = 9;
+
+describe('<Calendar />', () => {
+    it('should render Calendar', () => {
+      const component = shallow(<Calendar />);
+      const wrapper = component.find(Table);
+      expect(wrapper.length).toBe(1);
+    });
+
+    it('should render title as done if done', () => {
+        const mockClickDone = jest.fn();
+        const component = mount(<Calendar year={year} month={month} todos={todos} clickDone={mockClickDone} />);
+        const wrapper = component.find('.done');
+        expect(wrapper.length).toBe(1);
+    });
+
+    it('should change title to done if clicked done', () => {
+        const mockClickDone = jest.fn();
+        const component = mount(<Calendar year={year} month={month} todos={todos} clickDone={mockClickDone} />);
+        const wrapper = component.find('.notdone');
+        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="prev-month" onClick={this.handleClickPrev}> prev month </button>
           {this.state.year}.{this.state.month}
-          <button onClick={this.handleClickNext}> next month </button>
+          <button id="next-month" onClick={this.handleClickNext}> next month </button>
         </div>
         <Calendar
           year={this.state.year}

src/containers/TodoCalendar/TodoCalendar.test.js

@@ -0,0 +1,107 @@
+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 => {
+        const dates=props.todos.map(todo=>{
+                return(
+                    <div className="date" key={todo.date}>
+                        <div
+                        key={todo.id}
+                        className={`todoTitle ${todo.done ? 'done':'notdone'}`}
+                        onClick={() => props.clickDone(todo.id)}>
+                        {todo.title}
+                        </div>
+                    </div>
+                )
+            })
+      return (
+        <div className="spyCalender">
+            {dates}
+        </div>);
+    });
+  });
+const stubInitialState = {
+  todos: [
+    {id: 1, title: 'TODO_TEST_TITLE_1', done: true, year: 2020, month:10, date:8},
+    {id: 2, title: 'TODO_TEST_TITLE_2', done: false, year: 2020, month:10, date:9},
+    {id: 3, title: 'TODO_TEST_TITLE_3', done: false, year: 2020, month:10, date:10},
+  ],
+};
+
+const mockStore = getMockStore(stubInitialState);
+
+ describe('<TodoCalendar />', () => {
+   let todocalendar, spyGetTodos;
+
+   beforeEach(() => {
+     todocalendar = (
+       <Provider store={mockStore}>
+         <ConnectedRouter history={history}>
+         <Switch>
+           <Route path='/' exact
+             render={() => <TodoCalendar title="TODOCALENDER_TEST_TITLE" />} />
+         </Switch>
+         </ConnectedRouter>
+       </Provider>
+     );
+     spyGetTodos = jest.spyOn(actionCreators, 'getTodos')
+       .mockImplementation(() => { return dispatch => {}; });
+   })
+
+   it('should render TodoCalendar', () => {
+        const component = mount(todocalendar);
+        let wrapper = component.find('.date');
+        expect(wrapper.length).toBe(3);
+        wrapper = component.find('div.todoTitle.done')
+        expect(wrapper.at(0).text()).toBe('TODO_TEST_TITLE_1');
+        wrapper = component.find('div.todoTitle.notdone')
+        expect(wrapper.at(0).text()).toBe('TODO_TEST_TITLE_2');
+        expect(wrapper.at(1).text()).toBe('TODO_TEST_TITLE_3');
+        expect(spyGetTodos).toBeCalledTimes(1);
+   });
+
+   it(`should call 'handleClickPrev'`, () => {
+        const component = mount(todocalendar);
+        const wrapper = component.find('#prev-month');
+        wrapper.simulate('click');
+        const cal = component.find(TodoCalendar.WrappedComponent).instance();
+        expect(cal.state.month).toEqual(9);
+        expect(cal.state.year).toEqual(2019);
+        for(let i=0; i<10; i++)
+            wrapper.simulate('click');
+        const cal2 = component.find(TodoCalendar.WrappedComponent).instance();
+        expect(cal2.state.year).toEqual(2018);
+        expect(cal2.state.month).toEqual(11);
+   });
+
+   it(`should call 'handleClickNext'`, () => {
+        const component = mount(todocalendar);
+        const wrapper = component.find('#next-month');
+        wrapper.simulate('click');
+        const cal = component.find(TodoCalendar.WrappedComponent).instance();
+        expect(cal.state.month).toEqual(11);
+        expect(cal.state.year).toEqual(2019);
+        for(let i=0; i<2; i++)
+            wrapper.simulate('click');
+        const cal2 = component.find(TodoCalendar.WrappedComponent).instance();
+        expect(cal2.state.year).toEqual(2020);
+        expect(cal2.state.month).toEqual(1);
+   });
+
+   it(`should call 'clickDone'`, () => {
+        const spyToggleTodo = jest.spyOn(actionCreators, 'toggleTodo')
+        .mockImplementation(id => { return dispatch => {}; });
+        const component = mount(todocalendar);
+        const wrapper = component.find('.todoTitle.notdone').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

@@ -22,6 +22,7 @@ const mockStore = getMockStore(stubInitialState);
 
 describe('<NewTodo />', () => {
   let newTodo;
+  let now;
 
   beforeEach(() => {
     newTodo = (
@@ -33,6 +34,7 @@ describe('<NewTodo />', () => {
         </ConnectedRouter>
       </Provider>
     );
+    now = new Date();
   })
 
   it('should render NewTodo', () => {
@@ -53,21 +55,67 @@ 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('');
+
+    expect(newTodoInstance.state.dueDate.year).toEqual(now.getFullYear());
+    expect(newTodoInstance.state.dueDate.month).toEqual(now.getMonth()+1);
+    expect(newTodoInstance.state.dueDate.date).toEqual(now.getDate());
   });
 
   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(newTodoInstance.state.dueDate.year).toEqual(now.getFullYear());
+    expect(newTodoInstance.state.dueDate.month).toEqual(now.getMonth()+1);
+    expect(newTodoInstance.state.dueDate.date).toEqual(now.getDate());
+  });
+
+  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.title).toEqual('');
+    expect(newTodoInstance.state.content).toEqual('');
+    expect(newTodoInstance.state.dueDate.year).toEqual(year);
+    expect(newTodoInstance.state.dueDate.month).toEqual(now.getMonth()+1);
+    expect(newTodoInstance.state.dueDate.date).toEqual(now.getDate());
+  });
+
+  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.title).toEqual('');
+    expect(newTodoInstance.state.content).toEqual('');
+    expect(newTodoInstance.state.dueDate.year).toEqual(now.getFullYear());
+    expect(newTodoInstance.state.dueDate.month).toEqual(month);
+    expect(newTodoInstance.state.dueDate.date).toEqual(now.getDate());
+  });
+
+  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.title).toEqual('');
+    expect(newTodoInstance.state.content).toEqual('');
+    expect(newTodoInstance.state.dueDate.year).toEqual(now.getFullYear());
+    expect(newTodoInstance.state.dueDate.month).toEqual(now.getMonth()+1);
+    expect(newTodoInstance.state.dueDate.date).toEqual(date);
   });
 });
 

src/store/actions/todo.test.js

@@ -6,6 +6,7 @@ import store from '../store';
 
 const stubTodo = {
   id: 0,
+  dueDate: {year: 1111, month: 11, date: 11},
   title: 'title 1',
   content: 'content 1'
 };