@channel.io/bezier-react 3.1.1 → 3.1.3

package/dist/types/components/SegmentedControl/SegmentedControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../../../src/components/SegmentedControl/SegmentedControl.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,GAAG,EAKT,MAAM,OAAO,CAAA;AACd,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAkB9B,OAAO,EAEL,KAAK,yBAAyB,EAC9B,KAAK,qBAAqB,EAE1B,KAAK,+BAA+B,EACpC,KAAK,4BAA4B,EAEjC,KAAK,oBAAoB,EAC1B,MAAM,0BAA0B,CAAA;AA6IjC;;;;;GAKG;AACH,eAAO,MAAM,uBAAuB,EAA+B,CACjE,KAAK,EAAE,4BAA4B,GAAG;IACpC,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,CAAA;CACzC,KACE,GAAG,CAAC,OAAO,CAAA;AAEhB;;;;;GAKG;AACH,eAAO,MAAM,0BAA0B,EAA4B,CACjE,KAAK,SAAS,MAAM,EAEpB,KAAK,EAAE,+BAA+B,CAAC,KAAK,CAAC,GAAG;IAC9C,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,CAAA;CACzC,KACE,GAAG,CAAC,OAAO,CAAA;AA+ChB;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,gBAAgB,EAAuC,CAClE,IAAI,SAAS,oBAAoB,EACjC,KAAK,SAAS,MAAM,EAEpB,KAAK,EAAE,qBAAqB,CAAC,IAAI,EAAE,KAAK,CAAC,GAAG;IAC1C,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,CAAA;CACzC,KACE,GAAG,CAAC,OAAO,CAAA;AAoFhB;;;;;;;;GAQG;AACH,eAAO,MAAM,oBAAoB,EAA2C,CAC1E,KAAK,SAAS,MAAM,EAEpB,KAAK,EAAE,yBAAyB,CAAC,KAAK,CAAC,GAAG;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAA;CAC5C,KACE,GAAG,CAAC,OAAO,CAAA"}
+{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../../../src/components/SegmentedControl/SegmentedControl.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,GAAG,EAKT,MAAM,OAAO,CAAA;AACd,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAkB9B,OAAO,EAEL,KAAK,yBAAyB,EAC9B,KAAK,qBAAqB,EAG1B,KAAK,+BAA+B,EACpC,KAAK,4BAA4B,EAEjC,KAAK,oBAAoB,EAC1B,MAAM,0BAA0B,CAAA;AA6IjC;;;;;GAKG;AACH,eAAO,MAAM,uBAAuB,EAA+B,CACjE,KAAK,EAAE,4BAA4B,GAAG;IACpC,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,CAAA;CACzC,KACE,GAAG,CAAC,OAAO,CAAA;AAEhB;;;;;GAKG;AACH,eAAO,MAAM,0BAA0B,EAA4B,CACjE,KAAK,SAAS,MAAM,EAEpB,KAAK,EAAE,+BAA+B,CAAC,KAAK,CAAC,GAAG;IAC9C,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,CAAA;CACzC,KACE,GAAG,CAAC,OAAO,CAAA;AA+ChB;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,gBAAgB,EAAuC,CAClE,IAAI,SAAS,oBAAoB,EACjC,KAAK,SAAS,MAAM,EAEpB,KAAK,EAAE,qBAAqB,CAAC,IAAI,EAAE,KAAK,CAAC,GAAG;IAC1C,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,CAAA;CACzC,KACE,GAAG,CAAC,OAAO,CAAA;AAgGhB;;;;;;;;GAQG;AACH,eAAO,MAAM,oBAAoB,EAA2C,CAC1E,KAAK,SAAS,MAAM,EAEpB,KAAK,EAAE,yBAAyB,CAAC,KAAK,CAAC,GAAG;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAA;CAC5C,KACE,GAAG,CAAC,OAAO,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@channel.io/bezier-react",
-  "version": "3.1.1",
+  "version": "3.1.3",
   "description": "React components library that implements Bezier design system.",
   "repository": {
     "type": "git",
@@ -64,7 +64,7 @@
     "@babel/preset-env": "^7.26.0",
     "@babel/preset-react": "^7.26.3",
     "@babel/preset-typescript": "^7.26.0",
-    "@channel.io/bezier-icons": "0.42.0",
+    "@channel.io/bezier-icons": "0.43.0",
     "@chromatic-com/storybook": "^3.2.2",
     "@figma/code-connect": "^1.2.4",
     "@rollup/plugin-alias": "^5.1.1",
@@ -132,7 +132,7 @@
     }
   },
   "dependencies": {
-    "@channel.io/bezier-tokens": "0.3.0",
+    "@channel.io/bezier-tokens": "0.3.1",
     "@radix-ui/react-checkbox": "^1.1.3",
     "@radix-ui/react-dialog": "^1.1.3",
     "@radix-ui/react-radio-group": "^1.2.2",

package/src/components/SegmentedControl/SegmentedControl.module.scss

@@ -184,5 +184,5 @@
 }
 
 .SegmentedControlItemLabel {
-  padding: 1px 4px;
+  padding: 1px 0;
 }

