fix: 调整命名,单测修改

Author: xiaoyatong

src/packages/popover/__tests__/popover.spec.tsx

@@ -4,6 +4,7 @@ import '@testing-library/jest-dom'
 import { Tips, Close } from '@nutui/icons-react'
 import Popover from '../index'
 import Button from '@/packages/button'
+import { FullPosition } from '@/types'
 
 const itemList = [
   {
@@ -27,6 +28,10 @@ const itemListOne = [
     icon: <Tips />,
     action: {
       icon: <Close />,
+      onClick: (e: any) => {
+        console.log('onclick 1')
+        e.stopPropagation()
+      },
     },
   },
 ]
@@ -51,9 +56,7 @@ const itemListDisabled = [
 test('render popover content', async () => {
   const { container } = render(
     <Popover visible list={itemList}>
-      <Button type="primary" shape="square">
-        基础用法
-      </Button>
+      <Button type="primary">基础用法</Button>
     </Popover>
   )
   const content = document.querySelectorAll('.nut-popover-content')[0]
@@ -76,9 +79,7 @@ test('render popover content dark', async () => {
 test('render popover position', async () => {
   render(
     <Popover visible list={itemList} location="bottom-left">
-      <Button type="primary" shape="square">
-        基础用法
-      </Button>
+      <Button type="primary">基础用法</Button>
     </Popover>
   )
   const content = document.querySelectorAll('.nut-popover-content')[0]
@@ -87,66 +88,43 @@ test('render popover position', async () => {
   )
 })
 
-test('render popover position2', async () => {
-  const { container } = render(
+test('render popover position with arrowOffset', async () => {
+  const { rerender } = render(
     <Popover visible list={itemList} location="bottom-left" arrowOffset={20}>
-      <Button type="primary" shape="square">
-        基础用法
-      </Button>
+      <Button type="primary">基础用法</Button>
     </Popover>
   )
-  const content = document.querySelectorAll(
-    '.nut-popover-arrow'
-  )[0] as HTMLElement
-  expect(content).toHaveAttribute('style', 'left: 36px;')
-})
 
-test('render popover position22', async () => {
-  const { container } = render(
-    <Popover visible list={itemList} arrowOffset={20}>
-      <Button type="primary" shape="square">
-        基础用法
-      </Button>
-    </Popover>
-  )
-  const content = document.querySelectorAll(
-    '.nut-popover-arrow'
-  )[0] as HTMLElement
-  expect(content).toHaveAttribute('style', 'left: calc(50% + 20px);')
-})
+  const checkArrowStyles = (location: FullPosition, expectedStyles: string) => {
+    rerender(
+      <Popover visible list={itemList} location={location} arrowOffset={20}>
+        <Button type="primary">基础用法</Button>
+      </Popover>
+    )
+    content = document.querySelectorAll('.nut-popover-arrow')[0]
+    expect(content).toHaveAttribute('style', expectedStyles)
+  }
 
-test('render popover position3', async () => {
-  const { container } = render(
-    <Popover visible list={itemList} location="left-top" arrowOffset={20}>
-      <Button type="primary" shape="square">
-        基础用法
-      </Button>
-    </Popover>
-  )
-  const content = document.querySelectorAll(
-    '.nut-popover-arrow'
-  )[0] as HTMLElement
-  expect(content).toHaveAttribute('style', 'top: -4px;')
-})
+  let content = document.querySelectorAll('.nut-popover-arrow')[0]
+  expect(content).toHaveAttribute('style', 'left: 36px;')
 
-test('render popover position33', async () => {
-  const { container } = render(
-    <Popover visible list={itemList} location="left" arrowOffset={20}>
-      <Button type="primary" shape="square">
-        基础用法
-      </Button>
-    </Popover>
-  )
-  const content = document.querySelectorAll(
-    '.nut-popover-arrow'
-  )[0] as HTMLElement
-  expect(content).toHaveAttribute('style', 'top: calc(50% - 20px);')
+  checkArrowStyles('bottom', 'left: calc(50% + 20px);')
+  checkArrowStyles('bottom-right', 'right: -4px;')
+  checkArrowStyles('left', 'top: calc(50% - 20px);')
+  checkArrowStyles('left-bottom', 'bottom: 36px;')
+  checkArrowStyles('left-top', 'top: -4px;')
+  checkArrowStyles('right', 'top: calc(50% - 20px);')
+  checkArrowStyles('right-bottom', 'bottom: 36px;')
+  checkArrowStyles('right-top', 'top: -4px;')
+  checkArrowStyles('top-right', 'right: -4px;')
+  checkArrowStyles('top-left', 'left: 36px;')
+  checkArrowStyles('top', 'left: calc(50% + 20px);')
 })
 
 test('render position fixed ', async () => {
   const close = vi.fn()
   const click = vi.fn()
-  const { container, getByTestId } = render(
+  const { getByTestId } = render(
     <div
       style={{
         height: '200px',
@@ -166,7 +144,7 @@ test('render position fixed ', async () => {
         onClick={click}
         onClose={close}
       >
-        <Button data-testid="a" type="primary" shape="square">
+        <Button data-testid="a" type="primary">
           position: fixed
         </Button>
       </Popover>
@@ -186,11 +164,9 @@ test('render position fixed ', async () => {
 
 test('should emit onchoose event when clicking the action', async () => {
   const choose = vi.fn()
-  const { container } = render(
+  render(
     <Popover visible list={itemList} onSelect={choose}>
-      <Button type="primary" shape="square">
-        明朗风格
-      </Button>
+      <Button type="primary">明朗风格</Button>
     </Popover>
   )
   const contentItem = document.querySelectorAll('.nut-popover-item')[0]
@@ -201,22 +177,21 @@ test('should emit onchoose event when clicking the action', async () => {
 
 test('should not emit select event when the action is disabled', async () => {
   const choose = vi.fn()
-  const { container } = render(
+  render(
     <Popover visible list={itemListDisabled} onSelect={choose}>
-      <Button type="primary" shape="square">
-        明朗风格
-      </Button>
+      <Button type="primary">明朗风格</Button>
     </Popover>
   )
   const contentItem = document.querySelectorAll('.nut-popover-item')[0]
   fireEvent.click(contentItem)
   await waitFor(() => expect(choose).not.toBeCalled())
 })
 
-test('target id', async () => {
-  const choose = vi.fn()
+test('click event', async () => {
   const close = vi.fn()
-  const { container, getByTestId } = render(
+  const close1 = vi.fn()
+  const open = vi.fn()
+  const { getByTestId, rerender } = render(
     <div>
       <Popover visible targetId="popid" list={itemListOne} />
       <Button type="primary" id="popid">
@@ -228,4 +203,32 @@ test('target id', async () => {
     </div>
   )
   fireEvent.click(getByTestId('closeid'))
+  await waitFor(() =>
+    expect(document.querySelectorAll('.nut-popover')[0]).toHaveStyle({
+      visibility: 'hidden',
+    })
+  )
+
+  rerender(
+    <>
+      <Popover
+        visible
+        targetId="popid"
+        list={itemListOne}
+        location="left-bottom"
+        onOpen={open}
+        onClose={close1}
+        data-testid="popoverid"
+      />
+      <Button type="primary" id="popid" data-testid="popid">
+        自定义目标元素
+      </Button>
+    </>
+  )
+  fireEvent.click(getByTestId('popid'))
+  await waitFor(() => {
+    expect(document.querySelectorAll('.nut-popover')[0]).toHaveStyle({
+      visibility: 'hidden',
+    })
+  })
 })

src/packages/popover/popover.taro.tsx

@@ -12,18 +12,10 @@ import Popup from '@/packages/popup/index.taro'
 import { getRectByTaro } from '@/utils/get-rect-by-taro'
 import { ComponentDefaults } from '@/utils/typings'
 import { useRtl } from '@/packages/configprovider/index.taro'
-import { TaroPopoverProps, PopoverList } from '@/types'
+import { TaroPopoverProps, PopoverList, WrapperPosition } from '@/types'
 import pxTransform from '@/utils/px-transform'
 import useUuid from '@/hooks/use-uuid'
 
-export interface WrapperPosition {
-  width: number
-  height: number
-  left: number
-  top: number
-  right: number
-}
-
 const defaultProps = {
   ...ComponentDefaults,
   list: [],
@@ -95,19 +87,16 @@ export const Popover: FunctionComponent<
   const popoverId = `popover-${uid}`
 
   const getWrapperPosition = async () => {
-    let rect
-    if (targetId) {
-      const elem = document.querySelector(`#${targetId}`)
-      rect = await getRectByTaro(elem, targetId)
-    } else {
-      rect = await getRectByTaro(popoverRef.current, popoverId)
-    }
+    const rect = targetId
+      ? await getRectByTaro(document.querySelector(`#${targetId}`), targetId)
+      : await getRectByTaro(popoverRef.current, popoverId)
+    const { width, height, right, left, top } = rect
     setWrapperPosition({
-      width: rect.width,
-      height: rect.height,
-      left: rtl ? rect.right : rect.left,
-      top: rect.top,
-      right: rtl ? rect.left : rect.right,
+      width,
+      height,
+      left: rtl ? right : left,
+      top,
+      right: rtl ? left : right,
     })
   }
 
@@ -145,7 +134,6 @@ export const Popover: FunctionComponent<
       return styles
     }
     const { width, height, left, top, right } = wrapperPosition
-
     const direction = location.split('-')[0]
     const skew = location.split('-')[1]
     let cross = 0
@@ -155,7 +143,6 @@ export const Popover: FunctionComponent<
       cross += +offset[1]
       parallel += +rtloffset
     }
-
     if (width) {
       const dir = rtl ? 'right' : 'left'
       if (['bottom', 'top'].includes(direction)) {
@@ -275,7 +262,7 @@ export const Popover: FunctionComponent<
                 <ArrowRadius width={8} height={4} />
               </View>
             )}
-            {Array.isArray(children) ? children[1] : ''}
+            {Array.isArray(children) ? children[1] : null}
             {list.map((item, index) => {
               return (
                 <View