mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-02 03:58:07 +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