lab done

src/components/Calendar/Calendar.test.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { shallow, mount } from 'enzyme';
+import Calendar from './Calendar';
+
+const stubTodo = {
+  id: 0,
+  title: 'title 1',
+  content: 'content 1',
+  dueDate: {
+    year: 2020,
+    month: 10,
+    date: 6
+  },
+  done: false
+};
+const stubTodoList = [stubTodo];
+
+
+describe('<Calendar />', () => {
+  it('should render without errors', () => {
+    const component = shallow(<Calendar />);
+    const wrapper = component.find('.sunday');
+    expect(wrapper.length).toBe(1);
+  });
+
+  it('clickDone should work on click', () => {
+    const spyToggleTodo = jest.fn();
+    const component = shallow(<Calendar year={2020} month={10} todos={stubTodoList} clickDone={spyToggleTodo}/>)
+    const wrapper = component.find('.todoTitle notdone')
+    wrapper.simulate('click');
+    expect(spyToggleTodo).toBeCalledTimes(1)
+  });
+});
+

src/containers/TodoCalendar/TodoCalendar.js

@@ -12,7 +12,7 @@ import './TodoCalendar.css';
 
 class TodoCalendar extends Component {
   state = {
-    year: 2019,
+    year: 2020,
     month: 10,
   }
   componentDidMount() {
@@ -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 className='prevButton' onClick={this.handleClickPrev}> prev month </button>
           {this.state.year}.{this.state.month}
-          <button onClick={this.handleClickNext}> next month </button>
+          <button className='nextButton' onClick={this.handleClickNext}> next month </button>
         </div>
         <Calendar
           year={this.state.year}

src/containers/TodoCalendar/TodoCalendar.test.js

@@ -0,0 +1,86 @@
+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.js';
+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">
+          {props.year}.{props.month}
+          <button onClick={props.clickDone} />
+        </div>
+      );
+    });
+  });
+
+const stubState = {
+    todos:[
+        {id: 1, title: 'Finish assignment', done: false, year: 2020, month:10, date:6},
+        {id: 2, title: 'Go home', done: true, year: 2020, month:10, date:7},
+        {id: 3, title: 'Sleep', done: true, year: 2020, month:10, date:8}
+    ]
+}
+
+const mockStore = getMockStore(stubState);
+let todoCalendar, spyGetTodos;
+
+describe('<TodoCalendar />', () => {
+    beforeEach(() => {
+        todoCalendar = (
+            <Provider store={mockStore}>
+                <ConnectedRouter history={history}>
+                <Switch>
+                    <Route path='/' exact component={TodoCalendar} />
+                </Switch>
+                </ConnectedRouter>
+            </Provider>
+        );
+        spyGetTodos = jest.spyOn(actionCreators, 'getTodos')
+            .mockImplementation(id => { return dispatch => {}; });
+    });
+
+    it('should render without errors', () => {
+        const component = mount(todoCalendar);
+        console.log(component.debug());
+        const wrapper = component.find('.spyCalandar');
+        expect(wrapper.length).toBe(1);
+    });
+
+    it(`should decrease month`, () => {
+        const component = mount(todoCalendar);
+        const wrapper = component.find('.prevButton');
+        wrapper.simulate('click');
+        const prevMonth = component.find(TodoCalendar.WrappedComponent).instance();
+        expect(prevMonth.state.month).toEqual(9);
+        for(let i=0; i<10; i++) wrapper.simulate('click');
+        const prevYear = component.find(TodoCalendar.WrappedComponent).instance();
+        expect(prevYear.state.year).toEqual(2018);
+    });
+
+    it(`should increase month`, () => {
+        const component = mount(todoCalendar);
+        const wrapper = component.find('.nextButton');
+        wrapper.simulate('click');
+        const nextMonth = component.find(TodoCalendar.WrappedComponent).instance();
+        expect(nextMonth.state.month).toEqual(11);
+        for(let i=0; i<10; i++) wrapper.simulate('click');
+        const nextYear = component.find(TodoCalendar.WrappedComponent).instance();
+        expect(nextYear.state.year).toEqual(2021);
+    });
+
+    it(`should call 'clickDone'`, () => {
+        const spyToggleTodo = jest.spyOn(actionCreators, 'toggleTodo')
+          .mockImplementation(id => { return dispatch => {}; });
+        const component = mount(todoCalendar);
+        const wrapper = component.find('.todoTitle.notdone');
+        wrapper.simulate('click');
+        expect(spyToggleTodo).toBeCalledTimes(1);
+    });
+});

src/containers/TodoList/NewTodo/NewTodo.js

@@ -38,7 +38,7 @@ class NewTodo extends Component {
       <div className="NewTodo">
         <h1>Add a New Todo!</h1>
         <label>Title</label>
-        <input
+        <input className = "inputTitle"
           type="text"
           value={this.state.title}
           onChange={(event) => this.setState({ title: event.target.value })}
@@ -49,21 +49,21 @@ class NewTodo extends Component {
         >
         </textarea>
         <label>Due Date</label>
-        year <input
+        year <input className = "yearInput"
           type="text"
           value={this.state.dueDate.year}
           onChange={(event) => this.setState({
             dueDate: {...this.state.dueDate, year: event.target.value }
           })}
         ></input>
-        month <input
+        month <input className = "monthInput"
           type="text"
           value={this.state.dueDate.month}
           onChange={(event) => this.setState({
             dueDate: {...this.state.dueDate, month: event.target.value }
           })}
         ></input>
-        date <input
+        date <input className = "dateInput"
           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('.inputTitle');
     wrapper.simulate('change', { target: { value: title } });
     const newTodoInstance = component.find(NewTodo.WrappedComponent).instance();
     expect(newTodoInstance.state.title).toEqual(title);
@@ -69,6 +69,23 @@ describe('<NewTodo />', () => {
     expect(newTodoInstance.state.title).toEqual('');
     expect(newTodoInstance.state.content).toEqual(content);
   });
+
+  it(`should set state properly on date input`, () => {
+    const year = 2020;
+    const month = 10;
+    const date = 8;
+    const component = mount(newTodo);
+    const wrapper1 = component.find('.yearInput');
+    const wrapper2 = component.find('.monthInput');
+    const wrapper3 = component.find('.dateInput');
+    wrapper1.simulate('change', { target: { value: year } });
+    wrapper2.simulate('change', { target: { value: month } });
+    wrapper3.simulate('change', { target: { value: date } });
+    const newTodoInstance = component.find(NewTodo.WrappedComponent).instance();
+    expect(newTodoInstance.state.dueDate.year).toEqual(year);
+    expect(newTodoInstance.state.dueDate.month).toEqual(month);
+    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: 6,
+  }
 };
 
 describe('ActionCreators', () => {