From f2b986569dd253969d1fd6fd5b3a758009ec99f7 Mon Sep 17 00:00:00 2001 From: saseungmin Date: Thu, 19 Nov 2020 21:48:36 +0900 Subject: [PATCH] [Refactor] Refactoring code reviews - Refactoring of receiving code reviews --- fake-server/createFakeData.js | 36 ++++++++++--------- .../introduce/StudyIntroduceForm.jsx | 19 ++++++++++ .../introduce/StudyIntroduceForm.test.jsx | 31 ++++++++++++++++ src/components/main/StudyGroup.test.jsx | 1 + src/components/main/StudyGroups.test.jsx | 2 +- .../groups/StudyGroupsContainer.test.jsx | 6 ++-- .../introduce/IntroduceContainer.jsx | 4 +-- src/services/api.test.js | 20 +++++------ 8 files changed, 84 insertions(+), 35 deletions(-) create mode 100644 src/components/introduce/StudyIntroduceForm.jsx create mode 100644 src/components/introduce/StudyIntroduceForm.test.jsx diff --git a/fake-server/createFakeData.js b/fake-server/createFakeData.js index acc45c8..46220af 100644 --- a/fake-server/createFakeData.js +++ b/fake-server/createFakeData.js @@ -1,22 +1,24 @@ -/* eslint-disable no-plusplus */ +const range = (length) => Array.from({ length }, (_length, i) => i); +const randomMonth = () => Math.floor((Math.random() * (11 - 1)) + 1); +const randomDay = () => Math.floor((Math.random() * (30 - 1)) + 1); module.exports = () => { - const data = { groups: [] }; + const groups = range(30) + .map((i) => { + const month = randomMonth(); + const day = randomDay(); - for (let i = 0; i < 30; i++) { - const randomMonth = Math.floor((Math.random() * (11 - 1)) + 1); - const randomDay = Math.floor((Math.random() * (30 - 1)) + 1); - - data.groups.push({ - id: i, - moderatorId: `user${i}`, - title: `스터디를 소개합니다. ${i}`, - applyStartDate: `2020-${randomMonth}-${randomDay}`, - applyEndDate: '2020-12-3', - personnel: randomMonth, - contents: `우리는 이것저것 합니다.${i}`, - tags: ['JavaScript', 'React', 'Algorithm'], + return { + id: i, + moderatorId: `user${i}`, + title: `스터디를 소개합니다. ${i}`, + applyStartDate: `2020-${month}-${day}`, + applyEndDate: '2020-12-3', + personnel: month, + contents: `우리는 이것저것 합니다.${i}`, + tags: ['JavaScript', 'React', 'Algorithm'], + }; }); - } - return data; + + return { groups }; }; diff --git a/src/components/introduce/StudyIntroduceForm.jsx b/src/components/introduce/StudyIntroduceForm.jsx new file mode 100644 index 0000000..9d4ba1d --- /dev/null +++ b/src/components/introduce/StudyIntroduceForm.jsx @@ -0,0 +1,19 @@ +import React from 'react'; + +import styled from '@emotion/styled'; +import Tags from '../common/Tags'; + +const StudyIntroduceWrapper = styled.div``; + +const StudyIntroduceForm = ({ group }) => { + const { title, contents, tags } = group; + return ( + +

{title}

+

{contents}

+ + + ); +}; + +export default StudyIntroduceForm; diff --git a/src/components/introduce/StudyIntroduceForm.test.jsx b/src/components/introduce/StudyIntroduceForm.test.jsx new file mode 100644 index 0000000..60abc2b --- /dev/null +++ b/src/components/introduce/StudyIntroduceForm.test.jsx @@ -0,0 +1,31 @@ +import React from 'react'; + +import { render } from '@testing-library/react'; + +import StudyIntroduceForm from './StudyIntroduceForm'; + +describe('StudyIntroduceForm', () => { + const renderStudyIntroduceForm = ({ group }) => render(( + + )); + + it('renders study group title and contents', () => { + const group = { + id: 1, + moderatorId: 'user1', + title: '스터디를 소개합니다. 1', + personnel: 5, + applyEndDate: null, + applyStartDate: null, + contents: '우리는 스터디합니다.', + tags: [], + }; + + const { container } = renderStudyIntroduceForm({ group }); + + expect(container).toHaveTextContent('스터디를 소개합니다. 1'); + expect(container).toHaveTextContent('우리는 스터디합니다.'); + }); +}); diff --git a/src/components/main/StudyGroup.test.jsx b/src/components/main/StudyGroup.test.jsx index 88f6aec..5bee620 100644 --- a/src/components/main/StudyGroup.test.jsx +++ b/src/components/main/StudyGroup.test.jsx @@ -3,6 +3,7 @@ import React from 'react'; import { render } from '@testing-library/react'; import { MemoryRouter } from 'react-router-dom'; + import StudyGroup from './StudyGroup'; describe('StudyGroup', () => { diff --git a/src/components/main/StudyGroups.test.jsx b/src/components/main/StudyGroups.test.jsx index bed0808..77c7834 100644 --- a/src/components/main/StudyGroups.test.jsx +++ b/src/components/main/StudyGroups.test.jsx @@ -3,8 +3,8 @@ import React from 'react'; import { render } from '@testing-library/react'; import { MemoryRouter } from 'react-router-dom'; -import StudyGroups from './StudyGroups'; +import StudyGroups from './StudyGroups'; import STUDY_GROUPS from '../../../fixtures/study-groups'; describe('StudyGroups', () => { diff --git a/src/containers/groups/StudyGroupsContainer.test.jsx b/src/containers/groups/StudyGroupsContainer.test.jsx index f018597..cbf7329 100644 --- a/src/containers/groups/StudyGroupsContainer.test.jsx +++ b/src/containers/groups/StudyGroupsContainer.test.jsx @@ -1,10 +1,10 @@ import React from 'react'; -import { render } from '@testing-library/react'; - import { useDispatch, useSelector } from 'react-redux'; - import { MemoryRouter } from 'react-router-dom'; + +import { render } from '@testing-library/react'; + import StudyGroupsContainer from './StudyGroupsContainer'; describe('StudyGroupsContainer', () => { diff --git a/src/containers/introduce/IntroduceContainer.jsx b/src/containers/introduce/IntroduceContainer.jsx index c717083..943c40c 100644 --- a/src/containers/introduce/IntroduceContainer.jsx +++ b/src/containers/introduce/IntroduceContainer.jsx @@ -6,6 +6,7 @@ import styled from '@emotion/styled'; import { loadStudyGroup } from '../../reducers/slice'; import { get } from '../../../utils'; +import StudyIntroduceForm from '../../components/introduce/StudyIntroduceForm'; const IntroduceContainerWrapper = styled.div``; @@ -26,8 +27,7 @@ const IntroduceContainer = ({ groupId }) => { return ( -

{group.title}

-

{group.contents}

+ ); }; diff --git a/src/services/api.test.js b/src/services/api.test.js index 0f1eab2..c2f5fc6 100644 --- a/src/services/api.test.js +++ b/src/services/api.test.js @@ -10,18 +10,12 @@ import STUDY_GROUP from '../../fixtures/study-group'; jest.mock('axios'); describe('api', () => { - beforeEach(() => { - jest.clearAllMocks(); - }); - - const axiosMockResolved = (data) => { - axios.get.mockResolvedValue({ data }); - }; - describe('getStudyGroups', () => { - it('returns study groups list', async () => { - axiosMockResolved(STUDY_GROUPS); + beforeEach(() => { + axios.get.mockResolvedValue({ data: STUDY_GROUPS }); + }); + it('returns study groups list', async () => { await expect(getStudyGroups()).resolves.toEqual(STUDY_GROUPS); expect(axios.get).toHaveBeenCalledWith( @@ -31,10 +25,12 @@ describe('api', () => { }); describe('getStudyGroup', () => { - const { id } = STUDY_GROUP; + beforeEach(() => { + axios.get.mockResolvedValue({ data: STUDY_GROUP }); + }); it('returns study group detail', async () => { - axiosMockResolved(STUDY_GROUP); + const { id } = STUDY_GROUP; await expect(getStudyGroup(id)).resolves.toEqual(STUDY_GROUP);