Algy · hhjjpp · Oct 9, 2020
diff --git a/src/components/Calendar/Calendar.js b/src/components/Calendar/Calendar.js
@@ -64,7 +64,7 @@ const renderCalenderBody = (dates, todos, clickDone) => {
 }
 
 const renderCalendar = (dates, todos, clickDone) => (
-  <Table striped style={{"height": "600px", "width": "600px"}}>
+  <Table striped style={{height: "600px", width: "600px"}}>
     {CALENDAR_HEADER}
     {renderCalenderBody(dates, todos, clickDone)}
   </Table>
@@ -75,7 +75,7 @@ const Calendar = (props) => {
   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++) {
     dates.push(new Date(year, month, date));
@@ -84,4 +84,4 @@ const Calendar = (props) => {
   return renderCalendar(dates, props.todos, props.clickDone);
 }
 
-export default Calendar
+export default Calendar
diff --git a/src/components/Calendar/Calendar.test.js b/src/components/Calendar/Calendar.test.js
@@ -0,0 +1,79 @@
+import React from "react";
+import { shallow } from "enzyme";
+import Calendar from "./Calendar";
+
+const stubTodos = [
+  {
+    id: 1,
+    title: "TODO_TEST_TITLE_1",
+    year: 2019,
+    month: 11,
+    date: 21,
+    done: true,
+  },
+  {
+    id: 2,
+    title: "TODO_TEST_TITLE_2",
+    year: 2019,
+    month: 9,
+    date: 1,
+    done: false,
+  },
+  {
+    id: 3,
+    title: "TODO_TEST_TITLE_3",
+    year: 2019,
+    month: 9,
+    date: 2,
+    done: true,
+  },
+];
+
+describe("<Calendar />", () => {
+  it("should render calender", () => {
+    const component = shallow(<Calendar />);
+    const table = component.find("Table");
+    expect(table.length).toBe(1);
+  });
+
+  it("should render sunday", () => {
+    const component = shallow(
+      <Calendar year={2019} month={10} todos={stubTodos} />
+    );
+    const sunday = component.find(".sunday");
+    expect(sunday.length).toBe(5);
+  });
+
+  it("should call 'clickDone'", () => {
+    const mockClickDone = jest.fn();
+    const component = shallow(
+      <Calendar
+        year={2019}
+        month={10}
+        todos={stubTodos}
+        clickDone={mockClickDone}
+      />
+    );
+    const wrapper = component.find(".todoTitle").at(0);
+    wrapper.simulate("click");
+    expect(mockClickDone).toHaveBeenCalledTimes(1);
+  });
+
+  it("should render done if done=true", () => {
+    const component = shallow(
+      <Calendar year={2019} month={10} todos={stubTodos} />
+    );
+    const doneWrapper = component.find(".done");
+    expect(doneWrapper.length).toBe(1);
+    expect(doneWrapper.text()).toEqual("TODO_TEST_TITLE_3");
+  });
+
+  it("should render notdone if done=false", () => {
+    const component = shallow(
+      <Calendar year={2019} month={10} todos={stubTodos} />
+    );
+    const notdoneWrapper = component.find(".notdone");
+    expect(notdoneWrapper.length).toBe(1);
+    expect(notdoneWrapper.text()).toEqual("TODO_TEST_TITLE_2");
+  });
+});
diff --git a/src/containers/TodoCalendar/TodoCalendar.js b/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 className='prevMonth' onClick={this.handleClickPrev}> {' '} prev month{' '} </button>
           {this.state.year}.{this.state.month}
-          <button onClick={this.handleClickNext}> next month </button>
+          <button className='nextMonth' onClick={this.handleClickNext}> {' '} next month{' '} </button>
         </div>
         <Calendar
           year={this.state.year}

diff --git a/src/containers/TodoCalendar/TodoCalendar.test.js b/src/containers/TodoCalendar/TodoCalendar.test.js
@@ -0,0 +1,123 @@
+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";
+import Todo from "../../components/Todo/Todo";
+
+jest.mock("../../components/Calendar/Calendar", () => {
+  return jest.fn((props) => {
+    return (
+      <div className="spyCalendar">
+        <button className="doneButton" onClick={props.clickDone} />
+      </div>
+    );
+  });
+});
+
+const stubInitialState = {
+  year: 2019,
+  month: 12,
+  todos: [
+    {
+      id: 1,
+      title: "TODO_TEST_TITLE_1",
+      year: 2019,
+      month: 11,
+      date: 21,
+      done: true,
+    },
+    {
+      id: 2,
+      title: "TODO_TEST_TITLE_2",
+      year: 2019,
+      month: 9,
+      date: 1,
+      done: false,
+    },
+    {
+      id: 3,
+      title: "TODO_TEST_TITLE_3",
+      year: 2019,
+      month: 9,
+      date: 2,
+      done: true,
+    },
+  ],
+};
+
+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 Calendar components", () => {
+    const component = mount(todoCalendar);
+    const wrapper = component.find(".spyCalendar");
+    expect(wrapper.length).toBe(1);
+  });
+
+  it("should work prev month button", () => {
+    const component = mount(todoCalendar);
+    const prevBtn = component.find(".prevMonth");
+    for (let i = 1; i <= 12; i++) {
+      prevBtn.simulate("click");
+    }
+
+    const newTodoCalendarInstance = component
+      .find(TodoCalendar.WrappedComponent)
+      .instance();
+
+    expect(newTodoCalendarInstance.state.year).toEqual(2018);
+    expect(newTodoCalendarInstance.state.month).toEqual(10);
+  });
+
+  it("should work next month button", () => {
+    const component = mount(todoCalendar);
+    const nextBtn = component.find(".nextMonth");
+    for (let i = 1; i <= 12; i++) {
+      nextBtn.simulate("click");
+    }
+
+    const newTodoCalendarInstance = component
+      .find(TodoCalendar.WrappedComponent)
+      .instance();
+    expect(newTodoCalendarInstance.state.year).toEqual(2020);
+    expect(newTodoCalendarInstance.state.month).toEqual(10);
+  });
+
+  it("should call 'clickDone'", () => {
+    const spyToggleTodo = jest
+      .spyOn(actionCreators, "toggleTodo")
+      .mockImplementation((id) => {
+        return (dispatch) => {};
+      });
+    const component = mount(todoCalendar);
+    const wrapper = component.find(".doneButton").at(0);
+    wrapper.simulate("click");
+    expect(spyToggleTodo).toBeCalledTimes(1);
+  });
+});
diff --git a/src/containers/TodoList/NewTodo/NewTodo.js b/src/containers/TodoList/NewTodo/NewTodo.js
@@ -39,6 +39,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 +51,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({
@@ -76,7 +80,7 @@ class NewTodo extends Component {
   }
 }
 
-const mapDispatchToProps = dispatch => {
+const mapDispatchToProps = (dispatch) => {
   return {
     onStoreTodo: (title, content, dueDate) =>
       dispatch(actionCreators.postTodo({ title: title, content: content, dueDate: dueDate})),

diff --git a/src/containers/TodoList/NewTodo/NewTodo.test.js b/src/containers/TodoList/NewTodo/NewTodo.test.js
@@ -53,12 +53,13 @@ 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);
     expect(newTodoInstance.state.content).toEqual('');
   });
+
 
   it(`should set state properly on content input`, () => {
     const content = 'TEST_CONTENT'
@@ -69,6 +70,32 @@ describe('<NewTodo />', () => {
     expect(newTodoInstance.state.title).toEqual('');
     expect(newTodoInstance.state.content).toEqual(content);
   });
-});
 
+  it(`should set state properly on year input`, () => {
+    const year = 'TEST_YEAR';
+    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.dueDate.year).toEqual(year);
+  });
+
+  it(`should set state properly on month input`, () => {
+    const month = 'TEST_MONTH';
+    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.dueDate.month).toEqual(month);
+  });
+
+  it(`should set state properly on date input`, () => {
+    const date = 'TEST_DATE';
+    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.dueDate.date).toEqual(date);
+  });
 
+});
diff --git a/src/store/actions/todo.test.js b/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: 'year 1',
+    month: 'month 1',
+    date: 'date 1'
+  }
 };
 
 describe('ActionCreators', () => {