test: update

This commit is contained in:
Wanpan 2024-08-19 14:41:40 +08:00
parent 73c08c9517
commit 3620f7637a
4 changed files with 33 additions and 12 deletions

View File

@ -14,7 +14,7 @@ exports[`Splitter The mousemove should work fine. 1`] = `
>
<div
class="ant-splitter-panel"
style="flex-basis: calc(60% - 1px);"
style="flex-basis: calc(80% - 1px);"
>
0
</div>
@ -31,7 +31,7 @@ exports[`Splitter The mousemove should work fine. 1`] = `
</div>
<div
class="ant-splitter-panel"
style="flex-basis: calc(40% - 1px);"
style="flex-basis: calc(20% - 1px);"
>
1
</div>
@ -58,7 +58,7 @@ exports[`Splitter The mousemove should work fine. 1`] = `
>
<div
class="ant-splitter-panel"
style="flex-basis: calc(70% - 1px);"
style="flex-basis: calc(25% - 1px);"
>
0
</div>
@ -75,12 +75,11 @@ exports[`Splitter The mousemove should work fine. 1`] = `
</div>
<div
class="ant-splitter-panel"
style="flex-basis: calc(30% - 1px);"
style="flex-basis: calc(75% - 1px);"
>
1
</div>
</div>
,
</div>
</div>
</div>

View File

@ -249,11 +249,17 @@ describe('Splitter', () => {
const { container } = render(
<Splitter>
<Splitter.Panel>
<SplitterDemo onResizeStart={mockStart} onResize={mockMoving} onResizeEnd={mockEnd} />,
<SplitterDemo
items={[{}, { min: 20 }]}
onResizeStart={mockStart}
onResize={mockMoving}
onResizeEnd={mockEnd}
/>
,
</Splitter.Panel>
<Splitter.Panel>
<SplitterDemo layout="vertical" onResize={mockMovingVertical} />,
<SplitterDemo items={[{}, { max: 75 }]} layout="vertical" onResize={mockMovingVertical} />
</Splitter.Panel>
</Splitter>,
);
@ -272,6 +278,15 @@ describe('Splitter', () => {
expect(mockStart).toHaveBeenCalled();
expect(mockMoving).toHaveBeenCalledWith([60, 40], 0);
expect(mockEnd).toHaveBeenCalled();
// min
fireEvent.mouseDown(container?.querySelectorAll('.ant-splitter-bar')[0]!, {
clientX: 0,
clientY: 0,
});
fireEvent.mouseMove(document.documentElement, { clientX: 160 });
await waitFakeTimer();
fireEvent.mouseUp(document.documentElement);
expect(mockMoving).toHaveBeenLastCalledWith([80, 20], 0);
// layout vertical
fireEvent.mouseDown(container?.querySelectorAll('.ant-splitter-bar')[2]!, {
@ -279,12 +294,19 @@ describe('Splitter', () => {
clientY: 0,
});
expect(container?.querySelector('.ant-splitter-resizing')).toBeTruthy();
// 模拟鼠标移动事件
fireEvent.mouseMove(document.documentElement, { clientY: 80 });
await waitFakeTimer();
// 模拟鼠标释放结束拖动
fireEvent.mouseUp(document.documentElement);
expect(mockMovingVertical).toHaveBeenCalledWith([70, 30], 0);
// max
fireEvent.mouseDown(container?.querySelectorAll('.ant-splitter-bar')[2]!, {
clientX: 0,
clientY: 0,
});
fireEvent.mouseMove(document.documentElement, { clientY: -200 });
await waitFakeTimer();
fireEvent.mouseUp(document.documentElement);
expect(mockMovingVertical).toHaveBeenLastCalledWith([25, 75], 0);
expect(container).toMatchSnapshot();
});

View File

@ -42,12 +42,12 @@ Common props ref[Common props](/docs/react/common-props)
### Panel
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- | --- |
| --- | --- | --- | --- | --- |
| min | Minimum threshold `1-100 \| '10%' \| '200px'` | `number \| string` | - | - |
| max | Maximum Threshold `1-100 \| '10%' \| '200px'` | `number \| string` | - | - |
| size | Controlled panel size `1-100 \| '10%' \| '200px'` | `number \| string` | - | - |
| defaultSize | Initial panel size `1-100 \| '10%' \| '200px'` | `number \| string` | 50 | - |
| collapsible | Quick folding, when using this property, the corresponding panel will ignore the `min | max` restrictions | `boolean \| { prev?: boolean; next?: boolean }` | `false` | - |
| collapsible | Quick folding | `boolean \| { prev?: boolean; next?: boolean }` | `false` | - |
| resizable | Whether to enable drag and drop | `boolean` | `true` | - |
## Design Token

View File

@ -48,7 +48,7 @@ tag: 5.21.0
| max | 最大阈值 `1-100 \| '10%' \| '200px'` | `number \| string` | - | - |
| size | 受控面板大小 `1-100 \| '10%' \| '200px'` | `number \| string` | - | - |
| defaultSize | 初始面板大小 `1-100 \| '10%' \| '200px'` | `number \| string` | 50 | - |
| collapsible | 快速折叠,使用此属性时对应面板将忽略`minmax`限制 | `boolean \| { prev?: boolean; next?: boolean }` | `false` | - |
| collapsible | 快速折叠 P | `boolean \| { prev?: boolean; next?: boolean }` | `false` | - |
| resizable | 是否开启拖拽伸缩 | `boolean` | `true` | - |
## 主题变量Design Token