@channel.io/bezier-react 3.1.2 → 3.1.4

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/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/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({

package/src/components/Switch/Switch.test.tsx

@@ -2,7 +2,7 @@ import userEvent from '@testing-library/user-event'
 
 import { render } from '~/src/utils/test'
 
-import { SWITCH_TEST_ID, Switch } from './Switch'
+import { Switch } from './Switch'
 import { type SwitchProps } from './Switch.types'
 
 describe('Switch', () => {
@@ -12,19 +12,19 @@ describe('Switch', () => {
   describe('data attribute', () => {
     describe('data-state', () => {
       it('should have data-state="checked" attribute when checked is true', () => {
-        const { getByTestId } = renderComponent({
+        const { getByRole } = renderComponent({
           checked: true,
         })
-        const switchComponent = getByTestId(SWITCH_TEST_ID)
+        const switchComponent = getByRole('switch')
 
         expect(switchComponent).toHaveAttribute('data-state', 'checked')
       })
 
       it('should have data-state="unchecked" attribute when checked is false', () => {
-        const { getByTestId } = renderComponent({
+        const { getByRole } = renderComponent({
           checked: false,
         })
-        const switchComponent = getByTestId(SWITCH_TEST_ID)
+        const switchComponent = getByRole('switch')
 
         expect(switchComponent).toHaveAttribute('data-state', 'unchecked')
       })
@@ -32,19 +32,19 @@ describe('Switch', () => {
 
     describe('data-disabled', () => {
       it('should have data-disabled attribute when disabled is true', () => {
-        const { getByTestId } = renderComponent({
+        const { getByRole } = renderComponent({
           disabled: true,
         })
-        const switchComponent = getByTestId(SWITCH_TEST_ID)
+        const switchComponent = getByRole('switch')
 
         expect(switchComponent).toHaveAttribute('data-disabled')
       })
 
       it('should not have data-disabled attribute when disabled is false', () => {
-        const { getByTestId } = renderComponent({
+        const { getByRole } = renderComponent({
           disabled: false,
         })
-        const switchComponent = getByTestId(SWITCH_TEST_ID)
+        const switchComponent = getByRole('switch')
 
         expect(switchComponent).not.toHaveAttribute('data-disabled')
       })
@@ -56,12 +56,12 @@ describe('Switch', () => {
       const user = userEvent.setup()
       const onClick = jest.fn()
       const onCheckedChange = jest.fn()
-      const { getByTestId } = renderComponent({
+      const { getByRole } = renderComponent({
         defaultChecked: false,
         onClick,
         onCheckedChange,
       })
-      const switchComponent = getByTestId(SWITCH_TEST_ID)
+      const switchComponent = getByRole('switch')
 
       await user.click(switchComponent)
       expect(switchComponent).toHaveAttribute('data-state', 'checked')
@@ -76,11 +76,11 @@ describe('Switch', () => {
     it('should change state when user enters Space key on Switch', async () => {
       const user = userEvent.setup()
       const onCheckedChange = jest.fn()
-      const { getByTestId } = renderComponent({
+      const { getByRole } = renderComponent({
         defaultChecked: false,
         onCheckedChange,
       })
-      const switchComponent = getByTestId(SWITCH_TEST_ID)
+      const switchComponent = getByRole('switch')
 
       await user.tab()
       await user.keyboard('[Space]')
@@ -94,11 +94,11 @@ describe('Switch', () => {
     it('should change state when user enters Enter key on Switch', async () => {
       const user = userEvent.setup()
       const onCheckedChange = jest.fn()
-      const { getByTestId } = renderComponent({
+      const { getByRole } = renderComponent({
         defaultChecked: false,
         onCheckedChange,
       })
-      const switchComponent = getByTestId(SWITCH_TEST_ID)
+      const switchComponent = getByRole('switch')
 
       await user.tab()
       await user.keyboard('[Enter]')
@@ -113,13 +113,13 @@ describe('Switch', () => {
       const user = userEvent.setup()
       const onClick = jest.fn()
       const onCheckedChange = jest.fn()
-      const { getByTestId } = renderComponent({
+      const { getByRole } = renderComponent({
         defaultChecked: false,
         disabled: true,
         onClick,
         onCheckedChange,
       })
-      const switchComponent = getByTestId(SWITCH_TEST_ID)
+      const switchComponent = getByRole('switch')
 
       await user.click(switchComponent)
       expect(switchComponent).toHaveAttribute('data-state', 'unchecked')

package/src/components/Switch/Switch.tsx

@@ -12,7 +12,10 @@ import { type SwitchProps } from './Switch.types'
 
 import styles from './Switch.module.scss'
 
-export const SWITCH_TEST_ID = 'bezier-switch'
+/**
+ * @deprecated
+ */
+const SWITCH_TEST_ID = 'bezier-switch'
 
 /**
  * `Switch` is an input component where user can toggle checked state of the element.

package/src/components/Tag/Tag.test.tsx

@@ -2,7 +2,7 @@ import userEvent from '@testing-library/user-event'
 
 import { render } from '~/src/utils/test'
 
-import { TAG_DELETE_TEST_ID, TAG_TEST_ID, Tag } from './Tag'
+import { Tag } from './Tag'
 import { type TagProps } from './Tag.types'
 
 describe('Tag test >', () => {
@@ -12,28 +12,24 @@ describe('Tag test >', () => {
   beforeEach(() => {
     props = {}
   })
+  const text = 'test'
 
   const renderTag = (optionProps?: TagProps) =>
     render(
       <Tag
         {...props}
         {...optionProps}
-      />
+      >
+        {text}
+      </Tag>
     )
 
-  it('Snapshot >', () => {
-    const { getByTestId } = renderTag()
-    const tag = getByTestId(TAG_TEST_ID)
-
-    expect(tag).toMatchSnapshot()
-  })
-
   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 })
+      const { getByText } = renderTag({ onClick: onClickFn })
 
-      await user.click(getByTestId(TAG_TEST_ID))
+      await user.click(getByText(text))
 
       expect(onClickFn).toHaveBeenCalled()
     })
@@ -41,12 +37,12 @@ describe('Tag test >', () => {
     it('onDelete function should be called when the delete icon is clicked', async () => {
       const onClickFn = jest.fn()
       const onDeleteFn = jest.fn()
-      const { getByTestId } = renderTag({
+      const { getByLabelText } = renderTag({
         onClick: onClickFn,
         onDelete: onDeleteFn,
       })
 
-      await user.click(getByTestId(TAG_DELETE_TEST_ID))
+      await user.click(getByLabelText('delete'))
 
       expect(onDeleteFn).toHaveBeenCalled()
     })
@@ -54,12 +50,12 @@ describe('Tag test >', () => {
     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({
+      const { getByLabelText } = renderTag({
         onClick: onClickFn,
         onDelete: onDeleteFn,
       })
 
-      await user.click(getByTestId(TAG_DELETE_TEST_ID))
+      await user.click(getByLabelText('delete'))
 
       expect(onClickFn).not.toHaveBeenCalled()
     })

package/src/components/Tag/Tag.tsx

@@ -13,8 +13,15 @@ import { type TagProps } from './Tag.types'
 
 import styles from './Tag.module.scss'
 
-export const TAG_TEST_ID = 'bezier-tag'
-export const TAG_DELETE_TEST_ID = 'bezier-tag-delete-icon'
+/**
+ * @deprecated
+ */
+const TAG_TEST_ID = 'bezier-tag'
+
+/**
+ * @deprecated
+ */
+const TAG_DELETE_TEST_ID = 'bezier-tag-delete-icon'
 
 /**
  * `Tag` is a component for representing tag, which shows close icon when `onDelete` property is specified.
@@ -55,6 +62,7 @@ export const Tag = memo(
         {!isNil(onDelete) && (
           <Icon
             role="button"
+            aria-label="delete"
             tabIndex={0}
             className={styles.TagDeleteIcon}
             source={CancelSmallIcon}

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

@@ -4,7 +4,7 @@ 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, TextField } from './TextField'
+import { TextField } from './TextField'
 import { type TextFieldProps } from './TextField.types'
 
 describe('TextField', () => {
@@ -211,7 +211,7 @@ describe('TextField', () => {
     // })
 
     it('appear when filled & hovered', async () => {
-      const { getByRole, getByTestId } = renderComponent({
+      const { getByRole, getByLabelText } = renderComponent({
         value: 'test',
         allowClear: true,
       })
@@ -219,12 +219,12 @@ describe('TextField', () => {
 
       await user.hover(input)
 
-      const clearButton = getByTestId(TEXT_INPUT_CLEAR_ICON_TEST_ID)
+      const clearButton = getByLabelText('Clear input')
       expect(clearButton).toBeVisible()
     })
 
     it('appear when filled & focused', () => {
-      const { getByRole, getByTestId } = renderComponent({
+      const { getByRole, getByLabelText } = renderComponent({
         value: 'test',
         allowClear: true,
       })
@@ -232,7 +232,7 @@ describe('TextField', () => {
 
       input.focus()
 
-      const clearButton = getByTestId(TEXT_INPUT_CLEAR_ICON_TEST_ID)
+      const clearButton = getByLabelText('Clear input')
       expect(clearButton).toBeVisible()
     })