practice 5

src/components/Calendar/Calendar.js

@@ -1,8 +1,9 @@
 import React, { Component } from 'react';
-import { Table } from 'semantic-ui-react'
+import { Table } from 'semantic-ui-react';
 
 import './Calendar.css';
 
+
 const CALENDAR_HEADER = (
   <Table.Header>
     <Table.Row>

src/components/Calendar/Calendar.test.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import { shallow, mount } from 'enzyme';
+import Calendar from './Calendar';
+import { Table } from 'semantic-ui-react'
+
+describe('<Calendar />', () => {
+    const mockTodos_done = [{
+        id: 1,
+        title: 'TITLE',
+        content: 'CONTENT',
+        done: true,
+        year: 2020,
+        month: 10,
+        date: 8
+    }];
+
+    const mockTodos_undone = [{
+        id: 1,
+        title: 'TITLE',
+        content: 'CONTENT',
+        done: false,
+        year: 2020,
+        month: 10,
+        date: 8
+    }];
+
+    it('should render without errors', () => {
+        const component = shallow(<Calendar />);
+        const wrapper = component.find(Table);
+        expect(wrapper.length).toBe(1);
+    });
+
+    it('should handle clicks done-todos if done=true', () => {
+        const mockClickDone = jest.fn();
+        const component = shallow(<Calendar year={2020} month={11} todos={mockTodos_done} clickDone={mockClickDone} />);
+        const wrapper = component.find('.done');
+        wrapper.simulate('click');
+        expect(mockClickDone).toHaveBeenCalledTimes(1);
+    });
+
+    it('should handle clicks if done=false', () => {
+        const mockClickDone = jest.fn();
+        const component = shallow(<Calendar year={2020} month={11} todos={mockTodos_undone} 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="prevMonth" onClick={this.handleClickPrev}> prev month </button>
           {this.state.year}.{this.state.month}
-          <button onClick={this.handleClickNext}> next month </button>
+          <button id="nextMonth" onClick={this.handleClickNext}> next month </button>
         </div>
         <Calendar
           year={this.state.year}

src/containers/TodoCalendar/TodoCalendar.test.js

@@ -0,0 +1,90 @@
+import axios from 'axios';
+
+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 className="spyCalendar">
+        <button className="doneButton" onClick={props.clickDone} />
+      </div>);
+  });
+});
+
+const stubInitialState = {
+  todos: [],
+  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 without errors', () => {
+    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('#prevMonth');
+    const todoCalendarInstance = component.find(TodoCalendar.WrappedComponent).instance();
+    wrapper.simulate('click');
+    expect(todoCalendarInstance.state.year).toEqual(2019);
+    expect(todoCalendarInstance.state.month).toEqual(9);
+
+    for(let m = 9; m >= 1; m--) wrapper.simulate('click');
+    expect(todoCalendarInstance.state.year).toEqual(2018);
+    expect(todoCalendarInstance.state.month).toEqual(12);
+  });
+
+  it(`should call handleClickNext`, () => {
+    const component = mount(todoCalendar);
+    const wrapper = component.find('#nextMonth');
+    const todoCalendarInstance = component.find(TodoCalendar.WrappedComponent).instance();
+    wrapper.simulate('click');
+    expect(todoCalendarInstance.state.year).toEqual(2019);
+    expect(todoCalendarInstance.state.month).toEqual(11);
+
+    for(let m = 11; m <= 12; m++) wrapper.simulate('click');
+    expect(todoCalendarInstance.state.year).toEqual(2020);
+    expect(todoCalendarInstance.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('.doneButton');
+    wrapper.simulate('click');
+    expect(spyToggleTodo).toBeCalledTimes(1);
+  });
+
+});

src/containers/TodoList/NewTodo/NewTodo.js

@@ -40,6 +40,7 @@ class NewTodo extends Component {
         <label>Title</label>
         <input
           type="text"
+          id="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"
+          id="year"
           value={this.state.dueDate.year}
           onChange={(event) => this.setState({
             dueDate: {...this.state.dueDate, year: event.target.value }
           })}
         ></input>
         month <input
           type="text"
+          id="month"
           value={this.state.dueDate.month}
           onChange={(event) => this.setState({
             dueDate: {...this.state.dueDate, month: event.target.value }
           })}
         ></input>
         date <input
           type="text"
+          id="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

@@ -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);
@@ -69,6 +69,39 @@ describe('<NewTodo />', () => {
     expect(newTodoInstance.state.title).toEqual('');
     expect(newTodoInstance.state.content).toEqual(content);
   });
+
+  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.title).toEqual('');
+    expect(newTodoInstance.state.content).toEqual('');
+    expect(newTodoInstance.state.dueDate.year).toEqual(year);
+  });
+
+  it(`should set state properly 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.title).toEqual('');
+    expect(newTodoInstance.state.content).toEqual('');
+    expect(newTodoInstance.state.dueDate.month).toEqual(month);
+  });
+
+  it(`should set state properly on date input`, () => {
+    const date = 8
+    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.date).toEqual(date);
+  });
 });
 
 

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