Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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: 15 additions & 0 deletions src/components/write/TagItem.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import React from 'react';

import styled from '@emotion/styled';

const TagItemWrapper = styled.span``;

const TagItem = ({ tag, onRemove }) => (
<TagItemWrapper
onClick={onRemove}
>
{`#${tag}`}
</TagItemWrapper>
);

export default TagItem;
26 changes: 26 additions & 0 deletions src/components/write/TagItem.test.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import React from 'react';

import { render } from '@testing-library/react';

import TagItem from './TagItem';

describe('TagItem', () => {
const handleRemove = jest.fn();

const renderTagItem = (tag) => render((
<TagItem
tag={tag}
onClick={handleRemove}
/>
));

const tag = 'JavaScript';

describe('render Tag Item contents text', () => {
it('renders tag text', () => {
const { container } = renderTagItem(tag);

expect(container).toHaveTextContent('#JavaScript');
});
});
});
29 changes: 29 additions & 0 deletions src/components/write/TagList.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import React from 'react';

import styled from '@emotion/styled';

import TagItem from './TagItem';

const TagListWrapper = styled.div``;

const TagList = ({ tags, onRemove }) => {
const handleRemove = (removeTag) => {
const removeTags = tags.filter((tag) => tag !== removeTag);

onRemove(removeTags);
};

return (
<TagListWrapper>
{tags.map((tag) => (
<TagItem
key={tag}

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

๋™์ผํ•œ tag๊ฐ€ ์˜ฌ ๊ฒฝ์šฐ๋Š” ์—†์„๊นŒ์š”?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

TagsForm ์ปดํฌ๋„ŒํŠธ์—์„œ ์ค‘๋ณต ๊ฐ’์ด ์žˆ๊ฑฐ๋‚˜ ๋นˆ ๊ฐ’(value)์ด๋ฉด ๋ฐฐ์—ด(inputTags)์— ๋„ฃ์–ด์ฃผ์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

  // TagsForm.jsx

  const validateInput = (value) => {
    if (!value || inputTags.includes(value)) {
      return;
    }

    const resultTags = [...inputTags, value];

    setInputTags(resultTags);
    onChange(resultTags);
  };

  //... ์ƒ๋žต
  const handleSubmit = (e) => {
    if (e.key === 'Enter') {
      validateInput(tag.trim());
      setTag('');
    }
  };

tag={tag}
onRemove={() => handleRemove(tag)}
/>
))}
</TagListWrapper>
);
};

export default TagList;
51 changes: 51 additions & 0 deletions src/components/write/TagList.test.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
import React from 'react';

import { fireEvent, render } from '@testing-library/react';

import TagList from './TagList';

describe('TagList', () => {
const handleRemove = jest.fn();

beforeEach(() => {
handleRemove.mockClear();
});

const renderTagList = (tags) => render((
<TagList
tags={tags}
onRemove={handleRemove}
/>
));

context('without tags', () => {
it('nothing renders tags', () => {
const { container } = renderTagList([]);

expect(container).not.toHaveTextContent('#JavaScript');
});
});

context('with tags', () => {
const tags = ['JavaScript', 'React'];

it('renders tags', () => {
const { container } = renderTagList(tags);

tags.forEach((tag) => {
expect(container).toHaveTextContent(`#${tag}`);
});
});

it('listens click event to remove', () => {
const { getByText } = renderTagList(tags);

tags.forEach((tag) => {
expect(getByText(`#${tag}`)).not.toBeNull();

fireEvent.click(getByText(`#${tag}`));
});
expect(handleRemove).toBeCalledTimes(2);
});
});
});
41 changes: 16 additions & 25 deletions src/components/write/TagsForm.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,16 @@ import React, { useEffect, useState } from 'react';

import styled from '@emotion/styled';

import TagList from './TagList';

const TagsFormWrapper = styled.div``;

