feat: copy support async

[crazyair]

[中文版模板 / Chinese template]

🤔 This is a ...

• New feature
• Bug fix
• Site / documentation update
• Demo update
• Component style update
• TypeScript definition update
• Bundle size optimization
• Performance optimization
• Enhancement feature
• Internationalization
• Refactoring
• Code style optimization
• Test Case
• Branch merge
• Workflow
• Other (about what?)

🔗 Related issue link

#47860

💡 Background and solution

📝 Changelog

Language	Changelog
🇺🇸 English	Copy support async
🇨🇳 Chinese	支持异步复制

☑️ Self-Check before Merge

⚠️ Please check all items below before requesting a reviewing. ⚠️

• Doc is updated/provided or not needed
• Demo is updated/provided or not needed
• TypeScript definition is updated/provided or not needed
• Changelog is provided or not needed

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[github-actions]

👁 Visual Regression Report for PR #48123 Failed ❌

🎯 Target branch: feature (595e600)
📖 View Full Report ↗︎

Image name	Expected	Actual	Diff
typography-copyable.compact.png
typography-copyable.compact.css-var.png
typography-copyable.dark.png
typography-copyable.dark.css-var.png
typography-copyable.default.png
typography-copyable.default.css-var.png

Check Full Report for details

[github-actions]

[github-actions]

size-limit report 📦

Path	Size
./dist/antd.min.js	336.12 KB (+108 B 🔺)
./dist/antd-with-locales.min.js	383.26 KB (+114 B 🔺)

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 100.00%. Comparing base (100fa29) to head (230280d).
Report is 1 commits behind head on feature.

Additional details and impacted files

@@            Coverage Diff            @@
##           feature    #48123   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          742       743    +1     
  Lines        12817     12828   +11     
  Branches      3363      3364    +1     
=========================================
+ Hits         12817     12828   +11     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[afc163]

测试用例需要补一下。

[crazyair]

测试用例需要补一下。

catch 的吗？

[afc163]

看下哪里没覆盖到。

[li-jia-nan]

[crazyair]

测试用例需要补一下。

async function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      reject('Fetch error');
    }, 1000);
  });
}

test('fetchData should throw an error', async () => {
  expect.assertions(1);
  try {
    await fetchData();
  } catch (error) {
    expect(error).toEqual('Fetch error');
  }
});

这个能测异常，但是组件怎么写都报错。

[crazyair]

throw 这玩意单测怎么写啊，单独 throw 可以，Demo 的 onClick 里 throw 就报错

const Demo = () => {
    return (
        <div
            onClick={() => {
                throw new Error('aaa');
            }}
        >
            11
        </div>
    );
};

test('demo', () => {
    expect.assertions(1);

    try {
        // const { getByText } = render(<Demo />);
        // fireEvent.click(getByText(/11/));
        throw new Error('aaa');
    } catch (error) {
        // console.log('222', error);
        // expect(error.message).toBe('aaa');
        expect('aaa').toBe('aaa');
    }
});

[arvinxx]

为了编写针对上述 React 组件的单元测试，我们将使用 Vitest 和 React 测试库。这个测试的目标是验证当 Demo 组件被点击时，是否会抛出预期的错误。由于这个错误是在一个事件处理器中抛出的，我们需要确保能够捕获这个错误并验证其内容。

首先，你需要安装相关的依赖：

npm install vitest react@latest react-dom@latest @testing-library/react

接下来，编写测试代码：

// Demo.test.tsx
import { describe, it, expect } from 'vitest';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { Demo } from './Demo'; // 确保正确引入你的组件

describe('Demo Component', () => {
    it('should throw an error when clicked', async () => {
        render(<Demo />);
        
        // 捕获组件内部抛出的错误
        const errorHandler = vi.fn(); // 使用 Vitest 的 spy 功能
        window.addEventListener('error', errorHandler);

        // 模拟用户点击
        const divElement = screen.getByText('11');
        await userEvent.click(divElement);

        // 验证错误是否被正确捕获
        expect(errorHandler).toHaveBeenCalled();
        expect(errorHandler.mock.calls[0][0].error.message).toBe('aaa');

        // 清理
        window.removeEventListener('error', errorHandler);
    });
});

这个测试用例首先渲染 Demo 组件，然后模拟用户点击该组件。由于组件被点击时会抛出错误，我们通过添加一个全局的错误处理器来捕获这个错误，并验证错误信息是否符合预期。

注意，由于这个错误是通过事件处理器抛出的，它会被封装在一个 ErrorEvent 对象中，因此我们需要通过 errorHandler.mock.calls[0][0].error.message 来访问实际的错误信息。

另外，记得在测试完成后移除全局的错误处理器，以避免对其他测试造成影响。

这个测试案例展示了如何在组件内部事件处理器中抛出错误的情况下进行测试，确保你的组件在遇到错误时能够按预期行为运行。