From e567bac5f87cb69d5e7547cfc2fdbb1ded631fb9 Mon Sep 17 00:00:00 2001
From: saseungmin <dbd02169@naver.com>
Date: Wed, 25 Nov 2020 00:30:58 +0900
Subject: [PATCH] [Feature] onChange All Write Fields in Write Page

- All Write page test success
---
 fixtures/write-form.js                        | 14 ++++
 src/components/write/WriteForm.jsx            | 64 +++++++++++++++++
 src/components/write/WriteForm.test.jsx       | 55 +++++++++++++++
 src/containers/write/TagsFormContainer.jsx    |  1 +
 src/containers/write/WriteFormContainer.jsx   | 32 +++++++++
 .../write/WriteFormContainer.test.jsx         | 69 +++++++++++++++++++
 src/pages/WritePage.jsx                       | 16 +----
 src/reducers/slice.js                         |  4 +-
 8 files changed, 240 insertions(+), 15 deletions(-)
 create mode 100644 fixtures/write-form.js
 create mode 100644 src/components/write/WriteForm.jsx
 create mode 100644 src/components/write/WriteForm.test.jsx
 create mode 100644 src/containers/write/WriteFormContainer.jsx
 create mode 100644 src/containers/write/WriteFormContainer.test.jsx

diff --git a/fixtures/write-form.js b/fixtures/write-form.js
new file mode 100644
index 0000000..6d5cb55
--- /dev/null
+++ b/fixtures/write-form.js
@@ -0,0 +1,14 @@
+const writeForm = {
+  title: '스터디를 소개합니다.1',
+  contents: '우리는 이것저것 합니다.1',
+  moderatorId: 'user1',
+  applyEndDate: '2020-11-26',
+  participants: [],
+  personnel: 10,
+  tags: [
+    'JavaScript',
+    'Algorithm',
+  ],
+};
+
+export default writeForm;
diff --git a/src/components/write/WriteForm.jsx b/src/components/write/WriteForm.jsx
new file mode 100644
index 0000000..9a4cdd7
--- /dev/null
+++ b/src/components/write/WriteForm.jsx
@@ -0,0 +1,64 @@
+import React from 'react';
+
+import styled from '@emotion/styled';
+
+const WriteFormWrapper = styled.div``;
+
+const WriteForm = ({ onChange, fields }) => {
+  const {
+    title, applyEndDate, personnel, contents,
+  } = fields;
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+
+    onChange({ name, value });
+  };
+
+  return (
+    <WriteFormWrapper>
+      <div>
+        <input
+          type="text"
+          name="title"
+          value={title}
+          onChange={handleChange}
+          placeholder="제목을 입력하세요"
+        />
+      </div>
+      <div>
+        <label htmlFor="application-deadline">모집 마감 날짜</label>
+        <input
+          type="date"
+          name="applyEndDate"
+          value={applyEndDate}
+          onChange={handleChange}
+          id="application-deadline"
+        />
+      </div>
+      <div>
+        <label htmlFor="participants-number">참여 인원 수</label>
+        <input
+          type="number"
+          name="personnel"
+          value={personnel}
+          onChange={handleChange}
+          id="participants-number"
+        />
+      </div>
+      <div>
+        {/* TODO: 추후 draft.js를 사용하여 변경 예정 */}
+        <textarea
+          rows="10"
+          cols="100"
+          name="contents"
+          value={contents}
+          onChange={handleChange}
+          placeholder="내용"
+        />
+      </div>
+    </WriteFormWrapper>
+  );
+};
+
+export default WriteForm;
diff --git a/src/components/write/WriteForm.test.jsx b/src/components/write/WriteForm.test.jsx
new file mode 100644
index 0000000..d4900f5
--- /dev/null
+++ b/src/components/write/WriteForm.test.jsx
@@ -0,0 +1,55 @@
+import React from 'react';
+
+import { fireEvent, render } from '@testing-library/react';
+
+import WriteForm from './WriteForm';
+
+import WRITE_FORM from '../../../fixtures/write-form';
+
+describe('WriteForm', () => {
+  const handleChange = jest.fn();
+
+  beforeEach(() => {
+    handleChange.mockClear();
+  });
+
+  const renderWriteForm = (fields) => render((
+    <WriteForm
+      fields={fields}
+      onChange={handleChange}
+    />
+  ));
+
+  it('renders input write form text', () => {
+    const { getByLabelText, getByPlaceholderText } = renderWriteForm(WRITE_FORM);
+
+    const {
+      title, applyEndDate, personnel, contents,
+    } = WRITE_FORM;
+
+    expect(getByPlaceholderText('제목을 입력하세요')).toHaveValue(title);
+    expect(getByLabelText('모집 마감 날짜')).toHaveValue(applyEndDate);
+    expect(getByLabelText('참여 인원 수')).toHaveValue(personnel);
+    expect(getByPlaceholderText('내용')).toHaveTextContent(contents);
+  });
+
+  describe('listens change event', () => {
+    it('write fields value change', () => {
+      const { getByPlaceholderText } = renderWriteForm(WRITE_FORM);
+
+      const { title } = WRITE_FORM;
+
+      const inputTitle = getByPlaceholderText('제목을 입력하세요');
+      expect(inputTitle).toHaveValue(title);
+
+      fireEvent.change(inputTitle, {
+        target: {
+          value: '안녕하세요!',
+          name: 'title',
+        },
+      });
+
+      expect(handleChange).toBeCalled();
+    });
+  });
+});
diff --git a/src/containers/write/TagsFormContainer.jsx b/src/containers/write/TagsFormContainer.jsx
index aa7db8b..6bc5077 100644
--- a/src/containers/write/TagsFormContainer.jsx
+++ b/src/containers/write/TagsFormContainer.jsx
@@ -4,6 +4,7 @@ import { useDispatch, useSelector } from 'react-redux';
 
 import { get } from '../../util/utils';
 import TagsForm from '../../components/write/TagsForm';
