From 8e052e4e59016f57d854ef335759a4b654a41b5a Mon Sep 17 00:00:00 2001 From: saseungmin Date: Tue, 6 Apr 2021 19:57:49 +0900 Subject: [PATCH 1/3] [Refactoring] Change Componenets name - Change Components Files name to ReviewForm --- .../{StudyReviewForm.jsx => ReviewForm.jsx} | 0 ...ReviewForm.test.jsx => ReviewForm.test.jsx} | 18 +++++++++--------- ...ewContainer.jsx => ReviewFormContainer.jsx} | 8 ++++---- ...r.test.jsx => ReviewFormContainer.test.jsx} | 16 ++++++++-------- src/pages/IntroducePage.jsx | 4 ++-- 5 files changed, 23 insertions(+), 23 deletions(-) rename src/components/introduce/{StudyReviewForm.jsx => ReviewForm.jsx} (100%) rename src/components/introduce/{StudyReviewForm.test.jsx => ReviewForm.test.jsx} (79%) rename src/containers/introduce/{StudyReviewContainer.jsx => ReviewFormContainer.jsx} (87%) rename src/containers/introduce/{StudyReviewContainer.test.jsx => ReviewFormContainer.test.jsx} (83%) diff --git a/src/components/introduce/StudyReviewForm.jsx b/src/components/introduce/ReviewForm.jsx similarity index 100% rename from src/components/introduce/StudyReviewForm.jsx rename to src/components/introduce/ReviewForm.jsx diff --git a/src/components/introduce/StudyReviewForm.test.jsx b/src/components/introduce/ReviewForm.test.jsx similarity index 79% rename from src/components/introduce/StudyReviewForm.test.jsx rename to src/components/introduce/ReviewForm.test.jsx index 49fd35f..ab2f465 100644 --- a/src/components/introduce/StudyReviewForm.test.jsx +++ b/src/components/introduce/ReviewForm.test.jsx @@ -2,12 +2,12 @@ import React from 'react'; import { render, fireEvent } from '@testing-library/react'; -import StudyReviewForm from './StudyReviewForm'; +import ReviewForm from './ReviewForm'; import { yesterday } from '../../util/utils'; import STUDY_GROUP from '../../../fixtures/study-group'; -describe('StudyReviewForm', () => { +describe('ReviewForm', () => { beforeEach(() => { jest.clearAllMocks(); }); @@ -17,10 +17,10 @@ describe('StudyReviewForm', () => { const reviewForm = { rating: 3, review: '' }; - const renderStudyReviewForm = ({ + const renderReviewForm = ({ group, time, user, fields = reviewForm, }) => render(( - { }; it('renders study review form', () => { - const { container } = renderStudyReviewForm(userStatusSetting(settings)); + const { container } = renderReviewForm(userStatusSetting(settings)); expect(container).toHaveTextContent('스터디 후기를 작성해주세요!'); }); it('call event change review form', () => { - const { getByPlaceholderText } = renderStudyReviewForm(userStatusSetting(settings)); + const { getByPlaceholderText } = renderReviewForm(userStatusSetting(settings)); const textarea = getByPlaceholderText('후기를 입력해주세요!'); @@ -67,7 +67,7 @@ describe('StudyReviewForm', () => { }); it('call event click for review form', () => { - const { getByText } = renderStudyReviewForm(userStatusSetting(settings)); + const { getByText } = renderReviewForm(userStatusSetting(settings)); fireEvent.click(getByText('후기 등록하기')); @@ -77,7 +77,7 @@ describe('StudyReviewForm', () => { describe('When the user is not approved applicant', () => { it('nothing renders study review form', () => { - const { container } = renderStudyReviewForm(userStatusSetting({ + const { container } = renderReviewForm(userStatusSetting({ participants: [], user: 'user2', })); @@ -89,7 +89,7 @@ describe('StudyReviewForm', () => { context('without user', () => { it('nothing renders study review form', () => { - const { container } = renderStudyReviewForm(userStatusSetting({ + const { container } = renderReviewForm(userStatusSetting({ participants: [], user: null, })); diff --git a/src/containers/introduce/StudyReviewContainer.jsx b/src/containers/introduce/ReviewFormContainer.jsx similarity index 87% rename from src/containers/introduce/StudyReviewContainer.jsx rename to src/containers/introduce/ReviewFormContainer.jsx index 3da2a70..8e8f0ec 100644 --- a/src/containers/introduce/StudyReviewContainer.jsx +++ b/src/containers/introduce/ReviewFormContainer.jsx @@ -6,9 +6,9 @@ import { useSelector, useDispatch } from 'react-redux'; import { getAuth, getGroup } from '../../util/utils'; import { changeStudyReviewFields, setStudyReview } from '../../reducers/groupSlice'; -import StudyReviewForm from '../../components/introduce/StudyReviewForm'; +import ReviewForm from '../../components/introduce/ReviewForm'; -const StudyReviewContainer = () => { +const ReviewFormContainer = () => { const [realTime, setRealTime] = useState(Date.now()); const dispatch = useDispatch(); @@ -35,7 +35,7 @@ const StudyReviewContainer = () => { } return ( - { ); }; -export default StudyReviewContainer; +export default ReviewFormContainer; diff --git a/src/containers/introduce/StudyReviewContainer.test.jsx b/src/containers/introduce/ReviewFormContainer.test.jsx similarity index 83% rename from src/containers/introduce/StudyReviewContainer.test.jsx rename to src/containers/introduce/ReviewFormContainer.test.jsx index 6d800d4..123f614 100644 --- a/src/containers/introduce/StudyReviewContainer.test.jsx +++ b/src/containers/introduce/ReviewFormContainer.test.jsx @@ -7,9 +7,9 @@ import { render, fireEvent } from '@testing-library/react'; import STUDY_GROUP from '../../../fixtures/study-group'; import { yesterday } from '../../util/utils'; -import StudyReviewContainer from './StudyReviewContainer'; +import ReviewFormContainer from './ReviewFormContainer'; -describe('StudyReviewContainer', () => { +describe('ReviewFormContainer', () => { const dispatch = jest.fn(); jest.useFakeTimers(); @@ -37,8 +37,8 @@ describe('StudyReviewContainer', () => { jest.clearAllTimers(); }); - const renderStudyReviewContainer = () => render(( - + const renderReviewFormContainer = () => render(( + )); context('with login and group', () => { @@ -54,7 +54,7 @@ describe('StudyReviewContainer', () => { describe('When you are an approved applicant', () => { it('renders study review form', () => { - const { container } = renderStudyReviewContainer(); + const { container } = renderReviewFormContainer(); expect(container).toHaveTextContent('스터디 후기를 작성해주세요!'); }); @@ -66,7 +66,7 @@ describe('StudyReviewContainer', () => { value: '후기입니다.', }; - const { getByPlaceholderText } = renderStudyReviewContainer(); + const { getByPlaceholderText } = renderReviewFormContainer(); const textarea = getByPlaceholderText('후기를 입력해주세요!'); @@ -80,7 +80,7 @@ describe('StudyReviewContainer', () => { describe('Click the button to submit for study review', () => { it('dispatch actions call setStudyReview', () => { - const { getByText } = renderStudyReviewContainer(); + const { getByText } = renderReviewFormContainer(); fireEvent.click(getByText('후기 등록하기')); @@ -94,7 +94,7 @@ describe('StudyReviewContainer', () => { given('group', () => (null)); it('nothing renders review form', () => { - const { container } = renderStudyReviewContainer(); + const { container } = renderReviewFormContainer(); expect(container).toBeEmptyDOMElement(); }); diff --git a/src/pages/IntroducePage.jsx b/src/pages/IntroducePage.jsx index fb2b855..23bc7a8 100644 --- a/src/pages/IntroducePage.jsx +++ b/src/pages/IntroducePage.jsx @@ -10,7 +10,7 @@ import { loadStudyGroup } from '../reducers/groupSlice'; import Responsive from '../styles/Responsive'; import IntroduceFormContainer from '../containers/introduce/IntroduceFormContainer'; import IntroduceHeaderContainer from '../containers/introduce/IntroduceHeaderContainer'; -import StudyReviewContainer from '../containers/introduce/StudyReviewContainer'; +import ReviewFormContainer from '../containers/introduce/ReviewFormContainer'; const IntroducePageWrapper = styled(Responsive)` margin-top: 6em; @@ -29,7 +29,7 @@ const IntroducePage = ({ params }) => { - + ); }; From 283181332d5cf35df8ab2141909b5c7760ad37da Mon Sep 17 00:00:00 2001 From: saseungmin Date: Tue, 6 Apr 2021 21:58:03 +0900 Subject: [PATCH 2/3] [Feature] Components related to study reviews - Implements ReviewList and Review Components --- src/components/introduce/Review.jsx | 29 ++++++++++++++++++++ src/components/introduce/Review.test.jsx | 28 +++++++++++++++++++ src/components/introduce/ReviewForm.jsx | 6 ++-- src/components/introduce/ReviewForm.test.jsx | 4 +-- src/components/introduce/ReviewList.jsx | 16 +++++++++++ src/components/introduce/ReviewList.test.jsx | 28 +++++++++++++++++++ src/reducers/groupSlice.js | 2 +- src/reducers/groupSlice.test.js | 8 +++--- 8 files changed, 111 insertions(+), 10 deletions(-) create mode 100644 src/components/introduce/Review.jsx create mode 100644 src/components/introduce/Review.test.jsx create mode 100644 src/components/introduce/ReviewList.jsx create mode 100644 src/components/introduce/ReviewList.test.jsx diff --git a/src/components/introduce/Review.jsx b/src/components/introduce/Review.jsx new file mode 100644 index 0000000..86a5154 --- /dev/null +++ b/src/components/introduce/Review.jsx @@ -0,0 +1,29 @@ +import React from 'react'; + +import styled from '@emotion/styled'; + +const ReviewWrapper = styled.div` + +`; + +const Review = ({ review }) => { + const { + id, rating, content, createdDate, + } = review; + + return ( + +
+ {rating} +
+
+ {content} +
+
+ {`${id} | ${createdDate}`} +
+ + ); +}; + +export default Review; diff --git a/src/components/introduce/Review.test.jsx b/src/components/introduce/Review.test.jsx new file mode 100644 index 0000000..7f31dbd --- /dev/null +++ b/src/components/introduce/Review.test.jsx @@ -0,0 +1,28 @@ +import React from 'react'; + +import { render } from '@testing-library/react'; + +import Review from './Review'; + +describe('Review', () => { + const mockReview = { + id: 'test@test.com', + rating: 3, + content: 'review', + createdDate: new Date(), + }; + + const renderReview = (review) => render(( + + )); + + it('Render review contents', () => { + const { container } = renderReview(mockReview); + + expect(container).toHaveTextContent('review'); + expect(container).toHaveTextContent(3); + expect(container).toHaveTextContent('test@test.com'); + }); +}); diff --git a/src/components/introduce/ReviewForm.jsx b/src/components/introduce/ReviewForm.jsx index ee04db4..7f4ad10 100644 --- a/src/components/introduce/ReviewForm.jsx +++ b/src/components/introduce/ReviewForm.jsx @@ -64,7 +64,7 @@ const StudyReviewForm = ({ participants, personnel, applyEndDate, } = group; - const { rating, review } = fields; + const { rating, content } = fields; const applyEndTime = changeDateToTime(applyEndDate); @@ -112,8 +112,8 @@ const StudyReviewForm = ({