practice5 done

src/components/Calendar/Calendar.js

@@ -39,6 +39,7 @@ const renderCalenderBody = (dates, todos, clickDone) => {
                 return (
                   <div
                     key={todo.id}
+                    id='todoTitle_id'
                     className={`todoTitle ${todo.done ? 'done':'notdone'}`}
                     onClick={() => clickDone(todo.id)}>
                     {todo.title}
@@ -64,7 +65,7 @@ const renderCalenderBody = (dates, todos, clickDone) => {
 }
 
 const renderCalendar = (dates, todos, clickDone) => (
-  <Table striped style={{"height": "600px", "width": "600px"}}>
+  <Table id="calender_id" striped style={{"height": "600px", "width": "600px"}}>
     {CALENDAR_HEADER}
     {renderCalenderBody(dates, todos, clickDone)}
   </Table>

src/components/Calendar/Calendar.test.js

@@ -0,0 +1,81 @@
+import React from 'react';
+import {shallow} from 'enzyme';
+import Calendar from './Calendar';
+
+const stub_todos = [
+  {
+    id: 1,
+    title: "TODO_TEST_TITLE_1",
+    year: 2020,
+    month: 10,
+    date: 8,
+    done: true,
+  },
+  {
+    id: 2,
+    title: "TODO_TEST_TITLE_2",
+    year: 2020,
+    month: 10,
+    date: 4,
+    done: false,
+  },
+  {
+    id: 3,
+    title: "TODO_TEST_TITLE_3",
+    year: 2020,
+    month: 9,
+    date: 21,
+    done: true,
+  },
+];
+
+describe('<Calendar />', () => {
+
+    it('should render calendar without errors', () => {
+        const component = shallow(<Calendar/>); //year month todos
+        let wrapper = component.find('.sunday');
+        expect(wrapper.length).toBe(1);
+    });
+
+    it('should render calendar with dates', () => {
+        const component = shallow(<Calendar year={2020} month={4} todos={[
+            {id: 1, title: 'TODO_TEST_TITLE_1', done: false},
+            {id: 2, title: 'TODO_TEST_TITLE_2', done: false},
+            {id: 3, title: 'TODO_TEST_TITLE_3', done: false},
+        ]}/>); //year month todos
+        let wrapper = component.find('.date');
+        expect(wrapper.length).toBe(30); //4월에는 30일까지
+        // expect(wrapper.text()).toEqual(1);
+    });
+
+    it("should handle click", () => {
+        const mockClickDone = jest.fn();
+        const component = shallow(
+            <Calendar
+                year={2020}
+                month={11}
+                todos={stub_todos} clickDone={mockClickDone}/>);
+        const wrapper = component.find("#todoTitle_id");
+        expect(wrapper.length).toBe(2);
+        wrapper.at(0).simulate("click");
+        expect(mockClickDone).toHaveBeenCalledTimes(1);
+    });
+
+     it('should render title as done if done=true', () => {
+       const component = shallow(<Calendar year={2020}
+                month={11}
+                todos={stub_todos} />);
+       const wrapper = component.find('.done');
+       expect(wrapper.length).toBe(1);
+       expect(wrapper.text()).toEqual('TODO_TEST_TITLE_1');
+     });
+/*
+     it('should handle clicks', () => {
+       const mockClickDone = jest.fn();
+       const component = shallow(<Todo clickDone={mockClickDone} />);
+       const wrapper = component.find('.doneButton');
+       wrapper.simulate('click');
+       expect(mockClickDone).toHaveBeenCalledTimes(1);
+     });
+     */
+});

src/containers/TodoCalendar/TodoCalendar.js

@@ -35,12 +35,12 @@ class TodoCalendar extends Component {
 
   render() {
     return (
-      <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 id="click_prev" onClick={this.handleClickPrev}> prev month </button>
           {this.state.year}.{this.state.month}
-          <button onClick={this.handleClickNext}> next month </button>
+          <button id="click_next" onClick={this.handleClickNext}> next month </button>
         </div>
         <Calendar
           year={this.state.year}

src/containers/TodoCalendar/TodoCalendar.test.js

@@ -0,0 +1,105 @@
+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 NewTodo from "../TodoList/NewTodo/NewTodo";
+
+
+jest.mock('../../components/Calendar/Calendar', () => {
+  return jest.fn(props => {
+    return (
+      <div className="spyCalendar">
+        <button className="doneButton" onClick={props.clickDone} />
+      </div>);
+  });
+});
+
+const stubInitialState = {
+  todos : [
+  {
+    id: 1,
+    title: "TODO_TEST_TITLE_1",
+    year: 2019,
+    month: 10,
+    date: 8,
+    done: true,
+  },
+  {
+    id: 2,
+    title: "TODO_TEST_TITLE_2",
+    year: 2019,
+    month: 10,
+    date: 4,
+    done: false,
+  },
+  {
+    id: 3,
+    title: "TODO_TEST_TITLE_3",
+    year: 2020,
+    month: 9,
+    date: 21,
+    done: true,
+  }],
+};
+
+const mockStore = getMockStore(stubInitialState);
+
+describe('<TodoCalendar />', () => {
+  let todoCalendar, spyGetTodos;
+
+  beforeEach(() => {
+    todoCalendar = (
+      <Provider store={mockStore}>
+        <ConnectedRouter history={history}>
+        <Switch>
+             <Route path='/' exact component={TodoCalendar} />
+        </Switch>
+        </ConnectedRouter>
+      </Provider>
+    );
+    spyGetTodos = jest.spyOn(actionCreators, 'getTodos')
+      .mockImplementation(() => { return dispatch => {}; });
+  });
+  afterEach(() => { jest.clearAllMocks() });
+
+  it('should render Todocalendar', () => {
+    const component = mount(todoCalendar);
+    const wrapper = component.find('.TodoCalendar');
+    expect(wrapper.length).toBe(1);
+  });
+  it(`should call 'handleclickprev'`, () => {
+    const component = mount(todoCalendar);
+    const wrapper = component.find("#click_prev");
+    for(let i=0; i<11; i++) {
+      wrapper.simulate('click');
+    }
+    const prevInstance=component.find(TodoCalendar.WrappedComponent).instance();
+    expect(prevInstance.state.year).toEqual(2018);
+    expect(prevInstance.state.month).toEqual(11);
+  });
+  it(`should call 'handleclicknext'`, () => {
+    const component = mount(todoCalendar);
+    const wrapper = component.find("#click_next");
+    for(let i =0; i<11; i++) {
+      wrapper.simulate('click');
+    }
+    const prevInstance=component.find(TodoCalendar.WrappedComponent).instance();
+    expect(prevInstance.state.year).toEqual(2020);
+    expect(prevInstance.state.month).toEqual(9);
+  });
+
+  it(`should call 'toggletodo'`, () => {
+    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);
+  });
+});

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 id='title_id'
           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 id = 'year_id'
           type="text"
           value={this.state.dueDate.year}
           onChange={(event) => this.setState({
             dueDate: {...this.state.dueDate, year: event.target.value }
           })}
         ></input>
-        month <input
+        month <input id = 'month_id'
           type="text"
           value={this.state.dueDate.month}
           onChange={(event) => this.setState({
             dueDate: {...this.state.dueDate, month: event.target.value }
           })}
         ></input>
-        date <input
+        date <input id = 'date_id'
           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('#title_id');
     wrapper.simulate('change', { target: { value: title } });
     const newTodoInstance = component.find(NewTodo.WrappedComponent).instance();
     expect(newTodoInstance.state.title).toEqual(title);
@@ -69,6 +69,39 @@ describe('<NewTodo />', () => {
     expect(newTodoInstance.state.title).toEqual('');
     expect(newTodoInstance.state.content).toEqual(content);
   });
+
+  it(`should set state properly on year input`, () => {
+    const year = 2020
+    const component = mount(newTodo);
+    const wrapper = component.find('#year_id');
+    wrapper.simulate('change', { target: { value: year } });
+    const newTodoInstance = component.find(NewTodo.WrappedComponent).instance();
+    expect(newTodoInstance.state.title).toEqual('');
+    expect(newTodoInstance.state.content).toEqual('');
+    expect(newTodoInstance.state.dueDate.year).toEqual(year);
+  });
+
+  it(`should set state properly on month input`, () => {
+    const content = 10
+    const component = mount(newTodo);
+    const wrapper = component.find('#month_id');
+    wrapper.simulate('change', { target: { value: content } });
+    const newTodoInstance = component.find(NewTodo.WrappedComponent).instance();
+    expect(newTodoInstance.state.title).toEqual('');
+    expect(newTodoInstance.state.content).toEqual('');
+    expect(newTodoInstance.state.dueDate.month).toEqual(content);
+  });
+
+  it(`should set state properly on date input`, () => {
+    const content = 8
+    const component = mount(newTodo);
+    const wrapper = component.find('#date_id');
+    wrapper.simulate('change', { target: { value: content } });
+    const newTodoInstance = component.find(NewTodo.WrappedComponent).instance();
+    expect(newTodoInstance.state.title).toEqual('');
+    expect(newTodoInstance.state.content).toEqual('');
+    expect(newTodoInstance.state.dueDate.date).toEqual(content);
+  });
 });
 
 

src/containers/TodoList/TodoList.test.js

@@ -49,7 +49,7 @@ describe('<TodoList />', () => {
     );
     spyGetTodos = jest.spyOn(actionCreators, 'getTodos')
       .mockImplementation(() => { return dispatch => {}; });
-  })
+  });
 
   it('should render Todos', () => {
     const component = mount(todoList);

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: 8,
+    }
 };
 
 describe('ActionCreators', () => {