amis/__tests__/factory.test.tsx

276 lines
6.0 KiB
TypeScript
Raw Normal View History

2019-04-30 11:11:25 +08:00
import {
2020-05-11 16:55:18 +08:00
registerRenderer,
unRegisterRenderer,
RendererProps
2019-04-30 11:11:25 +08:00
} from '../src/factory';
import '../src/themes/default';
2020-05-11 16:55:18 +08:00
import {render as amisRender} from '../src/index';
2019-04-30 11:11:25 +08:00
import React = require('react');
import {render, fireEvent, cleanup} from '@testing-library/react';
2020-05-11 16:55:18 +08:00
import {wait, makeEnv} from './helper';
2019-04-30 11:11:25 +08:00
2019-05-18 00:50:23 +08:00
test('factory unregistered Renderer', async () => {
2020-05-11 16:55:18 +08:00
const {container} = render(
amisRender({
type: 'my-renderer',
a: 23
})
);
await wait(300);
2020-05-11 16:55:18 +08:00
expect(container).toMatchSnapshot(); // not found
2019-05-18 00:50:23 +08:00
});
2019-04-30 11:11:25 +08:00
test('factory custom not found!', async () => {
2020-05-11 16:55:18 +08:00
const {container} = render(
amisRender(
{
2019-05-18 00:50:23 +08:00
type: 'my-renderer',
a: 23
2020-05-11 16:55:18 +08:00
},
{},
makeEnv({
loadRenderer: () => Promise.resolve(() => <div>Not Found</div>)
})
)
);
await wait(300);
2020-05-11 16:55:18 +08:00
expect(container).toMatchSnapshot(); // not found
2019-04-30 11:11:25 +08:00
});
test('factory custom not found 2!', async () => {
2020-05-11 16:55:18 +08:00
const {container} = render(
amisRender(
{
type: 'my-renderer',
a: 23
2020-05-11 16:55:18 +08:00
},
{},
makeEnv({
loadRenderer: () => () => <div>Not Found</div>
})
)
);
await wait(300);
2020-05-11 16:55:18 +08:00
expect(container).toMatchSnapshot(); // not found
});
test('factory custom not found 3!', async () => {
2020-05-11 16:55:18 +08:00
const {container} = render(
amisRender(
{
type: 'my-renderer',
a: 23
2020-05-11 16:55:18 +08:00
},
{},
makeEnv({
loadRenderer: () => <div>Not Found</div>
})
)
);
await wait(300);
2020-05-11 16:55:18 +08:00
expect(container).toMatchSnapshot(); // not found
});
test('factory load Renderer on need', async () => {
2020-05-11 16:55:18 +08:00
const {container} = render(
amisRender(
{
type: 'my-renderer2',
a: 23
2020-05-11 16:55:18 +08:00
},
{},
makeEnv({
session: 'loadRenderer',
2020-05-11 16:55:18 +08:00
loadRenderer: schema => {
interface MyProps extends RendererProps {
a?: number;
2020-05-11 16:55:18 +08:00
}
class MyComponent extends React.Component<MyProps> {
render() {
return <div>This is Custom Renderer2, a is {this.props.a}</div>;
}
2020-05-11 16:55:18 +08:00
}
registerRenderer({
component: MyComponent,
test: /\bmy-renderer2$/
});
}
2020-05-11 16:55:18 +08:00
})
)
);
await wait(300);
2020-05-11 16:55:18 +08:00
expect(container).toMatchSnapshot(); // not found
});
2019-04-30 11:11:25 +08:00
test('factory:registerRenderer', () => {
2020-05-11 16:55:18 +08:00
interface MyProps extends RendererProps {
a?: number;
2020-05-11 16:55:18 +08:00
}
2019-04-30 11:11:25 +08:00
2020-05-11 16:55:18 +08:00
class MyComponent extends React.Component<MyProps> {
render() {
return <div>This is Custom Renderer, a is {this.props.a}</div>;
2019-04-30 11:11:25 +08:00
}
2020-05-11 16:55:18 +08:00
}
2019-04-30 11:11:25 +08:00
2020-05-11 16:55:18 +08:00
const renderer = registerRenderer({
component: MyComponent,
test: /\bmy-renderer$/
});
2019-04-30 11:11:25 +08:00
2020-05-11 16:55:18 +08:00
const {container} = render(
amisRender({
type: 'my-renderer',
a: 23
})
);
2019-04-30 11:11:25 +08:00
2020-05-11 16:55:18 +08:00
expect(container).toMatchSnapshot();
unRegisterRenderer(renderer);
});
2020-05-11 16:55:18 +08:00
test('factory:definitions', async () => {
const {container, getByText} = render(
amisRender(
{
definitions: {
2020-05-11 16:55:18 +08:00
aa: {
type: 'text',
name: 'jack',
value: 'ref value',
remark: '通过<code>\\$ref</code>引入的组件'
},
bb: {
type: 'combo',
multiple: true,
multiLine: true,
remark: '<code>combo</code>中的子项引入自身,实现嵌套的效果',
controls: [
{
label: 'combo 1',
type: 'text',
2020-05-11 16:55:18 +08:00
name: 'key'
},
{
label: 'combo 2',
name: 'value',
$ref: 'aa'
},
{
name: 'children',
label: 'children',
$ref: 'bb'
}
]
}
},
type: 'page',
title: '引用',
body: [
2020-05-11 16:55:18 +08:00
{
type: 'form',
api: 'api/xxx',
actions: [],
controls: [
{
label: 'text2',
$ref: 'aa',
name: 'ref1'
},
{
label: 'combo',
$ref: 'bb',
name: 'ref2'
}
]
}
]
2020-05-11 16:55:18 +08:00
},
{},
makeEnv({})
)
);
await wait(300);
2020-05-11 16:55:18 +08:00
fireEvent.click(getByText('新增'));
expect(container).toMatchSnapshot();
});
test('factory:definitions override', () => {
2020-05-11 16:55:18 +08:00
const {container} = render(
amisRender(
{
definitions: {
2020-05-11 16:55:18 +08:00
aa: {
type: 'text',
name: 'jack',
remark: '通过<code>\\$ref</code>引入的组件'
},
bb: {
type: 'combo',
multiple: true,
multiLine: true,
remark: '<code>combo</code>中的子项引入自身,实现嵌套的效果',
controls: [
{
label: 'combo 1',
type: 'text',
2020-05-11 16:55:18 +08:00
name: 'key'
},
{
label: 'combo 2',
name: 'value',
$ref: 'aa'
},
{
name: 'children',
label: 'children',
$ref: 'bb'
}
]
}
},
type: 'page',
title: '引用',
body: [
2020-05-11 16:55:18 +08:00
{
type: 'form',
api: 'api/xxx',
actions: [],
controls: [
{
label: 'text2',
$ref: 'aa',
name: 'ref1'
},
{
label: 'combo',
$ref: 'bb',
name: 'ref2',
type: 'checkboxes',
value: 1,
options: [
{
label: 'Option A',
value: 1
},
{
label: 'Option B',
value: 2
}
]
2020-05-11 16:55:18 +08:00
}
]
}
]
2020-05-11 16:55:18 +08:00
},
{},
makeEnv({})
)
);
2020-05-11 16:55:18 +08:00
expect(container).toMatchSnapshot();
});