fix(Popconfirm): button props propagation (#2361)

* fix(Popconfirm): button props propagation when `confirmBtn/cancelBtn` value is `object` props propagation invalid * test: add test
Tencent · Jul 18, 2023 · 13f6b16 · 13f6b16
1 parent d016290
commit 13f6b16
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 1 deletion.
diff --git a/src/popconfirm/Popcontent.tsx b/src/popconfirm/Popcontent.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import isString from 'lodash/isString';
 import classNames from 'classnames';
 import { InfoCircleFilledIcon as TdInfoCircleFilledIcon } from 'tdesign-icons-react';
-import Button from '../button';
+import Button, { ButtonProps } from '../button';
 import noop from '../_util/noop';
 import useConfig from '../hooks/useConfig';
 import useGlobalIcon from '../hooks/useGlobalIcon';
@@ -71,6 +71,7 @@ const Popcontent = (props: PopconfirmProps & { onClose?: (context: PopconfirmVis
           onClose({ e, trigger: 'cancel' });
           onCancel({ e });
         }}
+        {...(typeof cancelBtn === 'object' ? { ...(cancelBtn as ButtonProps) } : {})}
       >
         {isString(cancelBtn) && cancelBtn}
       </Button>
@@ -99,6 +100,7 @@ const Popcontent = (props: PopconfirmProps & { onClose?: (context: PopconfirmVis
           onClose({ e, trigger: 'confirm' });
           onConfirm({ e });
         }}
+        {...(typeof confirmBtn === 'object' ? { ...(confirmBtn as ButtonProps) } : {})}
       >
         {isString(confirmBtn) && confirmBtn}
       </Button>

diff --git a/src/popconfirm/__tests__/popconfirm.test.tsx b/src/popconfirm/__tests__/popconfirm.test.tsx
@@ -84,6 +84,53 @@ describe('Popconfirm 组件测试', () => {
     expect(onConfirmMock).toHaveBeenCalledTimes(1);
   });
 
+  test('确认/取消按钮透传 null/object 测试', async () => {
+    const onCancelMock = vi.fn();
+    const onConfirmMock = vi.fn();
+    const { getByText, queryByTestId, queryByText, queryAllByRole } = render(
+      <Popconfirm
+        placement="top"
+        content={<div data-testid={testId}>{text}</div>}
+        onCancel={onCancelMock}
+        onConfirm={onConfirmMock}
+        destroyOnClose={false}
+        // 传入 null
+        confirmBtn={null}
+        // 传入 object
+        cancelBtn={{ onClick: onCancelMock, content: '取消操作', theme: 'danger' }}
+      >
+        {triggerElement}
+      </Popconfirm>,
+    );
+
+    // 鼠标点击前，没有元素存在
+    const element1 = await waitFor(() => queryByTestId(testId));
+    expect(element1).toBeNull();
+
+    // 模拟鼠标点击
+    act(() => {
+      fireEvent.click(getByText(triggerElement));
+    });
+
+    // 鼠标进入后，有元素，而且内容为 popupText， 且 confirmBtn={null} 只有一个按钮
+    const element2 = await waitFor(() => queryByTestId(testId));
+    expect(element2).not.toBeNull();
+
+    // 测试只有一个按钮
+    const buttons = await waitFor(() => queryAllByRole('button'));
+    expect(buttons).toHaveLength(1);
+
+    const cancelBtn = await waitFor(() => queryByText('取消操作'));
+    // 查询 content 验证透传成功
+    expect(cancelBtn).not.toBeNull();
+
+    // 测试点击事件透传成功
+    act(() => {
+      fireEvent.click(cancelBtn);
+    });
+    expect(onCancelMock).toHaveBeenCalledTimes(1);
+  });
+
   test('ref test', () => {
     render(
       <Popconfirm placement="top" content={<div data-testid={testId}>{text}</div>} theme="warning">