const TagsForm = ({ onChange, tags }) => {
const [tag, setTag] = useState('');
const [inputTags, setInputTags] = useState([]);

const validateInput = (value) => {
if (!value) {
return;
}

if (inputTags.includes(value)) {
if (!value || inputTags.includes(value)) {
return;
}

Expand All @@ -24,19 +22,21 @@ const TagsForm = ({ onChange, tags }) => {
};

const handleChange = (e) => {
setTag(e.target.value);
};
const { value } = e.target;

const handleRemove = (removeTag) => {
const removeTags = inputTags.filter((value) => value !== removeTag);
setTag(value);
};

const handleRemove = (removeTags) => {
setInputTags(removeTags);
onChange(removeTags);
};

const handleSubmit = () => {
validateInput(tag.trim());
setTag('');
const handleSubmit = (e) => {
if (e.key === 'Enter') {
validateInput(tag.trim());
setTag('');
}
};

useEffect(() => {
Expand All @@ -53,19 +53,10 @@ const TagsForm = ({ onChange, tags }) => {
onChange={handleChange}
onKeyPress={handleSubmit}
/>
<div>
{inputTags.map((inputTag) => (
<span
key={inputTag}
onClick={() => handleRemove(inputTag)}
onKeyPress={() => {}}
role="button"
tabIndex="-1"
>
{`#${inputTag}`}
</span>
))}
</div>
<TagList
tags={inputTags}
onRemove={handleRemove}
/>
</TagsFormWrapper>
);
};
Expand Down
80 changes: 50 additions & 30 deletions src/components/write/TagsForm.test.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ describe('TagsForm', () => {
handleChange.mockClear();
});

const renderTagsTagsForm = (tags) => render((
const renderTagsForm = (tags) => render((
<TagsForm
tags={tags}
onChange={handleChange}
Expand All @@ -20,63 +20,83 @@ describe('TagsForm', () => {

describe('render Tag Form Container contents text', () => {
it('renders tag form text', () => {
const { getByPlaceholderText, container } = renderTagsTagsForm([]);
const { getByPlaceholderText, container } = renderTagsForm([]);

expect(getByPlaceholderText('ํƒœ๊ทธ๋ฅผ ์ž…๋ ฅํ•˜์„ธ์š”')).not.toBeNull();
expect(container).toHaveTextContent('ํƒœ๊ทธ');
});
});

describe('Check input tag validate', () => {
context('with tag input value', () => {
const tags = ['JavaScript', 'React'];
it('listens write field change events', () => {
const { getByPlaceholderText } = renderTagsTagsForm(['CSS']);
context('with keyPress Enter', () => {
context('with tag input value', () => {
const tags = ['JavaScript', 'React'];
it('listens write field change events', () => {
const { getByPlaceholderText } = renderTagsForm(['CSS']);

const input = getByPlaceholderText('ํƒœ๊ทธ๋ฅผ ์ž…๋ ฅํ•˜์„ธ์š”');
const input = getByPlaceholderText('ํƒœ๊ทธ๋ฅผ ์ž…๋ ฅํ•˜์„ธ์š”');

tags.forEach((tag) => {
fireEvent.change(input, { target: { value: tag } });
tags.forEach((tag) => {
fireEvent.change(input, { target: { value: tag } });

fireEvent.keyPress(input, { key: 'Enter', code: 13, charCode: 13 });

expect(input).toHaveValue('');
});
expect(handleChange).toBeCalledTimes(2);
});
});

context('without tag input value', () => {
const tags = [];
it("doesn't listens write field change events", () => {
const { getByPlaceholderText } = renderTagsForm(tags);

const input = getByPlaceholderText('ํƒœ๊ทธ๋ฅผ ์ž…๋ ฅํ•˜์„ธ์š”');

fireEvent.change(input, { target: { value: '' } });

fireEvent.keyPress(input, { key: 'Enter', code: 13, charCode: 13 });

expect(input).toHaveValue('');
expect(handleChange).not.toBeCalled();
});
expect(handleChange).toBeCalledTimes(2);
});
});

context('without tag input value', () => {
const tags = [];
it("doesn't listens write field change events", () => {
const { getByPlaceholderText } = renderTagsTagsForm(tags);
describe('It is not executed because the current tag value is included.', () => {
const tags = ['JavaScript', 'React'];
it('listens write field change events', () => {
const { getByPlaceholderText } = renderTagsForm(tags);

const input = getByPlaceholderText('ํƒœ๊ทธ๋ฅผ ์ž…๋ ฅํ•˜์„ธ์š”');
const input = getByPlaceholderText('ํƒœ๊ทธ๋ฅผ ์ž…๋ ฅํ•˜์„ธ์š”');

fireEvent.change(input, { target: { value: '' } });
tags.forEach((tag) => {
fireEvent.change(input, { target: { value: tag } });

fireEvent.keyPress(input, { key: 'Enter', code: 13, charCode: 13 });
fireEvent.keyPress(input, { key: 'Enter', code: 13, charCode: 13 });

expect(handleChange).not.toBeCalled();
expect(input).toHaveValue('');

expect(handleChange).not.toBeCalled();
});
});
});
});

describe('It is not executed because the current tag value is included.', () => {
context('without keyPress Enter', () => {
const tags = ['JavaScript', 'React'];
it('listens write field change events', () => {
const { getByPlaceholderText } = renderTagsTagsForm(tags);
it("doesn't listens write field change events", () => {
const { getByPlaceholderText } = renderTagsForm(['CSS']);

const input = getByPlaceholderText('ํƒœ๊ทธ๋ฅผ ์ž…๋ ฅํ•˜์„ธ์š”');

tags.forEach((tag) => {
fireEvent.change(input, { target: { value: tag } });

fireEvent.keyPress(input, { key: 'Enter', code: 13, charCode: 13 });

expect(input).toHaveValue('');
fireEvent.keyPress(input, { key: 'spacebar', code: 33, charCode: 33 });

expect(handleChange).not.toBeCalled();
expect(input).toHaveValue(tag);
});
expect(handleChange).not.toBeCalled();
});
});
});
Expand All @@ -85,14 +105,14 @@ describe('TagsForm', () => {
const tags = ['JavaScript', 'React'];

it('renders Tags are below the input window', () => {
const { container } = renderTagsTagsForm(tags);
const { container } = renderTagsForm(tags);

expect(container).toHaveTextContent('#JavaScript');
expect(container).toHaveTextContent('#React');
});

it('Click event remove tag', () => {
const { getByText, container } = renderTagsTagsForm(tags);
const { getByText, container } = renderTagsForm(tags);

tags.forEach((tag) => {
fireEvent.click(getByText(`#${tag}`));
Expand All @@ -108,7 +128,7 @@ describe('TagsForm', () => {
const tags = [];

it('renders Tags are below the input window', () => {
const { container } = renderTagsTagsForm(tags);
const { container } = renderTagsForm(tags);

expect(container).not.toHaveTextContent('#JavaScript');
expect(container).not.toHaveTextContent('#React');
Expand Down