refactor(toast): change toast content props "string" to "react-noe"

Seolhun · Seolhun · commit f8481ac1405c · 2022-07-26T13:21:43.000+09:00
- add toast controller test
- add toast content type
diff --git a/packages/bezier-react/src/components/Toast/Toast.stories.tsx b/packages/bezier-react/src/components/Toast/Toast.stories.tsx
@@ -7,10 +7,13 @@ import { Story, Meta } from '@storybook/react'
 /* Internal depependencies */
 import { styled } from 'Foundation'
 import { iconList, getTitle } from 'Utils/storyUtils'
+import { ProgressBar } from 'Components/ProgressBar'
+import { StackItem, VStack } from 'Components/Stack'
+import { Button, ButtonColorVariant, ButtonStyleVariant } from 'Components/Button'
 import useToast from './useToast'
 import ToastProvider from './ToastProvider'
 import ToastElement from './ToastElement'
-import ToastProps, { ToastAppearance, ToastPreset } from './Toast.types'
+import ToastProps, { ToastAppearance, ToastOptions, ToastPreset } from './Toast.types'
 
 export default {
   title: getTitle(base),
@@ -206,3 +209,53 @@ export const WithZIndex: Story<ToastProps> = () => (
     </ToastProvider>
   </Container>
 )
+
+function CustomContentToastController() {
+  const toast = useToast()
+
+  const onClickCustomButtonInToast = useCallback(() => {
+    toast.removeAllToasts()
+  }, [toast])
+
+  const handleClick = useCallback((option?: ToastOptions) => {
+    toast.addToast((
+      <VStack spacing={6} align="stretch">
+        <StackItem>
+          <Button
+            text="눌러주세요. 모든 토스트가 사라집니다."
+            styleVariant={ButtonStyleVariant.Primary}
+            colorVariant={ButtonColorVariant.Blue}
+            onClick={onClickCustomButtonInToast}
+          />
+        </StackItem>
+        <StackItem>
+          <ProgressBar
+            width="100%"
+            value={Math.random()}
+          />
+        </StackItem>
+      </VStack>
+    ), {
+      preset: ToastPreset.Default,
+      ...option,
+    })
+  }, [
+    toast,
+    onClickCustomButtonInToast,
+  ])
+
+  return (
+    <div>
+      <button type="button" onClick={() => handleClick()}>default</button>
+      <button type="button" onClick={() => handleClick({ autoDismiss: false })}>never dismiss</button>
+    </div>
+  )
+}
+
+export const CustomContent: Story<ToastProps> = () => (
+  <Container id="story-wrapper">
+    <ToastProvider>
+      <CustomContentToastController />
+    </ToastProvider>
+  </Container>
+)
diff --git a/packages/bezier-react/src/components/Toast/Toast.styled.ts b/packages/bezier-react/src/components/Toast/Toast.styled.ts
@@ -95,12 +95,16 @@ const getEllipsisColor = (
 )
 
 export const Content = styled.div<Pick<ToastElementProps, 'actionContent' | 'onClick'>>`
+  display: flex;
+  flex: 1;
   margin: 3px 6px;
   overflow: hidden;
   color: ${({ actionContent, onClick, foundation }) => getEllipsisColor(actionContent, onClick, foundation)};
 `
 
 export const EllipsisableContent = styled.div`
+  display: flex;
+  flex: 1;
   ${ellipsis(5, LineHeightAbsoluteNumber.Lh18)};
 
   overflow: visible;
diff --git a/packages/bezier-react/src/components/Toast/Toast.test.tsx b/packages/bezier-react/src/components/Toast/Toast.test.tsx
@@ -22,13 +22,7 @@ describe('Toast test >', () => {
     }
   })
 
-  const renderToast = (optionProps?: Omit<ToastElementProps,
-  | 'content'
-  | 'onDismiss'
-  | 'transitionDuration'
-  | 'transform'
-  | 'placement'
-  >) => render(<ToastElement {...props} {...optionProps} />)
+  const renderToast = (optionProps?: Partial<ToastElementProps>) => render(<ToastElement {...props} {...optionProps} />)
 
   it('Reset CSS', () => {
     const { getByTestId } = renderToast()
@@ -105,6 +99,56 @@ describe('Toast test >', () => {
     })
   })
 
+  describe('Props - onDismiss', () => {
+    it('onDismiss is called when click Close button,', () => {
+      const onDismiss = jest.fn()
+      const { getByTestId } = renderToast({
+        onDismiss,
+      })
+      const closeToast = getByTestId(`${TOAST_TEST_ID}-close`)
+      closeToast.click()
+      expect(onDismiss).toBeCalledTimes(1)
+    })
+  })
+
+  describe('Props - content', () => {
+    it('content is string', () => {
+      const onDismiss = jest.fn()
+      const { getByTestId } = renderToast({
+        onDismiss,
+        content: 'Hello',
+      })
+      const content = getByTestId(`${TOAST_TEST_ID}-content`)
+      expect(content).toBeInTheDocument()
+      expect(content.childNodes.length).toBe(1)
+    })
+
+    it('content is string with \n', () => {
+      const onDismiss = jest.fn()
+      const { getByTestId } = renderToast({
+        onDismiss,
+        content: 'Hello\nChannelTalk',
+      })
+      const content = getByTestId(`${TOAST_TEST_ID}-content`)
+      expect(content.childNodes.length).toBe(2)
+    })
+
+    it('content is ReactNode', () => {
+      const onDismiss = jest.fn()
+      const { getByTestId } = renderToast({
+        onDismiss,
+        content: (
+          <button type="button">
+            Hello
+          </button>
+        ),
+      })
+      const content = getByTestId(`${TOAST_TEST_ID}-content`)
+      expect(content).toBeInTheDocument()
+      expect(content.childNodes.length).toBe(1)
+    })
+  })
+
   it('z-index Test > ', () => {
     const { getByTestId } = renderToast({ zIndex: 317 })
     const toast = getByTestId(TOAST_TEST_ID)
diff --git a/packages/bezier-react/src/components/Toast/Toast.types.ts b/packages/bezier-react/src/components/Toast/Toast.types.ts
@@ -1,5 +1,5 @@
 /* External dependencies */
-import { ReactNode, ComponentType } from 'react'
+import React, { ReactNode, ComponentType } from 'react'
 import { noop } from 'lodash-es'
 
 /* Internal dependencies */
@@ -44,18 +44,23 @@ interface ToastElementOptions {
   preset?: ToastPreset
   appearance?: ToastAppearance
   iconName?: IconName
+  /**
+   * @deprecated use React.ReactNode content props instead.
+   */
   actionContent?: string
   transitionDuration: TransitionDuration
   transform: InjectedInterpolation
   placement: ToastPlacement
   zIndex?: number
   onClick?: React.MouseEventHandler
-  onDismiss: React.MouseEventHandler
+  onDismiss: React.MouseEventHandler<HTMLDivElement>
 }
 
+export type ToastContent = React.ReactNode
+
 export default interface ToastElementProps extends
   BezierComponentProps,
-  Required<ContentProps<string>>,
+  Required<ContentProps<ToastContent>>,
   ToastElementOptions {}
 
 export interface ToastProviderProps {
@@ -87,10 +92,10 @@ export const defaultOptions: ToastOptions = {
   rightSide: false,
 }
 
-export type ToastType = ToastOptions & { id: ToastId, content: string }
+export type ToastType = ToastOptions & { id: ToastId, content: ToastContent }
 
 export interface ToastContextType {
-  add: (content: string, options: ToastOptions) => ToastId
+  add: (content: ToastContent, options: ToastOptions) => ToastId
   remove: (id: ToastId) => void
   removeAll: () => void
   leftToasts: ToastType[]
diff --git a/packages/bezier-react/src/components/Toast/ToastController.test.tsx b/packages/bezier-react/src/components/Toast/ToastController.test.tsx
@@ -0,0 +1,80 @@
+/* External dependencies */
+import React from 'react'
+import _ from 'lodash-es'
+import { act } from '@testing-library/react'
+
+/* Internal dependencies */
+import { css, TransitionDuration } from 'Foundation'
+import { render } from 'Utils/testUtils'
+import { ToastControllerProps, ToastPlacement } from './Toast.types'
+import ToastElement from './ToastElement'
+import ToastController from './ToastController'
+
+describe('ToastController >', () => {
+  let props: ToastControllerProps
+
+  beforeEach(() => {
+    props = {
+      autoDismiss: true,
+      autoDismissTimeout: 5000,
+      transitionDuration: TransitionDuration.M,
+      content: 'Test Toast',
+      onDismiss: _.noop,
+      transform: css``,
+      placement: ToastPlacement.BottomLeft,
+      component: ToastElement,
+    }
+  })
+
+  const renderToastController = (optionProps?: Partial<ToastControllerProps>) => render(
+    <ToastController {...props} {...optionProps} />,
+  )
+
+  describe('Props >', () => {
+    describe('autoDismiss', () => {
+      beforeEach(() => {
+        jest.useFakeTimers()
+        jest.spyOn(global, 'setTimeout')
+      })
+
+      it('autoDismiss is on', () => {
+        const autoDismissTimeout = 5000
+        renderToastController({
+          autoDismissTimeout,
+        })
+        expect(setTimeout).toHaveBeenCalledTimes(1)
+        expect(setTimeout).toHaveBeenLastCalledWith(expect.any(Function), TransitionDuration.M)
+        act(() => {
+          jest.runOnlyPendingTimers()
+        })
+        expect(setTimeout).toHaveBeenLastCalledWith(expect.any(Function), autoDismissTimeout)
+      })
+
+      it('autoDismiss is off', () => {
+        renderToastController({
+          autoDismiss: false,
+        })
+        expect(setTimeout).toHaveBeenCalledTimes(0)
+      })
+    })
+
+    describe('onDismiss >', () => {
+      beforeEach(() => {
+        jest.useFakeTimers()
+        jest.spyOn(global, 'setTimeout')
+      })
+
+      it('onDismiss is called automatically', () => {
+        const onDismiss = jest.fn()
+        renderToastController({
+          onDismiss,
+        })
+        expect(onDismiss).not.toBeCalled()
+        act(() => {
+          jest.runAllTimers()
+        })
+        expect(onDismiss).toBeCalledTimes(1)
+      })
+    })
+  })
+})
diff --git a/packages/bezier-react/src/components/Toast/ToastController.tsx b/packages/bezier-react/src/components/Toast/ToastController.tsx
@@ -18,9 +18,11 @@ function ToastController({
   const [transform, setTransform] = useState(showedToastTranslateXStyle)
   const timer = useRef<ReturnType<Window['setTimeout']>>()
 
-  const handleDismiss = useCallback(() => {
+  const handleDismiss = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
     setTransform(initPosition(placement))
-    timer.current = window.setTimeout(onDismiss, transitionDuration)
+    timer.current = window.setTimeout(() => {
+      onDismiss(e)
+    }, transitionDuration)
   }, [
     onDismiss,
     placement,
diff --git a/packages/bezier-react/src/components/Toast/ToastElement.tsx b/packages/bezier-react/src/components/Toast/ToastElement.tsx
@@ -1,6 +1,7 @@
 /* External dependencies */
-import React, { Fragment, forwardRef, Ref, useMemo } from 'react'
+import React, { forwardRef, Ref, useMemo } from 'react'
 import { v4 as uuid } from 'uuid'
+import { isString } from 'lodash-es'
 
 /* Internal dependencies */
 import { Typography } from 'Foundation'
@@ -27,28 +28,20 @@ const ToastElement = (
   }: ToastProps,
   forwardedRef: Ref<any>,
 ) => {
-  const newLineComponent = useMemo(() => (
-    content.split('\n').map((str, index) => {
-      if (index === 0) {
-        return (
-          <Text key={uuid()} typo={Typography.Size14}>
-            { str }
-          </Text>
-        )
-      }
-
-      return (
-        <Fragment key={uuid()}>
-          <br />
+  const ToastContentComponent = useMemo(() => {
+    if (isString(content)) {
+      return content.split('\n').map((str) => (
+        <div key={uuid()}>
           <Text
             typo={Typography.Size14}
           >
             { str }
           </Text>
-        </Fragment>
-      )
-    })
-  ), [content])
+        </div>
+      ))
+    }
+    return content
+  }, [content])
 
   const {
     appearance: presetAppearance,
@@ -80,8 +73,10 @@ const ToastElement = (
               height: '18px',
             }}
           >
-            <NormalContent>
-              { newLineComponent }
+            <NormalContent
+              data-testid={`${TOAST_TEST_ID}-content`}
+            >
+              { ToastContentComponent }
             </NormalContent>
             { ' ' }
             { actionContent && onClick && (
@@ -92,7 +87,10 @@ const ToastElement = (
           </Text>
         </EllipsisableContent>
       </Content>
-      <Close onClick={onDismiss}>
+      <Close
+        onClick={onDismiss}
+        data-testid={`${TOAST_TEST_ID}-close`}
+      >
         <Icon
           source={CancelIcon}
           size={IconSize.XS}
diff --git a/packages/bezier-react/src/components/Toast/ToastProvider.tsx b/packages/bezier-react/src/components/Toast/ToastProvider.tsx
@@ -15,6 +15,7 @@ import {
   ToastId,
   ToastProviderProps,
   ToastType,
+  ToastContent,
 } from './Toast.types'
 import ToastContainer from './ToastContainer'
 import ToastController from './ToastController'
@@ -32,7 +33,7 @@ function ToastProvider({
   const [leftToasts, setLeftToasts] = useState<ToastType[]>([])
   const [rightToasts, setRightToasts] = useState<ToastType[]>([])
 
-  const add = useCallback((content: string, options: ToastOptions = defaultOptions) => {
+  const add = useCallback((content: ToastContent, options: ToastOptions = defaultOptions) => {
     let result = ''
     if (options.rightSide) {
       result = rightToastService.add(content, options)
@@ -123,7 +124,7 @@ function ToastProvider({
           autoDismissTimeout={autoDismissTimeout}
           preset={preset}
           appearance={appearance}
-          content={content}
+          content={content || ''}
           iconName={iconName}
           component={ToastElement}
           onDismiss={() => handleDismiss(id, onDismiss)}
diff --git a/packages/bezier-react/src/components/Toast/ToastService.ts b/packages/bezier-react/src/components/Toast/ToastService.ts
diff --git a/packages/bezier-react/src/components/Toast/index.ts b/packages/bezier-react/src/components/Toast/index.ts

Original file line number	Diff line number	Diff line change
`@@ -95,12 +95,16 @@ const getEllipsisColor = (`
`95`	`95`	`)`
`96`	`96`
`97`	`97`	export const Content = styled.div<Pick<ToastElementProps, 'actionContent' \| 'onClick'>>`
	`98`	`+ display: flex;`
	`99`	`+ flex: 1;`
`98`	`100`	`margin: 3px 6px;`
`99`	`101`	`overflow: hidden;`
`100`	`102`	`color: ${({ actionContent, onClick, foundation }) => getEllipsisColor(actionContent, onClick, foundation)};`
`101`	`103`	`
`102`	`104`
`103`	`105`	export const EllipsisableContent = styled.div`
	`106`	`+ display: flex;`
	`107`	`+ flex: 1;`
`104`	`108`	`${ellipsis(5, LineHeightAbsoluteNumber.Lh18)};`
`105`	`109`
`106`	`110`	`overflow: visible;`