+
 import { changeWriteField } from '../../reducers/slice';
 
 const TagsFormContainer = () => {
diff --git a/src/containers/write/WriteFormContainer.jsx b/src/containers/write/WriteFormContainer.jsx
new file mode 100644
index 0000000..abeb93e
--- /dev/null
+++ b/src/containers/write/WriteFormContainer.jsx
@@ -0,0 +1,32 @@
+import React from 'react';
+
+import { useDispatch, useSelector } from 'react-redux';
+
+import { get } from '../../util/utils';
+import WriteForm from '../../components/write/WriteForm';
+
+import { changeWriteField } from '../../reducers/slice';
+
+const WriteFormContainer = () => {
+  const dispatch = useDispatch();
+
+  const writeField = useSelector(get('writeField'));
+
+  const onChangeWriteField = ({ name, value }) => {
+    dispatch(
+      changeWriteField({
+        name,
+        value,
+      }),
+    );
+  };
+
+  return (
+    <WriteForm
+      fields={writeField}
+      onChange={onChangeWriteField}
+    />
+  );
+};
+
+export default WriteFormContainer;
diff --git a/src/containers/write/WriteFormContainer.test.jsx b/src/containers/write/WriteFormContainer.test.jsx
new file mode 100644
index 0000000..9a8abb8
--- /dev/null
+++ b/src/containers/write/WriteFormContainer.test.jsx
@@ -0,0 +1,69 @@
+import React from 'react';
+
+import { useDispatch, useSelector } from 'react-redux';
+
+import { fireEvent, render } from '@testing-library/react';
+
+import WriteFormContainer from './WriteFormContainer';
+
+describe('WriteFormContainer', () => {
+  const dispatch = jest.fn();
+
+  beforeEach(() => {
+    dispatch.mockClear();
+
+    useDispatch.mockImplementation(() => dispatch);
+
+    useSelector.mockImplementation((state) => state({
+      writeField: {
+        title: '',
+        contents: '',
+        moderatorId: '',
+        applyEndDate: '',
+        participants: [],
+        personnel: 0,
+      },
+    }));
+  });
+
+  const renderWriteFormContainer = () => render((
+    <WriteFormContainer />
+  ));
+
+  describe('render Write Form Container contents text', () => {
+    it('renders write input text', () => {
+      const { getByPlaceholderText, getByLabelText } = renderWriteFormContainer();
+
+      expect(getByPlaceholderText('제목을 입력하세요')).not.toBeNull();
+      expect(getByPlaceholderText('내용')).not.toBeNull();
+      expect(getByLabelText('모집 마감 날짜')).not.toBeNull();
+      expect(getByLabelText('참여 인원 수')).not.toBeNull();
+    });
+  });
+
+  describe('dispatch actions call', () => {
+    const { value, name } = {
+      name: 'title',
+      value: '안녕하세요!',
+    };
+    it('listens actions change event', () => {
+      const { getByPlaceholderText } = renderWriteFormContainer();
+
+      const inputTitle = getByPlaceholderText('제목을 입력하세요');
+
+      expect(inputTitle).toHaveValue('');
+
+      fireEvent.change(inputTitle, {
+        target: { value, name },
+      });
+
+      expect(dispatch).toBeCalledWith({
+        payload: {
+          name,
+          value,
+        },
+        type: 'application/changeWriteField',
+      });
+    });
+  });
+});
diff --git a/src/pages/WritePage.jsx b/src/pages/WritePage.jsx
index 64f616b..12f971c 100644
--- a/src/pages/WritePage.jsx
+++ b/src/pages/WritePage.jsx
@@ -1,26 +1,14 @@
 import React from 'react';
 
 import TagFormContainer from '../containers/write/TagsFormContainer';
+import WriteFormContainer from '../containers/write/WriteFormContainer';
 
 import Responsive from '../styles/Responsive';
 
 const IntroducePage = () => (
   <Responsive>
     <h1>스터디 그룹 개설하기</h1>
-    <div>
-      <input type="text" placeholder="제목을 입력하세요" />
-    </div>
-    <div>
-      <span>모집 마감 날짜</span>
-      <input type="date" />
-    </div>
-    <div>
-      <span>참여 인원 수</span>
-      <input type="number" />
-    </div>
-    <div>
-      <textarea rows="10" cols="100" placeholder="내용" />
-    </div>
+    <WriteFormContainer />
     <TagFormContainer />
     <div>
       <button type="button">저장</button>
diff --git a/src/reducers/slice.js b/src/reducers/slice.js
index 78a5348..bc0a4e8 100644
--- a/src/reducers/slice.js
+++ b/src/reducers/slice.js
@@ -42,10 +42,12 @@ const { actions, reducer } = createSlice({
       };
     },
     changeWriteField(state, { payload: { name, value } }) {
+      const { writeField } = state;
+
       return {
         ...state,
         writeField: {
-          ...state.writeField,
+          ...writeField,
           [name]: value,
         },
       };