프로젝트 구현(7) - 멤버 추가 컴포넌트 구현

패스트캠퍼스 환급챌린지

22일차 화이팅.,,,

---

멤버 추가 컴포넌트 구현

전의 그룹 생성 컴포넌트를 만들때와 마찬가지로,
먼저 테스트 코드를 만들어준다.

 

AddMembers.spec.jsx

import { render, screen } from "@testing-library/react"

import userEvent from "@testing-library/user-event"

import { RecoilRoot } from "recoil"

import { AddMembers } from "./AddMembers"



const renderComponent = () => {

render(

<RecoilRoot>

<AddMembers />

</RecoilRoot>

)



const input = screen.getByTestId("input-member-names")

const saveButton = screen.getByText('저장')



return {

input,

saveButton,

}

}



describe('그룹 멤버 추가 페이지', () => {

test('그룹 멤버 입력 컴포넌트가 렌더링 되는가', () => {

const {input, saveButton} = renderComponent()



expect(input).not.toBeNull()

expect(saveButton).not.toBeNull()

})



test('그룹 멤버를 입력하지 않고 "저장" 버튼을 클릭시, 에러 메시지를 노출한다', async () => {

const {saveButton} = renderComponent()



await userEvent.click(saveButton)



const errorMessage = await screen.findByText('그룹 멤버들의 이름을 입력해 주세요.')

expect(errorMessage).toBeInTheDocument()

})



test('그룹 멤버의 이름들을 입력한 후, "저장" 버튼을 클릭시, 저장에 성공', async () => {

const {input, saveButton} = renderComponent()



await userEvent.type(input, '철수 영희 영수')

await userEvent.click(saveButton)



const errorMessage = screen.queryByText('그룹 멤버들의 이름을 입력해 주세요.')

expect(errorMessage).toBeNull()

})

})

 

그 다음, AddMembers.jsx 를 구현

 

import { InputTags } from "react-bootstrap-tagsinput"

import { useRecoilState, useRecoilValue } from "recoil"

import { CenteredOverlayForm } from "./CenteredOverlayForm"

import { groupMembersState } from "../state/groupMembers"

import { useState } from "react"

import { groupNameState } from "../state/groupName"



export const AddMembers = () => {

const [groupMembers, setGroupMembers] = useRecoilState(groupMembersState)

const groupName = useRecoilValue(groupNameState)

const [validated, setValidated] = useState(false)



const handleSubmit = (event) => {

event.preventDefault()

setValidated(true)

}



const header = `${groupName} 그룹에 속한 사람들의 이름을 모두 적어 주세요.`

return (

<CenteredOverlayForm

title={header}

validated={validated}

handleSubmit={handleSubmit}

>

<InputTags

data-testid="input-member-names"

placeholder="이름 간 띄어 쓰기"

onTags={(value) => setGroupMembers(value.values)}

/>

{validated && groupMembers.length === 0 && (

<span>그룹 멤버들의 이름을 입력해 주세요.</span>

)}

</CenteredOverlayForm>

)

}

 

state 관리를 위한 groupMembers.js , groupName.js 도 recoil의 atom을 활용해 만들어 준다.

import { atom } from "recoil"


export const groupMembersState = atom({

key: "groupMembers",

default: [],

})

import { atom } from "recoil"


export const groupNameState = atom({

key: "groupName",

default: undefined,

})

---

22일차 인증

---

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

 

http://bit.ly/3Y34pE0

패스트캠퍼스 [직장인 실무교육]