4주차 코드리뷰 요청

__mocks__/react-redux.js

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

package.json

@@ -40,6 +40,8 @@
   },
   "dependencies": {
     "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react-dom": "^17.0.2",
+    "react-redux": "^8.0.5",
+    "redux": "^4.2.1"
   }
 }

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 './actions';
+
+export default function InputContainer() {
+  const { taskTitle } = useSelector((state) => ({
+    taskTitle: state.taskTitle,
+  }));
+  const dispatch = useDispatch();
+  // 관심사분리
+  function handleChangeTitle(event) {
+    dispatch(updateTaskTitle(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, screen } 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 './actions';
+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,19 @@
+export function updateTaskTitle(taskTitle) {
+  return {
+    type: 'updateTaskTitle',
+    payload: { taskTitle },
+  };
+}
+
+export function addTask() {
+  return {
+    type: 'addTask',
+  };
+}
+
+export function deleteTask(id) {
+  return {
+    type: 'deleteTask',
+    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/reducer.js

@@ -0,0 +1,43 @@
+// Redux action
+// - type(string)
+// - payload(object)
+
+const initialState = {
+  newId: 100,
+  taskTitle: '',
+  tasks: [],
+};
+
+export default function reducer(state = initialState, action) {
+  if (action.type === 'updateTaskTitle') {
+    return {
+      ...state,
+      taskTitle: action.payload.taskTitle,
+    };
+  }
+
+  if (action.type === 'addTask') {
+    const { newId, taskTitle, tasks } = state;
+
+    if (taskTitle === '') {
+      return state;
+    }
+    return {
+      ...state,
+      newId: newId + 1,
+      taskTitle: '',
+      tasks: [...tasks, { id: newId, title: taskTitle }],
+    };
+  }
+
+  if (action.type === 'deleteTask') {
+    const { tasks } = state;
+    return {
+      ...state,
+      tasks: tasks.filter((task) => task.id !== action.payload.id),
+
+    };
+  }
+
+  return state;
+}

src/reducer.test.js

@@ -0,0 +1,45 @@
+import reducer from './reducer';
+import { updateTaskTitle, addTask, deleteTask } from './actions';
+
+// 테스트하고자 하는 것의 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('task가 없어진다', () => {
+      const prevState = {
+        newId: 101,
+        taskTitle: '',
+        tasks: [{ id: 100, taskTitle: 'something' }],
+      };
+      const state = reducer(prevState, deleteTask(100));
+      expect(state.tasks).toHaveLength(0);
+    });
+  });
+});

src/store.js

@@ -0,0 +1,7 @@
+import { createStore } from 'redux';
+
+import reducer from './reducer';
+
+const store = createStore(reducer);
+
+export default store;