diff --git a/src/components/Calendar/Calendar.test.js b/src/components/Calendar/Calendar.test.js new file mode 100644 index 0000000..60a6ed0 --- /dev/null +++ b/src/components/Calendar/Calendar.test.js @@ -0,0 +1,69 @@ +import React from 'react'; +import { shallow, mount } from 'enzyme'; + +import Calendar from './Calendar'; + +describe('', () => { + it('should display a single todo with good contents', () => { + const year = 2020, month = 10; + const stubTodos = [ + {year: year, month: month-1, + id: 0, date: 8, done: false, title: 'todoA'}, + ]; + + const component = mount({}} />); + + const wrapper = component.find('.todoTitle'); + expect(wrapper.length).toBe(1); + expect(wrapper.text()).toEqual('todoA'); + }); + + it('should display multiple todos', () => { + const year = 2020, month = 10; + const stubTodos = [ + {year: year, month: month-1, + id: 0, date: 8, done: false, title: 'todoA'}, + {year: year, month: month-1, + id: 1, date: 9, done: true, title: 'todoB'}, + {year: year, month: month-1, + id: 2, date: 10, done: false, title: 'todoC'}, + ]; + + const component = shallow({}} />); + + const wrapper = component.find('.todoTitle'); + expect(wrapper.length).toBe(stubTodos.length); + }); + + it('should display boundary days well (for shorter months)', () => { + const year = 2020, month = 9; + const stubTodos = [ + {year: year, month: month-1, + id: 0, date: 30, done: false, title: 'todoA'}, + ]; + + const component = shallow({}} />); + + const wrapper = component.find('.todoTitle'); + expect(wrapper.length).toBe(stubTodos.length); + }); + + it('should display boundary days well (for longer months)', () => { + const year = 2020, month = 10; + const stubTodos = [ + {year: year, month: month-1, + id: 0, date: 31, done: false, title: 'todoA'}, + ]; + + const component = shallow({}} />); + + const wrapper = component.find('.todoTitle'); + expect(wrapper.length).toBe(stubTodos.length); + }); + +}); + diff --git a/src/containers/TodoCalendar/TodoCalendar.test.js b/src/containers/TodoCalendar/TodoCalendar.test.js new file mode 100644 index 0000000..d2e89cd --- /dev/null +++ b/src/containers/TodoCalendar/TodoCalendar.test.js @@ -0,0 +1,138 @@ +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 ( +
+ +
); + }); +}); + +const stubInitialState = { + year: 2020, + month: 10, +}; + +const mockStore = getMockStore(stubInitialState); + +describe('', () => { + let todoCalendar, spyGetTodos, spyToggleTodo; + + beforeEach(() => { + todoCalendar = ( + + + + } /> + + + + ); + + spyGetTodos = jest.spyOn(actionCreators, 'getTodos') + .mockImplementation(() => { return dispatch => { + new Promise((succ) => { + return succ({ status: 200, data: [] }); + }) + }; }); + + spyToggleTodo = jest.spyOn(actionCreators, 'toggleTodo') + .mockImplementation(() => { return dispatch => { + new Promise((succ) => { + return succ({ status: 200, data: []}); + }) + }; }); + }) + + afterEach(() => { + jest.clearAllMocks(); + }); + + it('should call getTodos()', () => { + const component = mount(todoCalendar); + expect(spyGetTodos).toHaveBeenCalledTimes(1); + }); + + it('should handle prev button', () => { + const component = mount(todoCalendar); + const instance = component.find(TodoCalendar.WrappedComponent).instance(); + instance.setState({year: 2020, month: 10}); + + const wrapper = component.find('button'); + console.log(wrapper); + expect(wrapper.length).toBe(2); + + const btnPrev = wrapper.first(); + expect(btnPrev.text().trim()).toEqual('prev month'); + btnPrev.simulate('click'); + + expect(instance.state).toEqual({year: 2020, month: 9}); + }); + + it('should handle next button', () => { + const component = mount(todoCalendar); + const instance = component.find(TodoCalendar.WrappedComponent).instance(); + instance.setState({year: 2020, month: 10}); + + const wrapper = component.find('button'); + console.log(wrapper); + expect(wrapper.length).toBe(2); + + const btnPrev = wrapper.last(); + expect(btnPrev.text().trim()).toEqual('next month'); + btnPrev.simulate('click'); + + expect(instance.state).toEqual({year: 2020, month: 11}); + }); + + it('should handle boundary months', () => { + const component = mount(todoCalendar); + const instance = component.find(TodoCalendar.WrappedComponent).instance(); + + const wrapper = component.find('button'); + console.log(wrapper); + expect(wrapper.length).toBe(2); + + const btnPrev = wrapper.first(); + const btnNext = wrapper.last(); + expect(btnPrev.text().trim()).toEqual('prev month'); + expect(btnNext.text().trim()).toEqual('next month'); + + instance.setState({year: 2020, month: 1}); + btnPrev.simulate('click'); + expect(instance.state).toEqual({year: 2019, month: 12}); + + instance.setState({year: 2020, month: 12}); + btnNext.simulate('click'); + expect(instance.state).toEqual({year: 2021, month: 1}); + + }); + + it('should call getTodos on load', () => { + const component = mount(todoCalendar); + expect(spyGetTodos).toHaveBeenCalledTimes(1); + }); + + it('should call toggleTodo on click', () => { + const component = mount(todoCalendar); + const btn = component.find('.spyToggleButton'); + + expect(btn.length).toBe(1); + btn.simulate('click'); + + expect(spyToggleTodo).toHaveBeenCalledTimes(1); + }); +}); + diff --git a/src/containers/TodoList/NewTodo/NewTodo.js b/src/containers/TodoList/NewTodo/NewTodo.js index 1ce93bc..ce167ba 100644 --- a/src/containers/TodoList/NewTodo/NewTodo.js +++ b/src/containers/TodoList/NewTodo/NewTodo.js @@ -39,17 +39,20 @@ class NewTodo extends Component {

Add a New Todo!

this.setState({ title: event.target.value })} > - year this.setState({ @@ -57,6 +60,7 @@ class NewTodo extends Component { })} > month this.setState({ @@ -64,6 +68,7 @@ class NewTodo extends Component { })} > date this.setState({ diff --git a/src/containers/TodoList/NewTodo/NewTodo.test.js b/src/containers/TodoList/NewTodo/NewTodo.test.js index 5696dc7..258def1 100644 --- a/src/containers/TodoList/NewTodo/NewTodo.test.js +++ b/src/containers/TodoList/NewTodo/NewTodo.test.js @@ -49,11 +49,11 @@ describe('', () => { wrapper.simulate('click'); expect(spyPostTodo).toHaveBeenCalledTimes(1); }); - + 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('input.title'); wrapper.simulate('change', { target: { value: title } }); const newTodoInstance = component.find(NewTodo.WrappedComponent).instance(); expect(newTodoInstance.state.title).toEqual(title); @@ -63,12 +63,27 @@ describe('', () => { it(`should set state properly on content input`, () => { const content = 'TEST_CONTENT' const component = mount(newTodo); - const wrapper = component.find('textarea'); + const wrapper = component.find('textarea.content'); wrapper.simulate('change', { target: { value: content } }); const newTodoInstance = component.find(NewTodo.WrappedComponent).instance(); expect(newTodoInstance.state.title).toEqual(''); expect(newTodoInstance.state.content).toEqual(content); }); + + it(`should set state properly on date changes`, () => { + const component = mount(newTodo); + + const mock_date = {year: 2020, month: 10, date: 8}; + + for(const key of Object.keys(mock_date)) { + const wrapper = component.find(`input.d-${key}`); + wrapper.simulate('change', { target: { value: mock_date[key] } }); + } + + const newTodoInstance = component.find(NewTodo.WrappedComponent).instance(); + + expect(newTodoInstance.state.dueDate).toEqual(mock_date); + }); }); diff --git a/src/store/actions/todo.test.js b/src/store/actions/todo.test.js index ff84a79..2da4313 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: '2100', + month: '11', + date: '11', + } }; describe('ActionCreators', () => {