Merge pull request #23 from saseungmin/write-tags-submit

[Feature] Tags on study group opening creation page

Author: saseungmin

src/App.test.jsx

@@ -24,6 +24,9 @@ describe('App', () => {
     useSelector.mockImplementation((selector) => selector({
       groups: STUDY_GROUPS,
       group: STUDY_GROUP,
+      writeField: {
+        tags: [],
+      },
     }));
   });
 

src/components/write/TagsForm.jsx

@@ -0,0 +1,73 @@
+import React, { useEffect, useState } from 'react';
+
+import styled from '@emotion/styled';
+
+const TagsFormWrapper = styled.div``;
+
+const TagsForm = ({ onChange, tags }) => {
+  const [tag, setTag] = useState('');
+  const [inputTags, setInputTags] = useState([]);
+
+  const validateInput = (value) => {
+    if (!value) {
+      return;
+    }
+
+    if (inputTags.includes(value)) {
+      return;
+    }
+
+    const resultTags = [...inputTags, value];
+
+    setInputTags(resultTags);
+    onChange(resultTags);
+  };
+
+  const handleChange = (e) => {
+    setTag(e.target.value);
+  };
+
+  const handleRemove = (removeTag) => {
+    const removeTags = inputTags.filter((value) => value !== removeTag);
+
+    setInputTags(removeTags);
+    onChange(removeTags);
+  };
+
+  const handleSubmit = () => {
+    validateInput(tag.trim());
+    setTag('');
+  };
+
+  useEffect(() => {
+    setInputTags(tags);
+  }, [tags]);
+
+  return (
+    <TagsFormWrapper>
+      <h4>태그</h4>
+      <input
+        type="text"
+        placeholder="태그를 입력하세요"
+        value={tag}
+        onChange={handleChange}
+        onKeyPress={handleSubmit}
+      />
+      <div>
+        {inputTags.map((inputTag) => (
+          <span
+            key={inputTag}
+            onClick={() => handleRemove(inputTag)}
+            onKeyPress={() => {}}
+            role="button"
+            tabIndex="-1"
+          >
+            {`#${inputTag}`}
+          </span>
+        ))}
+      </div>
+    </TagsFormWrapper>
+  );
+};
+
+export default TagsForm;

src/components/write/TagsForm.test.jsx

@@ -0,0 +1,117 @@
+import React from 'react';
+
+import { fireEvent, render } from '@testing-library/react';
+
+import TagsForm from './TagsForm';
+
+describe('TagsForm', () => {
+  const handleChange = jest.fn();
+
+  beforeEach(() => {
+    handleChange.mockClear();
+  });
+
+  const renderTagsTagsForm = (tags) => render((
+    <TagsForm
+      tags={tags}
+      onChange={handleChange}
+    />
+  ));
+
+  describe('render Tag Form Container contents text', () => {
+    it('renders tag form text', () => {
+      const { getByPlaceholderText, container } = renderTagsTagsForm([]);
+
+      expect(getByPlaceholderText('태그를 입력하세요')).not.toBeNull();
+      expect(container).toHaveTextContent('태그');
+    });
+  });
+
+  describe('Check input tag validate', () => {
+    context('with tag input value', () => {
+      const tags = ['JavaScript', 'React'];
+      it('listens write field change events', () => {
+        const { getByPlaceholderText } = renderTagsTagsForm(['CSS']);
+
+        const input = getByPlaceholderText('태그를 입력하세요');
+
+        tags.forEach((tag) => {
+          fireEvent.change(input, { target: { value: tag } });
+
+          fireEvent.keyPress(input, { key: 'Enter', code: 13, charCode: 13 });
+
+          expect(input).toHaveValue('');
+        });
+        expect(handleChange).toBeCalledTimes(2);
+      });
+    });
+
+    context('without tag input value', () => {
+      const tags = [];
+      it("doesn't listens write field change events", () => {
+        const { getByPlaceholderText } = renderTagsTagsForm(tags);
+
+        const input = getByPlaceholderText('태그를 입력하세요');
+
+        fireEvent.change(input, { target: { value: '' } });
+
+        fireEvent.keyPress(input, { key: 'Enter', code: 13, charCode: 13 });
+
+        expect(handleChange).not.toBeCalled();
+      });
+    });
+
+    describe('It is not executed because the current tag value is included.', () => {
+      const tags = ['JavaScript', 'React'];
+      it('listens write field change events', () => {
+        const { getByPlaceholderText } = renderTagsTagsForm(tags);
+
+        const input = getByPlaceholderText('태그를 입력하세요');
+
+        tags.forEach((tag) => {
+          fireEvent.change(input, { target: { value: tag } });
+
+          fireEvent.keyPress(input, { key: 'Enter', code: 13, charCode: 13 });
+
+          expect(input).toHaveValue('');
+
+          expect(handleChange).not.toBeCalled();
+        });
+      });
+    });
+  });
+
+  context('with tags', () => {
+    const tags = ['JavaScript', 'React'];
+
+    it('renders Tags are below the input window', () => {
+      const { container } = renderTagsTagsForm(tags);
+
+      expect(container).toHaveTextContent('#JavaScript');
+      expect(container).toHaveTextContent('#React');
+    });
+
+    it('Click event remove tag', () => {
+      const { getByText, container } = renderTagsTagsForm(tags);
+
+      tags.forEach((tag) => {
+        fireEvent.click(getByText(`#${tag}`));
+
+        expect(container).not.toHaveTextContent(`#${tag}`);
+      });
+
+      expect(handleChange).toBeCalledTimes(2);
+    });
+  });
+
+  context('without tags', () => {
+    const tags = [];
+
+    it('renders Tags are below the input window', () => {
+      const { container } = renderTagsTagsForm(tags);
+
+      expect(container).not.toHaveTextContent('#JavaScript');
+      expect(container).not.toHaveTextContent('#React');
+    });
+  });
+});

