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', () => {