mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-02 12:08:13 +08:00
chore: Picker 单测补充 (#6050)
This commit is contained in:
sansiro
GitHub
parent
c5f985c761
commit
d46257fd43
275
packages/amis/__tests__/renderers/Picker.test.tsx
Normal file
275
packages/amis/__tests__/renderers/Picker.test.tsx
Normal file
@ -0,0 +1,275 @@
|
|||||||
|
/**
|
||||||
|
* 组件名称：Picker 列表选择器
|
||||||
|
* 单测内容：
|
||||||
|
* 1. 在 table 中使用
|
||||||
|
* 2. 触发方式 & 是否显示icon & 标题 & 位置 & 触发条件
|
||||||
|
* 3. offset 偏移量
|
||||||
|
* 4. 展示模式和尺寸
|
||||||
|
*/
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import {
|
||||||
|
render,
|
||||||
|
fireEvent,
|
||||||
|
cleanup,
|
||||||
|
waitFor,
|
||||||
|
getByText
|
||||||
|
} from '@testing-library/react';
|
||||||
|
import '../../src';
|
||||||
|
import {render as amisRender} from '../../src';
|
||||||
|
import {wait, makeEnv} from '../helper';
|
||||||
|
import {clearStoresCache} from '../../src';
|
||||||
|
|
||||||
|
afterEach(() => {
|
||||||
|
cleanup();
|
||||||
|
clearStoresCache();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('Renderer:Picker base', async () => {
|
||||||
|
const {container, rerender, getByText, getByPlaceholderText, baseElement} =
|
||||||
|
render(
|
||||||
|
amisRender({
|
||||||
|
type: 'picker',
|
||||||
|
name: 'picker',
|
||||||
|
label: 'picker',
|
||||||
|
placeholder: 'picker-placeholder',
|
||||||
|
options: [
|
||||||
|
{
|
||||||
|
label: 'A',
|
||||||
|
value: 'a'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'B',
|
||||||
|
value: 'b'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'C',
|
||||||
|
value: 'c'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
|
fireEvent.click(getByText('picker-placeholder')!);
|
||||||
|
|
||||||
|
expect(
|
||||||
|
baseElement.querySelector('.cxd-Modal .cxd-Crud')!
|
||||||
|
).toBeInTheDocument();
|
||||||
|
|
||||||
|
const items = baseElement.querySelectorAll('.cxd-Crud .cxd-ListItem');
|
||||||
|
expect(items!.length).toBe(3);
|
||||||
|
|
||||||
|
fireEvent.click(items[1]);
|
||||||
|
expect(
|
||||||
|
baseElement.querySelector('.cxd-Crud .cxd-ListItem.is-checked')
|
||||||
|
).toHaveTextContent('B');
|
||||||
|
expect(baseElement).toMatchSnapshot();
|
||||||
|
|
||||||
|
fireEvent.click(getByText('确认'));
|
||||||
|
|
||||||
|
await wait(500);
|
||||||
|
|
||||||
|
expect(container.querySelector('.cxd-Picker-value')).toHaveTextContent('B');
|
||||||
|
expect(container).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('Renderer:Picker with pickerSchema & valueField & labelField & multiple & value & size', async () => {
|
||||||
|
const fetcher = jest.fn().mockImplementation(() =>
|
||||||
|
Promise.resolve({
|
||||||
|
data: {
|
||||||
|
status: 0,
|
||||||
|
msg: 'ok',
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
id: 'a',
|
||||||
|
engine: 'engine a',
|
||||||
|
browser: 'browser a'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'b',
|
||||||
|
engine: 'engine b',
|
||||||
|
browser: 'browser b'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'c',
|
||||||
|
engine: 'engine c',
|
||||||
|
browser: 'browser c'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'd',
|
||||||
|
engine: 'engine d',
|
||||||
|
browser: 'browser d'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
})
|
||||||
|
);
|
||||||
|
const {container, rerender, getByText, getByPlaceholderText, baseElement} =
|
||||||
|
render(
|
||||||
|
amisRender(
|
||||||
|
{
|
||||||
|
type: 'picker',
|
||||||
|
name: 'type4',
|
||||||
|
joinValues: true,
|
||||||
|
valueField: 'id',
|
||||||
|
labelField: 'engine',
|
||||||
|
label: '多选',
|
||||||
|
source: '/api/mock2/sample',
|
||||||
|
size: 'lg',
|
||||||
|
value: 'a,b',
|
||||||
|
multiple: true,
|
||||||
|
pickerSchema: {
|
||||||
|
columns: [
|
||||||
|
{
|
||||||
|
name: 'engine',
|
||||||
|
label: 'Rendering engine'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'browser',
|
||||||
|
label: 'Browser'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{},
|
||||||
|
makeEnv({
|
||||||
|
session: 'picker-fetcher-1',
|
||||||
|
fetcher
|
||||||
|
})
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
|
await wait(500);
|
||||||
|
expect(fetcher).toHaveBeenCalled;
|
||||||
|
expect(fetcher.mock.calls[0][0].query).toEqual({
|
||||||
|
op: 'loadOptions',
|
||||||
|
value: 'a,b'
|
||||||
|
});
|
||||||
|
|
||||||
|
const values = container.querySelectorAll('.cxd-Picker .cxd-Picker-value');
|
||||||
|
expect(values.length).toBe(2);
|
||||||
|
|
||||||
|
expect(values[0]).toHaveTextContent('engine a');
|
||||||
|
|
||||||
|
fireEvent.click(container.querySelector('.cxd-Picker-valueWrap')!);
|
||||||
|
|
||||||
|
await wait(1000);
|
||||||
|
|
||||||
|
expect(
|
||||||
|
baseElement.querySelector('.cxd-Modal .cxd-Crud')!
|
||||||
|
).toBeInTheDocument();
|
||||||
|
expect(baseElement.querySelector('.cxd-Modal')).toHaveClass('cxd-Modal--lg');
|
||||||
|
|
||||||
|
expect(fetcher).toBeCalledTimes(2);
|
||||||
|
expect(fetcher.mock.calls[1][0].query).toEqual({
|
||||||
|
page: 1,
|
||||||
|
perPage: 10
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
test('Renderer:Picker with embed', async () => {
|
||||||
|
const fetcher = jest.fn().mockImplementation(() =>
|
||||||
|
Promise.resolve({
|
||||||
|
data: {
|
||||||
|
status: 0,
|
||||||
|
msg: 'ok',
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
id: 'a',
|
||||||
|
engine: 'engine a',
|
||||||
|
browser: 'browser a'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'b',
|
||||||
|
engine: 'engine b',
|
||||||
|
browser: 'browser b'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'c',
|
||||||
|
engine: 'engine c',
|
||||||
|
browser: 'browser c'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'd',
|
||||||
|
engine: 'engine d',
|
||||||
|
browser: 'browser d'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
})
|
||||||
|
);
|
||||||
|
const {container, rerender, getByText, getByPlaceholderText, baseElement} =
|
||||||
|
render(
|
||||||
|
amisRender(
|
||||||
|
{
|
||||||
|
type: 'picker',
|
||||||
|
name: 'type4',
|
||||||
|
joinValues: true,
|
||||||
|
valueField: 'id',
|
||||||
|
labelField: 'engine',
|
||||||
|
label: '多选',
|
||||||
|
source: '/api/mock2/sample',
|
||||||
|
size: 'lg',
|
||||||
|
value: 'a,b',
|
||||||
|
multiple: true,
|
||||||
|
embed: true,
|
||||||
|
pickerSchema: {
|
||||||
|
columns: [
|
||||||
|
{
|
||||||
|
name: 'engine',
|
||||||
|
label: 'Rendering engine'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'browser',
|
||||||
|
label: 'Browser'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{},
|
||||||
|
makeEnv({
|
||||||
|
session: 'picker-fetcher-1',
|
||||||
|
fetcher
|
||||||
|
})
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
|
await wait(500);
|
||||||
|
expect(
|
||||||
|
container.querySelector('.cxd-Picker .cxd-Crud .cxd-Table')
|
||||||
|
).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('Renderer:Picker base', async () => {
|
||||||
|
const {container, rerender, getByText, getByPlaceholderText, baseElement} =
|
||||||
|
render(
|
||||||
|
amisRender({
|
||||||
|
type: 'picker',
|
||||||
|
name: 'picker',
|
||||||
|
label: 'picker',
|
||||||
|
modalMode: 'drawer',
|
||||||
|
placeholder: 'picker-placeholder',
|
||||||
|
options: [
|
||||||
|
{
|
||||||
|
label: 'A',
|
||||||
|
value: 'a'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'B',
|
||||||
|
value: 'b'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'C',
|
||||||
|
value: 'c'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
|
fireEvent.click(getByText('picker-placeholder')!);
|
||||||
|
await wait(500);
|
||||||
|
|
||||||
|
expect(
|
||||||
|
baseElement.querySelector('.cxd-Drawer .cxd-Crud')!
|
||||||
|
).toBeInTheDocument();
|
||||||
|
});
|
||||||
@ -0,0 +1,286 @@
|
|||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`Renderer:Picker base 1`] = `
|
||||||
|
<body
|
||||||
|
class="is-modalOpened"
|
||||||
|
style="width: calc(100% - 0px);"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
class="cxd-Form-item cxd-Form-item--normal"
|
||||||
|
data-role="form-item"
|
||||||
|
>
|
||||||
|
<label
|
||||||
|
class="cxd-Form-label"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
<span
|
||||||
|
class="cxd-TplField"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
picker
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
<div
|
||||||
|
class="cxd-PickerControl cxd-Form-control"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="cxd-Picker cxd-Picker--single is-focused"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="cxd-Picker-input"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="cxd-Picker-placeholder"
|
||||||
|
>
|
||||||
|
picker-placeholder
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="cxd-Picker-valueWrap"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="cxd-Picker-values"
|
||||||
|
/>
|
||||||
|
<input
|
||||||
|
value=""
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<span
|
||||||
|
class="cxd-Picker-btn"
|
||||||
|
>
|
||||||
|
<icon-mock
|
||||||
|
classname="icon icon-window-restore"
|
||||||
|
icon="window-restore"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="amis-dialog-widget cxd-Modal cxd-Modal--1th"
|
||||||
|
role="dialog"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="cxd-Modal-overlay in"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="cxd-Modal-content in"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="cxd-Modal-header"
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
class="cxd-Modal-close"
|
||||||
|
data-position="left"
|
||||||
|
data-tooltip="关闭"
|
||||||
|
>
|
||||||
|
<icon-mock
|
||||||
|
classname="icon icon-close"
|
||||||
|
icon="close"
|
||||||
|
/>
|
||||||
|
</a>
|
||||||
|
<div
|
||||||
|
class="cxd-Modal-title"
|
||||||
|
>
|
||||||
|
请选择
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="cxd-Modal-body"
|
||||||
|
role="dialog-body"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="cxd-Crud"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="cxd-List cxd-Crud-body"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="cxd-List-items"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="cxd-ListItem cxd-ListItem--actions-at-right"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="cxd-ListItem-checkBtn"
|
||||||
|
>
|
||||||
|
<label
|
||||||
|
class="cxd-Checkbox cxd-Checkbox--radio cxd-Checkbox--full"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
/>
|
||||||
|
<i />
|
||||||
|
<span
|
||||||
|
class=""
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="cxd-ListItem-content"
|
||||||
|
>
|
||||||
|
<p
|
||||||
|
class="cxd-ListItem-title h5"
|
||||||
|
>
|
||||||
|
A
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="cxd-ListItem cxd-ListItem--actions-at-right is-checked"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="cxd-ListItem-checkBtn"
|
||||||
|
>
|
||||||
|
<label
|
||||||
|
class="cxd-Checkbox cxd-Checkbox--radio cxd-Checkbox--full"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
/>
|
||||||
|
<i />
|
||||||
|
<span
|
||||||
|
class=""
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="cxd-ListItem-content"
|
||||||
|
>
|
||||||
|
<p
|
||||||
|
class="cxd-ListItem-title h5"
|
||||||
|
>
|
||||||
|
B
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="cxd-ListItem cxd-ListItem--actions-at-right"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="cxd-ListItem-checkBtn"
|
||||||
|
>
|
||||||
|
<label
|
||||||
|
class="cxd-Checkbox cxd-Checkbox--radio cxd-Checkbox--full"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
/>
|
||||||
|
<i />
|
||||||
|
<span
|
||||||
|
class=""
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="cxd-ListItem-content"
|
||||||
|
>
|
||||||
|
<p
|
||||||
|
class="cxd-ListItem-title h5"
|
||||||
|
>
|
||||||
|
C
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="cxd-Modal-footer"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="cxd-Button cxd-Button--default cxd-Button--size-default"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
取消
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="cxd-Button cxd-Button--primary cxd-Button--size-default"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
确认
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`Renderer:Picker base 2`] = `
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
class="cxd-Form-item cxd-Form-item--normal"
|
||||||
|
data-role="form-item"
|
||||||
|
>
|
||||||
|
<label
|
||||||
|
class="cxd-Form-label"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
<span
|
||||||
|
class="cxd-TplField"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
picker
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
<div
|
||||||
|
class="cxd-PickerControl cxd-Form-control"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="cxd-Picker cxd-Picker--single is-focused"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="cxd-Picker-input"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="cxd-Picker-valueWrap"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="cxd-Picker-values"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="cxd-Picker-value"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="cxd-Picker-valueIcon"
|
||||||
|
data-position="bottom"
|
||||||
|
data-tooltip="删除"
|
||||||
|
>
|
||||||
|
×
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="cxd-Picker-valueLabel"
|
||||||
|
>
|
||||||
|
B
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<input
|
||||||
|
value=""
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<span
|
||||||
|
class="cxd-Picker-btn"
|
||||||
|
>
|
||||||
|
<icon-mock
|
||||||
|
classname="icon icon-window-restore"
|
||||||
|
icon="window-restore"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
Loading…
Reference in New Issue
Block a user