src/containers/write/TagsFormContainer.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+import { useDispatch, useSelector } from 'react-redux';
+
+import { get } from '../../util/utils';
+import TagsForm from '../../components/write/TagsForm';
+import { changeWriteField } from '../../reducers/slice';
+
+const TagsFormContainer = () => {
+  const dispatch = useDispatch();
+
+  const { tags } = useSelector(get('writeField'));
+
+  const onChangeTags = (nextTags) => {
+    dispatch(
+      changeWriteField({
+        name: 'tags',
+        value: nextTags,
+      }),
+    );
+  };
+
+  return (
+    <TagsForm onChange={onChangeTags} tags={tags} />
+  );
+};
+
+export default TagsFormContainer;

src/containers/write/TagsFormContainer.test.jsx

@@ -0,0 +1,57 @@
+import React from 'react';
+
+import { fireEvent, render } from '@testing-library/react';
+
+import { useDispatch, useSelector } from 'react-redux';
+
+import TagsFormContainer from './TagsFormContainer';
+
+describe('TagsFormContainer', () => {
+  const dispatch = jest.fn();
+
+  beforeEach(() => {
+    dispatch.mockClear();
+
+    useDispatch.mockImplementation(() => dispatch);
+
+    useSelector.mockImplementation((state) => state({
+      writeField: {
+        tags: [],
+      },
+    }));
+  });
+
+  const renderTagsFormContainer = () => render((
+    <TagsFormContainer />
+  ));
+
+  describe('render Tag Form Container contents text', () => {
+    it('renders tag form text', () => {
+      const { getByPlaceholderText, container } = renderTagsFormContainer();
+
+      expect(getByPlaceholderText('태그를 입력하세요')).not.toBeNull();
+      expect(container).toHaveTextContent('태그');
+    });
+  });
+
+  describe('calls dispatch tags change action', () => {
+    const tags = ['JavaScript', 'React'];
+    it('change tags', () => {
+      const { getByPlaceholderText } = renderTagsFormContainer();
+
+      const input = getByPlaceholderText('태그를 입력하세요');
+
+      tags.forEach((tag) => {
+        fireEvent.change(input, { target: { value: tag } });
+
+        fireEvent.keyPress(input, { key: 'Enter', code: 13, charCode: 13 });
+
+        expect(input).toHaveValue('');
+      });
+      expect(dispatch).toBeCalledWith({
+        type: 'application/changeWriteField',
+        payload: { name: 'tags', value: tags },
+      });
+    });
+  });
+});

src/pages/WritePage.jsx

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import TagFormContainer from '../containers/write/TagsFormContainer';
+
 import Responsive from '../styles/Responsive';
 
 const IntroducePage = () => (
@@ -9,11 +11,17 @@ const IntroducePage = () => (
       <input type="text" placeholder="제목을 입력하세요" />
     </div>
     <div>
-      <textarea rows="10" cols="100" placeholder="내용" />
+      <span>모집 마감 날짜</span>
+      <input type="date" />
     </div>
     <div>
-      <input type="text" placeholder="태그를 입력하세요" />
+      <span>참여 인원 수</span>
+      <input type="number" />
+    </div>
+    <div>
+      <textarea rows="10" cols="100" placeholder="내용" />
     </div>
+    <TagFormContainer />
     <div>
       <button type="button">저장</button>
     </div>

src/pages/WritePage.test.jsx

@@ -1,10 +1,26 @@
 import React from 'react';
 
+import { useDispatch, useSelector } from 'react-redux';
+
 import { render } from '@testing-library/react';
 
 import WritePage from './WritePage';
 
 describe('WritePage', () => {
+  const dispatch = jest.fn();
+
+  beforeEach(() => {
+    dispatch.mockClear();
+
+    useDispatch.mockImplementation(() => dispatch);
+
+    useSelector.mockImplementation((state) => state({
+      writeField: {
+        tags: [],
+      },
+    }));
+  });
+
   const renderWritePage = () => render((
     <WritePage />
   ));
@@ -21,8 +37,14 @@ describe('WritePage', () => {
 
       expect(getByPlaceholderText('제목을 입력하세요')).not.toBeNull();
       expect(getByPlaceholderText('내용')).not.toBeNull();
-      expect(getByPlaceholderText('태그를 입력하세요')).not.toBeNull();
       expect(getByText('저장')).not.toBeNull();
     });
+
+    it('renders tag form text', () => {
+      const { getByPlaceholderText, container } = renderWritePage();
+
+      expect(getByPlaceholderText('태그를 입력하세요')).not.toBeNull();
+      expect(container).toHaveTextContent('태그');
+    });
   });
 });