test(react-bezier): Add test code for click event in Tag Component (c…

…hannel-io#1712)

<!--
  How to write a good PR title:
- Follow [the Conventional Commits
specification](https://www.conventionalcommits.org/en/v1.0.0/).
  - Give as much context as necessary and as little as possible
  - Prefix it with [WIP] while it’s a work in progress
-->

## Self Checklist

- [x] I wrote a PR title in **English** and added an appropriate
**label** to the PR.
- [x] I wrote the commit message in **English** and to follow [**the
Conventional Commits
specification**](https://www.conventionalcommits.org/en/v1.0.0/).
- [x] I [added the
**changeset**](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md)
about the changes that needed to be released. (or didn't have to)
- [x] I wrote or updated **documentation** related to the changes. (or
didn't have to)
- [x] I wrote or updated **tests** related to the changes. (or didn't
have to)
- [x] I tested the changes in various browsers. (or didn't have to)
  - Windows: Chrome, Edge, (Optional) Firefox
  - macOS: Chrome, Edge, Safari, (Optional) Firefox

## Related Issue
<!-- Please link to issue if one exists -->

<!-- Fixes #0000 -->

resolves channel-io#501 

## Summary
<!-- Please brief explanation of the changes made -->

- x 버튼을 눌렀을 때 onClick이 동작하지 않도록 했습니다
- 클릭에 대한 테스트코드를 추가했습니다.

## Details
<!-- Please elaborate description of the changes -->

- x 버튼을 눌렀을 때 `onClick` 함수가 동작하지 않도록 `stopPropagation`을 이용하여 `onDelete`만
동작하도록 만들었습니다.
- 태그를 클릭했을 때 `onClick`, x 버튼을 클릭했을 때 `onDelete` 함수가 동작하는지에 대한 테스트 코드를
추가하였습니다.

### Breaking change? (Yes/No)
<!-- If Yes, please describe the impact and migration path for users -->

No, 특별히 기능에 대한 변경사항이 없습니다.

.changeset/nice-melons-joke.md

@@ -0,0 +1,5 @@
+---
+"@channel.io/bezier-react": patch
+---
+
+fix onDelete function to prevent it from being called when a tag is clicked.

packages/bezier-react/src/components/TagBadge/Tag/Tag.stories.tsx

@@ -45,5 +45,7 @@ export const Primary: StoryObj<typeof Tag> = {
     variant: TagBadgeVariant.Default,
     // eslint-disable-next-line no-console
     onDelete: console.log,
+    // eslint-disable-next-line no-console
+    onClick: console.log,
   },
 }

packages/bezier-react/src/components/TagBadge/Tag/Tag.test.tsx

@@ -1,5 +1,7 @@
 import React from 'react'
 
+import userEvent from '@testing-library/user-event'
+
 import { RoundAbsoluteNumber } from '~/src/foundation'
 
 import { render } from '~/src/utils/testUtils'
@@ -11,12 +13,14 @@ import {
 import { TAGBADGE_VERTICAL_PADDING } from '~/src/components/TagBadge/TagBadgeCommon/constants/TagBadgeStyle'
 
 import {
+  TAG_DELETE_TEST_ID,
   TAG_TEST_ID,
   Tag,
 } from './Tag'
 import type TagProps from './Tag.types'
 
 describe('Tag test >', () => {
+  const user = userEvent.setup()
   let props: TagProps
 
   beforeEach(() => {
@@ -67,4 +71,35 @@ describe('Tag test >', () => {
       expect(lTag).toHaveStyle(`border-radius: ${RoundAbsoluteNumber.R6}px`)
     })
   })
+
+  describe('Click Event Test >', () => {
+    it('onClick function should be called when the tag is clicked', async () => {
+      const onClickFn = jest.fn()
+      const { getByTestId } = renderTag({ onClick: onClickFn })
+
+      await user.click(getByTestId(TAG_TEST_ID))
+
+      expect(onClickFn).toBeCalled()
+    })
+
+    it('onDelete function should be called when the delete icon is clicked', async () => {
+      const onClickFn = jest.fn()
+      const onDeleteFn = jest.fn()
+      const { getByTestId } = renderTag({ onClick: onClickFn, onDelete: onDeleteFn })
+
+      await user.click(getByTestId(TAG_DELETE_TEST_ID))
+
+      expect(onDeleteFn).toBeCalled()
+    })
+
+    it('onClick function should not be called when the delete icon is clicked', async () => {
+      const onClickFn = jest.fn()
+      const onDeleteFn = jest.fn()
+      const { getByTestId } = renderTag({ onClick: onClickFn, onDelete: onDeleteFn })
+
+      await user.click(getByTestId(TAG_DELETE_TEST_ID))
+
+      expect(onClickFn).not.toBeCalled()
+    })
+  })
 })

packages/bezier-react/src/components/TagBadge/Tag/Tag.tsx

@@ -30,6 +30,7 @@ import Styled from './Tag.styled'
 
 // TODO: 테스트 코드 작성
 export const TAG_TEST_ID = 'bezier-react-tag'
+export const TAG_DELETE_TEST_ID = 'bezier-react-tag-delete-icon'
 
 export const Tag = memo(forwardRef<HTMLDivElement, TagProps>(function Tag({
   size = TagBadgeSize.M,
@@ -56,8 +57,12 @@ export const Tag = memo(forwardRef<HTMLDivElement, TagProps>(function Tag({
     <Styled.CloseIcon
       source={CancelSmallIcon}
       size={TAG_BADGE_ICON_SIZE}
+      testId={TAG_DELETE_TEST_ID}
       color="txt-black-darker"
-      onClick={onDelete}
+      onClick={(e) => {
+        e.stopPropagation()
+        onDelete(e)
+      }}
     />
   ), [onDelete])
 
@@ -77,7 +82,7 @@ export const Tag = memo(forwardRef<HTMLDivElement, TagProps>(function Tag({
           horizontalPadding={TAG_TEXT_HORIZONTAL_PADDING}
           typo={getProperTagBadgeTypo(size)}
         >
-            { children }
+          { children }
         </TagBadgeText>
       ) }