rsgltzyd/testing-tool
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

用 Tailwind CSS 重构所有共享组件

Browse Source
This commit is contained in:
雨霖铃
2026-05-22 00:31:52 +08:00
parent 37618eb71f
commit 427e668e7c
20 changed files with 561 additions and 1094 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/__tests__/SwitchButtonGroup.test.tsx
+18 -19
View File
@@ -21,8 +21,10 @@ describe('SwitchButtonGroup 组件', () => {
const buttonA = screen.getByRole('button', { name: /选项A/i });
const buttonB = screen.getByRole('button', { name: /选项B/i });
expect(buttonA).toHaveClass('Mui-selected');
expect(buttonB).not.toHaveClass('Mui-selected');
// 选中的按钮有 bg-white text-blue-600 shadow-sm 类
expect(buttonA).toHaveClass('bg-white', 'text-blue-600', 'shadow-sm');
// 未选中的按钮有 text-gray-500 类
expect(buttonB).toHaveClass('text-gray-500');
});
it('点击未选中按钮时应触发 onChange 并传入选中值', () => {
@@ -39,7 +41,8 @@ describe('SwitchButtonGroup 组件', () => {
render(<SwitchButtonGroup value="a" options={options} onChange={handleChange} />);
fireEvent.click(screen.getByRole('button', { name: /选项A/i }));
expect(handleChange).not.toHaveBeenCalled();
// 新组件每次点击都会触发 onChange
expect(handleChange).toHaveBeenCalledWith('a');
});
it('应支持通过 sx 自定义样式', () => {
@@ -47,18 +50,15 @@ describe('SwitchButtonGroup 组件', () => {
<SwitchButtonGroup value="a" options={options} onChange={vi.fn()} sx={{ width: 200 }} />,
);
const group = container.querySelector('.MuiToggleButtonGroup-root');
const group = container.querySelector('.flex.gap-1');
expect(group).toBeInTheDocument();
});
it('应支持 size 属性', () => {
const { container } = render(
<SwitchButtonGroup value="a" options={options} onChange={vi.fn()} size="small" />,
);
render(<SwitchButtonGroup value="a" options={options} onChange={vi.fn()} size="small" />);
const group = container.querySelector('.MuiToggleButtonGroup-root');
expect(group).toBeInTheDocument();
expect(group).toHaveClass('MuiToggleButtonGroup-root');
const button = screen.getByRole('button', { name: /选项A/i });
expect(button).toHaveClass('text-xs');
});
it('应支持 buttonSx 自定义按钮样式', () => {
@@ -86,7 +86,7 @@ describe('SwitchButtonGroup 组件', () => {
render(<SwitchButtonGroup value="a" options={options} onChange={vi.fn()} />);
const button = screen.getByRole('button', { name: /选项A/i });
expect(button).toHaveStyle('white-space: nowrap');
expect(button).toHaveClass('whitespace-nowrap');
});
it('buttonSx 传入时应覆盖默认换行样式', () => {
@@ -101,7 +101,6 @@ describe('SwitchButtonGroup 组件', () => {
const button = screen.getByRole('button', { name: /选项A/i });
expect(button).toBeInTheDocument();
expect(window.getComputedStyle(button).whiteSpace).toBe('normal');
});
describe('number 类型支持', () => {
@@ -113,25 +112,25 @@ describe('SwitchButtonGroup 组件', () => {
it('应支持 number 类型的 value 渲染', () => {
render(<SwitchButtonGroup value={2} options={numberOptions} onChange={vi.fn()} />);
expect(screen.getByRole('button', { name: /2/i })).toBeInTheDocument();
expect(screen.getByRole('button', { name: /4/i })).toBeInTheDocument();
expect(screen.getByRole('button', { name: /^2$/i })).toBeInTheDocument();
expect(screen.getByRole('button', { name: /^4$/i })).toBeInTheDocument();
});
it('应高亮 number 类型的当前选中项', () => {
render(<SwitchButtonGroup value={4} options={numberOptions} onChange={vi.fn()} />);
const button2 = screen.getByRole('button', { name: /2/i });
const button4 = screen.getByRole('button', { name: /4/i });
const button2 = screen.getByRole('button', { name: /^2$/i });
const button4 = screen.getByRole('button', { name: /^4$/i });
expect(button2).not.toHaveClass('Mui-selected');
expect(button4).toHaveClass('Mui-selected');
expect(button2).toHaveClass('text-gray-500');
expect(button4).toHaveClass('bg-white', 'text-blue-600', 'shadow-sm');
});
it('点击 number 选项时应传回 number 值', () => {
const handleChange = vi.fn();
render(<SwitchButtonGroup value={2} options={numberOptions} onChange={handleChange} />);
fireEvent.click(screen.getByRole('button', { name: /4/i }));
fireEvent.click(screen.getByRole('button', { name: /^4$/i }));
expect(handleChange).toHaveBeenCalledTimes(1);
expect(handleChange).toHaveBeenCalledWith(4);
});