amis2/__tests__/renderers/Wizard.test.tsx

1388 lines
30 KiB
TypeScript
Raw Normal View History

2019-04-30 11:11:25 +08:00
import React = require('react');
import * as renderer from 'react-test-renderer';
import {render, fireEvent, cleanup} from '@testing-library/react';
2019-04-30 11:11:25 +08:00
import '../../src/themes/default';
2021-02-03 23:39:37 +08:00
import {render as amisRender} from '../../src/index';
import {wait, makeEnv} from '../helper';
import {clearStoresCache} from '../../src/factory';
2019-04-30 11:11:25 +08:00
afterEach(() => {
2021-02-03 23:39:37 +08:00
cleanup();
clearStoresCache();
2019-04-30 11:11:25 +08:00
});
test('Renderer:Wizard', () => {
2021-02-03 23:39:37 +08:00
const component = renderer.create(
amisRender(
{
type: 'wizard',
api: '/api/mock2/form/saveForm?waitSeconds=2',
2019-04-30 11:11:25 +08:00
steps: [
2021-02-03 23:39:37 +08:00
{
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: ['这是最后一步了']
}
2019-04-30 11:11:25 +08:00
]
2021-02-03 23:39:37 +08:00
},
{},
makeEnv()
)
);
let tree = component.toJSON();
expect(tree).toMatchSnapshot();
2019-04-30 11:11:25 +08:00
});
test('Renderer:Wizard readOnly', () => {
2021-02-03 23:39:37 +08:00
const component = renderer.create(
amisRender(
{
type: 'wizard',
api: '/api/mock2/form/saveForm?waitSeconds=2',
2019-04-30 11:11:25 +08:00
steps: [
2021-02-03 23:39:37 +08:00
{
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: ['这是最后一步了']
}
2019-04-30 11:11:25 +08:00
]
2021-02-03 23:39:37 +08:00
},
{},
makeEnv()
)
);
let tree = component.toJSON();
expect(tree).toMatchSnapshot();
2019-04-30 11:11:25 +08:00
});
test('Renderer:Wizard initApi', async () => {
2021-02-03 23:39:37 +08:00
const fetcher = jest.fn().mockImplementationOnce(() =>
Promise.resolve({
data: {
status: 0,
msg: 'ok',
2019-04-30 11:11:25 +08:00
data: {
2021-02-03 23:39:37 +08:00
author: 'fex',
date: 1555382395,
info: '',
name: 'Amis renderer'
2019-04-30 11:11:25 +08:00
}
2021-02-03 23:39:37 +08:00
}
})
);
const component = renderer.create(
amisRender(
{
type: 'wizard',
api: '/api/mock2/form/saveForm?waitSeconds=2',
initApi: '/api/mock2/form/initData?waitSeconds=2',
2019-04-30 11:11:25 +08:00
steps: [
2021-02-03 23:39:37 +08:00
{
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: ['这是最后一步了']
}
2019-04-30 11:11:25 +08:00
]
2021-02-03 23:39:37 +08:00
},
{},
makeEnv({
2019-04-30 11:11:25 +08:00
fetcher
2021-02-03 23:39:37 +08:00
})
)
);
2019-04-30 11:11:25 +08:00
2021-02-03 23:39:37 +08:00
await wait(500);
expect(component.toJSON()).toMatchSnapshot();
expect(fetcher).toHaveBeenCalled();
2019-04-30 11:11:25 +08:00
});
test('Renderer:Wizard initApi show loading', async () => {
2021-02-03 23:39:37 +08:00
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);
2019-04-30 11:11:25 +08:00
});
2021-02-03 23:39:37 +08:00
});
const component = renderer.create(
amisRender(
{
type: 'wizard',
api: '/api/mock2/form/saveForm?waitSeconds=2',
initApi: '/api/mock2/form/saveForm?waitSeconds=2',
2019-04-30 11:11:25 +08:00
steps: [
2021-02-03 23:39:37 +08:00
{
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: ['这是最后一步了']
}
2019-04-30 11:11:25 +08:00
]
2021-02-03 23:39:37 +08:00
},
{},
makeEnv({
2019-04-30 11:11:25 +08:00
fetcher
2021-02-03 23:39:37 +08:00
})
)
);
2019-04-30 11:11:25 +08:00
2021-02-03 23:39:37 +08:00
await wating;
let tree = component.toJSON();
2019-04-30 11:11:25 +08:00
2021-02-03 23:39:37 +08:00
expect(tree).toMatchSnapshot();
2019-04-30 11:11:25 +08:00
});
test('Renderer:Wizard initApi initFetch:false', async () => {
2021-02-03 23:39:37 +08:00
const fetcher = jest.fn().mockImplementationOnce(() =>
Promise.resolve({
data: {
status: 0,
msg: 'ok',
2019-04-30 11:11:25 +08:00
data: {
2021-02-03 23:39:37 +08:00
author: 'fex',
date: 1555382395,
info: '',
name: 'Amis renderer'
2019-04-30 11:11:25 +08:00
}
2021-02-03 23:39:37 +08:00
}
})
);
renderer.create(
amisRender(
{
type: 'wizard',
api: '/api/mock2/form/saveForm?waitSeconds=2',
initApi: '/api/mock2/form/initData?waitSeconds=2',
2019-04-30 11:11:25 +08:00
initFetch: false,
steps: [
2021-02-03 23:39:37 +08:00
{
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: ['这是最后一步了']
}
2019-04-30 11:11:25 +08:00
]
2021-02-03 23:39:37 +08:00
},
{},
makeEnv({
2019-04-30 11:11:25 +08:00
fetcher
2021-02-03 23:39:37 +08:00
})
)
);
2019-04-30 11:11:25 +08:00
2021-02-03 23:39:37 +08:00
await wait(500);
expect(fetcher).not.toHaveBeenCalled();
2019-04-30 11:11:25 +08:00
});
test('Renderer:Wizard initApi initFetch:true', async () => {
2021-02-03 23:39:37 +08:00
const fetcher = jest.fn().mockImplementationOnce(() =>
Promise.resolve({
data: {
status: 0,
msg: 'ok',
2019-04-30 11:11:25 +08:00
data: {
2021-02-03 23:39:37 +08:00
author: 'fex',
date: 1555382395,
info: '',
name: 'Amis renderer'
2019-04-30 11:11:25 +08:00
}
2021-02-03 23:39:37 +08:00
}
})
);
renderer.create(
amisRender(
{
type: 'wizard',
api: '/api/mock2/form/saveForm?waitSeconds=2',
initApi: '/api/mock2/form/initData?waitSeconds=2',
2019-04-30 11:11:25 +08:00
initFetch: true,
steps: [
2021-02-03 23:39:37 +08:00
{
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: ['这是最后一步了']
}
2019-04-30 11:11:25 +08:00
]
2021-02-03 23:39:37 +08:00
},
{},
makeEnv({
2019-04-30 11:11:25 +08:00
fetcher
2021-02-03 23:39:37 +08:00
})
)
);
2019-04-30 11:11:25 +08:00
2021-02-03 23:39:37 +08:00
await wait(500);
expect(fetcher).toHaveBeenCalled();
2019-04-30 11:11:25 +08:00
});
test('Renderer:Wizard initApi initFetchOn:false', async () => {
2021-02-03 23:39:37 +08:00
const fetcher = jest.fn().mockImplementationOnce(() =>
Promise.resolve({
data: {
status: 0,
msg: 'ok',
2019-04-30 11:11:25 +08:00
data: {
2021-02-03 23:39:37 +08:00
author: 'fex',
date: 1555382395,
info: '',
name: 'Amis renderer'
2019-04-30 11:11:25 +08:00
}
2021-02-03 23:39:37 +08:00
}
})
);
renderer.create(
amisRender(
{
type: 'wizard',
api: '/api/mock2/form/saveForm?waitSeconds=2',
initApi: '/api/mock2/form/initData?waitSeconds=2',
2019-04-30 11:11:25 +08:00
initFetchOn: 'this.goFetch',
steps: [
2021-02-03 23:39:37 +08:00
{
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: ['这是最后一步了']
}
2019-04-30 11:11:25 +08:00
]
2021-02-03 23:39:37 +08:00
},
{
2019-04-30 11:11:25 +08:00
data: {
2021-02-03 23:39:37 +08:00
goFetch: false
2019-04-30 11:11:25 +08:00
}
2021-02-03 23:39:37 +08:00
},
makeEnv({
2019-04-30 11:11:25 +08:00
fetcher
2021-02-03 23:39:37 +08:00
})
)
);
2019-04-30 11:11:25 +08:00
2021-02-03 23:39:37 +08:00
await wait(500);
expect(fetcher).not.toHaveBeenCalled();
2019-04-30 11:11:25 +08:00
});
test('Renderer:Wizard initApi initFetchOn:true', async () => {
2021-02-03 23:39:37 +08:00
const fetcher = jest.fn().mockImplementationOnce(() =>
Promise.resolve({
data: {
status: 0,
msg: 'ok',
2019-04-30 11:11:25 +08:00
data: {
2021-02-03 23:39:37 +08:00
author: 'fex',
date: 1555382395,
info: '',
name: 'Amis renderer'
2019-04-30 11:11:25 +08:00
}
2021-02-03 23:39:37 +08:00
}
})
);
renderer.create(
amisRender(
{
type: 'wizard',
api: '/api/mock2/form/saveForm?waitSeconds=2',
initApi: '/api/mock2/form/initData?waitSeconds=2',
2019-04-30 11:11:25 +08:00
initFetchOn: 'this.goFetch',
steps: [
2021-02-03 23:39:37 +08:00
{
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: ['这是最后一步了']
}
2019-04-30 11:11:25 +08:00
]
2021-02-03 23:39:37 +08:00
},
{
2019-04-30 11:11:25 +08:00
data: {
2021-02-03 23:39:37 +08:00
goFetch: true
2019-04-30 11:11:25 +08:00
}
2021-02-03 23:39:37 +08:00
},
makeEnv({
2019-04-30 11:11:25 +08:00
fetcher
2021-02-03 23:39:37 +08:00
})
)
);
2019-04-30 11:11:25 +08:00
2021-02-03 23:39:37 +08:00
await wait(500);
expect(fetcher).toHaveBeenCalled();
2019-04-30 11:11:25 +08:00
});
test('Renderer:Wizard actionPrevLabel actionNextLabel actionFinishLabel className actionClassName', async () => {
2021-02-03 23:39:37 +08:00
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',
2019-04-30 11:11:25 +08:00
actionPrevLabel: 'PrevStep',
actionNextLabel: 'NextStep',
actionFinishLabel: 'Submit',
steps: [
2021-02-03 23:39:37 +08:00
{
title: 'Step 1',
controls: [
{
name: 'website',
label: '网址',
type: 'url'
},
{
name: 'name',
label: '名称',
type: 'text'
}
]
},
{
title: 'Step 2',
controls: ['这是最后一步了']
}
2019-04-30 11:11:25 +08:00
]
2021-02-03 23:39:37 +08:00
},
{},
makeEnv({
2019-04-30 11:11:25 +08:00
fetcher
2021-02-03 23:39:37 +08:00
})
)
);
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);
2021-02-03 23:39:37 +08:00
expect(container).toMatchSnapshot();
2019-04-30 11:11:25 +08:00
});
test('Renderer:Wizard actionNextSaveLabel', async () => {
2021-02-03 23:39:37 +08:00
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',
2019-04-30 11:11:25 +08:00
actionNextSaveLabel: 'saveAndNext',
steps: [
2021-02-03 23:39:37 +08:00
{
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: ['这是最后一步了']
}
2019-04-30 11:11:25 +08:00
]
2021-02-03 23:39:37 +08:00
},
{},
makeEnv({
2019-04-30 11:11:25 +08:00
fetcher
2021-02-03 23:39:37 +08:00
})
)
);
await wait(1000);
fireEvent.click(getByText(/saveAndNext/));
await wait(1000);
expect(fetcher).toHaveBeenCalled();
2019-04-30 11:11:25 +08:00
});
test('Renderer:Wizard send data', async () => {
2021-02-03 23:39:37 +08:00
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',
2019-04-30 11:11:25 +08:00
steps: [
2021-02-03 23:39:37 +08:00
{
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: ['这是最后一步了']
}
2019-04-30 11:11:25 +08:00
]
2021-02-03 23:39:37 +08:00
},
{},
makeEnv({
2019-04-30 11:11:25 +08:00
fetcher
2021-02-03 23:39:37 +08:00
})
)
);
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();
2019-04-30 11:11:25 +08:00
});
test('Renderer:Wizard step api', async () => {
2021-02-03 23:39:37 +08:00
const fetcher = jest.fn().mockImplementation(() =>
Promise.resolve({
data: {
status: 0,
msg: '保存成功',
data: {}
}
})
);
const {getByText} = render(
amisRender(
{
type: 'wizard',
2019-04-30 11:11:25 +08:00
steps: [
2021-02-03 23:39:37 +08:00
{
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: ['这是最后一步了']
}
2019-04-30 11:11:25 +08:00
]
2021-02-03 23:39:37 +08:00
},
{},
makeEnv({
2019-04-30 11:11:25 +08:00
fetcher
2021-02-03 23:39:37 +08:00
})
)
);
expect(fetcher).not.toHaveBeenCalled();
fireEvent.click(getByText(/下一步/));
await wait(1000);
expect(fetcher).toHaveBeenCalled();
2019-04-30 11:11:25 +08:00
});
test('Renderer:Wizard step initApi', async () => {
2021-02-03 23:39:37 +08:00
const fetcher = jest.fn().mockImplementation(() =>
Promise.resolve({
data: {
status: 0,
msg: 'ok',
2019-04-30 11:11:25 +08:00
data: {
2021-02-03 23:39:37 +08:00
author: 'fex',
date: 1555382395,
email: 'xxx@xxx.com'
2019-04-30 11:11:25 +08:00
}
2021-02-03 23:39:37 +08:00
}
})
);
const {getByText, container} = render(
amisRender(
{
type: 'wizard',
api: '/api/mock2/form/saveForm?waitSeconds=2',
2019-04-30 11:11:25 +08:00
steps: [
2021-02-03 23:39:37 +08:00
{
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: ['这是最后一步了']
}
2019-04-30 11:11:25 +08:00
]
2021-02-03 23:39:37 +08:00
},
{},
makeEnv({
2019-04-30 11:11:25 +08:00
fetcher
2021-02-03 23:39:37 +08:00
})
)
);
expect(fetcher).not.toHaveBeenCalled();
fireEvent.click(getByText(/下一步/));
await wait(1000);
expect(fetcher).toHaveBeenCalled();
expect(container).toMatchSnapshot();
2019-04-30 11:11:25 +08:00
});
test('Renderer:Wizard step initFetch:false', async () => {
2021-02-03 23:39:37 +08:00
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',
2019-04-30 11:11:25 +08:00
steps: [
2021-02-03 23:39:37 +08:00
{
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: ['这是最后一步了']
}
2019-04-30 11:11:25 +08:00
]
2021-02-03 23:39:37 +08:00
},
{},
makeEnv({
2019-04-30 11:11:25 +08:00
fetcher
2021-02-03 23:39:37 +08:00
})
)
);
expect(fetcher).not.toHaveBeenCalled();
fireEvent.click(getByText(/下一步/));
await wait(1000);
expect(fetcher).not.toHaveBeenCalled();
2019-04-30 11:11:25 +08:00
});
test('Renderer:Wizard step initFetch:true', async () => {
2021-02-03 23:39:37 +08:00
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',
2019-04-30 11:11:25 +08:00
steps: [
2021-02-03 23:39:37 +08:00
{
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: ['这是最后一步了']
}
2019-04-30 11:11:25 +08:00
]
2021-02-03 23:39:37 +08:00
},
{},
makeEnv({
2019-04-30 11:11:25 +08:00
fetcher
2021-02-03 23:39:37 +08:00
})
)
);
expect(fetcher).not.toHaveBeenCalled();
fireEvent.click(getByText(/下一步/));
await wait(1000);
expect(fetcher).toHaveBeenCalled();
2019-04-30 11:11:25 +08:00
});
test('Renderer:Wizard step initFetchOn:false', async () => {
2021-02-03 23:39:37 +08:00
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',
2019-04-30 11:11:25 +08:00
steps: [
2021-02-03 23:39:37 +08:00
{
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: ['这是最后一步了']
}
2019-04-30 11:11:25 +08:00
]
2021-02-03 23:39:37 +08:00
},
{
2019-04-30 11:11:25 +08:00
data: {
2021-02-03 23:39:37 +08:00
goFetch: false
2019-04-30 11:11:25 +08:00
}
2021-02-03 23:39:37 +08:00
},
makeEnv({
2019-04-30 11:11:25 +08:00
fetcher
2021-02-03 23:39:37 +08:00
})
)
);
expect(fetcher).not.toHaveBeenCalled();
fireEvent.click(getByText(/下一步/));
await wait(1000);
expect(fetcher).not.toHaveBeenCalled();
2019-04-30 11:11:25 +08:00
});
test('Renderer:Wizard step initFetchOn:true', async () => {
2021-02-03 23:39:37 +08:00
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',
2019-04-30 11:11:25 +08:00
steps: [
2021-02-03 23:39:37 +08:00
{
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: ['这是最后一步了']
}
2019-04-30 11:11:25 +08:00
]
2021-02-03 23:39:37 +08:00
},
{
2019-04-30 11:11:25 +08:00
data: {
2021-02-03 23:39:37 +08:00
goFetch: true
2019-04-30 11:11:25 +08:00
}
2021-02-03 23:39:37 +08:00
},
makeEnv({
2019-04-30 11:11:25 +08:00
fetcher
2021-02-03 23:39:37 +08:00
})
)
);
expect(fetcher).not.toHaveBeenCalled();
fireEvent.click(getByText(/下一步/));
await wait(1000);
expect(fetcher).toHaveBeenCalled();
2019-04-30 11:11:25 +08:00
});
test('Renderer:Wizard validate', async () => {
2021-02-03 23:39:37 +08:00
const {getByText, container} = render(
amisRender(
{
type: 'wizard',
api: '/api/mock2/form/saveForm?waitSeconds=2',
2019-04-30 11:11:25 +08:00
steps: [
2021-02-03 23:39:37 +08:00
{
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: ['这是最后一步了']
}
2019-04-30 11:11:25 +08:00
]
2021-02-03 23:39:37 +08:00
},
{},
makeEnv()
)
);
fireEvent.click(getByText(/下一步/));
await wait(1000);
expect(container).toMatchSnapshot();
2019-04-30 11:11:25 +08:00
});
test('Renderer:Wizard initApi reload', async () => {
2021-02-03 23:39:37 +08:00
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',
2019-04-30 11:11:25 +08:00
body: {
2021-02-03 23:39:37 +08:00
type: 'wizard',
api: '/api/mock2/form/saveForm?waitSeconds=2',
reload: 'thePage',
steps: [
{
title: 'Step 1',
controls: [
2019-04-30 11:11:25 +08:00
{
2021-02-03 23:39:37 +08:00
name: 'website',
label: '网址',
type: 'url',
value: 'http://amis.baidu.com'
2019-04-30 11:11:25 +08:00
},
{
2021-02-03 23:39:37 +08:00
name: 'name',
label: '名称',
type: 'text',
value: 'Amis'
2019-04-30 11:11:25 +08:00
}
2021-02-03 23:39:37 +08:00
]
},
{
title: 'Step 2',
controls: ['这是最后一步了']
}
]
}
},
{},
makeEnv({
2019-04-30 11:11:25 +08:00
fetcher
2021-02-03 23:39:37 +08:00
})
)
);
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();
2019-04-30 11:11:25 +08:00
});
test('Renderer:Wizard steps not array', () => {
2021-02-03 23:39:37 +08:00
const component = renderer.create(
amisRender({
type: 'wizard',
api: '/api/mock2/form/saveForm?waitSeconds=2',
steps: ''
})
);
let tree = component.toJSON();
expect(tree).toMatchSnapshot();
2019-04-30 11:11:25 +08:00
});
test('Renderer:Wizard target', async () => {
2021-02-03 23:39:37 +08:00
const {getByText, container} = render(
amisRender(
{
type: 'page',
2019-04-30 11:11:25 +08:00
body: [
2021-02-03 23:39:37 +08:00
{
type: 'wizard',
target: 'theForm',
steps: [
{
title: 'Step 1',
2019-04-30 11:11:25 +08:00
controls: [
2021-02-03 23:39:37 +08:00
{
name: 'website',
label: '网址',
type: 'url',
value: 'http://amis.baidu.com'
},
{
name: 'name',
label: '名称',
type: 'text',
value: 'Amis'
}
2019-04-30 11:11:25 +08:00
]
2021-02-03 23:39:37 +08:00
},
{
title: 'Step 2',
controls: ['这是最后一步了']
}
]
},
{
type: 'form',
name: 'theForm',
controls: [
{
type: 'text',
name: 'website',
label: 'Website'
},
{
type: 'text',
name: 'name',
label: 'Name'
}
]
}
2019-04-30 11:11:25 +08:00
]
2021-02-03 23:39:37 +08:00
},
{}
)
);
await wait(1000);
fireEvent.click(getByText(/下一步/));
await wait(1000);
fireEvent.click(getByText(/完成/));
await wait(1000);
expect(container).toMatchSnapshot();
2019-04-30 11:11:25 +08:00
});
test('Renderer:Wizard dialog', async () => {
2021-02-03 23:39:37 +08:00
const {getByText, container}: any = render(
amisRender(
{
type: 'page',
2019-04-30 11:11:25 +08:00
body: [
2021-02-03 23:39:37 +08:00
{
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',
2019-04-30 11:11:25 +08:00
controls: [
2021-02-03 23:39:37 +08:00
{
type: 'text',
name: 'name',
label: 'Name'
}
2019-04-30 11:11:25 +08:00
]
2021-02-03 23:39:37 +08:00
}
2019-04-30 11:11:25 +08:00
}
2021-02-03 23:39:37 +08:00
}
2019-04-30 11:11:25 +08:00
]
2021-02-03 23:39:37 +08:00
},
{
title: 'Step 2',
controls: ['这是最后一步了']
}
]
}
2019-04-30 11:11:25 +08:00
]
2021-02-03 23:39:37 +08:00
},
{},
makeEnv({
2019-04-30 11:11:25 +08:00
getModalContainer: () => container
2021-02-03 23:39:37 +08:00
})
)
);
2019-04-30 11:11:25 +08:00
2021-02-03 23:39:37 +08:00
fireEvent.click(getByText(/OpenDialog/));
await wait(100);
2021-02-03 23:39:37 +08:00
expect(container).toMatchSnapshot();
2019-04-30 11:11:25 +08:00
2021-02-03 23:39:37 +08:00
fireEvent.click(getByText(/取消/));
await wait(1000);
expect(container).toMatchSnapshot();
});