diff --git a/src/components/introduce/modals/ParticipantListModal.jsx b/src/components/introduce/modals/ParticipantListModal.jsx index 54d9251..78cafa0 100644 --- a/src/components/introduce/modals/ParticipantListModal.jsx +++ b/src/components/introduce/modals/ParticipantListModal.jsx @@ -82,6 +82,13 @@ const ParticipantListWrapper = styled.div` overflow-y: auto; `; +const NoExistListWrapper = styled.div` + color: ${palette.gray[6]}; + font-size: 1.1rem; + text-align: center; + font-weight: bold; +`; + const StyledButton = styled(Button)` &:last-of-type { margin-left: .7rem; @@ -105,13 +112,17 @@ const ParticipantListModal = ({
승인 여부
- {participants.length && participants.map((participant) => ( + {participants.length ? participants.map((participant) => ( onUpdate(participant.id)} /> - ))} + )) : ( + + 신청자가 존재하지 않습니다. + + )}
닫기 diff --git a/src/components/introduce/modals/ParticipantListModal.test.jsx b/src/components/introduce/modals/ParticipantListModal.test.jsx index 36c40f4..11f51f4 100644 --- a/src/components/introduce/modals/ParticipantListModal.test.jsx +++ b/src/components/introduce/modals/ParticipantListModal.test.jsx @@ -24,62 +24,74 @@ describe('ParticipantListModal', () => { context('with visible', () => { const visible = true; - describe('Contents on the screen', () => { - const participants = [{ - confirm: false, - id: 'test', - }]; + context('with participants', () => { + describe('Contents on the screen', () => { + const participants = [{ + confirm: false, + id: 'test', + }]; - it('renders Modal text', () => { - const { container } = renderParticipantListModal({ visible, participants }); + it('renders Modal text', () => { + const { container } = renderParticipantListModal({ visible, participants }); - expect(container).toHaveTextContent('스터디 신청자 목록 🙋‍♂️'); - expect(container).toHaveTextContent('신청서 보기'); - expect(container).toHaveTextContent('test'); - }); + expect(container).toHaveTextContent('스터디 신청자 목록 🙋‍♂️'); + expect(container).toHaveTextContent('신청서 보기'); + expect(container).toHaveTextContent('test'); + }); - it('click button call close', () => { - const { getByText } = renderParticipantListModal({ visible, participants }); + it('click button call close', () => { + const { getByText } = renderParticipantListModal({ visible, participants }); - const button = getByText('닫기'); + const button = getByText('닫기'); - fireEvent.click(button); + fireEvent.click(button); - expect(handleClose).toBeCalled(); + expect(handleClose).toBeCalled(); + }); }); - }); - context('When confirm is true', () => { - const participants = [{ - confirm: true, - id: 'test', - }]; + context('When confirm is true', () => { + const participants = [{ + confirm: true, + id: 'test', + }]; - it('event is called with user ID after clicking cancel button', () => { - const { getByText } = renderParticipantListModal({ visible, participants }); + it('event is called with user ID after clicking cancel button', () => { + const { getByText } = renderParticipantListModal({ visible, participants }); - const button = getByText('취소하기'); + const button = getByText('취소하기'); - fireEvent.click(button); + fireEvent.click(button); - expect(handleUpdate).toBeCalledWith('test'); + expect(handleUpdate).toBeCalledWith('test'); + }); }); - }); - context('When confirm is false', () => { - const participants = [{ - confirm: false, - id: 'test', - }]; + context('When confirm is false', () => { + const participants = [{ + confirm: false, + id: 'test', + }]; + + it('renders confirm button', () => { + const { getByText } = renderParticipantListModal({ visible, participants }); - it('renders confirm button', () => { - const { getByText } = renderParticipantListModal({ visible, participants }); + const button = getByText('승인하기'); - const button = getByText('승인하기'); + fireEvent.click(button); - fireEvent.click(button); + expect(handleUpdate).toBeCalledWith('test'); + }); + }); + }); + + context('without participants', () => { + const participants = []; + + it('renders "The applicant does not exist." text', () => { + const { container } = renderParticipantListModal({ visible, participants }); - expect(handleUpdate).toBeCalledWith('test'); + expect(container).toHaveTextContent('신청자가 존재하지 않습니다.'); }); }); });