refactor: 简化 TextInputArea,移除 showMessage 和 MUI 样式,改用 shadcn 样式和 sonner toast

This commit is contained in:
雨霖铃
2026-05-22 20:46:43 +08:00
parent b29e9417cc
commit b3c2fbccf5
2 changed files with 146 additions and 278 deletions
+15 -41
View File
@@ -107,33 +107,28 @@ describe('TextInputArea 组件', () => {
).not.toBeInTheDocument();
});
it('复制时调用 showMessage', async () => {
it('复制时调用 clipboard writeText', async () => {
const user = userEvent.setup();
const showMessage = vi.fn();
const writeTextSpy = vi.spyOn(navigator.clipboard, 'writeText').mockResolvedValue(undefined);
render(
<TextInputArea value="测试" onChange={() => {}} allowCopy showMessage={showMessage} />,
);
render(<TextInputArea value="测试" onChange={() => {}} allowCopy />);
await user.click(screen.getByRole('button', { name: 'textInputArea.copyContent' }));
expect(writeTextSpy).toHaveBeenCalledWith('测试');
expect(showMessage).toHaveBeenCalledWith('messages.copySuccess', { severity: 'success' });
});
it('复制失败时调用 showMessage 错误提示', async () => {
it('复制失败时调用 clipboard writeText 并捕获错误', async () => {
const user = userEvent.setup();
const showMessage = vi.fn();
vi.spyOn(navigator.clipboard, 'writeText').mockRejectedValue(new Error('失败'));
const writeTextSpy = vi
.spyOn(navigator.clipboard, 'writeText')
.mockRejectedValue(new Error('失败'));
render(
<TextInputArea value="测试" onChange={() => {}} allowCopy showMessage={showMessage} />,
);
render(<TextInputArea value="测试" onChange={() => {}} allowCopy />);
await user.click(screen.getByRole('button', { name: 'textInputArea.copyContent' }));
expect(showMessage).toHaveBeenCalledWith('messages.copyError', { severity: 'error' });
expect(writeTextSpy).toHaveBeenCalledWith('测试');
});
});
@@ -370,18 +365,15 @@ describe('TextInputArea 组件', () => {
});
});
describe('showMessage prop', () => {
it('复制成功时调用 showMessage', async () => {
describe('复制功能', () => {
it('复制成功时调用 clipboard writeText', async () => {
const user = userEvent.setup();
const showMessage = vi.fn();
vi.spyOn(navigator.clipboard, 'writeText').mockResolvedValue(undefined);
const writeTextSpy = vi.spyOn(navigator.clipboard, 'writeText').mockResolvedValue(undefined);
render(
<TextInputArea value="测试" onChange={() => {}} allowCopy showMessage={showMessage} />,
);
render(<TextInputArea value="测试" onChange={() => {}} allowCopy />);
await user.click(screen.getByRole('button', { name: 'textInputArea.copyContent' }));
expect(showMessage).toHaveBeenCalledWith('messages.copySuccess', { severity: 'success' });
expect(writeTextSpy).toHaveBeenCalledWith('测试');
});
});
@@ -472,7 +464,7 @@ describe('TextInputArea 组件', () => {
describe('autoResize', () => {
it('autoResize=true 时设置 minRows/maxRows', () => {
const { container } = render(
<TextInputArea value="" onChange={() => {}} autoResize minRows={3} maxRows={8} />,
<TextInputArea value="" onChange={() => {}} minRows={3} maxRows={8} />,
);
const textarea = container.querySelector('textarea');
@@ -480,9 +472,7 @@ describe('TextInputArea 组件', () => {
});
it('autoResize=false 时设置固定 rows', () => {
const { container } = render(
<TextInputArea value="" onChange={() => {}} autoResize={false} minRows={5} />,
);
const { container } = render(<TextInputArea value="" onChange={() => {}} minRows={5} />);
const textarea = container.querySelector('textarea');
expect(textarea).toBeInTheDocument();
@@ -497,21 +487,5 @@ describe('TextInputArea 组件', () => {
expect(container.firstChild).toHaveClass('custom-class');
});
it('应透传 style', () => {
const { container } = render(
<TextInputArea value="" onChange={() => {}} style={{ marginTop: 10 }} />,
);
expect(container.firstChild).toHaveStyle({ marginTop: '10px' });
});
it('应透传 sx 样式', () => {
const { container } = render(
<TextInputArea value="" onChange={() => {}} sx={{ marginBottom: '24px' }} />,
);
expect(container.firstChild).toHaveStyle({ marginBottom: '24px' });
});
});
});