Task

src/components/Calendar/Calendar.test.js

@@ -0,0 +1,69 @@
+import React from 'react';
+import { shallow, mount } from 'enzyme';
+
+import Calendar from './Calendar';
+
+describe('<Calendar />', () => {
+  it('should display a single todo with good contents', () => {
+    const year = 2020, month = 10;
+    const stubTodos = [
+      {year: year, month: month-1,
+        id: 0, date: 8, done: false, title: 'todoA'},
+    ];
+
+    const component = mount(<Calendar
+      todos={stubTodos} year={year} month={month} clickDone={()=>{}} />);
+
+    const wrapper = component.find('.todoTitle');
+    expect(wrapper.length).toBe(1);
+    expect(wrapper.text()).toEqual('todoA');
+  });
+
+  it('should display multiple todos', () => {
+    const year = 2020, month = 10;
+    const stubTodos = [
+      {year: year, month: month-1,
+        id: 0, date: 8, done: false, title: 'todoA'},
+      {year: year, month: month-1,
+        id: 1, date: 9, done: true, title: 'todoB'},
+      {year: year, month: month-1,
+        id: 2, date: 10, done: false, title: 'todoC'},
+    ];
+
+    const component = shallow(<Calendar
+      todos={stubTodos} year={year} month={month} clickDone={()=>{}} />);
+
+    const wrapper = component.find('.todoTitle');
+    expect(wrapper.length).toBe(stubTodos.length);
+  });
+
+  it('should display boundary days well (for shorter months)', () => {
+    const year = 2020, month = 9;
+    const stubTodos = [
+      {year: year, month: month-1,
+        id: 0, date: 30, done: false, title: 'todoA'},
+    ];
+
+    const component = shallow(<Calendar
+      todos={stubTodos} year={year} month={month} clickDone={()=>{}} />);
+
+    const wrapper = component.find('.todoTitle');
+    expect(wrapper.length).toBe(stubTodos.length);
+  });
+
+  it('should display boundary days well (for longer months)', () => {
+    const year = 2020, month = 10;
+    const stubTodos = [
+      {year: year, month: month-1,
+        id: 0, date: 31, done: false, title: 'todoA'},
+    ];
+
+    const component = shallow(<Calendar
+      todos={stubTodos} year={year} month={month} clickDone={()=>{}} />);
+
+    const wrapper = component.find('.todoTitle');
+    expect(wrapper.length).toBe(stubTodos.length);
+  });
+
+});
+

src/containers/TodoCalendar/TodoCalendar.test.js

