mirror of
https://github.com/ant-design/ant-design.git
synced 2025-08-06 16:06:28 +08:00
test: update
This commit is contained in:
parent
73c08c9517
commit
3620f7637a
@ -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>
|
||||
|
@ -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();
|
||||
});
|
||||
|
@ -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
|
||||
|
@ -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 | 快速折叠,使用此属性时对应面板将忽略`min|max`限制 | `boolean \| { prev?: boolean; next?: boolean }` | `false` | - |
|
||||
| collapsible | 快速折叠 P | `boolean \| { prev?: boolean; next?: boolean }` | `false` | - |
|
||||
| resizable | 是否开启拖拽伸缩 | `boolean` | `true` | - |
|
||||
|
||||
## 主题变量(Design Token)
|
||||
|
Loading…
Reference in New Issue
Block a user