amis2/packages/amis/__tests__/renderers/Form/inputGroup.test.tsx

179 lines
4.5 KiB
TypeScript
Raw Normal View History

/**
* 组件名称: InputGroup
* :
* 1. 使
* 2.
*
*/
import {
render,
cleanup,
fireEvent,
screen,
waitFor
} from '@testing-library/react';
2022-06-02 10:00:09 +08:00
import '../../../src';
import {render as amisRender, clearStoresCache} from '../../../src';
import {makeEnv, wait} from '../../helper';
afterEach(() => {
cleanup();
clearStoresCache();
});
test('Renderer:InputGroup', async () => {
const {container} = render(
amisRender(
{
type: 'form',
api: '/api/xxx',
controls: [
{
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
}
]
}
],
title: 'The form',
actions: []
},
{},
makeEnv({})
)
);
expect(container).toMatchSnapshot();
});
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);
});
// 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));
// });
});