mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-05 21:49:09 +08:00
0742036e57
* feat:组件广播事件机制 * feat:组件广播事件机制 * feat:组件广播事件机制 * feat:组件广播事件机制 * feat:组件广播事件机制
1388 lines
30 KiB
TypeScript
1388 lines
30 KiB
TypeScript
import React = require('react');
|
|
import * as renderer from 'react-test-renderer';
|
|
import {render, fireEvent, cleanup} from '@testing-library/react';
|
|
import '../../src/themes/default';
|
|
import {render as amisRender} from '../../src/index';
|
|
import {wait, makeEnv} from '../helper';
|
|
import {clearStoresCache} from '../../src/factory';
|
|
|
|
afterEach(() => {
|
|
cleanup();
|
|
clearStoresCache();
|
|
});
|
|
|
|
test('Renderer:Wizard', () => {
|
|
const component = renderer.create(
|
|
amisRender(
|
|
{
|
|
type: 'wizard',
|
|
api: '/api/mock2/form/saveForm?waitSeconds=2',
|
|
steps: [
|
|
{
|
|
title: 'Step 1',
|
|
controls: [
|
|
{
|
|
name: 'website',
|
|
label: '网址',
|
|
type: 'url',
|
|
required: true
|
|
},
|
|
{
|
|
name: 'name',
|
|
label: '名称',
|
|
type: 'text',
|
|
required: true
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: 'Step 2',
|
|
controls: [
|
|
{
|
|
name: 'email2',
|
|
label: '邮箱',
|
|
type: 'email',
|
|
required: true
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: 'Step 3',
|
|
controls: ['这是最后一步了']
|
|
}
|
|
]
|
|
},
|
|
{},
|
|
makeEnv()
|
|
)
|
|
);
|
|
let tree = component.toJSON();
|
|
|
|
expect(tree).toMatchSnapshot();
|
|
});
|
|
|
|
test('Renderer:Wizard readOnly', () => {
|
|
const component = renderer.create(
|
|
amisRender(
|
|
{
|
|
type: 'wizard',
|
|
api: '/api/mock2/form/saveForm?waitSeconds=2',
|
|
steps: [
|
|
{
|
|
title: 'Step 1',
|
|
controls: [
|
|
{
|
|
name: 'website',
|
|
label: '网址',
|
|
type: 'url',
|
|
readOnly: true,
|
|
value: 'http://amis.baidu.com'
|
|
},
|
|
{
|
|
name: 'name',
|
|
label: '名称',
|
|
type: 'text',
|
|
value: 'Amis'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: 'Step 2',
|
|
controls: [
|
|
{
|
|
name: 'email2',
|
|
label: '邮箱',
|
|
type: 'email',
|
|
value: 'xxx@xxx.com'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: 'Step 3',
|
|
controls: ['这是最后一步了']
|
|
}
|
|
]
|
|
},
|
|
{},
|
|
makeEnv()
|
|
)
|
|
);
|
|
let tree = component.toJSON();
|
|
|
|
expect(tree).toMatchSnapshot();
|
|
});
|
|
|
|
test('Renderer:Wizard initApi', async () => {
|
|
const fetcher = jest.fn().mockImplementationOnce(() =>
|
|
Promise.resolve({
|
|
data: {
|
|
status: 0,
|
|
msg: 'ok',
|
|
data: {
|
|
author: 'fex',
|
|
date: 1555382395,
|
|
info: '',
|
|
name: 'Amis renderer'
|
|
}
|
|
}
|
|
})
|
|
);
|
|
|
|
const component = renderer.create(
|
|
amisRender(
|
|
{
|
|
type: 'wizard',
|
|
api: '/api/mock2/form/saveForm?waitSeconds=2',
|
|
initApi: '/api/mock2/form/initData?waitSeconds=2',
|
|
steps: [
|
|
{
|
|
title: 'Step 1',
|
|
controls: [
|
|
{
|
|
name: 'website',
|
|
label: '网址',
|
|
type: 'url',
|
|
required: true
|
|
},
|
|
{
|
|
name: 'name',
|
|
label: '名称',
|
|
type: 'text',
|
|
required: true
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: 'Step 2',
|
|
controls: [
|
|
{
|
|
name: 'email2',
|
|
label: '邮箱',
|
|
type: 'email',
|
|
required: true
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: 'Step 3',
|
|
controls: ['这是最后一步了']
|
|
}
|
|
]
|
|
},
|
|
{},
|
|
makeEnv({
|
|
fetcher
|
|
})
|
|
)
|
|
);
|
|
|
|
await wait(500);
|
|
expect(component.toJSON()).toMatchSnapshot();
|
|
expect(fetcher).toHaveBeenCalled();
|
|
});
|
|
|
|
test('Renderer:Wizard initApi show loading', async () => {
|
|
let done: Function;
|
|
let wating = new Promise(resolve => {
|
|
done = resolve;
|
|
});
|
|
|
|
const fetcher = jest.fn().mockImplementationOnce(() => {
|
|
return new Promise(async resolve => {
|
|
await wait(100, () => expect(component.toJSON()).toMatchSnapshot());
|
|
await wait(100, () =>
|
|
resolve({
|
|
data: {
|
|
status: 0,
|
|
msg: 'ok',
|
|
data: {
|
|
a: 3
|
|
}
|
|
}
|
|
})
|
|
);
|
|
await wait(100, done);
|
|
});
|
|
});
|
|
const component = renderer.create(
|
|
amisRender(
|
|
{
|
|
type: 'wizard',
|
|
api: '/api/mock2/form/saveForm?waitSeconds=2',
|
|
initApi: '/api/mock2/form/saveForm?waitSeconds=2',
|
|
steps: [
|
|
{
|
|
title: 'Step 1',
|
|
controls: [
|
|
{
|
|
name: 'website',
|
|
label: '网址',
|
|
type: 'url',
|
|
required: true
|
|
},
|
|
{
|
|
name: 'name',
|
|
label: '名称',
|
|
type: 'text',
|
|
required: true
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: 'Step 2',
|
|
controls: [
|
|
{
|
|
name: 'email2',
|
|
label: '邮箱',
|
|
type: 'email',
|
|
required: true
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: 'Step 3',
|
|
controls: ['这是最后一步了']
|
|
}
|
|
]
|
|
},
|
|
{},
|
|
makeEnv({
|
|
fetcher
|
|
})
|
|
)
|
|
);
|
|
|
|
await wating;
|
|
let tree = component.toJSON();
|
|
|
|
expect(tree).toMatchSnapshot();
|
|
});
|
|
|
|
test('Renderer:Wizard initApi initFetch:false', async () => {
|
|
const fetcher = jest.fn().mockImplementationOnce(() =>
|
|
Promise.resolve({
|
|
data: {
|
|
status: 0,
|
|
msg: 'ok',
|
|
data: {
|
|
author: 'fex',
|
|
date: 1555382395,
|
|
info: '',
|
|
name: 'Amis renderer'
|
|
}
|
|
}
|
|
})
|
|
);
|
|
|
|
renderer.create(
|
|
amisRender(
|
|
{
|
|
type: 'wizard',
|
|
api: '/api/mock2/form/saveForm?waitSeconds=2',
|
|
initApi: '/api/mock2/form/initData?waitSeconds=2',
|
|
initFetch: false,
|
|
steps: [
|
|
{
|
|
title: 'Step 1',
|
|
controls: [
|
|
{
|
|
name: 'website',
|
|
label: '网址',
|
|
type: 'url',
|
|
required: true
|
|
},
|
|
{
|
|
name: 'name',
|
|
label: '名称',
|
|
type: 'text',
|
|
required: true
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: 'Step 2',
|
|
controls: [
|
|
{
|
|
name: 'email2',
|
|
label: '邮箱',
|
|
type: 'email',
|
|
required: true
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: 'Step 3',
|
|
controls: ['这是最后一步了']
|
|
}
|
|
]
|
|
},
|
|
{},
|
|
makeEnv({
|
|
fetcher
|
|
})
|
|
)
|
|
);
|
|
|
|
await wait(500);
|
|
expect(fetcher).not.toHaveBeenCalled();
|
|
});
|
|
|
|
test('Renderer:Wizard initApi initFetch:true', async () => {
|
|
const fetcher = jest.fn().mockImplementationOnce(() =>
|
|
Promise.resolve({
|
|
data: {
|
|
status: 0,
|
|
msg: 'ok',
|
|
data: {
|
|
author: 'fex',
|
|
date: 1555382395,
|
|
info: '',
|
|
name: 'Amis renderer'
|
|
}
|
|
}
|
|
})
|
|
);
|
|
|
|
renderer.create(
|
|
amisRender(
|
|
{
|
|
type: 'wizard',
|
|
api: '/api/mock2/form/saveForm?waitSeconds=2',
|
|
initApi: '/api/mock2/form/initData?waitSeconds=2',
|
|
initFetch: true,
|
|
steps: [
|
|
{
|
|
title: 'Step 1',
|
|
controls: [
|
|
{
|
|
name: 'website',
|
|
label: '网址',
|
|
type: 'url',
|
|
required: true
|
|
},
|
|
{
|
|
name: 'name',
|
|
label: '名称',
|
|
type: 'text',
|
|
required: true
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: 'Step 2',
|
|
controls: [
|
|
{
|
|
name: 'email2',
|
|
label: '邮箱',
|
|
type: 'email',
|
|
required: true
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: 'Step 3',
|
|
controls: ['这是最后一步了']
|
|
}
|
|
]
|
|
},
|
|
{},
|
|
makeEnv({
|
|
fetcher
|
|
})
|
|
)
|
|
);
|
|
|
|
await wait(500);
|
|
expect(fetcher).toHaveBeenCalled();
|
|
});
|
|
|
|
test('Renderer:Wizard initApi initFetchOn:false', async () => {
|
|
const fetcher = jest.fn().mockImplementationOnce(() =>
|
|
Promise.resolve({
|
|
data: {
|
|
status: 0,
|
|
msg: 'ok',
|
|
data: {
|
|
author: 'fex',
|
|
date: 1555382395,
|
|
info: '',
|
|
name: 'Amis renderer'
|
|
}
|
|
}
|
|
})
|
|
);
|
|
|
|
renderer.create(
|
|
amisRender(
|
|
{
|
|
type: 'wizard',
|
|
api: '/api/mock2/form/saveForm?waitSeconds=2',
|
|
initApi: '/api/mock2/form/initData?waitSeconds=2',
|
|
initFetchOn: 'this.goFetch',
|
|
steps: [
|
|
{
|
|
title: 'Step 1',
|
|
controls: [
|
|
{
|
|
name: 'website',
|
|
label: '网址',
|
|
type: 'url',
|
|
required: true
|
|
},
|
|
{
|
|
name: 'name',
|
|
label: '名称',
|
|
type: 'text',
|
|
required: true
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: 'Step 2',
|
|
controls: [
|
|
{
|
|
name: 'email2',
|
|
label: '邮箱',
|
|
type: 'email',
|
|
required: true
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: 'Step 3',
|
|
controls: ['这是最后一步了']
|
|
}
|
|
]
|
|
},
|
|
{
|
|
data: {
|
|
goFetch: false
|
|
}
|
|
},
|
|
makeEnv({
|
|
fetcher
|
|
})
|
|
)
|
|
);
|
|
|
|
await wait(500);
|
|
expect(fetcher).not.toHaveBeenCalled();
|
|
});
|
|
|
|
test('Renderer:Wizard initApi initFetchOn:true', async () => {
|
|
const fetcher = jest.fn().mockImplementationOnce(() =>
|
|
Promise.resolve({
|
|
data: {
|
|
status: 0,
|
|
msg: 'ok',
|
|
data: {
|
|
author: 'fex',
|
|
date: 1555382395,
|
|
info: '',
|
|
name: 'Amis renderer'
|
|
}
|
|
}
|
|
})
|
|
);
|
|
|
|
renderer.create(
|
|
amisRender(
|
|
{
|
|
type: 'wizard',
|
|
api: '/api/mock2/form/saveForm?waitSeconds=2',
|
|
initApi: '/api/mock2/form/initData?waitSeconds=2',
|
|
initFetchOn: 'this.goFetch',
|
|
steps: [
|
|
{
|
|
title: 'Step 1',
|
|
controls: [
|
|
{
|
|
name: 'website',
|
|
label: '网址',
|
|
type: 'url',
|
|
required: true
|
|
},
|
|
{
|
|
name: 'name',
|
|
label: '名称',
|
|
type: 'text',
|
|
required: true
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: 'Step 2',
|
|
controls: [
|
|
{
|
|
name: 'email2',
|
|
label: '邮箱',
|
|
type: 'email',
|
|
required: true
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: 'Step 3',
|
|
controls: ['这是最后一步了']
|
|
}
|
|
]
|
|
},
|
|
{
|
|
data: {
|
|
goFetch: true
|
|
}
|
|
},
|
|
makeEnv({
|
|
fetcher
|
|
})
|
|
)
|
|
);
|
|
|
|
await wait(500);
|
|
expect(fetcher).toHaveBeenCalled();
|
|
});
|
|
|
|
test('Renderer:Wizard actionPrevLabel actionNextLabel actionFinishLabel className actionClassName', async () => {
|
|
const fetcher = jest.fn().mockImplementation(() =>
|
|
Promise.resolve({
|
|
data: {
|
|
status: 0,
|
|
msg: '保存成功',
|
|
data: {}
|
|
}
|
|
})
|
|
);
|
|
|
|
const {getByText, container} = render(
|
|
amisRender(
|
|
{
|
|
type: 'wizard',
|
|
api: '/api/mock2/form/saveForm?waitSeconds=2',
|
|
className: 'wizard-class-name',
|
|
actionClassName: 'btn-lg btn-primary',
|
|
actionPrevLabel: 'PrevStep',
|
|
actionNextLabel: 'NextStep',
|
|
actionFinishLabel: 'Submit',
|
|
steps: [
|
|
{
|
|
title: 'Step 1',
|
|
controls: [
|
|
{
|
|
name: 'website',
|
|
label: '网址',
|
|
type: 'url'
|
|
},
|
|
{
|
|
name: 'name',
|
|
label: '名称',
|
|
type: 'text'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: 'Step 2',
|
|
controls: ['这是最后一步了']
|
|
}
|
|
]
|
|
},
|
|
{},
|
|
makeEnv({
|
|
fetcher
|
|
})
|
|
)
|
|
);
|
|
|
|
await wait(1000);
|
|
fireEvent.click(getByText(/NextStep/));
|
|
await wait(1000);
|
|
fireEvent.click(getByText(/Submit/));
|
|
await wait(1000);
|
|
expect(container).toMatchSnapshot();
|
|
expect(fetcher).toHaveBeenCalled();
|
|
|
|
fireEvent.click(getByText(/PrevStep/));
|
|
await wait(100);
|
|
expect(container).toMatchSnapshot();
|
|
});
|
|
|
|
test('Renderer:Wizard actionNextSaveLabel', async () => {
|
|
const fetcher = jest.fn().mockImplementation(() =>
|
|
Promise.resolve({
|
|
data: {
|
|
status: 0,
|
|
msg: '保存成功',
|
|
data: {}
|
|
}
|
|
})
|
|
);
|
|
|
|
const {getByText} = render(
|
|
amisRender(
|
|
{
|
|
type: 'wizard',
|
|
api: '/api/mock2/form/saveForm?waitSeconds=2',
|
|
actionNextSaveLabel: 'saveAndNext',
|
|
steps: [
|
|
{
|
|
title: 'Step 1',
|
|
api: '/api/mock2/form/saveForm?waitSeconds=2',
|
|
controls: [
|
|
{
|
|
name: 'website',
|
|
label: '网址',
|
|
type: 'url'
|
|
},
|
|
{
|
|
name: 'name',
|
|
label: '名称',
|
|
type: 'text'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: 'Step 2',
|
|
controls: ['这是最后一步了']
|
|
}
|
|
]
|
|
},
|
|
{},
|
|
makeEnv({
|
|
fetcher
|
|
})
|
|
)
|
|
);
|
|
|
|
await wait(1000);
|
|
fireEvent.click(getByText(/saveAndNext/));
|
|
await wait(1000);
|
|
expect(fetcher).toHaveBeenCalled();
|
|
});
|
|
|
|
test('Renderer:Wizard send data', async () => {
|
|
const fetcher = jest.fn().mockImplementation(() =>
|
|
Promise.resolve({
|
|
data: {
|
|
status: 0,
|
|
msg: '保存成功',
|
|
data: {}
|
|
}
|
|
})
|
|
);
|
|
|
|
const {getByText, container} = render(
|
|
amisRender(
|
|
{
|
|
type: 'wizard',
|
|
api: '/api/mock2/form/saveForm?waitSeconds=2',
|
|
steps: [
|
|
{
|
|
title: 'Step 1',
|
|
controls: [
|
|
{
|
|
name: 'website',
|
|
label: '网址',
|
|
type: 'url',
|
|
value: 'http://amis.baidu.com'
|
|
},
|
|
{
|
|
name: 'name',
|
|
label: '名称',
|
|
type: 'text',
|
|
value: 'Amis'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: 'Step 2',
|
|
controls: ['这是最后一步了']
|
|
}
|
|
]
|
|
},
|
|
{},
|
|
makeEnv({
|
|
fetcher
|
|
})
|
|
)
|
|
);
|
|
|
|
await wait(1000);
|
|
fireEvent.click(getByText(/下一步/));
|
|
await wait(1000);
|
|
fireEvent.click(getByText(/完成/));
|
|
await wait(1000);
|
|
expect(fetcher).toHaveBeenCalled();
|
|
expect(fetcher.mock.calls[0][0]).toMatchObject({
|
|
data: {
|
|
name: 'Amis',
|
|
website: 'http://amis.baidu.com'
|
|
}
|
|
});
|
|
expect(container).toMatchSnapshot();
|
|
});
|
|
|
|
test('Renderer:Wizard step api', async () => {
|
|
const fetcher = jest.fn().mockImplementation(() =>
|
|
Promise.resolve({
|
|
data: {
|
|
status: 0,
|
|
msg: '保存成功',
|
|
data: {}
|
|
}
|
|
})
|
|
);
|
|
|
|
const {getByText} = render(
|
|
amisRender(
|
|
{
|
|
type: 'wizard',
|
|
steps: [
|
|
{
|
|
title: 'Step 1',
|
|
api: '/api/mock2/form/saveForm?waitSeconds=2',
|
|
controls: [
|
|
{
|
|
name: 'website',
|
|
label: '网址',
|
|
type: 'url',
|
|
value: 'http://amis.baidu.com'
|
|
},
|
|
{
|
|
name: 'name',
|
|
label: '名称',
|
|
type: 'text',
|
|
value: 'Amis'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: 'Step 2',
|
|
controls: [
|
|
{
|
|
name: 'email2',
|
|
label: '邮箱',
|
|
type: 'email',
|
|
required: true
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: 'Step 3',
|
|
controls: ['这是最后一步了']
|
|
}
|
|
]
|
|
},
|
|
{},
|
|
makeEnv({
|
|
fetcher
|
|
})
|
|
)
|
|
);
|
|
|
|
expect(fetcher).not.toHaveBeenCalled();
|
|
fireEvent.click(getByText(/下一步/));
|
|
await wait(1000);
|
|
expect(fetcher).toHaveBeenCalled();
|
|
});
|
|
|
|
test('Renderer:Wizard step initApi', async () => {
|
|
const fetcher = jest.fn().mockImplementation(() =>
|
|
Promise.resolve({
|
|
data: {
|
|
status: 0,
|
|
msg: 'ok',
|
|
data: {
|
|
author: 'fex',
|
|
date: 1555382395,
|
|
email: 'xxx@xxx.com'
|
|
}
|
|
}
|
|
})
|
|
);
|
|
|
|
const {getByText, container} = render(
|
|
amisRender(
|
|
{
|
|
type: 'wizard',
|
|
api: '/api/mock2/form/saveForm?waitSeconds=2',
|
|
steps: [
|
|
{
|
|
title: 'Step 1',
|
|
controls: [
|
|
{
|
|
name: 'website',
|
|
label: '网址',
|
|
type: 'url',
|
|
value: 'http://amis.baidu.com'
|
|
},
|
|
{
|
|
name: 'name',
|
|
label: '名称',
|
|
type: 'text',
|
|
value: 'Amis'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: 'Step 2',
|
|
initApi: '/api/mock2/form/saveForm?waitSeconds=2',
|
|
controls: [
|
|
{
|
|
name: 'email',
|
|
label: '邮箱',
|
|
type: 'email',
|
|
required: true
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: 'Step 3',
|
|
controls: ['这是最后一步了']
|
|
}
|
|
]
|
|
},
|
|
{},
|
|
makeEnv({
|
|
fetcher
|
|
})
|
|
)
|
|
);
|
|
|
|
expect(fetcher).not.toHaveBeenCalled();
|
|
fireEvent.click(getByText(/下一步/));
|
|
await wait(1000);
|
|
expect(fetcher).toHaveBeenCalled();
|
|
expect(container).toMatchSnapshot();
|
|
});
|
|
|
|
test('Renderer:Wizard step initFetch:false', async () => {
|
|
const fetcher = jest.fn().mockImplementation(() =>
|
|
Promise.resolve({
|
|
data: {
|
|
status: 0,
|
|
msg: '保存成功',
|
|
data: {}
|
|
}
|
|
})
|
|
);
|
|
|
|
const {getByText} = render(
|
|
amisRender(
|
|
{
|
|
type: 'wizard',
|
|
api: '/api/mock2/form/saveForm?waitSeconds=2',
|
|
steps: [
|
|
{
|
|
title: 'Step 1',
|
|
controls: [
|
|
{
|
|
name: 'website',
|
|
label: '网址',
|
|
type: 'url',
|
|
value: 'http://amis.baidu.com'
|
|
},
|
|
{
|
|
name: 'name',
|
|
label: '名称',
|
|
type: 'text',
|
|
value: 'Amis'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: 'Step 2',
|
|
initApi: '/api/mock2/form/saveForm?waitSeconds=2',
|
|
initFetch: false,
|
|
controls: [
|
|
{
|
|
name: 'email2',
|
|
label: '邮箱',
|
|
type: 'email',
|
|
required: true
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: 'Step 3',
|
|
controls: ['这是最后一步了']
|
|
}
|
|
]
|
|
},
|
|
{},
|
|
makeEnv({
|
|
fetcher
|
|
})
|
|
)
|
|
);
|
|
|
|
expect(fetcher).not.toHaveBeenCalled();
|
|
fireEvent.click(getByText(/下一步/));
|
|
await wait(1000);
|
|
expect(fetcher).not.toHaveBeenCalled();
|
|
});
|
|
|
|
test('Renderer:Wizard step initFetch:true', async () => {
|
|
const fetcher = jest.fn().mockImplementation(() =>
|
|
Promise.resolve({
|
|
data: {
|
|
status: 0,
|
|
msg: '保存成功',
|
|
data: {}
|
|
}
|
|
})
|
|
);
|
|
|
|
const {getByText} = render(
|
|
amisRender(
|
|
{
|
|
type: 'wizard',
|
|
api: '/api/mock2/form/saveForm?waitSeconds=2',
|
|
steps: [
|
|
{
|
|
title: 'Step 1',
|
|
controls: [
|
|
{
|
|
name: 'website',
|
|
label: '网址',
|
|
type: 'url',
|
|
value: 'http://amis.baidu.com'
|
|
},
|
|
{
|
|
name: 'name',
|
|
label: '名称',
|
|
type: 'text',
|
|
value: 'Amis'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: 'Step 2',
|
|
initApi: '/api/mock2/form/saveForm?waitSeconds=2',
|
|
initFetch: true,
|
|
controls: [
|
|
{
|
|
name: 'email2',
|
|
label: '邮箱',
|
|
type: 'email',
|
|
required: true
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: 'Step 3',
|
|
controls: ['这是最后一步了']
|
|
}
|
|
]
|
|
},
|
|
{},
|
|
makeEnv({
|
|
fetcher
|
|
})
|
|
)
|
|
);
|
|
|
|
expect(fetcher).not.toHaveBeenCalled();
|
|
fireEvent.click(getByText(/下一步/));
|
|
await wait(1000);
|
|
expect(fetcher).toHaveBeenCalled();
|
|
});
|
|
|
|
test('Renderer:Wizard step initFetchOn:false', async () => {
|
|
const fetcher = jest.fn().mockImplementation(() =>
|
|
Promise.resolve({
|
|
data: {
|
|
status: 0,
|
|
msg: '保存成功',
|
|
data: {}
|
|
}
|
|
})
|
|
);
|
|
|
|
const {getByText} = render(
|
|
amisRender(
|
|
{
|
|
type: 'wizard',
|
|
api: '/api/mock2/form/saveForm?waitSeconds=2',
|
|
steps: [
|
|
{
|
|
title: 'Step 1',
|
|
controls: [
|
|
{
|
|
name: 'website',
|
|
label: '网址',
|
|
type: 'url',
|
|
value: 'http://amis.baidu.com'
|
|
},
|
|
{
|
|
name: 'name',
|
|
label: '名称',
|
|
type: 'text',
|
|
value: 'Amis'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: 'Step 2',
|
|
initApi: '/api/mock2/form/saveForm?waitSeconds=2',
|
|
initFetchOn: 'this.goFetch',
|
|
controls: [
|
|
{
|
|
name: 'email2',
|
|
label: '邮箱',
|
|
type: 'email',
|
|
required: true
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: 'Step 3',
|
|
controls: ['这是最后一步了']
|
|
}
|
|
]
|
|
},
|
|
{
|
|
data: {
|
|
goFetch: false
|
|
}
|
|
},
|
|
makeEnv({
|
|
fetcher
|
|
})
|
|
)
|
|
);
|
|
|
|
expect(fetcher).not.toHaveBeenCalled();
|
|
fireEvent.click(getByText(/下一步/));
|
|
await wait(1000);
|
|
expect(fetcher).not.toHaveBeenCalled();
|
|
});
|
|
|
|
test('Renderer:Wizard step initFetchOn:true', async () => {
|
|
const fetcher = jest.fn().mockImplementation(() =>
|
|
Promise.resolve({
|
|
data: {
|
|
status: 0,
|
|
msg: '保存成功',
|
|
data: {}
|
|
}
|
|
})
|
|
);
|
|
|
|
const {getByText} = render(
|
|
amisRender(
|
|
{
|
|
type: 'wizard',
|
|
api: '/api/mock2/form/saveForm?waitSeconds=2',
|
|
steps: [
|
|
{
|
|
title: 'Step 1',
|
|
controls: [
|
|
{
|
|
name: 'website',
|
|
label: '网址',
|
|
type: 'url',
|
|
value: 'http://amis.baidu.com'
|
|
},
|
|
{
|
|
name: 'name',
|
|
label: '名称',
|
|
type: 'text',
|
|
value: 'Amis'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: 'Step 2',
|
|
initApi: '/api/mock2/form/saveForm?waitSeconds=2',
|
|
initFetchOn: 'this.goFetch',
|
|
controls: [
|
|
{
|
|
name: 'email2',
|
|
label: '邮箱',
|
|
type: 'email',
|
|
required: true
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: 'Step 3',
|
|
controls: ['这是最后一步了']
|
|
}
|
|
]
|
|
},
|
|
{
|
|
data: {
|
|
goFetch: true
|
|
}
|
|
},
|
|
makeEnv({
|
|
fetcher
|
|
})
|
|
)
|
|
);
|
|
|
|
expect(fetcher).not.toHaveBeenCalled();
|
|
fireEvent.click(getByText(/下一步/));
|
|
await wait(1000);
|
|
expect(fetcher).toHaveBeenCalled();
|
|
});
|
|
|
|
test('Renderer:Wizard validate', async () => {
|
|
const {getByText, container} = render(
|
|
amisRender(
|
|
{
|
|
type: 'wizard',
|
|
api: '/api/mock2/form/saveForm?waitSeconds=2',
|
|
steps: [
|
|
{
|
|
title: 'Step 1',
|
|
controls: [
|
|
{
|
|
name: 'website',
|
|
label: '网址',
|
|
type: 'url',
|
|
value: 'http',
|
|
required: true
|
|
},
|
|
{
|
|
name: 'name',
|
|
label: '名称',
|
|
type: 'text',
|
|
required: true
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: 'Step 2',
|
|
controls: [
|
|
{
|
|
name: 'email2',
|
|
label: '邮箱',
|
|
type: 'email',
|
|
required: true
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: 'Step 3',
|
|
controls: ['这是最后一步了']
|
|
}
|
|
]
|
|
},
|
|
{},
|
|
makeEnv()
|
|
)
|
|
);
|
|
|
|
fireEvent.click(getByText(/下一步/));
|
|
await wait(1000);
|
|
expect(container).toMatchSnapshot();
|
|
});
|
|
|
|
test('Renderer:Wizard initApi reload', async () => {
|
|
const fetcher = jest.fn().mockImplementation(() =>
|
|
Promise.resolve({
|
|
data: {
|
|
status: 0,
|
|
msg: 'ok',
|
|
data: {}
|
|
}
|
|
})
|
|
);
|
|
|
|
const {container, getByText} = render(
|
|
amisRender(
|
|
{
|
|
type: 'page',
|
|
name: 'thePage',
|
|
initApi: '/api/xxx',
|
|
body: {
|
|
type: 'wizard',
|
|
api: '/api/mock2/form/saveForm?waitSeconds=2',
|
|
reload: 'thePage',
|
|
steps: [
|
|
{
|
|
title: 'Step 1',
|
|
controls: [
|
|
{
|
|
name: 'website',
|
|
label: '网址',
|
|
type: 'url',
|
|
value: 'http://amis.baidu.com'
|
|
},
|
|
{
|
|
name: 'name',
|
|
label: '名称',
|
|
type: 'text',
|
|
value: 'Amis'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: 'Step 2',
|
|
controls: ['这是最后一步了']
|
|
}
|
|
]
|
|
}
|
|
},
|
|
{},
|
|
makeEnv({
|
|
fetcher
|
|
})
|
|
)
|
|
);
|
|
|
|
await wait(500);
|
|
expect(container).toMatchSnapshot();
|
|
fireEvent.click(getByText(/下一步/));
|
|
await wait(500);
|
|
expect(container).toMatchSnapshot();
|
|
fireEvent.click(getByText(/完成/));
|
|
await wait(1000);
|
|
expect(fetcher).toHaveBeenCalledTimes(3);
|
|
expect(container).toMatchSnapshot();
|
|
});
|
|
|
|
test('Renderer:Wizard steps not array', () => {
|
|
const component = renderer.create(
|
|
amisRender({
|
|
type: 'wizard',
|
|
api: '/api/mock2/form/saveForm?waitSeconds=2',
|
|
steps: ''
|
|
})
|
|
);
|
|
let tree = component.toJSON();
|
|
|
|
expect(tree).toMatchSnapshot();
|
|
});
|
|
|
|
test('Renderer:Wizard target', async () => {
|
|
const {getByText, container} = render(
|
|
amisRender(
|
|
{
|
|
type: 'page',
|
|
body: [
|
|
{
|
|
type: 'wizard',
|
|
target: 'theForm',
|
|
steps: [
|
|
{
|
|
title: 'Step 1',
|
|
controls: [
|
|
{
|
|
name: 'website',
|
|
label: '网址',
|
|
type: 'url',
|
|
value: 'http://amis.baidu.com'
|
|
},
|
|
{
|
|
name: 'name',
|
|
label: '名称',
|
|
type: 'text',
|
|
value: 'Amis'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: 'Step 2',
|
|
controls: ['这是最后一步了']
|
|
}
|
|
]
|
|
},
|
|
{
|
|
type: 'form',
|
|
name: 'theForm',
|
|
controls: [
|
|
{
|
|
type: 'text',
|
|
name: 'website',
|
|
label: 'Website'
|
|
},
|
|
{
|
|
type: 'text',
|
|
name: 'name',
|
|
label: 'Name'
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{}
|
|
)
|
|
);
|
|
|
|
await wait(1000);
|
|
fireEvent.click(getByText(/下一步/));
|
|
await wait(1000);
|
|
fireEvent.click(getByText(/完成/));
|
|
await wait(1000);
|
|
expect(container).toMatchSnapshot();
|
|
});
|
|
|
|
test('Renderer:Wizard dialog', async () => {
|
|
const {getByText, container}: any = render(
|
|
amisRender(
|
|
{
|
|
type: 'page',
|
|
body: [
|
|
{
|
|
type: 'wizard',
|
|
steps: [
|
|
{
|
|
title: 'Step 1',
|
|
controls: [
|
|
{
|
|
name: 'website',
|
|
label: '网址',
|
|
type: 'url',
|
|
value: 'http://amis.baidu.com'
|
|
},
|
|
{
|
|
name: 'name',
|
|
label: '名称',
|
|
type: 'text',
|
|
value: 'Amis'
|
|
},
|
|
{
|
|
type: 'button',
|
|
label: 'OpenDialog',
|
|
actionType: 'dialog',
|
|
dialog: {
|
|
title: '添加',
|
|
body: {
|
|
type: 'form',
|
|
controls: [
|
|
{
|
|
type: 'text',
|
|
name: 'name',
|
|
label: 'Name'
|
|
}
|
|
]
|
|
}
|
|
}
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: 'Step 2',
|
|
controls: ['这是最后一步了']
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{},
|
|
makeEnv({
|
|
getModalContainer: () => container
|
|
})
|
|
)
|
|
);
|
|
|
|
fireEvent.click(getByText(/OpenDialog/));
|
|
await wait(100);
|
|
expect(container).toMatchSnapshot();
|
|
|
|
fireEvent.click(getByText(/取消/));
|
|
await wait(1000);
|
|
expect(container).toMatchSnapshot();
|
|
});
|