5th practice session

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>
@@ -76,11 +76,10 @@ const Calendar = (props) => {
   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);
 }
 

src/components/Calendar/Calendar.test.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import {shallow, mount} from 'enzyme';
+import Calendar from './Calendar';
+import * as actionCreators from '../../store/actions/index';
+
+it ('should render without errors', ()=> {
+  const component = shallow(<Calendar/>);
+  const wrapper = component.find('.Calendar');
+  expect(wrapper.length).toBe(1);
+})
+
+it('should set date propperly', ()=> {
+  const component = shallow(Calendar({year:2020, month:10, todos:[]}));
+  const wrapper = component.find('.date');
+  expect(wrapper.length).toBe(31);
+})
+
+it('should be clicked for done-todos if done=true', () => {
+  const clickdone = jest.fn();
+  const component = shallow(Calendar({
+    year:2020, month:10, 
+    todos:[
+      {id:1, title:'TODO_TEST_TITLE_1', done:false, year:2020, month:9, date:9},
+    ], 
+    clickDone: clickdone }));
+  const wrapper = component.find('.notdone');
+  wrapper.simulate('click');
+  expect(clickdone).toHaveBeenCalledTimes(1);
+  // console.log(component.debug());
+});
+
+it('should be clicked done-todos if done=false', () => {
+  const clickdone = jest.fn();
+  const component = shallow(Calendar({
+    year:2020, month:10, 
+    todos:[
+      {id:1, title:'TODO_TEST_TITLE_1', done:true, year:2020, month:9, date:9},
+    ], 
+    clickDone: clickdone }));
+  const wrapper = component.find('.done');
+  wrapper.simulate('click');
+  expect(clickdone).toHaveBeenCalledTimes(1);
+  // console.log(component.debug());
+});

src/containers/TodoCalendar/TodoCalendar.js

@@ -33,16 +33,18 @@ 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>
-          {this.state.year}.{this.state.month}
-          <button onClick={this.handleClickNext}> next month </button>
+          <button className="prevButton" onClick={this.handleClickPrev}> prev month </button>
+            {this.state.year}.{this.state.month}
+          <button className="nextButton" onClick={this.handleClickNext}> next month </button>
         </div>
         <Calendar
+          className="clickDone"
           year={this.state.year}
           month={this.state.month}
           todos={this.props.storedTodos}

src/containers/TodoCalendar/TodoCalendar.test.js

@@ -0,0 +1,86 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { Provider } from 'react-redux';
+import { ConnectedRouter } from 'connected-react-router';
+import { Route, 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 className="spyCalendar"
+        year={props.year}
+        month={props.month}
+        todos={props.todos}>
+      </div>
+    );
+  });
+});
+
+const stubInitialState = {
+  todos: [
+    {id: 1, title: 'TODO_TEST_TITLE_1', done: false},
+    {id: 2, title: 'TODO_TEST_TITLE_2', done: false},
+    {id: 3, title: 'TODO_TEST_TITLE_3', done: false},
+  ],
+  selectedTodo: null,
+  year: 2019, month: 10,
+};
+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('.TodoCalendar');
+    expect(wrapper.length).toBe(1);
+    expect(spyGetTodos).toBeCalledTimes(1);
+  });
+
+  it('should be clicked when the handleClickPrev button clicked', () => {
+    const component = mount(todoCalendar);
+    const wrapper = component.find('.prevButton');
+    for(let i=1; i<12; i++) wrapper.simulate('click');
+    const TodoCalendarInstance = component.find(TodoCalendar.WrappedComponent).instance();
+    expect(TodoCalendarInstance.state.month).toBe(stubInitialState.month+1);
+    expect(TodoCalendarInstance.state.year).toBe(stubInitialState.year-1);
+  });
+
+  it('should be clicked when the handleClickNext button clicked', () => {
+    const component = mount(todoCalendar);
+    const wrapper = component.find('.nextButton');
+    for(let i=1; i<12; i++) wrapper.simulate('click');
+    const TodoCalendarInstance = component.find(TodoCalendar.WrappedComponent).instance();
+    expect(TodoCalendarInstance.state.month).toBe(stubInitialState.month-1);
+    expect(TodoCalendarInstance.state.year).toBe(stubInitialState.year+1);
+  });
+
+  it('should be called ToggleTodo action when the Calendar-todo is clicked', () => {
+    const spyToggleTodo = jest.spyOn(actionCreators, 'toggleTodo')
+    .mockImplementation((id) => {return dispatch=>{}; });
+    const component = mount(todoCalendar);
+    const todoCalendarInstance = component.find(TodoCalendar.WrappedComponent).instance();
+    todoCalendarInstance.props.onToggleTodo(1);
+    expect(spyToggleTodo).toHaveBeenCalledTimes(1);
+  });
+});

src/containers/TodoList/NewTodo/NewTodo.js

@@ -40,6 +40,7 @@ class NewTodo extends Component {
         <label>Title</label>
         <input
           type="text"
+          className="title"
           value={this.state.title}
           onChange={(event) => this.setState({ title: event.target.value })}
         ></input>
@@ -51,20 +52,23 @@ class NewTodo extends Component {
         <label>Due Date</label>
         year <input
           type="text"
+          className="year"
           value={this.state.dueDate.year}
           onChange={(event) => this.setState({
             dueDate: {...this.state.dueDate, year: event.target.value }
           })}
         ></input>
         month <input
           type="text"
+          className="month"
           value={this.state.dueDate.month}
           onChange={(event) => this.setState({
             dueDate: {...this.state.dueDate, month: event.target.value }
           })}
         ></input>
         date <input
           type="text"
+          className="date"
           value={this.state.dueDate.date}
           onChange={(event) => this.setState({
             dueDate: {...this.state.dueDate, date: event.target.value }

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

@@ -51,24 +51,52 @@ describe('<NewTodo />', () => {
   });
 
   it(`should set state properly on title input`, () => {
-    const title = 'TEST_TITLE'
+    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 content input`, () => {
-    const content = 'TEST_CONTENT'
+    const content = 'TEST_CONTENT';
     const component = mount(newTodo);
     const wrapper = component.find('textarea');
     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 propperly 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 propperly on month input', ()=> {
+    const month = 10;
+    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 = 9;
+    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);
+  })
 
+})

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', () => {