package/src/components/SegmentedControl/SegmentedControl.tsx

@@ -31,6 +31,7 @@ import {
   type SegmentedControlItemProps,
   type SegmentedControlProps,
   type SegmentedControlRadioGroupProps,
+  type SegmentedControlSize,
   type SegmentedControlTabContentProps,
   type SegmentedControlTabListProps,
   type SegmentedControlTabsProps,
@@ -289,6 +290,17 @@ type ItemProps<Type extends SegmentedControlType> = (Type extends 'radiogroup'
   React.HTMLAttributes<HTMLButtonElement> &
   Partial<SegmentedControlItemProps<Type>>
 
+function getTypography(size: SegmentedControlSize) {
+  return (
+    {
+      xs: '13',
+      s: '13',
+      m: '13',
+      l: '14',
+    } as const
+  )[size]
+}
+
 const Item = forwardRef<HTMLButtonElement, ItemProps<SegmentedControlType>>(
   function Item(
     { children, leftContent, rightContent, className, ...rest },
@@ -324,17 +336,18 @@ const Item = forwardRef<HTMLButtonElement, ItemProps<SegmentedControlType>>(
         <HStack
           className={styles.SegmentedControlItemContainer}
           align="center"
-          spacing={2}
+          spacing={4}
         >
           {leftContent}
+
           <Text
             className={styles.SegmentedControlItemLabel}
             bold
-            truncated
-            typo={size === 'xs' ? '13' : '14'}
+            typo={getTypography(size)}
           >
             {children}
           </Text>
+
           {rightContent}
         </HStack>
       </BaseButton>

package/src/components/TextArea/TextArea.test.tsx

@@ -1,5 +1,4 @@
 import { fireEvent } from '@testing-library/dom'
-import { act } from '@testing-library/react'
 
 import { COMMON_IME_CONTROL_KEYS } from '~/src/hooks/useKeyboardActionLockerWhileComposing'
 import { render } from '~/src/utils/test'
@@ -54,9 +53,7 @@ describe('TextArea', () => {
       const onFocus = jest.fn()
       const { getByRole } = renderComponent({ onFocus, disabled: true })
       const rendered = getByRole('textbox')
-      act(() => {
-        rendered.focus()
-      })
+      rendered.focus()
 
       expect(onFocus).not.toHaveBeenCalled()
     })
@@ -65,9 +62,7 @@ describe('TextArea', () => {
       const onFocus = jest.fn()
       const { getByRole } = renderComponent({ onFocus })
       const rendered = getByRole('textbox')
-      act(() => {
-        rendered.focus()
-      })
+      rendered.focus()
 
       expect(onFocus).toHaveBeenCalled()
     })
@@ -79,9 +74,7 @@ describe('TextArea', () => {
       const { getByRole } = renderComponent({ onChange })
       const rendered = getByRole('textbox')
 
-      act(() => {
-        fireEvent.change(rendered, { target: { value: 'test' } })
-      })
+      fireEvent.change(rendered, { target: { value: 'test' } })
 
       expect(onChange).toHaveBeenCalled()
     })
@@ -92,10 +85,9 @@ describe('TextArea', () => {
       const onBlur = jest.fn()
       const { getByRole } = renderComponent({ onBlur })
       const rendered = getByRole('textbox')
-      act(() => {
-        rendered.focus()
-        rendered.blur()
-      })
+      rendered.focus()
+      rendered.blur()
+
       expect(onBlur).toHaveBeenCalled()
     })
   })

package/src/components/TextField/TextField.test.tsx

@@ -1,15 +1,10 @@
 import { fireEvent } from '@testing-library/dom'
-import { act, within } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 
 import { COMMON_IME_CONTROL_KEYS } from '~/src/hooks/useKeyboardActionLockerWhileComposing'
 import { render } from '~/src/utils/test'
 
-import {
-  TEXT_INPUT_CLEAR_ICON_TEST_ID,
-  TEXT_INPUT_TEST_ID,
-  TextField,
-} from './TextField'
+import { TEXT_INPUT_CLEAR_ICON_TEST_ID, TextField } from './TextField'
 import { type TextFieldProps } from './TextField.types'
 
 describe('TextField', () => {
@@ -29,87 +24,70 @@ describe('TextField', () => {
     )
 
   it('TextField have default attribute', () => {
-    const { getByTestId } = renderComponent()
-    const rendered = getByTestId(TEXT_INPUT_TEST_ID)
-    const inputElement = rendered.getElementsByTagName('input')[0]
-    expect(inputElement).not.toHaveAttribute('disabled')
-    expect(inputElement).not.toHaveAttribute('readOnly')
-    expect(inputElement).not.toHaveAttribute('placeholder')
-    expect(inputElement).not.toHaveAttribute('maxLength')
+    const { getByRole } = renderComponent()
+    const input = getByRole('textbox')
+    expect(input).not.toHaveAttribute('disabled')
+    expect(input).not.toHaveAttribute('readOnly')
+    expect(input).not.toHaveAttribute('placeholder')
+    expect(input).not.toHaveAttribute('maxLength')
   })
 
   it('should have "disabled" attribute when "disabled" props is "true"', () => {
-    const { getByTestId } = renderComponent({ disabled: true })
-    const rendered = getByTestId(TEXT_INPUT_TEST_ID)
-    const inputElement = rendered.getElementsByTagName('input')[0]
-    expect(inputElement).toHaveAttribute('disabled')
+    const { getByRole } = renderComponent({ disabled: true })
+    const input = getByRole('textbox')
+    expect(input).toHaveAttribute('disabled')
   })
 
   it('should have "readOnly" attribute when "readOnly" props is "true"', () => {
-    const { getByTestId } = renderComponent({ readOnly: true })
-    const rendered = getByTestId(TEXT_INPUT_TEST_ID)
-    const inputElement = rendered.getElementsByTagName('input')[0]
-    expect(inputElement).toHaveAttribute('readOnly')
+    const { getByRole } = renderComponent({ readOnly: true })
+    const input = getByRole('textbox')
+    expect(input).toHaveAttribute('readOnly')
   })
 
   it('should have "placeholder" attribute when "placeholder" props is "true"', () => {
-    const { getByTestId } = renderComponent({
+    const { getByRole } = renderComponent({
       placeholder: 'this is placeholder',
     })
-    const rendered = getByTestId(TEXT_INPUT_TEST_ID)
-    const inputElement = rendered.getElementsByTagName('input')[0]
-    expect(inputElement).toHaveAttribute('placeholder', 'this is placeholder')
+    const input = getByRole('textbox')
+    expect(input).toHaveAttribute('placeholder', 'this is placeholder')
   })
 
   it('should have "maxLength" attribute when "maxLength" props is "true"', () => {
-    const { getByTestId } = renderComponent({ maxLength: 5 })
-    const rendered = getByTestId(TEXT_INPUT_TEST_ID)
-    const inputElement = rendered.getElementsByTagName('input')[0]
-    expect(inputElement).toHaveAttribute('maxLength', '5')
+    const { getByRole } = renderComponent({ maxLength: 5 })
+    const input = getByRole('textbox')
+    expect(input).toHaveAttribute('maxLength', '5')
   })
 
-  describe('callback should called', () => {
+  describe('callback should be called', () => {
     it('onFocus', () => {
       const onFocus = jest.fn()
-      const { getByTestId } = renderComponent({ onFocus })
-      const rendered = getByTestId(TEXT_INPUT_TEST_ID)
-      const input = rendered.getElementsByTagName('input')[0]
-      act(() => {
-        input.focus()
-      })
+      const { getByRole } = renderComponent({ onFocus })
+      const input = getByRole('textbox')
+      input.focus()
       expect(onFocus).toHaveBeenCalled()
     })
 
     it('onChange', () => {
       const onChange = jest.fn()
-      const { getByTestId } = renderComponent({ onChange })
-      const rendered = getByTestId(TEXT_INPUT_TEST_ID)
-      const input = rendered.getElementsByTagName('input')[0]
-      act(() => {
-        fireEvent.change(input, { target: { value: 'test' } })
-      })
+      const { getByRole } = renderComponent({ onChange })
+      const input = getByRole('textbox')
+      fireEvent.change(input, { target: { value: 'test' } })
       expect(onChange).toHaveBeenCalled()
     })
 
     it('onKeyDown', () => {
       const onKeyDown = jest.fn()
-      const { getByTestId } = renderComponent({ onKeyDown })
-      const rendered = getByTestId(TEXT_INPUT_TEST_ID)
-      const input = rendered.getElementsByTagName('input')[0]
-      act(() => {
-        fireEvent.keyDown(input, { key: 'A', code: 'KeyA' })
-      })
+      const { getByRole } = renderComponent({ onKeyDown })
+      const input = getByRole('textbox')
+      fireEvent.keyDown(input, { key: 'A', code: 'KeyA' })
       expect(onKeyDown).toHaveBeenCalled()
     })
 
     it('onKeyUp', () => {
       const onKeyUp = jest.fn()
-      const { getByTestId } = renderComponent({ onKeyUp })
-      const rendered = getByTestId(TEXT_INPUT_TEST_ID)
-      const input = rendered.getElementsByTagName('input')[0]
-      act(() => {
-        fireEvent.keyUp(input, { key: 'A', code: 'KeyA' })
-      })
+      const { getByRole } = renderComponent({ onKeyUp })
+      const input = getByRole('textbox')
+      fireEvent.keyUp(input, { key: 'A', code: 'KeyA' })
       expect(onKeyUp).toHaveBeenCalled()
     })
   })
@@ -117,89 +95,65 @@ describe('TextField', () => {
   describe('no callback should called when "disabled" or "readOnly" props are "true"', () => {
     it('onFocus, disabled', () => {
       const onFocus = jest.fn()
-      const { getByTestId } = renderComponent({ onFocus, disabled: true })
-      const rendered = getByTestId(TEXT_INPUT_TEST_ID)
-      const input = rendered.getElementsByTagName('input')[0]
-      act(() => {
-        input.focus()
-      })
+      const { getByRole } = renderComponent({ onFocus, disabled: true })
+      const input = getByRole('textbox')
+      input.focus()
       expect(onFocus).not.toHaveBeenCalled()
     })
 
     it('onFocus, readOnly', () => {
       const onFocus = jest.fn()
-      const { getByTestId } = renderComponent({ onFocus, readOnly: true })
-      const rendered = getByTestId(TEXT_INPUT_TEST_ID)
-      const input = rendered.getElementsByTagName('input')[0]
-      act(() => {
-        input.focus()
-      })
+      const { getByRole } = renderComponent({ onFocus, readOnly: true })
+      const input = getByRole('textbox')
+      input.focus()
       expect(onFocus).not.toHaveBeenCalled()
     })
 
     it('onChange, disabled', () => {
       const onChange = jest.fn()
-      const { getByTestId } = renderComponent({ onChange, disabled: true })
-      const rendered = getByTestId(TEXT_INPUT_TEST_ID)
-      const input = rendered.getElementsByTagName('input')[0]
-      act(() => {
-        fireEvent.change(input, { target: { value: 'test' } })
-      })
+      const { getByRole } = renderComponent({ onChange, disabled: true })
+      const input = getByRole('textbox')
+      fireEvent.change(input, { target: { value: 'test' } })
       expect(onChange).not.toHaveBeenCalled()
     })
 
     it('onChange, readOnly', () => {
       const onChange = jest.fn()
-      const { getByTestId } = renderComponent({ onChange, readOnly: true })
-      const rendered = getByTestId(TEXT_INPUT_TEST_ID)
-      const input = rendered.getElementsByTagName('input')[0]
-      act(() => {
-        fireEvent.change(input, { target: { value: 'test' } })
-      })
+      const { getByRole } = renderComponent({ onChange, readOnly: true })
+      const input = getByRole('textbox')
+      fireEvent.change(input, { target: { value: 'test' } })
       expect(onChange).not.toHaveBeenCalled()
     })
 
     it('onKeyDown, disabled', () => {
       const onKeyDown = jest.fn()
-      const { getByTestId } = renderComponent({ onKeyDown, disabled: true })
-      const rendered = getByTestId(TEXT_INPUT_TEST_ID)
-      const input = rendered.getElementsByTagName('input')[0]
-      act(() => {
-        fireEvent.keyDown(input, { key: 'A', code: 'KeyA' })
-      })
+      const { getByRole } = renderComponent({ onKeyDown, disabled: true })
+      const input = getByRole('textbox')
+      fireEvent.keyDown(input, { key: 'A', code: 'KeyA' })
       expect(onKeyDown).not.toHaveBeenCalled()
     })
 
     it('onKeyDown, readOnly', () => {
       const onKeyDown = jest.fn()
-      const { getByTestId } = renderComponent({ onKeyDown, readOnly: true })
-      const rendered = getByTestId(TEXT_INPUT_TEST_ID)
-      const input = rendered.getElementsByTagName('input')[0]
-      act(() => {
-        fireEvent.keyDown(input, { key: 'A', code: 'KeyA' })
-      })
+      const { getByRole } = renderComponent({ onKeyDown, readOnly: true })
+      const input = getByRole('textbox')
+      fireEvent.keyDown(input, { key: 'A', code: 'KeyA' })
       expect(onKeyDown).not.toHaveBeenCalled()
     })
 
     it('onKeyUp, disabled', () => {
       const onKeyUp = jest.fn()
-      const { getByTestId } = renderComponent({ onKeyUp, disabled: true })
-      const rendered = getByTestId(TEXT_INPUT_TEST_ID)
-      const input = rendered.getElementsByTagName('input')[0]
-      act(() => {
-        fireEvent.keyUp(input, { key: 'A', code: 'KeyA' })
-      })
+      const { getByRole } = renderComponent({ onKeyUp, disabled: true })
+      const input = getByRole('textbox')
+      fireEvent.keyUp(input, { key: 'A', code: 'KeyA' })
       expect(onKeyUp).not.toHaveBeenCalled()
     })
 
     it('onKeyUp, readOnly', () => {
       const onKeyUp = jest.fn()
-      const { getByTestId } = renderComponent({ onKeyUp, readOnly: true })
-      const rendered = getByTestId(TEXT_INPUT_TEST_ID)
-      const input = rendered.getElementsByTagName('input')[0]
-      act(() => {
-        fireEvent.keyUp(input, { key: 'A', code: 'KeyA' })
-      })
+      const { getByRole } = renderComponent({ onKeyUp, readOnly: true })
+      const input = getByRole('textbox')
+      fireEvent.keyUp(input, { key: 'A', code: 'KeyA' })
       expect(onKeyUp).not.toHaveBeenCalled()
     })
   })
@@ -207,9 +161,8 @@ describe('TextField', () => {
   describe('Keyboard event handlers for common ime control keys should not be called while composing', () => {
     it('onKeyDown', async () => {
       const onKeyDown = jest.fn()
-      const { getByTestId } = renderComponent({ onKeyDown })
-      const rendered = getByTestId(TEXT_INPUT_TEST_ID)
-      const input = rendered.getElementsByTagName('input')[0]
+      const { getByRole } = renderComponent({ onKeyDown })
+      const input = getByRole('textbox')
 
       COMMON_IME_CONTROL_KEYS.forEach(async (key) => {
         const isCompositionStartFired = fireEvent.compositionStart(input)
@@ -220,9 +173,8 @@ describe('TextField', () => {
 
     it('onKeyUp', () => {
       const onKeyUp = jest.fn()
-      const { getByTestId } = renderComponent({ onKeyUp })
-      const rendered = getByTestId(TEXT_INPUT_TEST_ID)
-      const input = rendered.getElementsByTagName('input')[0]
+      const { getByRole } = renderComponent({ onKeyUp })
+      const input = getByRole('textbox')
 
       COMMON_IME_CONTROL_KEYS.forEach((key) => {
         const isCompositionStartFired = fireEvent.compositionStart(input)
@@ -243,10 +195,8 @@ describe('TextField', () => {
     //   const rendered = getByTestId(TEXT_INPUT_TEST_ID)
     //   const input = rendered.getElementsByTagName('input')[0]
 
-    //   await act(async () => {
-    //     await user.hover(input)
-    //     input.focus()
-    //   })
+    //   await user.hover(input)
+    //   input.focus()
 
     //   const clearButton = within(rendered).queryByTestId(TEXT_INPUT_CLEAR_ICON_TEST_ID)
     //   expect(clearButton).not.toBeVisible()
@@ -261,48 +211,37 @@ describe('TextField', () => {
     // })
 
     it('appear when filled & hovered', async () => {
-      const { getByTestId } = renderComponent({
+      const { getByRole, getByTestId } = renderComponent({
         value: 'test',
         allowClear: true,
       })
-      const rendered = getByTestId(TEXT_INPUT_TEST_ID)
-      const input = rendered.getElementsByTagName('input')[0]
+      const input = getByRole('textbox')
 
-      await act(async () => {
-        await user.hover(input)
-      })
+      await user.hover(input)
 
-      const clearButton = within(rendered).getByTestId(
-        TEXT_INPUT_CLEAR_ICON_TEST_ID
-      )
+      const clearButton = getByTestId(TEXT_INPUT_CLEAR_ICON_TEST_ID)
       expect(clearButton).toBeVisible()
     })
 
     it('appear when filled & focused', () => {
-      const { getByTestId } = renderComponent({
+      const { getByRole, getByTestId } = renderComponent({
         value: 'test',
         allowClear: true,
       })
-      const rendered = getByTestId(TEXT_INPUT_TEST_ID)
-      const input = rendered.getElementsByTagName('input')[0]
+      const input = getByRole('textbox')
 
-      act(() => {
-        input.focus()
-      })
+      input.focus()
 
-      const clearButton = within(rendered).getByTestId(
-        TEXT_INPUT_CLEAR_ICON_TEST_ID
-      )
+      const clearButton = getByTestId(TEXT_INPUT_CLEAR_ICON_TEST_ID)
       expect(clearButton).toBeVisible()
     })
 
     it('should focus the clear button when Tab key is pressed', async () => {
-      const { getByTestId } = renderComponent({
+      const { getByRole } = renderComponent({
         value: 'test',
         allowClear: true,
       })
-      const rendered = getByTestId(TEXT_INPUT_TEST_ID)
-      const input = rendered.getElementsByTagName('input')[0]
+      const input = getByRole('textbox')
 
       input.focus()
       await user.tab()

package/src/components/Toast/Toast.test.tsx

@@ -17,7 +17,7 @@ describe('Toast', () => {
       const { getByRole } = renderToast({ onDismiss, autoDismiss: false })
       const toast = getByRole('status')
       const closeButton = getByRole('button')
-      closeButton.click()
+      fireEvent.click(closeButton)
       expect(onDismiss).not.toHaveBeenCalled()
       const animationEndEvent = new Event('animationend', {
         bubbles: true,

package/src/components/Toast/useToastContextValues.test.tsx

@@ -1,4 +1,4 @@
-import { act, renderHook } from '@testing-library/react'
+import { renderHook, waitFor } from '@testing-library/react'
 
 import { type ToastType } from './Toast.types'
 import useToastContextValues from './useToastContextValues'
@@ -19,37 +19,37 @@ describe('useToastContextValues', () => {
     expect(result.current.rightToasts).toStrictEqual([])
   })
 
-  it('add()', () => {
+  it('add()', async () => {
     const { result } = renderHook(() => useToastContextValues())
 
-    act(() => {
+    await waitFor(() => {
       result.current.add('0')
-    })
 
-    expect(result.current.leftToasts).toStrictEqual([
-      expect.objectContaining({
-        autoDismiss: false,
-        rightSide: false,
-        id: expect.stringMatching(UUID_V4_REGEX),
-        content: '0',
-        version: 0,
-      }),
-    ])
+      expect(result.current.leftToasts).toStrictEqual([
+        expect.objectContaining({
+          autoDismiss: false,
+          rightSide: false,
+          id: expect.stringMatching(UUID_V4_REGEX),
+          content: '0',
+          version: 0,
+        }),
+      ])
+    })
   })
 
   describe('update()', () => {
-    it('not found', () => {
+    it('not found', async () => {
       const { result } = renderHook(() => useToastContextValues())
 
-      act(() => {
+      await waitFor(() => {
         expect(result.current.update('0', 'Not found')).toBe('')
       })
     })
 
-    it('updated', () => {
+    it('updated', async () => {
       const { result } = renderHook(() => useToastContextValues())
 
-      act(() => {
+      await waitFor(() => {
         result.current.add('0')
       })
       const targetIndex = 0
@@ -58,7 +58,7 @@ describe('useToastContextValues', () => {
         ...targetToast,
         content: 'New Toast',
       }
-      act(() => {
+      await waitFor(() => {
         expect(
           result.current.update(updateTargetToast.id, updateTargetToast.content)
         ).toBe(updateTargetToast.id)
@@ -71,11 +71,11 @@ describe('useToastContextValues', () => {
     })
   })
 
-  it('remove()', () => {
+  it('remove()', async () => {
     const { result } = renderHook(() => useToastContextValues())
 
     let toastId: string
-    act(() => {
+    await waitFor(() => {
       toastId = result.current.add('0')
     })
     expect(result.current.leftToasts).toStrictEqual([
@@ -87,17 +87,17 @@ describe('useToastContextValues', () => {
         version: 0,
       }),
     ])
-    act(() => {
+    await waitFor(() => {
       result.current.remove(toastId)
     })
     expect(result.current.leftToasts).toStrictEqual([])
     expect(result.current.rightToasts).toStrictEqual([])
   })
 
-  it('removeAll()', () => {
+  it('removeAll()', async () => {
     const { result } = renderHook(() => useToastContextValues())
 
-    act(() => {
+    await waitFor(() => {
       result.current.add('0')
     })
 
@@ -111,19 +111,19 @@ describe('useToastContextValues', () => {
       }),
     ])
 
-    act(() => {
+    await waitFor(() => {
       result.current.removeAll()
     })
     expect(result.current.leftToasts).toStrictEqual([])
     expect(result.current.rightToasts).toStrictEqual([])
   })
 
-  it('dismiss()', () => {
+  it('dismiss()', async () => {
     const onDismiss = jest.fn()
     const { result } = renderHook(() => useToastContextValues())
 
     let toastId: string
-    act(() => {
+    await waitFor(() => {
       toastId = result.current.add('0')
     })
     expect(result.current.leftToasts).toStrictEqual([
@@ -135,7 +135,7 @@ describe('useToastContextValues', () => {
         version: 0,
       }),
     ])
-    act(() => {
+    await waitFor(() => {
       result.current.dismiss(toastId, onDismiss)
     })
     expect(onDismiss).toHaveBeenCalledTimes(1)