@@ -0,0 +1,138 @@
+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 => {
+    return (
+      <div className="spyCalendar">
+        <input type="button" className="spyToggleButton"
+          onClick={props.clickDone} />
+      </div>);
+  });
+});
+
+const stubInitialState = {
+  year: 2020,
+  month: 10,
+};
+
+const mockStore = getMockStore(stubInitialState);
+
+describe('<TodoCalendar />', () => {
+  let todoCalendar, spyGetTodos, spyToggleTodo;
+
+  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 => {
+        new Promise((succ) => {
+          return succ({ status: 200, data: [] });
+        })
+      }; });
+
+    spyToggleTodo = jest.spyOn(actionCreators, 'toggleTodo')
+      .mockImplementation(() => { return dispatch => {
+        new Promise((succ) => {
+          return succ({ status: 200, data: []});
+        })
+      }; });
+  })
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should call getTodos()', () => {
+    const component = mount(todoCalendar);
+    expect(spyGetTodos).toHaveBeenCalledTimes(1);
+  });
+
+  it('should handle prev button', () => {
+    const component = mount(todoCalendar);
+    const instance = component.find(TodoCalendar.WrappedComponent).instance();
+    instance.setState({year: 2020, month: 10});
+
+    const wrapper = component.find('button');
+    console.log(wrapper);
+    expect(wrapper.length).toBe(2);
+
+    const btnPrev = wrapper.first();
+    expect(btnPrev.text().trim()).toEqual('prev month');
+    btnPrev.simulate('click');
+
+    expect(instance.state).toEqual({year: 2020, month: 9});
+  });
+
+  it('should handle next button', () => {
+    const component = mount(todoCalendar);
+    const instance = component.find(TodoCalendar.WrappedComponent).instance();
+    instance.setState({year: 2020, month: 10});
+
+    const wrapper = component.find('button');
+    console.log(wrapper);
+    expect(wrapper.length).toBe(2);
+
+    const btnPrev = wrapper.last();
+    expect(btnPrev.text().trim()).toEqual('next month');
+    btnPrev.simulate('click');
+
+    expect(instance.state).toEqual({year: 2020, month: 11});
+  });
+
+  it('should handle boundary months', () => {
+    const component = mount(todoCalendar);
+    const instance = component.find(TodoCalendar.WrappedComponent).instance();
+
+    const wrapper = component.find('button');
+    console.log(wrapper);
+    expect(wrapper.length).toBe(2);
+
+    const btnPrev = wrapper.first();
+    const btnNext = wrapper.last();
+    expect(btnPrev.text().trim()).toEqual('prev month');
+    expect(btnNext.text().trim()).toEqual('next month');
+
+    instance.setState({year: 2020, month: 1});
+    btnPrev.simulate('click');
+    expect(instance.state).toEqual({year: 2019, month: 12});
+
+    instance.setState({year: 2020, month: 12});
+    btnNext.simulate('click');
+    expect(instance.state).toEqual({year: 2021, month: 1});
+
+  });
+
+  it('should call getTodos on load', () => {
+    const component = mount(todoCalendar);
+    expect(spyGetTodos).toHaveBeenCalledTimes(1);
+  });
+
+  it('should call toggleTodo on click', () => {
+    const component = mount(todoCalendar);
+    const btn = component.find('.spyToggleButton');
+
+    expect(btn.length).toBe(1);
+    btn.simulate('click');
+
+    expect(spyToggleTodo).toHaveBeenCalledTimes(1);
+  });
+});
+

src/containers/TodoList/NewTodo/NewTodo.js

@@ -39,31 +39,36 @@ 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="d-year"
           type="text"
           value={this.state.dueDate.year}
           onChange={(event) => this.setState({
             dueDate: {...this.state.dueDate, year: event.target.value }
           })}
         ></input>
         month <input
+          className="d-month"
           type="text"
           value={this.state.dueDate.month}
           onChange={(event) => this.setState({
             dueDate: {...this.state.dueDate, month: event.target.value }
           })}
         ></input>
         date <input
+          className="d-date"
           type="text"
           value={this.state.dueDate.date}
           onChange={(event) => this.setState({

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

@@ -49,11 +49,11 @@ describe('<NewTodo />', () => {
     wrapper.simulate('click');
     expect(spyPostTodo).toHaveBeenCalledTimes(1);
   });
-  
+
   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('input.title');
     wrapper.simulate('change', { target: { value: title } });
     const newTodoInstance = component.find(NewTodo.WrappedComponent).instance();
     expect(newTodoInstance.state.title).toEqual(title);
@@ -63,12 +63,27 @@ 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('textarea.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 date changes`, () => {
+    const component = mount(newTodo);
+
+    const mock_date = {year: 2020, month: 10, date: 8};
+
+    for(const key of Object.keys(mock_date)) {
+      const wrapper = component.find(`input.d-${key}`);
+      wrapper.simulate('change', { target: { value: mock_date[key] } });
+    }
+
+    const newTodoInstance = component.find(NewTodo.WrappedComponent).instance();
+
+    expect(newTodoInstance.state.dueDate).toEqual(mock_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: '2100',
+    month: '11',
+    date: '11',
+  }
 };
 
 describe('ActionCreators', () => {