Skip to content

[Feature] No exist participants #101

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
saseungmin merged 1 commit into from
Dec 12, 2020
Merged

[Feature] No exist participants #101

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 13 additions & 2 deletions src/components/introduce/modals/ParticipantListModal.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -105,13 +112,17 @@ const ParticipantListModal = ({
<div>승인 여부</div>
</ParticipantTitleWrapper>
<ParticipantListWrapper>
{participants.length && participants.map((participant) => (
{participants.length ? participants.map((participant) => (
<ParticipantList
key={participant.id}
participant={participant}
onUpdate={() => onUpdate(participant.id)}
/>
))}
)) : (
<NoExistListWrapper>
신청자가 존재하지 않습니다.
</NoExistListWrapper>
)}
</ParticipantListWrapper>
<div className="buttons">
<StyledButton onClick={onClose}>닫기</StyledButton>
Expand Down
88 changes: 50 additions & 38 deletions src/components/introduce/modals/ParticipantListModal.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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('신청자가 존재하지 않습니다.');
});
});
});
Expand Down