@channel.io/bezier-react 3.1.3 → 3.1.4

package/src/components/Avatar/Avatar.test.tsx

@@ -1,11 +1,6 @@
 import { render } from '~/src/utils/test'
 
-import {
-  AVATAR_TEST_ID,
-  AVATAR_WRAPPER_TEST_ID,
-  Avatar,
-  STATUS_WRAPPER_TEST_ID,
-} from './Avatar'
+import { AVATAR_WRAPPER_TEST_ID, Avatar } from './Avatar'
 import type { AvatarProps } from './Avatar.types'
 
 describe('Avatar >', () => {
@@ -35,75 +30,10 @@ describe('Avatar >', () => {
       />
     )
 
-  it('Snapshot', () => {
-    const { getByTestId } = renderAvatar()
-    const img = getByTestId(AVATAR_TEST_ID)
-
-    expect(img).toMatchSnapshot()
-  })
-
   it('renders disabled style', () => {
     const { getByTestId } = renderAvatar({ disabled: true })
     const wrapper = getByTestId(AVATAR_WRAPPER_TEST_ID)
 
     expect(wrapper).toHaveStyle('opacity: var(--opacity-disabled)')
   })
-
-  it('renders border style', () => {
-    const { getByTestId } = renderAvatar({ showBorder: true })
-    const img = getByTestId(AVATAR_TEST_ID)
-
-    // NOTE(@ed): psuedo element 스타일 테스트가 어려워, 스냅샷 테스트로 대체
-    expect(img).toMatchSnapshot()
-  })
-
-  it('should have right -2px, bottom -2px style on StatusWrapper', () => {
-    const { getByTestId } = renderAvatar({ status: 'online' })
-    const statusWrapper = getByTestId(STATUS_WRAPPER_TEST_ID)
-
-    expect(statusWrapper).toMatchSnapshot()
-  })
-
-  it('should have right 2px, bottom 2px style on StatusWrapper when show border', () => {
-    const { getByTestId } = renderAvatar({ status: 'online', showBorder: true })
-    const statusWrapper = getByTestId(STATUS_WRAPPER_TEST_ID)
-
-    expect(statusWrapper).toMatchSnapshot()
-  })
-
-  it('should have right 4px, bottom 4px style on StatusWrapper when size grater then 72', () => {
-    const { getByTestId } = renderAvatar({ status: 'online', size: '72' })
-    const statusWrapper = getByTestId(STATUS_WRAPPER_TEST_ID)
-
-    expect(statusWrapper).toMatchSnapshot()
-  })
-
-  it('should have right 8px, bottom 8px style on StatusWrapper when size grater then 72 and show border', () => {
-    const { getByTestId } = renderAvatar({
-      status: 'online',
-      size: '72',
-      showBorder: true,
-    })
-    const statusWrapper = getByTestId(STATUS_WRAPPER_TEST_ID)
-
-    expect(statusWrapper).toMatchSnapshot()
-  })
-
-  it('should have right 4px, bottom 4px style on StatusWrapper when size grater then 90', () => {
-    const { getByTestId } = renderAvatar({ status: 'online', size: '90' })
-    const statusWrapper = getByTestId(STATUS_WRAPPER_TEST_ID)
-
-    expect(statusWrapper).toMatchSnapshot()
-  })
-
-  it('should have right 8px, bottom 8px style on StatusWrapper when size grater then 90 and show border', () => {
-    const { getByTestId } = renderAvatar({
-      status: 'online',
-      size: '90',
-      showBorder: true,
-    })
-    const statusWrapper = getByTestId(STATUS_WRAPPER_TEST_ID)
-
-    expect(statusWrapper).toMatchSnapshot()
-  })
 })

package/src/components/Avatar/Avatar.tsx

@@ -29,8 +29,8 @@ export function useAvatarRadiusToken() {
 }
 
 export const AVATAR_WRAPPER_TEST_ID = 'bezier-avatar-wrapper'
-export const AVATAR_TEST_ID = 'bezier-avatar'
-export const STATUS_WRAPPER_TEST_ID = 'bezier-status-wrapper'
+const AVATAR_TEST_ID = 'bezier-avatar'
+const STATUS_WRAPPER_TEST_ID = 'bezier-status-wrapper'
 
 /**
  * `Avatar` is a component for representing some profile image.

package/src/components/AvatarGroup/AvatarGroup.test.tsx

@@ -44,12 +44,6 @@ describe('AvatarGroup', () => {
       props.ellipsisType = 'icon'
     })
 
-    it('Snapshot', () => {
-      const { getByRole } = renderComponent()
-      const rendered = getByRole('group')
-      expect(rendered).toMatchSnapshot()
-    })
-
     it('should render ellipsis icon when avatar count is more than max', () => {
       const { getByTestId } = renderComponent()
       const rendered = getByTestId(AVATAR_GROUP_ELLIPSIS_ICON_TEST_ID)
@@ -69,12 +63,6 @@ describe('AvatarGroup', () => {
       props.ellipsisType = 'count'
     })
 
-    it('Snapshot', () => {
-      const { getByRole } = renderComponent()
-      const rendered = getByRole('group')
-      expect(rendered).toMatchSnapshot()
-    })
-
     it('should render ellipsis count when avatar count is more than max', () => {
       const { getByText } = renderComponent()
       const rendered = getByText('+1')

package/src/components/Badge/Badge.tsx

@@ -9,7 +9,7 @@ import { Icon } from '~/src/components/Icon'
 
 import { type BadgeProps } from './Badge.types'
 
-export const BADGE_TEST_ID = 'bezier-badge'
+const BADGE_TEST_ID = 'bezier-badge'
 
 /**
  * `Badge` is a component for representing badge, which consists of text and icon.
@@ -26,7 +26,7 @@ export const BADGE_TEST_ID = 'bezier-badge'
  */
 export const Badge = memo(
   forwardRef<HTMLDivElement, BadgeProps>(function Badge(
-    { size = 'm', variant = 'default', truncated ,icon, children, ...rest },
+    { size = 'm', variant = 'default', truncated, icon, children, ...rest },
     forwardedRef
   ) {
     return (

package/src/components/Checkbox/Checkbox.tsx

@@ -98,6 +98,11 @@ function CheckboxImpl<Checked extends CheckedState>(
   )
 }
 
+/* NOTE: This is a workaround to avoid infinite type recursion when directly using `ReturnType` */
+type ReturnTypeOfCheckboxImpl<Checked extends CheckedState> = ReturnType<
+  typeof CheckboxImpl<Checked>
+>
+
 /**
  * `Checkbox` is a control that allows the user to toggle between checked and not checked.
  * It can be used with labels or standalone.
@@ -131,4 +136,4 @@ export const Checkbox = forwardRef(CheckboxImpl) as <
   props: CheckboxProps<Checked> & {
     ref?: React.ForwardedRef<HTMLButtonElement>
   }
-) => ReturnType<typeof CheckboxImpl<Checked>>
+) => ReturnTypeOfCheckboxImpl<Checked>

package/src/components/Divider/Divider.test.tsx

@@ -1,6 +1,6 @@
 import { render } from '~/src/utils/test'
 
-import { DIVIDER_TEST_ID, Divider } from './Divider'
+import { Divider } from './Divider'
 import { type DividerProps } from './Divider.types'
 
 import styles from './Divider.module.scss'
@@ -11,8 +11,8 @@ describe('Divider', () => {
 
   describe('no props specified', () => {
     it('should render default Divider', () => {
-      const { getByTestId } = renderDivider()
-      const divider = getByTestId(DIVIDER_TEST_ID)
+      const { getByRole } = renderDivider()
+      const divider = getByRole('separator')
       expect(divider).toHaveClass(styles.Divider)
       expect(divider).toHaveAttribute('role', 'separator')
     })
@@ -20,37 +20,36 @@ describe('Divider', () => {
 
   describe('accessibility', () => {
     it('should render with an separator role', () => {
-      const { getByTestId } = renderDivider()
-      const divider = getByTestId(DIVIDER_TEST_ID)
+      const { getByRole } = renderDivider()
+      const divider = getByRole('separator')
 
       expect(divider).toHaveAttribute('role', 'separator')
     })
 
     it('should render horizontal divider without aria-orientation attribute', () => {
-      const { getByTestId } = renderDivider({
+      const { getByRole } = renderDivider({
         orientation: 'horizontal',
       })
-      const divider = getByTestId(DIVIDER_TEST_ID)
+      const divider = getByRole('separator')
 
       expect(divider).not.toHaveAttribute('aria-orientation')
     })
 
     it('should render vertical divider with aria-orientation attribute', () => {
-      const { getByTestId } = renderDivider({
+      const { getByRole } = renderDivider({
         orientation: 'vertical',
       })
-      const divider = getByTestId(DIVIDER_TEST_ID)
+      const divider = getByRole('separator')
 
       expect(divider).toHaveAttribute('aria-orientation', 'vertical')
     })
 
     it('should not have aria attributes when decorative is true', () => {
-      const { getByTestId } = renderDivider({
+      const { getByRole } = renderDivider({
         decorative: true,
       })
-      const divider = getByTestId(DIVIDER_TEST_ID)
+      const divider = getByRole('separator')
 
-      expect(divider).toHaveAttribute('role', 'none')
       expect(divider).not.toHaveAttribute('aria-orientation')
     })
   })

package/src/components/Divider/Divider.tsx

@@ -9,7 +9,10 @@ import { type DividerProps } from './Divider.types'
 
 import styles from './Divider.module.scss'
 
-export const DIVIDER_TEST_ID = 'bezier-divider'
+/**
+ * @deprecated
+ */
+const DIVIDER_TEST_ID = 'bezier-divider'
 
 /**
  * `Divider` is a component to visually or semantically separate content.
@@ -52,6 +55,7 @@ export const Divider = forwardRef<HTMLDivElement, DividerProps>(
           withoutSideIndent && styles['without-side-indent'],
           className
         )}
+        role="separator"
         data-testid={DIVIDER_TEST_ID}
         {...rest}
       />

package/src/components/Emoji/Emoji.tsx

@@ -11,7 +11,10 @@ import { type EmojiProps } from './Emoji.types'
 
 import styles from './Emoji.module.scss'
 
-export const EMOJI_TEST_ID = 'bezier-emoji'
+/**
+ * @deprecated
+ */
+const EMOJI_TEST_ID = 'bezier-emoji'
 
 const getEmojiUrl = (name: EmojiProps['name'], size: '160' | '80' | '44') => {
   return `https://cf${isDev() ? '.exp' : ''}.channel.io/asset/emoji/images/${size}/${encodeURIComponent(name)}.png`

package/src/components/FormControl/FormControl.test.tsx

@@ -2,7 +2,7 @@ import { isInaccessible } from '@testing-library/react'
 
 import { render } from '~/src/utils/test'
 
-import { FORM_CONTROL_TEST_ID, FormControl } from './FormControl'
+import { FormControl } from './FormControl'
 import { type FormControlProps } from './FormControl.types'
 import {
   MOCK_CONSTS,
@@ -34,44 +34,6 @@ describe('FormControl >', () => {
       </FormControl>
     )
 
-  describe('Snapshot >', () => {
-    it('With single field', () => {
-      const { getByTestId } = renderComponent({
-        children: SingleFieldForm,
-      })
-
-      const rendered = getByTestId(FORM_CONTROL_TEST_ID)
-      expect(rendered).toMatchSnapshot()
-    })
-
-    it('With single field and left label position', () => {
-      const { getByTestId } = renderComponent({
-        labelPosition: 'left',
-        children: SingleFieldForm,
-      })
-
-      const rendered = getByTestId(FORM_CONTROL_TEST_ID)
-      expect(rendered).toMatchSnapshot()
-    })
-
-    it('With multiple field', () => {
-      const { container } = renderComponent({
-        children: MultipleFieldForm,
-      })
-
-      expect(container).toMatchSnapshot()
-    })
-
-    it('With multiple field and left label position', () => {
-      const { container } = renderComponent({
-        labelPosition: 'left',
-        children: MultipleFieldForm,
-      })
-
-      expect(container).toMatchSnapshot()
-    })
-  })
-
   describe('Accessibility >', () => {
     it('With single field', () => {
       const { container } = renderComponent({

package/src/components/FormControl/FormControl.tsx

@@ -36,7 +36,7 @@ const [FormControlContextProvider, useFormControlContext] = createContext<
 
 export { useFormControlContext }
 
-export const FORM_CONTROL_TEST_ID = 'bezier-form-control'
+const FORM_CONTROL_TEST_ID = 'bezier-form-control'
 
 const Container = forwardRef<HTMLElement, ContainerProps>(function Container(
   { labelPosition, children, className, ...rest },

package/src/components/FormHelperText/FormHelperText.test.tsx

@@ -1,11 +1,6 @@
 import { render } from '~/src/utils/test'
 
-import {
-  FORM_ERROR_MESSAGE_TEST_ID,
-  FORM_HELPER_TEXT_TEST_ID,
-  FormErrorMessage,
-  FormHelperText,
-} from './FormHelperText'
+import { FormErrorMessage, FormHelperText } from './FormHelperText'
 import type {
   FormErrorMessageProps,
   FormHelperTextProps,
@@ -30,23 +25,16 @@ describe('FormHelperText >', () => {
       />
     )
 
-  it('Snapshot >', () => {
-    const { getByTestId } = renderFormHelperText()
-    const helperText = getByTestId(FORM_HELPER_TEXT_TEST_ID)
-
-    expect(helperText).toMatchSnapshot()
-  })
-
   it('renders text when children prop is not empty', () => {
-    const { getByTestId } = renderFormHelperText()
-    const helperText = getByTestId(FORM_HELPER_TEXT_TEST_ID)
+    const { getByText } = renderFormHelperText()
+    const helperText = getByText(text)
 
     expect(helperText).toBeInTheDocument()
   })
 
   it('renders nothing when children prop is empty', () => {
-    const { queryByTestId } = renderFormHelperText({ children: '' })
-    const helperText = queryByTestId(FORM_HELPER_TEXT_TEST_ID)
+    const { queryByText } = renderFormHelperText({ children: '' })
+    const helperText = queryByText(text)
 
     expect(helperText).toBeNull()
   })
@@ -71,30 +59,23 @@ describe('FormErrorMessage >', () => {
       />
     )
 
-  it('Snapshot >', () => {
-    const { getByTestId } = renderFormHelperText()
-    const rendered = getByTestId(FORM_ERROR_MESSAGE_TEST_ID)
-
-    expect(rendered).toMatchSnapshot()
-  })
-
   it('renders text when children prop is not empty', () => {
-    const { getByTestId } = renderFormHelperText()
-    const rendered = getByTestId(FORM_ERROR_MESSAGE_TEST_ID)
+    const { getByText } = renderFormHelperText()
+    const rendered = getByText(text)
 
     expect(rendered).toBeInTheDocument()
   })
 
   it('renders nothing when children prop is empty', () => {
-    const { queryByTestId } = renderFormHelperText({ children: '' })
-    const rendered = queryByTestId(FORM_ERROR_MESSAGE_TEST_ID)
+    const { queryByText } = renderFormHelperText({ children: '' })
+    const rendered = queryByText(text)
 
     expect(rendered).toBeNull()
   })
 
   it('should have aria-live="polite" attribute', () => {
-    const { getByTestId } = renderFormHelperText()
-    const rendered = getByTestId(FORM_ERROR_MESSAGE_TEST_ID)
+    const { getByText } = renderFormHelperText()
+    const rendered = getByText(text)
 
     expect(rendered).toHaveAttribute('aria-live', 'polite')
   })

package/src/components/FormHelperText/FormHelperText.tsx

@@ -19,8 +19,15 @@ import type {
 
 import styles from './FormHelperText.module.scss'
 
-export const FORM_HELPER_TEXT_TEST_ID = 'bezier-form-helper-text'
-export const FORM_ERROR_MESSAGE_TEST_ID = 'bezier-form-error-message'
+/**
+ * @deprecated
+ */
+const FORM_HELPER_TEXT_TEST_ID = 'bezier-form-helper-text'
+
+/**
+ * @deprecated
+ */
+const FORM_ERROR_MESSAGE_TEST_ID = 'bezier-form-error-message'
 
 const BaseHelperText = forwardRef<HTMLSpanElement, BaseHelperTextProps>(
   function BaseHelperText(props, forwardedRef) {

package/src/components/FormLabel/FormLabel.test.tsx

@@ -23,13 +23,6 @@ describe('FormLabel >', () => {
       />
     )
 
-  it('Snapshot >', () => {
-    const { getByTestId } = renderComponent()
-    const rendered = getByTestId(FORM_LABEL_TEST_ID)
-
-    expect(rendered).toMatchSnapshot()
-  })
-
   it('renders text when children prop is not empty', () => {
     const { getByTestId } = renderComponent()
     const rendered = getByTestId(FORM_LABEL_TEST_ID)

package/src/components/Help/Help.test.tsx

@@ -20,20 +20,6 @@ describe('Help >', () => {
       />
     )
 
-  it('Snapshot >', () => {
-    const { getByTestId } = renderComponent()
-    const rendered = getByTestId(HELP_TEST_ID)
-
-    expect(rendered).toMatchSnapshot()
-  })
-
-  it('renders text when children prop is not empty', () => {
-    const { getByTestId } = renderComponent()
-    const rendered = getByTestId(HELP_TEST_ID)
-
-    expect(rendered).toBeInTheDocument()
-  })
-
   it('renders nothing when children prop is empty', () => {
     const { queryByTestId } = renderComponent({ children: '' })
     const rendered = queryByTestId(HELP_TEST_ID)

package/src/components/LegacyTooltip/LegacyTooltip.test.tsx

@@ -42,18 +42,6 @@ describe('Tooltip test >', () => {
       />
     )
 
-  it('Tooltip with default props', () => {
-    const { baseElement, getByTestId } = renderTooltip()
-
-    act(() => {
-      fireEvent.mouseOver(getByTestId(TOOLTIP_TEST_ID))
-
-      jest.runAllTimers()
-    })
-
-    expect(baseElement).toMatchSnapshot()
-  })
-
   it('TooltipContent not rendered at first', async () => {
     const { queryByTestId } = renderTooltip()
 

package/src/components/Modal/Modal.test.tsx

@@ -157,6 +157,7 @@ describe('Modal', () => {
       it("should have proper 'aria-labelledby' attribute (only title)", () => {
         const { getByRole } = renderOpenedModal({
           modalHeaderProps: { title: TITLE_TEXT, subtitle: null },
+          modalContentProps: { 'aria-describedby': undefined },
         })
         expect(getByRole('dialog', { name: TITLE_TEXT })).toBeInTheDocument()
       })
@@ -164,6 +165,7 @@ describe('Modal', () => {
       it("should have proper 'aria-labelledby' attribute (hidden title)", () => {
         const { getByRole } = renderOpenedModal({
           modalHeaderProps: { title: TITLE_TEXT, subtitle: null, hidden: true },
+          modalContentProps: { 'aria-describedby': undefined },
         })
         expect(getByRole('dialog', { name: TITLE_TEXT })).toBeInTheDocument()
       })
@@ -248,6 +250,7 @@ describe('Modal', () => {
 
       it("should be visually hidden when the 'hidden' prop is true", () => {
         const { queryByRole } = renderOpenedModal({
+          modalContentProps: { 'aria-describedby': undefined },
           modalHeaderProps: { title: TITLE_TEXT, hidden: true },
         })
         /**
@@ -330,7 +333,11 @@ describe('Modal', () => {
           <ModalTrigger>
             <button type="button">{TRIGGER_TEXT}</button>
           </ModalTrigger>
-          <ModalContent>
+          <ModalContent aria-describedby={undefined}>
+            <ModalHeader
+              hidden
+              title={TITLE_TEXT}
+            />
             <ModalBody>
               <input type="text" />
             </ModalBody>

package/src/components/NavGroup/NavGroup.tsx

@@ -21,8 +21,15 @@ import type { NavGroupProps } from './NavGroup.types'
 
 import styles from './NavGroup.module.scss'
 
-export const NAV_GROUP_TEST_ID = 'bezier-nav-group'
-export const NAV_GROUP_LEFT_ICON_TEST_ID = 'bezier-nav-group-left-icon'
+/**
+ * @deprecated
+ */
+const NAV_GROUP_TEST_ID = 'bezier-nav-group'
+
+/**
+ * @deprecated
+ */
+const NAV_GROUP_LEFT_ICON_TEST_ID = 'bezier-nav-group-left-icon'
 
 export const NavGroup = forwardRef<HTMLButtonElement, NavGroupProps>(
   function NavGroup(

package/src/components/NavItem/NavItem.tsx

@@ -11,8 +11,15 @@ import type { NavItemProps } from './NavItem.types'
 
 import styles from './NavItem.module.scss'
 
-export const NAV_ITEM_TEST_ID = 'bezier-nav-item'
-export const NAV_ITEM_LEFT_ICON_TEST_ID = 'bezier-nav-item-left-icon'
+/**
+ * @deprecated
+ */
+const NAV_ITEM_TEST_ID = 'bezier-nav-item'
+
+/**
+ * @deprecated
+ */
+const NAV_ITEM_LEFT_ICON_TEST_ID = 'bezier-nav-item-left-icon'
 
 /**
  * `NavItem` is a component for an item where you can navigate to another link.

package/src/components/Slider/Slider.test.tsx

@@ -1,4 +1,4 @@
-import { isInaccessible, waitFor } from '@testing-library/react'
+import { isInaccessible } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 
 import { render } from '~/src/utils/test'
@@ -16,13 +16,6 @@ describe('Slider', () => {
     user = userEvent.setup()
   })
 
-  describe('Snapshot', () => {
-    it('should match snapshot', () => {
-      const { container } = renderSlider({ defaultValue: [5], guide: [5] })
-      expect(container).toMatchSnapshot()
-    })
-  })
-
   describe('ARIA', () => {
     it('should be accessible', () => {
       const { container } = renderSlider()

package/src/components/SmoothCornersBox/SmoothCornersBox.test.tsx

@@ -9,11 +9,6 @@ describe('SmoothCornersBox', () => {
   ) => render(<SmoothCornersBox {...rest}>{children}</SmoothCornersBox>)
 
   describe('Style', () => {
-    it('snapshot with default value', () => {
-      const { container } = renderSmoothCornersBox()
-      expect(container).toMatchSnapshot()
-    })
-
     it('each style property must have the correct unit.', () => {
       const children = 'foo'
       const { getByText } = renderSmoothCornersBox({