practice session5 - Task

src/components/Calendar/Calendar.js

@@ -1,7 +1,7 @@
-import React, { Component } from 'react';
-import { Table } from 'semantic-ui-react'
+import React, { Component } from "react";
+import { Table } from "semantic-ui-react";
 
-import './Calendar.css';
+import "./Calendar.css";
 
 const CALENDAR_HEADER = (
   <Table.Header>
@@ -20,68 +20,72 @@ const CALENDAR_HEADER = (
 const renderCalenderBody = (dates, todos, clickDone) => {
   let i = 0;
   const rows = [];
-  for (let week=0; week<5; week++){
+  for (let week = 0; week < 5; week++) {
     let day = 0; // Sunday
 
     let row = [];
-    for (let day=0; day<7; day++) {
+    for (let day = 0; day < 7; day++) {
       const date = dates[i];
       if (date !== undefined && day === date.getDay()) {
         row.push(
-          <Table.Cell className={`cell ${day === 0 && 'sunday'}`} key={7*week+day}>
+          <Table.Cell className={`cell ${day === 0 && "sunday"}`} key={7 * week + day}>
             <div className="date">{date.getDate()}</div>
-            {
-              todos.filter(todo => {
-                return todo.year === date.getFullYear() &&
-                  todo.month === date.getMonth() &&
-                  todo.date === date.getDate();
-              }).map(todo => {
+            {todos
+              .filter((todo) => {
+                return (
+                  todo.year === date.getFullYear() && todo.month === date.getMonth() && todo.date === date.getDate()
+                );
+              })
+              .map((todo) => {
                 return (
                   <div
+                    id="CalendarTodo"
                     key={todo.id}
-                    className={`todoTitle ${todo.done ? 'done':'notdone'}`}
-                    onClick={() => clickDone(todo.id)}>
+                    className={`todoTitle ${todo.done ? "done" : "notdone"}`}
+                    onClick={() => clickDone(todo.id)}
+                  >
                     {todo.title}
                   </div>
-                )
-              })
-            }
+                );
+              })}
           </Table.Cell>
-        )
+        );
         i++;
       } else {
-        row.push(<Table.Cell key={7*week+day}> </Table.Cell>)
+        row.push(<Table.Cell key={7 * week + day}> </Table.Cell>);
       }
     }
     rows.push(row);
   }
 
   return (
     <Table.Body>
-      {rows.map((row, i) => (<Table.Row key={i}>{row}</Table.Row>))}
+      {rows.map((row, i) => (
+        <Table.Row key={i}>{row}</Table.Row>
+      ))}
     </Table.Body>
   );
-}
+};
 
 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>
-)
+);
 
 const Calendar = (props) => {
   const dates = [];
   const year = props.year;
   const month = props.month - 1;
   let date = 1;
-  let maxDate = (new Date(year, month + 1, 0)).getDate();
+  let maxDate = new Date(year, month + 1, 0).getDate();
 
-  for (let date=1; date<=maxDate; date++) {
+  for (let date = 1; date <= maxDate; date++) {
     dates.push(new Date(year, month, date));
   }
 
   return renderCalendar(dates, props.todos, props.clickDone);
-}
+};
 
-export default Calendar
+export default Calendar;

src/components/Calendar/Calendar.test.js

