[Improve] Write form validation check

fixtures/write-form.js

@@ -2,9 +2,9 @@ const writeForm = {
   title: '스터디를 소개합니다.1',
   contents: '우리는 이것저것 합니다.1',
   moderatorId: 'user1',
-  applyEndDate: '2020-11-26',
+  applyEndDate: '2020-12-24 11:00',
   participants: [],
-  personnel: 10,
+  personnel: '1',
   tags: [
     'JavaScript',
     'Algorithm',

src/components/write/WriteButtons.jsx

@@ -4,8 +4,11 @@ import styled from '@emotion/styled';
 
 const WriteButtonsWrapper = styled.div``;
 
-const WriteButtons = ({ onSubmit, onCancel }) => (
+const WriteButtons = ({ error, onSubmit, onCancel }) => (
   <WriteButtonsWrapper>
+    {error && (
+      <div>{error}</div>
+    )}
     <button
       type="button"
       onClick={onSubmit}

src/components/write/WriteButtons.test.jsx

@@ -5,8 +5,8 @@ import { render } from '@testing-library/react';
 import WriteButtons from './WriteButtons';
 
 describe('WriteButtons', () => {
-  const renderWriteButtons = () => render((
-    <WriteButtons />
+  const renderWriteButtons = (error) => render((
+    <WriteButtons error={error} />
   ));
 
   it('render Write buttons', () => {
@@ -15,4 +15,21 @@ describe('WriteButtons', () => {
     expect(container).toHaveTextContent('등록하기');
     expect(container).toHaveTextContent('취소');
   });
+
+  context('with error message', () => {
+    const error = 'error';
+    it('renders error message', () => {
+      const { container } = renderWriteButtons(error);
+
+      expect(container).toHaveTextContent(error);
+    });
+  });
+
+  context('without error message', () => {
+    it("doesn't renders error message", () => {
+      const { container } = renderWriteButtons();
+
+      expect(container).not.toHaveTextContent('error');
+    });
+  });
 });

src/components/write/WriteForm.jsx

@@ -29,7 +29,7 @@ const WriteForm = ({ onChange, fields }) => {
       <div>
         <label htmlFor="application-deadline">모집 마감 날짜</label>
         <input
-          type="date"
+          type="datetime-local"
           name="applyEndDate"
           value={applyEndDate}
           onChange={handleChange}
@@ -39,6 +39,7 @@ const WriteForm = ({ onChange, fields }) => {
       <div>
         <label htmlFor="participants-number">참여 인원 수</label>
         <input
+          min="1"
           type="number"
           name="personnel"
           value={personnel}

src/components/write/WriteForm.test.jsx

@@ -23,13 +23,11 @@ describe('WriteForm', () => {
   it('renders input write form text', () => {
     const { getByLabelText, getByPlaceholderText } = renderWriteForm(WRITE_FORM);
 
-    const {
-      title, applyEndDate, personnel,
-    } = WRITE_FORM;
+    const { title, personnel } = WRITE_FORM;
 
     expect(getByPlaceholderText('제목을 입력하세요')).toHaveValue(title);
-    expect(getByLabelText('모집 마감 날짜')).toHaveValue(applyEndDate);
-    expect(getByLabelText('참여 인원 수')).toHaveValue(personnel);
+    expect(getByLabelText('모집 마감 날짜')).toHaveValue('2020-12-24T11:00');
+    expect(getByLabelText('참여 인원 수')).toHaveValue(parseInt(personnel, 10));
   });
 
   describe('listens change event', () => {

src/containers/write/WriteButtonsContainer.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useCallback } from 'react';
+import React, { useEffect, useCallback, useState } from 'react';
 
 import { useDispatch, useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
@@ -8,31 +8,57 @@ import { writeStudyGroup } from '../../reducers/slice';
 
 import WriteButtons from '../../components/write/WriteButtons';
 
+const checkTrim = (value) => value.trim();
+
+const isCheckValidate = (values) => values.map(checkTrim).includes('');
+
 const WriteButtonsContainer = () => {
+  const [error, setError] = useState(null);
+
   const history = useHistory();
   const dispatch = useDispatch();
 
   const writeField = useSelector(get('writeField'));
   const groupId = useSelector(get('groupId'));
 
-  const onSubmit = useCallback(() => {
-    // TODO: write form validate 체크 하기
+  const {
+    title, applyEndDate, personnel, tags,
+  } = writeField;
+
+  const applyEndTime = new Date(applyEndDate).getTime();
+
+  const onSubmit = () => {
+    if (isCheckValidate([title, applyEndDate, personnel])) {
+      setError('입력이 안된 사항이 있습니다.');
+      return;
+    }
+
+    if (!tags.length) {
+      setError('태그를 입력하세요.');
+      return;
+    }
+
+    if (Date.now() - applyEndTime >= 0) {
+      setError('접수 마감날짜가 현재 시간보다 빠릅니다.');
+      return;
+    }
+
     dispatch(writeStudyGroup());
-  }, [dispatch]);
+  };
 
   useEffect(() => {
     if (groupId) {
       history.push(`/introduce/${groupId}`);
     }
   }, [history, groupId]);
 
-  const onCancel = () => {
+  const onCancel = useCallback(() => {
     history.push('/');
-  };
+  }, [history]);
 
   return (
     <WriteButtons
-      fields={writeField}
+      error={error}
       onSubmit={onSubmit}
       onCancel={onCancel}
     />

src/containers/write/WriteButtonsContainer.test.jsx

@@ -28,7 +28,7 @@ describe('WriteButtonsContainer', () => {
     useDispatch.mockImplementation(() => dispatch);
 
     useSelector.mockImplementation((state) => state({
-      writeField: WRITE_FORM,
+      writeField: given.writeField,
       groupId: given.groupId,
     }));
   });
@@ -40,6 +40,8 @@ describe('WriteButtonsContainer', () => {
   ));
 
   it('render Write buttons', () => {
+    given('writeField', () => (WRITE_FORM));
+
     const { container } = renderWriteButtonsContainer();
 
     expect(container).toHaveTextContent('등록하기');
@@ -48,6 +50,7 @@ describe('WriteButtonsContainer', () => {
 
   describe('when click cancel button', () => {
     given('groupId', () => (null));
+    given('writeField', () => (WRITE_FORM));
 
     it('Go to the main page', () => {
       const { getByText } = renderWriteButtonsContainer();
@@ -59,29 +62,100 @@ describe('WriteButtonsContainer', () => {
   });
 
   describe('when click submit button', () => {
-    context('with group', () => {
-      given('groupId', () => ('1'));
+    context('without input value null, so validation check success', () => {
+      given('writeField', () => (WRITE_FORM));
+
+      context('with group', () => {
+        given('groupId', () => ('1'));
+
+        it('dispatch action writeStudyGroup event', () => {
+          const { getByText } = renderWriteButtonsContainer();
+
+          fireEvent.click(getByText('등록하기'));
+
+          expect(dispatch).toBeCalledTimes(1);
 
-      it('dispatch action writeStudyGroup event', () => {
-        const { getByText } = renderWriteButtonsContainer();
+          expect(mockPush).toBeCalledWith('/introduce/1');
+        });
+      });
+
+      context('without group', () => {
+        given('groupId', () => (null));
 
-        fireEvent.click(getByText('등록하기'));
+        it('dispatch action submit event', () => {
+          const { getByText } = renderWriteButtonsContainer();
 
-        expect(dispatch).toBeCalledTimes(1);
+          fireEvent.click(getByText('등록하기'));
 
-        expect(mockPush).toBeCalledWith('/introduce/1');
+          expect(mockPush).not.toBeCalled();
+        });
       });
     });
+    context('with input value null, so validation check failure', () => {
+      describe('When the title and applyEndDate, personnel are blank', () => {
+        given('writeField', () => ({
+          title: '',
+          contents: '우리는 이것저것 합니다.1',
+          moderatorId: 'user1',
+          applyEndDate: '',
+          participants: [],
+          personnel: '',
+          tags: [
+            'JavaScript',
+            'Algorithm',
+          ],
+        }));
+
+        it('renders error message "There are some items that have not been entered."', () => {
+          const { container, getByText } = renderWriteButtonsContainer();
+
+          fireEvent.click(getByText('등록하기'));
+
+          expect(container).toHaveTextContent('입력이 안된 사항이 있습니다.');
+        });
+      });
 
-    context('without group', () => {
-      given('groupId', () => (null));
+      describe('When the length of tags is 0', () => {
+        given('writeField', () => ({
+          title: '123',
+          contents: '우리는 이것저것 합니다.1',
+          moderatorId: 'user1',
+          applyEndDate: new Date().toString(),
+          participants: [],
+          personnel: '1',
+          tags: [],
+        }));
 
-      it('dispatch action submit event', () => {
-        const { getByText } = renderWriteButtonsContainer();
+        it('renders error message "Please enter a tag."', () => {
+          const { container, getByText } = renderWriteButtonsContainer();
 
-        fireEvent.click(getByText('등록하기'));
+          fireEvent.click(getByText('등록하기'));
+
+          expect(container).toHaveTextContent('태그를 입력하세요.');
+        });
+      });
 
-        expect(mockPush).not.toBeCalled();
+      describe('When the application deadline is earlier than the current time', () => {
+        given('writeField', () => ({
+          title: '123',
+          contents: '우리는 이것저것 합니다.1',
+          moderatorId: 'user1',
+          applyEndDate: '2020-10-01',
+          participants: [],
+          personnel: '1',
+          tags: [
+            'javascript',
+            'react',
+          ],
+        }));
+
+        it('renders error message "The application deadline is earlier than the current time."', () => {
+          const { container, getByText } = renderWriteButtonsContainer();
+
+          fireEvent.click(getByText('등록하기'));
+
+          expect(container).toHaveTextContent('접수 마감날짜가 현재 시간보다 빠릅니다.');
+        });
       });
     });
   });

src/reducers/slice.js

@@ -18,7 +18,7 @@ const writeInitialState = {
   moderatorId: '',
   applyEndDate: '',
   participants: [],
-  personnel: 0,
+  personnel: '1',
   tags: [],
 };
 

src/reducers/slice.test.js

@@ -49,7 +49,7 @@ describe('reducer', () => {
         moderatorId: '',
         applyEndDate: '',
         participants: [],
-        personnel: 0,
+        personnel: '1',
         tags: [],
       },
       register: {
@@ -123,7 +123,7 @@ describe('reducer', () => {
           moderatorId: '',
           applyEndDate: '',
           participants: [],
-          personnel: 0,
+          personnel: '1',
           tags: [],
         },
       };