test/amis2
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-12-02 12:08:13 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

chore: action 单测补充 (#5910)

Browse Source
This commit is contained in:
sansiro 2022-12-16 10:16:22 +08:00 committed by GitHub
parent 8cf47cf9b6
commit 595ac9c23b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 339 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

178
packages/amis/__tests__/renderers/Action.test.tsx
View File

@ -1,4 +1,11 @@
import React = require('react');
/**
* 组件名称：Action 行为按钮
*
* 单测内容：
1. 点击切换
*/
import React from 'react';
import Action from '../../src/renderers/Action';
import * as renderer from 'react-test-renderer';
import {
@ -6,14 +13,17 @@ import {
fireEvent,
cleanup,
screen,
waitFor
waitFor,
within
} from '@testing-library/react';
import {render as amisRender} from '../../src';
import {makeEnv, wait} from '../helper';
import '../../src';
import hotkeys from 'hotkeys-js';
afterEach(cleanup);
// 1. levels 样式
test('Renderers:Action all levels', () => {
const levels = [
'link',
@ -59,6 +69,7 @@ test('Renderers:Action all levels', () => {
expect(container).toMatchSnapshot();
});
// 2. Action 组件尺寸
test('Renderers:Action display size[xs, sm, md, lg]', () => {
const component = renderer.create(<Action size="xs" />);
let tree = component.toJSON();
@ -81,6 +92,7 @@ test('Renderers:Action display size[xs, sm, md, lg]', () => {
expect(tree).toMatchSnapshot();
});
// 3. MenuItem 下激活与禁用状态
test('Renderers:Action MenuItem changes class when actived & disabled', () => {
const component = renderer.create(
<Action isMenuItem className="a" label="123" />
@ -102,6 +114,7 @@ test('Renderers:Action MenuItem changes class when actived & disabled', () => {
expect(tree).toMatchSnapshot();
});
// 4. MenuItem 下设置图标
test('Renderers:Action MenuItem display icon', () => {
const component = renderer.create(
<Action isMenuItem className="a" label="123" />
@ -118,6 +131,7 @@ test('Renderers:Action MenuItem display icon', () => {
expect(tree).toMatchSnapshot();
});
// 5. actionType 为 link 时的 类
test('Renderers:Action [actionType = "link"] show active class', () => {
const isCurrentUrl = (link: string) => link === 'b';
const component = renderer.create(
@ -147,6 +161,7 @@ test('Renderers:Action [actionType = "link"] show active class', () => {
expect(tree).toMatchSnapshot();
});
// 6. 自定义激活态下的类
test('Renderers:Action custom activeClass', () => {
const component = renderer.create(
<Action className="a" label="123" activeClassName="custom-active" />
@ -163,6 +178,7 @@ test('Renderers:Action custom activeClass', () => {
expect(tree).toMatchSnapshot();
});
// 7. onAction 方法调用
test('Renderers:Action onAction called?', () => {
const onAction = jest.fn();
const {getByText} = render(
@ -173,6 +189,7 @@ test('Renderers:Action onAction called?', () => {
expect(onAction).toHaveBeenCalled();
});
// 8. disabled 下 onAction 调用情况
test('Renderers:Action disabled onAction called?', () => {
const onAction = jest.fn();
const {getByText} = render(
@ -183,6 +200,7 @@ test('Renderers:Action disabled onAction called?', () => {
expect(onAction).not.toHaveBeenCalled();
});
// 9. onClick 与 onAction 共存时，仅调用 onClick
test('Renderers:Action onClick cancel onAction?', () => {
const onAction = jest.fn();
const onClick = jest.fn(e => e.preventDefault());
@ -202,6 +220,7 @@ test('Renderers:Action onClick cancel onAction?', () => {
expect(onAction).not.toHaveBeenCalled();
});
// 10. actionType 为 download
test('Renderers:Action download shortcut', () => {
const component = renderer.create(
<Action actionType="download" link="a" label="123" />
@ -211,6 +230,7 @@ test('Renderers:Action download shortcut', () => {
expect(tree).toMatchSnapshot();
});
// 11. countDown 倒计时
test('Renderers:Action countDown', async () => {
const {container} = render(
amisRender(
@ -232,6 +252,7 @@ test('Renderers:Action countDown', async () => {
});
});
// 12. tooltip
test('Renderers:Action tooltip', async () => {
const {container, getByText, findByText} = render(
amisRender(
@ -276,30 +297,165 @@ test('Renderers:Action tooltip', async () => {
expect(container).toMatchSnapshot();
});
// 13. feedback
// test('Renderers:Action click feedback', async () => {
// const {getByText, container}: any = render(
// const fetcher = jest.fn().mockImplementation(() =>
// Promise.resolve({
// data: {
// status: 0,
// msg: 'ok',
// data: ''
// }
// })
// );
// const {getByText, container, baseElement}: any = render(
// amisRender(
// {
// type: 'page',
// body: {
// type: 'action',
// type: 'button',
// label: 'Feedback',
// actionType: 'ajax',
// api: '/amis/api/mock2/form/initData?waitSeconds=0',
// api: '/api/mock2/form/initData?waitSeconds=0',
// feedback: {
// title: '操作成功',
// body: 'xxx 已操作成功'
// body: '${id} 已操作成功'
// }
// }
// },
// {},
// makeEnv({
// getModalContainer: () => container
// session: 'test-case-action',
// fetcher
// })
// )
// );
// fireEvent.click(getByText('Feedback'));
// wait(300);
// screen.debug();
// expect(screen.getByRole('dialog')).toHaveTextContent('hello');
// fireEvent.click(container.querySelector('.cxd-Button'));
// wait(2000);
// expect(fetcher).toBeCalled();
// expect(baseElement).toMatchSnapshot();
// expect(
// await within(baseElement.querySelector('.cxd-Modal-content')!).getByText(
// 'xxx 已操作成功'
// )!
// ).toBeInTheDocument();
// });
// 14. confirmText
test('Renderers:Action with confirmText & actionType ajax', () => {
const fetcher = jest.fn().mockImplementation(() =>
Promise.resolve({
data: {
status: 0,
msg: 'ok',
data: ''
}
})
);
const {getByText, container, baseElement}: any = render(
amisRender(
{
type: 'page',
body: {
label: 'ajax请求',
type: 'button',
actionType: 'ajax',
confirmText: '确认要发出这个请求？',
api: '/api/mock2/form/saveForm'
}
},
{},
makeEnv({
session: 'test-case-action-no',
fetcher
})
)
);
fireEvent.click(container.querySelector('.cxd-Button'));
wait(500);
expect(baseElement).toMatchSnapshot();
expect(baseElement.querySelector('.cxd-Modal-content')!).toHaveTextContent(
'确认要发出这个请求？'
);
fireEvent.click(getByText('取消'));
wait(500);
expect(fetcher).not.toBeCalled();
// fireEvent.click(container.querySelector('.cxd-Button'));
// wait(500);
// fireEvent.click(getByText('确认'));
// fetcher 不生效
// expect(fetcher).toBeCalled();
});
// 15.Action 作为容器组件
test('Renderers:Action as container', async () => {
const notify = jest.fn();
const {getByText, container, baseElement}: any = render(
amisRender(
{
type: 'action',
body: [
{
type: 'color',
value: '#108cee'
}
],
actionType: 'toast',
toast: {
items: [
{
body: '点击了颜色'
}
]
}
},
{},
makeEnv({
notify,
session: 'test-action-3'
})
)
);
const color = container.querySelector('.cxd-ColorField');
expect(color).toBeInTheDocument();
fireEvent.click(color);
await wait(200);
expect(notify).toBeCalled();
expect(container).toMatchSnapshot();
});
// 16. disabledTip
test('Renderers:Action with disabledTip', async () => {
const {container, getByText, findByText} = render(
amisRender(
{
type: 'page',
body: [
{
label: '弹框',
type: 'button',
actionType: 'link',
disabled: true,
link: '../index',
disabledTip: '禁用了'
}
]
},
{},
makeEnv({})
)
);
fireEvent.mouseEnter(getByText('弹框')!);
await wait(200);
expect(container).toMatchSnapshot();
expect(getByText('禁用了')).toBeInTheDocument();
});

172
packages/amis/__tests__/renderers/__snapshots__/Action.test.tsx.snap
View File

@ -267,6 +267,28 @@ exports[`Renderers:Action all levels 1`] = `
</div>
`;
exports[`Renderers:Action as container 1`] = `
<div>
<div
class="cxd-Action"
>
<div
class="cxd-ColorField"
>
<i
class="cxd-ColorField-previewIcon"
style="background-color: rgb(16, 140, 238);"
/>
<span
class="cxd-ColorField-value"
>
#108cee
</span>
</div>
</div>
</div>
`;
exports[`Renderers:Action custom activeClass 1`] = `
<button
className="cxd-Button cxd-Button--default cxd-Button--size-default a"
@ -427,3 +449,153 @@ exports[`Renderers:Action tooltip 1`] = `
</div>
</div>
`;
exports[`Renderers:Action with confirmText & actionType ajax 1`] = `
<body
class="is-modalOpened"
style="width: calc(100% - 0px);"
>
<div>
<div
class="cxd-Page"
>
<div
class="cxd-Page-content"
>
<div
class="cxd-Page-main"
>
<div
class="cxd-Page-body"
>
<button
class="cxd-Button cxd-Button--default cxd-Button--size-default"
type="button"
>
<span>
ajax请求
</span>
</button>
</div>
</div>
</div>
</div>
</div>
<div />
<div
class="amis-dialog-widget cxd-Modal cxd-Modal--1th"
role="dialog"
>
<div
class="cxd-Modal-overlay in"
/>
<div
class="cxd-Modal-content in"
>
<div
class="cxd-Modal-header"
>
<div
class="cxd-Modal-title"
>
系统消息
</div>
</div>
<div
class="cxd-Modal-body"
>
<span
class="cxd-Html"
>
确认要发出这个请求？
</span>
</div>
<div
class="cxd-Modal-footer"
>
<button
class="cxd-Button cxd-Button--default cxd-Button--size-default"
type="button"
>
取消
</button>
<button
class="cxd-Button cxd-Button--danger cxd-Button--size-default"
type="button"
>
确认
</button>
</div>
</div>
</div>
</body>
`;
exports[`Renderers:Action with disabledTip 1`] = `
<div>
<div
class="cxd-Page"
>
<div
class="cxd-Page-content"
>
<div
class="cxd-Page-main"
>
<div
class="cxd-Page-body"
>
<div
class="cxd-Button cxd-Button--default cxd-Button--size-default is-disabled"
disabled=""
style="position: relative;"
>
<span>
弹框
</span>
<div
class="resize-sensor"
style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
>
<div
class="resize-sensor-expand"
style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
>
<div
style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
/>
</div>
<div
class="resize-sensor-shrink"
style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
>
<div
style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
/>
</div>
<div
class="resize-sensor-appear"
style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
`;