Lab5

package.json

@@ -38,9 +38,9 @@
     ]
   },
   "devDependencies": {
-    "enzyme": "^3.10.0",
-    "enzyme-adapter-react-16": "^1.14.0",
-    "enzyme-to-json": "^3.4.0"
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.5",
+    "enzyme-to-json": "^3.6.1"
   },
   "jest": {
     "collectCoverageFrom": [

src/components/Calendar/Calendar.js

@@ -21,7 +21,7 @@ const renderCalenderBody = (dates, todos, clickDone) => {
   let i = 0;
   const rows = [];
   for (let week=0; week<5; week++){
-    let day = 0; // Sunday
+    //let day = 0; // Sunday
 
     let row = [];
     for (let day=0; day<7; day++) {
@@ -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/Calender.test.js

@@ -0,0 +1,46 @@
+//HW File3
+import React from 'react';
+import { shallow } from 'enzyme';
+import Calendar from './Calendar';
+
+let stubCalendar={
+    year: 2020,
+    month: 3,
+    todos: [
+        {
+            id: 1,
+            year: 2020,
+            month: 2,
+            date: 1,
+            done: false,
+        },
+    ]
+};
+
+describe('<Calendar />', () => {
+  afterEach(() => jest.clearAllMocks());   
+  it('should render without errors', () => {
+    const component = shallow(<Calendar year={stubCalendar.year} 
+        month={stubCalendar.month} todos={stubCalendar.todos}/>);
+    const wrapper = component.find(".cell");
+    expect(wrapper.length).toBe(31);
+  });
+
+  it('should render todo as done if done=true ', () => {
+    stubCalendar.todos[0].done=true;
+    const component = shallow(<Calendar year={stubCalendar.year}
+        month={stubCalendar.month} todos={stubCalendar.todos}/>);
+    const wrapper = component.find(".done");
+    expect(wrapper.length).toBe(1);
+  });
+
+  it('should handle todo clicks', () => {
+    const mockClickDone = jest.fn();
+    const component = shallow(<Calendar year={stubCalendar.year} 
+            month={stubCalendar.month} todos={stubCalendar.todos} 
+            clickDone={mockClickDone} />);
+    const wrapper = component.find('.todoTitle');
+    wrapper.simulate('click');
+    expect(mockClickDone).toHaveBeenCalledTimes(1);
+  });
+}); 

src/containers/TodoCalendar/TodoCalendar.js

@@ -1,15 +1,10 @@
 import React, { Component } from 'react';
-
 import { NavLink } from 'react-router-dom';
-
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router';
 import Calendar from '../../components/Calendar/Calendar';
-
 import * as actionCreators from '../../store/actions/index';
-
 import './TodoCalendar.css';
-
 class TodoCalendar extends Component {
   state = {
     year: 2019,
@@ -22,49 +17,61 @@ class TodoCalendar extends Component {
   handleClickPrev = () => {
     this.setState({
       year: this.state.month === 1 ? this.state.year - 1 : this.state.year,
-      month: this.state.month === 1 ? 12 : this.state.month - 1
+      month: this.state.month === 1 ? 12 : this.state.month - 1,
     })
   }
 
   handleClickNext = () => {
     this.setState({
       year: this.state.month === 12 ? this.state.year + 1 : this.state.year,
-      month: this.state.month === 12 ? 1 : this.state.month + 1
+      month: this.state.month === 12 ? 1 : this.state.month + 1,
     })
   }
 
   render() {
     return (
-      <div>
-        <div className="link"><NavLink to='/todos' exact>See TodoList</NavLink></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>
+          <button onClick={this.handleClickPrev} className="prev">
+            {' '}
+            prev month{' '}
+          </button>
           {this.state.year}.{this.state.month}
-          <button onClick={this.handleClickNext}> next month </button>
+          <button onClick={this.handleClickNext} className="next">
+            {' '}
+            next month{' '}
+          </button>
         </div>
         <Calendar
           year={this.state.year}
           month={this.state.month}
           todos={this.props.storedTodos}
-          clickDone={this.props.onToggleTodo}/>
+          clickDone={this.props.onToggleTodo}
+        />
       </div>
-    );
+    )
   }
 }
 
-const mapStateToProps = state => {
+const mapDispatchToProps = (dispatch) => {
   return {
-    storedTodos: state.td.todos,
-  };
+    onToggleTodo: (id) => dispatch(actionCreators.toggleTodo(id)),
+    onGetAll: () => dispatch(actionCreators.getTodos()),
+  }
 }
 
-const mapDispatchToProps = dispatch => {
+const mapStateToProps = (state) => {
   return {
-    onToggleTodo: (id) =>
-      dispatch(actionCreators.toggleTodo(id)),
-    onGetAll: () =>
-      dispatch(actionCreators.getTodos())
+    storedTodos: state.td.todos,
   }
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(withRouter(TodoCalendar));
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(withRouter(TodoCalendar))

src/containers/TodoCalendar/TodoCalendar.test.js

@@ -0,0 +1,135 @@
+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">
+        {props.year}.{props.month}
+        <button className="toggleButton" onClick={props.clickDone} />
+      </div>
+    );
+  });
+});
+
+const stubtodos = [
+  { //start year month
+    id: 1,
+    title: 'TODO_TEST_TITLE_1',
+    done: false,
+    content: 'TODO_TEST_CONTENT_1',
+    year: 2020,
+    month: 10,
+    date: 8,
+  },
+  {
+    id: 2,
+    title: 'TODO_TEST_TITLE_2',
+    done: true,
+    content: 'TODO_TEST_CONTENT_2',
+    year: 2020,
+    month: 10,
+    date: 5,
+  },
+];
+
+const stubInitialState = {
+  todos: stubtodos,
+  selectedTodo: null,
+};
+const mockClickDone = jest.fn();
+
+const mockStore = getMockStore(stubInitialState);
+
+describe('<TodoCalendar />', () => {
+  let todoCalendar, spyGetTodos;
+
+  beforeEach(() => {
+    todoCalendar = (
+      <Provider store={mockStore}>
+        <ConnectedRouter history={history}>
+          <Switch>
+            <Route
+              path="/"
+              exact
+              render={() => (
+                <TodoCalendar
+                  year="2020"
+                  month="10"
+                  storedTodos={stubtodos}
+                  onToggleTodo={mockClickDone}
+                />
+              )}
+            />
+          </Switch>
+        </ConnectedRouter>
+      </Provider>
+    );
+
+    spyGetTodos = jest
+      .spyOn(actionCreators, 'getTodos')
+      .mockImplementation(() => {
+        return (dispatch) => {};
+      });
+  });
+
+  it('render TodoCalendar', () => {
+    const component = mount(todoCalendar);
+    const wrapper = component.find('.TodoCalendar');
+    expect(wrapper.length).toBe(1);
+  });
+
+  it(`handle Click Prev`, () => {
+    const component = mount(todoCalendar);
+    const wrapper = component.find('.prev');
+
+    const TodoCalendarInstance = component
+      .find(TodoCalendar.WrappedComponent)
+      .instance();
+
+    for(let i=0; i<9; i++){
+        wrapper.simulate('click');
+        expect(TodoCalendarInstance.state.year).toEqual(2019);
+        expect(TodoCalendarInstance.state.month).toEqual(i);
+    }
+  });
+
+  it(`andle Click Next`, () => {
+    const component = mount(todoCalendar);
+    const wrapper = component.find('.next');
+
+    const TodoCalendarInstance = component
+      .find(TodoCalendar.WrappedComponent)
+      .instance();
+
+    //10 -> 11 -> 12 -> 1
+    wrapper.simulate('click');
+    expect(TodoCalendarInstance.state.year).toEqual(2019);
+    expect(TodoCalendarInstance.state.month).toEqual(11);
+    wrapper.simulate('click');
+    expect(TodoCalendarInstance.state.year).toEqual(2019);
+    expect(TodoCalendarInstance.state.month).toEqual(12);
+    wrapper.simulate('click');
+    expect(TodoCalendarInstance.state.year).toEqual(2020);
+    expect(TodoCalendarInstance.state.month).toEqual(1);
+    wrapper.simulate('click');
+
+
+  });
+
+  it(`have good 'clickDone'`, () => {
+    const spyToggleTodo = jest.spyOn(actionCreators, 'toggleTodo').mockImplementation((id) => {return (dispatch) => {}; });
+    const component = mount(todoCalendar);
+    const myWraa = component.find('.spyCalendar .toggleButton').at(0);
+    myWraa.simulate('click');
+    expect(spyToggleTodo).toBeCalledTimes(1);
+  });
+});

src/containers/TodoList/NewTodo/NewTodo.js

@@ -1,15 +1,11 @@
-import React, { Component } from 'react';
-
-
-import './NewTodo.css';
-
 import { connect } from 'react-redux';
 import * as actionCreators from '../../../store/actions/index';
+import React, { Component } from 'react';
+import './NewTodo.css';
 
 class NewTodo extends Component {
   state = {
-    title: '',
-    content: '',
+    title: '',    content: '',    
     dueDate: {
       year: '',
       month: '',
@@ -39,6 +35,7 @@ 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 })}
@@ -50,20 +47,23 @@ class NewTodo extends Component {
         </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({
@@ -82,5 +82,4 @@ const mapDispatchToProps = dispatch => {
       dispatch(actionCreators.postTodo({ title: title, content: content, dueDate: dueDate})),
   }
 };
-
-export default connect(null, mapDispatchToProps)(NewTodo);
+export default connect(null, mapDispatchToProps)(NewTodo);