2023-02-27 20:48:07 +08:00
|
|
|
/**
|
|
|
|
* 组件名称: InputGroup 输入组合
|
|
|
|
* 单测内容:
|
|
|
|
* 1. 基础使用
|
|
|
|
* 2. 校验配置
|
|
|
|
*
|
|
|
|
*/
|
|
|
|
|
|
|
|
import {
|
|
|
|
render,
|
|
|
|
cleanup,
|
|
|
|
fireEvent,
|
|
|
|
screen,
|
|
|
|
waitFor
|
|
|
|
} from '@testing-library/react';
|
2022-06-02 10:00:09 +08:00
|
|
|
import '../../../src';
|
2023-02-27 20:48:07 +08:00
|
|
|
import {render as amisRender, clearStoresCache} from '../../../src';
|
|
|
|
import {makeEnv, wait} from '../../helper';
|
|
|
|
|
|
|
|
afterEach(() => {
|
|
|
|
cleanup();
|
|
|
|
clearStoresCache();
|
|
|
|
});
|
2019-06-18 09:50:05 +08:00
|
|
|
|
2023-02-27 20:48:07 +08:00
|
|
|
test('Renderer:InputGroup', async () => {
|
2021-06-03 13:05:35 +08:00
|
|
|
const {container} = render(
|
|
|
|
amisRender(
|
|
|
|
{
|
2019-06-18 09:50:05 +08:00
|
|
|
type: 'form',
|
|
|
|
api: '/api/xxx',
|
|
|
|
controls: [
|
2021-06-03 13:05:35 +08:00
|
|
|
{
|
|
|
|
type: 'input-group',
|
|
|
|
name: 'a',
|
|
|
|
label: 'input-group',
|
|
|
|
mode: 'horizontal',
|
|
|
|
className: 'no-border',
|
|
|
|
horizontal: {
|
|
|
|
leftFixed: 1,
|
|
|
|
left: 4,
|
|
|
|
right: 7
|
|
|
|
},
|
|
|
|
controls: [
|
|
|
|
{
|
|
|
|
name: 'text',
|
|
|
|
type: 'text',
|
|
|
|
validation: 'isUrl',
|
|
|
|
addOn: {
|
|
|
|
label: '按钮',
|
|
|
|
type: 'submit'
|
|
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'text1',
|
|
|
|
type: 'text',
|
|
|
|
hidden: true
|
|
|
|
}
|
|
|
|
]
|
|
|
|
}
|
2019-06-18 09:50:05 +08:00
|
|
|
],
|
|
|
|
title: 'The form',
|
|
|
|
actions: []
|
2021-06-03 13:05:35 +08:00
|
|
|
},
|
|
|
|
{},
|
|
|
|
makeEnv({})
|
|
|
|
)
|
|
|
|
);
|
2019-06-18 09:50:05 +08:00
|
|
|
|
2021-06-03 13:05:35 +08:00
|
|
|
expect(container).toMatchSnapshot();
|
|
|
|
});
|
2023-02-27 20:48:07 +08:00
|
|
|
|
|
|
|
const setup = (schema = {}, props = {}, env = {}) => {
|
|
|
|
const onSubmit = jest.fn();
|
|
|
|
const submitBtnText = 'Submit';
|
|
|
|
return render(
|
|
|
|
amisRender(
|
|
|
|
{
|
|
|
|
type: 'form',
|
|
|
|
api: '/api/mock2/form/saveForm',
|
|
|
|
submitText: submitBtnText,
|
|
|
|
body: [
|
|
|
|
{
|
|
|
|
type: 'input-group',
|
|
|
|
name: 'input-group',
|
|
|
|
label: '输入组合校验',
|
|
|
|
body: [
|
|
|
|
{
|
|
|
|
type: 'input-text',
|
|
|
|
name: 'child1',
|
|
|
|
label: 'child1',
|
|
|
|
validations: {
|
|
|
|
isNumeric: true,
|
|
|
|
maxLength: 3
|
|
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
|
|
type: 'input-text',
|
|
|
|
name: 'child2',
|
|
|
|
validations: {
|
|
|
|
minLength: 5
|
|
|
|
}
|
|
|
|
}
|
|
|
|
],
|
|
|
|
...schema
|
|
|
|
}
|
|
|
|
]
|
|
|
|
},
|
|
|
|
{onSubmit, ...props},
|
|
|
|
makeEnv({...env})
|
|
|
|
)
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
describe('InputGroup with validationConfig', () => {
|
|
|
|
test('InputGroup with validationConfig: errorMode', async () => {
|
|
|
|
const {container} = setup({validationConfig: {errorMode: 'partial'}});
|
|
|
|
const child1 = container.querySelector(
|
|
|
|
'input[name=child1]'
|
|
|
|
) as HTMLInputElement;
|
|
|
|
const child2 = container.querySelector(
|
|
|
|
'input[name=child2]'
|
|
|
|
) as HTMLInputElement;
|
|
|
|
fireEvent.change(child1, {target: {value: 'amis'}});
|
|
|
|
await wait(300);
|
|
|
|
|
|
|
|
const submitBtn = screen.getByRole('button', {name: 'Submit'});
|
|
|
|
fireEvent.click(submitBtn);
|
|
|
|
await wait(500);
|
|
|
|
|
|
|
|
expect(
|
|
|
|
container.querySelector('*[class*="InputGroup-validation--partial"]')
|
|
|
|
).toBeInTheDocument();
|
|
|
|
|
|
|
|
const errorDom = container.querySelector('*[class*="Form-feedback"]');
|
|
|
|
expect(errorDom?.childElementCount).toStrictEqual(1);
|
|
|
|
|
|
|
|
fireEvent.change(child2, {target: {value: 'amis'}});
|
|
|
|
await wait(300);
|
|
|
|
|
|
|
|
fireEvent.click(submitBtn);
|
|
|
|
await wait(500);
|
|
|
|
|
|
|
|
expect(errorDom?.childElementCount).toStrictEqual(2);
|
|
|
|
});
|
|
|
|
|
2023-04-07 13:17:56 +08:00
|
|
|
// v2.9.1 改为顺序校验后,不会同时输出多条校验错误消息,所以也不会用到分隔符
|
|
|
|
// test('InputGroup with validationConfig: delimiter', async () => {
|
|
|
|
// const delimiter = '@@';
|
|
|
|
// const {container} = setup({validationConfig: {delimiter}});
|
|
|
|
// const child1 = container.querySelector(
|
|
|
|
// 'input[name=child1]'
|
|
|
|
// ) as HTMLInputElement;
|
|
|
|
// const child2 = container.querySelector(
|
|
|
|
// 'input[name=child2]'
|
|
|
|
// ) as HTMLInputElement;
|
|
|
|
// fireEvent.change(child1, {target: {value: 'amis'}});
|
|
|
|
// await wait(500);
|
|
|
|
|
|
|
|
// const submitBtn = screen.getByRole('button', {name: 'Submit'});
|
|
|
|
// fireEvent.click(submitBtn);
|
|
|
|
// await wait(500);
|
|
|
|
|
|
|
|
// screen.debug(container);
|
|
|
|
|
|
|
|
// expect(
|
|
|
|
// container.querySelector('*[class*="InputGroup-validation--full"]')
|
|
|
|
// ).toBeInTheDocument();
|
|
|
|
|
|
|
|
// const errorDom = container.querySelector('*[class*="Form-feedback"]');
|
|
|
|
// expect(errorDom?.childElementCount).toStrictEqual(1);
|
|
|
|
|
|
|
|
// const child1ErrorText = errorDom?.childNodes[0]
|
|
|
|
// ? errorDom.childNodes[0].textContent
|
|
|
|
// : '';
|
|
|
|
|
|
|
|
// expect(child1ErrorText).toEqual(expect.stringMatching(delimiter));
|
|
|
|
// });
|
2023-02-27 20:48:07 +08:00
|
|
|
});
|