4주차 코드리뷰 요청

__mocks__/react-redux.js

@@ -0,0 +1,3 @@
+export const useDispatch = jest.fn();
+
+export const useSelector = jest.fn((selector) => selector({}));

package.json

@@ -21,6 +21,7 @@
     "@testing-library/jest-dom": "^5.12.0",
     "@testing-library/react": "^11.2.7",
     "@types/jest": "^26.0.23",
+    "@types/redux-actions": "^2.6.2",
     "babel-jest": "^26.6.3",
     "babel-loader": "^8.2.2",
     "codeceptjs": "^3.0.7",
@@ -40,6 +41,9 @@
   },
   "dependencies": {
     "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react-dom": "^17.0.2",
+    "react-redux": "^8.0.5",
+    "redux": "^4.2.1",
+    "redux-actions": "^3.0.0"
   }
 }

src/App.jsx

@@ -1,46 +1,13 @@
-import { useState } from 'react';
-
-import Page from './Page';
+import InputContainer from './InputContainer';
+import ListContainer from './ListContainer';
 
 export default function App() {
-  const [state, setState] = useState({
-    newId: 100,
-    taskTitle: '',
-    tasks: [],
-  });
-
-  const { newId, taskTitle, tasks } = state;
-
-  function handleChangeTitle(event) {
-    setState({
-      ...state,
-      taskTitle: event.target.value,
-    });
-  }
-
-  function handleClickAddTask() {
-    setState({
-      ...state,
-      newId: newId + 1,
-      taskTitle: '',
-      tasks: [...tasks, { id: newId, title: taskTitle }],
-    });
-  }
-
-  function handleClickDeleteTask(id) {
-    setState({
-      ...state,
-      tasks: tasks.filter((task) => task.id !== id),
-    });
-  }
-
   return (
-    <Page
-      taskTitle={taskTitle}
-      onChangeTitle={handleChangeTitle}
-      onClickAddTask={handleClickAddTask}
-      tasks={tasks}
-      onClickDeleteTask={handleClickDeleteTask}
-    />
+    <>
+      <h1>To-do</h1>
+      <InputContainer />
+      <ListContainer />
+    </>
+
   );
 }

src/App.test.jsx

@@ -1,8 +1,22 @@
 import { render } from '@testing-library/react';
+import { useDispatch, useSelector } from 'react-redux';
 
 import App from './App';
 