@@ -0,0 +1,43 @@
+import React from "react";
+import { shallow } from "enzyme";
+import Calendar from "./Calendar";
+import { Table } from "semantic-ui-react";
+
+describe("<Calendar />", () => {
+  it("should render without errors", () => {
+    const component = shallow(<Calendar />);
+    const wrapper = component.find(".Calendar");
+    expect(wrapper.length).toBe(1);
+  });
+
+  it("should set dates proper to year and month", () => {
+    const year = 2020;
+    const month = 10;
+    const component = shallow(<Calendar year={year} month={month} todos={[]} />);
+    expect(component.find(Table.Cell).length).toBe(35);
+    expect(component.find(".date").length).toBe(new Date(year, month, 0).getDate());
+  });
+
+  // it("should render title as done if done=true", () => {
+  //   const component = shallow(<Calendar done={true} title={"TEST_TITLE"} />);
+  //   const wrapper = component.find(".done");
+  //   expect(wrapper.text()).toEqual("TEST_TITLE");
+  // });
+
+  it("should handle todo clicks", () => {
+    const year = 2019;
+    const month = 2;
+    const stubTodo = [
+      { content: "take swpp class", date: 1, done: false, id: 8, month: 1, title: "SWPP1", year: 2019 },
+      { content: "take swpp practice class", date: 1, done: true, id: 8, month: 1, title: "SWPP2", year: 2019 },
+    ];
+    const mockClickDone = jest.fn();
+    const component = shallow(<Calendar year={year} month={month} todos={stubTodo} clickDone={mockClickDone} />);
+    const wrapper1 = component.find(".todoTitle.notdone");
+    wrapper1.simulate("click");
+    expect(mockClickDone).toHaveBeenCalledTimes(1);
+    const wrapper2 = component.find(".todoTitle.notdone");
+    wrapper2.simulate("click");
+    expect(mockClickDone).toHaveBeenCalledTimes(2);
+  });
+});

src/containers/TodoCalendar/TodoCalendar.js

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

src/containers/TodoCalendar/TodoCalendar.test.js

@@ -0,0 +1,94 @@
+import React from "react";
+import { shallow, mount } from "enzyme";
+import TodoCalendar from "./TodoCalendar";
+import Calendar from "../../components/Calendar/Calendar";
+import { Provider } from "react-redux";
+import { connectRouter, ConnectedRouter } from "connected-react-router";
+import { Route, Redirect, Switch } from "react-router-dom";
+import { Table } from "semantic-ui-react";
+
+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">
+        <div className="yearmonth">
+          {props.year}.{props.month}
+        </div>
+        <div className="todos">{props.todos.length !== 0 ? props.todos[0].title : ""}</div>
+        <button className="doneButton" onClick={props.clickDone} />
+      </div>
+    );
+  });
+});
+
+const stubInitialState = {
+  todos: [{ content: "Watch Movie", date: 1, done: false, id: 9, month: 10, title: "Movie", year: 2019 }],
+  selectedTodo: null,
+};
+
+const mockStore = getMockStore(stubInitialState);
+
+describe("<TodoCalendar />", () => {
+  let todoCalendar;
+
+  beforeEach(() => {
+    todoCalendar = (
+      <Provider store={mockStore}>
+        <ConnectedRouter history={history}>
+          <Switch>
+            {/* add props? */}
+            <Route path="/" exact render={() => <TodoCalendar todos={stubInitialState.todos} />} />
+          </Switch>
+        </ConnectedRouter>
+      </Provider>
+    );
+  });
+
+  it("should render TodoCalendar", () => {
+    const component = mount(todoCalendar);
+    expect(component.find(TodoCalendar).length).toBe(1);
+    expect(component.find("div.link").length).toBe(1);
+    expect(component.find("div.header").length).toBe(1);
+  });
+
+  it("should handle click next - and carry up", () => {
+    const component = mount(todoCalendar);
+    const wrapper = component.find(".header #next-button").at(0);
+    const wrapper2 = component.find(".header").at(0);
+    wrapper.simulate("click");
+    wrapper.simulate("click");
+    wrapper.simulate("click");
+    expect(wrapper2.text()).toBe(" prev month 2020.1 next month ");
+  });
+
+  it("should handle click prev - and carry down", () => {
+    const component = mount(todoCalendar);
+    const wrapper = component.find(".header #prev-button").at(0);
+    const wrapper2 = component.find(".header").at(0);
+    wrapper.simulate("click");
+    wrapper.simulate("click");
+    wrapper.simulate("click");
+    wrapper.simulate("click");
+    wrapper.simulate("click");
+    wrapper.simulate("click");
+    wrapper.simulate("click");
+    wrapper.simulate("click");
+    wrapper.simulate("click");
+    wrapper.simulate("click");
+    expect(wrapper2.text()).toBe(" prev month 2018.12 next month ");
+  });
+
+  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);
+  });
+});