diff --git a/src/components/Calendar/Calendar.test.js b/src/components/Calendar/Calendar.test.js new file mode 100644 index 0000000..a9ce5e5 --- /dev/null +++ b/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('', () => { + it('should render without errors', () => { + const component = shallow(); + const wrapper = component.find('.sunday'); + expect(wrapper.length).toBe(1); + }); + + it('clickDone should work on click', () => { + const spyToggleTodo = jest.fn(); + const component = shallow() + const wrapper = component.find('.todoTitle notdone') + wrapper.simulate('click'); + expect(spyToggleTodo).toBeCalledTimes(1) + }); +}); + \ No newline at end of file diff --git a/src/containers/TodoCalendar/TodoCalendar.js b/src/containers/TodoCalendar/TodoCalendar.js index 91b24ca..0059696 100644 --- a/src/containers/TodoCalendar/TodoCalendar.js +++ b/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 {
See TodoList
- + {this.state.year}.{this.state.month} - +
{ + return jest.fn((props) => { + return ( +
+ {props.year}.{props.month} +
+ ); + }); + }); + +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('', () => { + beforeEach(() => { + todoCalendar = ( + + + + + + + + ); + 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); + }); +}); \ No newline at end of file diff --git a/src/containers/TodoList/NewTodo/NewTodo.js b/src/containers/TodoList/NewTodo/NewTodo.js index 1ce93bc..c5bc6e1 100644 --- a/src/containers/TodoList/NewTodo/NewTodo.js +++ b/src/containers/TodoList/NewTodo/NewTodo.js @@ -38,7 +38,7 @@ class NewTodo extends Component {

Add a New Todo!

- this.setState({ title: event.target.value })} @@ -49,21 +49,21 @@ class NewTodo extends Component { > - year this.setState({ dueDate: {...this.state.dueDate, year: event.target.value } })} > - month this.setState({ dueDate: {...this.state.dueDate, month: event.target.value } })} > - date this.setState({ diff --git a/src/containers/TodoList/NewTodo/NewTodo.test.js b/src/containers/TodoList/NewTodo/NewTodo.test.js index 5696dc7..32588c8 100644 --- a/src/containers/TodoList/NewTodo/NewTodo.test.js +++ b/src/containers/TodoList/NewTodo/NewTodo.test.js @@ -53,7 +53,7 @@ describe('', () => { 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('', () => { 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); + }); }); diff --git a/src/store/actions/todo.test.js b/src/store/actions/todo.test.js index ff84a79..7e38f8c 100644 --- 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: 2020, + month: 10, + date: 6, + } }; describe('ActionCreators', () => {