+jest.mock('react-redux');
+
 test('App', () => {
+  const dispatch = jest.fn();
+
+  useDispatch.mockImplementation(() => dispatch);
+  useSelector.mockImplementation((selector) => selector({
+    taskTitle: '',
+    tasks: [
+      { id: 1, title: '아무것도 하지 않기#1' },
+      { id: 2, title: '아무것도 하지 않기#2' },
+    ],
+  }));
+
   const { getByText } = render((
     <App />
   ));

src/InputContainer.jsx

@@ -0,0 +1,26 @@
+import { useDispatch, useSelector } from 'react-redux';
+import Input from './Input';
+import { updateTaskTitle, addTask } from './reducers';
+
+export default function InputContainer() {
+  const { taskTitle } = useSelector((state) => ({
+    taskTitle: state.taskTitle,
+  }));
+  const dispatch = useDispatch();
+  // 관심사분리
+  function handleChangeTitle(event) {
+    dispatch(updateTaskTitle({ taskTitle: event.target.value }));
+  }
+
+  function handleClickAddTask() {
+    dispatch(addTask());
+  }
+
+  return (
+    <Input
+      value={taskTitle}
+      onChange={handleChangeTitle}
+      onClick={handleClickAddTask}
+    />
+  );
+}

src/InputContainer.test.jsx

@@ -0,0 +1,28 @@
+import { render, fireEvent } from '@testing-library/react';
+import { useDispatch, useSelector } from 'react-redux';
+
+import InputContainer from './InputContainer';
+
+jest.mock('react-redux');
+
+test('InputContainer', () => {
+  const dispatch = jest.fn();
+
+  useDispatch.mockImplementation(() => dispatch);
+
+  useSelector.mockImplementation((selector) => selector({
+    taskTitle: 'new Title',
+  }));
+
+  const { getByText, getByDisplayValue } = render((
+    <InputContainer />
+  ));
+
+  expect(getByText(/추가/)).not.toBeNull();
+  expect(getByDisplayValue(/new Title/)).not.toBeNull();
+
+  fireEvent.click(getByText('추가'));
+  expect(dispatch).toBeCalledWith({
+    type: 'addTask',
+  });
+});

src/ListContainer.jsx

@@ -0,0 +1,22 @@
+import { useDispatch, useSelector } from 'react-redux';
+import { deleteTask } from './reducers';
+import List from './List';
+
+export default function ListContainer() {
+  const { tasks } = useSelector((state) => ({
+    tasks: state.tasks,
+  }));
+  const dispatch = useDispatch();
+  // 관심사분리
+
+  function handleClickDeleteTask(id) {
+    dispatch((deleteTask({ id })));
+  }
+
+  return (
+    <List
+      tasks={tasks}
+      onClickDelete={handleClickDeleteTask}
+    />
+  );
+}

src/ListContainer.test.jsx

@@ -0,0 +1,26 @@
+import { render } from '@testing-library/react';
+import { useSelector } from 'react-redux';
+
+import ListContainer from './ListContainer';
+
+jest.mock('react-redux');
+
+test('ListContainer', () => {
+  const tasks = [
+    { id: 1, title: '아무것도 하지 않기#1' },
+    { id: 2, title: '아무것도 하지 않기#2' },
+  ];
+
+  useSelector.mockImplementation((selector) => selector({
+    tasks,
+  }));
+
+  const { getByText } = render((
+    <ListContainer />
+  ));
+
+  expect(getByText(/아무것도 하지 않기#1/)).not.toBeNull();
+
+  // TODO: 통합 테스트 코드 작성
+  // CodeceptJS => 실제 브라우저에서 사용자 테스트 실행 가능.
+});

src/actions.js

@@ -0,0 +1,32 @@
+import { createAction } from 'redux-actions';
+
+const UPDATE_TASK_TITLE = 'task/UPDATE_TASK_TITLE';
+const ADD_TASK = 'task/ADD_TASK';
+const DELETE_TASK = 'task/DELETE_TASK';
+
+export const updateTaskTitle = createAction(UPDATE_TASK_TITLE);
+export const addTask = createAction(ADD_TASK);
+export const deleteTask = createAction(DELETE_TASK);
+
+// export const setDiff = diff => ({ type: SET_DIFF, diff });
+// export const increase = () => ({ type: INCREASE });
+// export const decrease = () => ({ type: DECREASE });
+// function updateTaskTitle(taskTitle) {
+//   return {
+//     type: 'UPDATE_TASK_TITLE',
+//     payload: { taskTitle },
+//   };
+// }
+
+// export function addTask() {
+//   return {
+//     type: 'ADD_TASK',
+//   };
+// }
+
+// export function deleteTask(id) {
+//   return {
+//     type: 'DELETE_TASK',
+//     payload: { id },
+//   };
+// }

src/index.jsx

@@ -1,8 +1,15 @@
 import ReactDOM from 'react-dom';
 
+import { Provider } from 'react-redux';
 import App from './App';
 
+import store from './store';
+
 ReactDOM.render(
-  <App />,
+  (
+    <Provider store={store}>
+      <App />
+    </Provider>
+  ),
   document.getElementById('app'),
 );

src/reducers.js

@@ -0,0 +1,36 @@
+import { handleActions, createAction } from 'redux-actions';
+
+const UPDATE_TASK_TITLE = 'task/UPDATE_TASK_TITLE';
+const ADD_TASK = 'task/ADD_TASK';
+const DELETE_TASK = 'task/DELETE_TASK';
+
+export const updateTaskTitle = createAction(UPDATE_TASK_TITLE);
+export const addTask = createAction(ADD_TASK);
+export const deleteTask = createAction(DELETE_TASK);
+
+const initialState = { newId: 100, taskTitle: '', tasks: [] };
+
+const reducer = handleActions({
+  [UPDATE_TASK_TITLE]: (state, { payload }) => ({
+    ...state,
+    taskTitle: payload.taskTitle,
+  }),
+  [ADD_TASK]: (state) => {
+    const { newId, tasks, taskTitle } = state;
+    return {
+      ...state,
+      newId: newId + 1,
+      taskTitle: '',
+      tasks: [...tasks, { id: newId, title: taskTitle }],
+    };
+  },
+  [DELETE_TASK]: (state, { payload }) => {
+    const { tasks } = state;
+    return {
+      ...state,
+      tasks: tasks.filter((task) => task.id !== payload.id),
+    };
+  },
+}, initialState);
+
+export default reducer;

src/reducers.test.js

@@ -0,0 +1,44 @@
+import reducer, { updateTaskTitle, addTask, deleteTask } from './reducers';
+
+// 테스트하고자 하는 것의 input과 output을 명확하게 해야하지
+// input? 변경 전 state,action
+// output? 변경 후 state
+
+describe('reducer', () => {
+  describe('taskTitle을 변경한다', () => {
+    it('taskTitle이 변경된 상태를 반환한다.', () => {
+      const prevState = { newId: 100, taskTitle: '', tasks: [] };
+      const state = reducer(prevState, updateTaskTitle('change'));
+      expect(state.taskTitle).toBe('change');
+    });
+  });
+  describe('taskTitle을 추가한다', () => {
+    context('taskTitle이 없는 경우', () => {
+      const prevState = {
+        newId: 100, taskTitle: '', tasks: [],
+      };
+      const state = reducer(prevState, addTask());
+      expect(state.tasks).toHaveLength(0);
+    });
+    context('taskTitle이 있는 경우', () => {
+      const prevState = {
+        newId: 100, taskTitle: 'something', tasks: [],
+      };
+      const state = reducer(prevState, addTask());
+      expect(state.tasks[0].title).toBe('something');
+      expect(state.tasks).toHaveLength(1);
+      expect(state.tasks[0].id).toBe(100);
+    });
+  });
+  describe('task를 삭제한다', () => {
+    it('tasks에서 해당 값을 제외한 상태를 반환한다.', () => {
+      const prevState = {
+        newId: 101,
+        taskTitle: '',
+        tasks: [{ id: 100, taskTitle: 'something' }],
+      };
+      const state = reducer(prevState, deleteTask(100));
+      expect(state.tasks).toHaveLength(0);
+    });
+  });
+});