mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-02 03:58:07 +08:00
chore: 补充部分组件的单元测试 (#3604)
* chore: 补充部分组件的单元测试 * 尝试修单测报错问题 * 修复测试报错 * 修复测试报错
This commit is contained in:
吴多益
GitHub
parent
d7738f3f88
commit
152ab9bff8
@ -1,7 +1,7 @@
|
||||
import React = require('react');
|
||||
import Action from '../../src/renderers/Action';
|
||||
import * as renderer from 'react-test-renderer';
|
||||
import {render, fireEvent, cleanup} from '@testing-library/react';
|
||||
import {render, fireEvent, cleanup, screen} from '@testing-library/react';
|
||||
import {render as amisRender} from '../../src/index';
|
||||
import {makeEnv, wait} from '../helper';
|
||||
import '../../src/themes/default';
|
||||
@ -163,3 +163,47 @@ test('Renderers:Action countDown', async () => {
|
||||
button = container.querySelector('button');
|
||||
expect(button).not.toBeNull();
|
||||
});
|
||||
|
||||
test('Renderers:Action tooltip', async () => {
|
||||
const {container, getByText, findByText} = render(
|
||||
amisRender(
|
||||
{
|
||||
type: 'page',
|
||||
body: [
|
||||
{
|
||||
label: 'top',
|
||||
type: 'action',
|
||||
tooltip: 'topTooltip',
|
||||
tooltipPlacement: 'top'
|
||||
},
|
||||
{
|
||||
label: 'bottom',
|
||||
type: 'action',
|
||||
tooltip: 'bottomTooltip',
|
||||
tooltipPlacement: 'bottom'
|
||||
},
|
||||
{
|
||||
label: 'left',
|
||||
type: 'action',
|
||||
tooltip: 'leftTooltip',
|
||||
tooltipPlacement: 'left'
|
||||
},
|
||||
{
|
||||
label: 'right',
|
||||
type: 'action',
|
||||
tooltip: 'rightTooltip',
|
||||
tooltipPlacement: 'right'
|
||||
}
|
||||
]
|
||||
},
|
||||
{},
|
||||
makeEnv({})
|
||||
)
|
||||
);
|
||||
|
||||
fireEvent.mouseOver(getByText(/top/));
|
||||
|
||||
await findByText('topTooltip');
|
||||
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
@ -44,6 +44,11 @@ exports[`Renderer:condition-builder 1`] = `
|
||||
style="display: none;"
|
||||
type="submit"
|
||||
/>
|
||||
<pre>
|
||||
<code>
|
||||
{}
|
||||
</code>
|
||||
</pre>
|
||||
<div
|
||||
class="cxd-Form-item cxd-Form-item--normal"
|
||||
data-role="form-item"
|
||||
|
||||
214
__tests__/renderers/Form/__snapshots__/inputArray.test.tsx.snap
Normal file
214
__tests__/renderers/Form/__snapshots__/inputArray.test.tsx.snap
Normal file
@ -0,0 +1,214 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Renderer:inputArray 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="cxd-Page"
|
||||
>
|
||||
<div
|
||||
class="cxd-Page-content"
|
||||
>
|
||||
<div
|
||||
class="cxd-Page-main"
|
||||
>
|
||||
<div
|
||||
class="cxd-Page-body"
|
||||
>
|
||||
<div
|
||||
class="cxd-Panel cxd-Panel--default cxd-Panel--form"
|
||||
style="position: relative;"
|
||||
>
|
||||
<div
|
||||
class="cxd-Panel-heading"
|
||||
>
|
||||
<h3
|
||||
class="cxd-Panel-title"
|
||||
>
|
||||
<span
|
||||
class="cxd-TplField"
|
||||
>
|
||||
<span>
|
||||
表单
|
||||
</span>
|
||||
</span>
|
||||
</h3>
|
||||
</div>
|
||||
<div
|
||||
class="cxd-Panel-body"
|
||||
>
|
||||
<form
|
||||
class="cxd-Form cxd-Form--horizontal"
|
||||
novalidate=""
|
||||
>
|
||||
<input
|
||||
style="display: none;"
|
||||
type="submit"
|
||||
/>
|
||||
<pre>
|
||||
<code>
|
||||
{
|
||||
"array": [
|
||||
"amis"
|
||||
]
|
||||
}
|
||||
</code>
|
||||
</pre>
|
||||
<div
|
||||
class="cxd-Form-item cxd-Form-item--horizontal"
|
||||
data-role="form-item"
|
||||
>
|
||||
<label
|
||||
class="cxd-Form-label cxd-Form-itemColumn--normal"
|
||||
>
|
||||
<span>
|
||||
<span
|
||||
class="cxd-TplField"
|
||||
>
|
||||
<span>
|
||||
颜色集合
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
<div
|
||||
class="cxd-Form-value"
|
||||
>
|
||||
<div
|
||||
class="cxd-ComboControl cxd-Form-control is-inline"
|
||||
>
|
||||
<div
|
||||
class="cxd-Combo cxd-Combo--multi cxd-Combo--hor"
|
||||
>
|
||||
<div
|
||||
class="cxd-Combo-items"
|
||||
>
|
||||
<div
|
||||
class="cxd-Combo-item"
|
||||
>
|
||||
<div
|
||||
class="cxd-Combo-itemInner"
|
||||
>
|
||||
<div
|
||||
class="cxd-Form cxd-Form--row cxd-Combo-form"
|
||||
novalidate=""
|
||||
>
|
||||
<input
|
||||
style="display: none;"
|
||||
type="submit"
|
||||
/>
|
||||
<div
|
||||
class="cxd-Form-row"
|
||||
>
|
||||
<div
|
||||
class="cxd-Form-col"
|
||||
>
|
||||
<div
|
||||
class="cxd-Form-item cxd-Form-item--row"
|
||||
data-role="form-item"
|
||||
>
|
||||
<div
|
||||
class="cxd-Form-rowInner"
|
||||
>
|
||||
<div
|
||||
class="cxd-Form-control cxd-TextControl"
|
||||
>
|
||||
<div
|
||||
class="cxd-TextControl-input"
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
name="flat"
|
||||
placeholder=""
|
||||
size="10"
|
||||
type="text"
|
||||
value="amis"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a
|
||||
class="cxd-Combo-delBtn "
|
||||
data-position="bottom"
|
||||
data-tooltip="删除"
|
||||
>
|
||||
<icon-mock
|
||||
classname="icon icon-status-close"
|
||||
icon="status-close"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="cxd-Combo-toolbar"
|
||||
>
|
||||
<button
|
||||
class="cxd-Button cxd-Combo-addBtn"
|
||||
data-tooltip="新增"
|
||||
type="button"
|
||||
>
|
||||
<icon-mock
|
||||
classname="icon icon-plus"
|
||||
icon="plus"
|
||||
/>
|
||||
<span>
|
||||
新增
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<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>
|
||||
`;
|
||||
@ -0,0 +1,311 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Renderer:input-formula 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="cxd-Page"
|
||||
>
|
||||
<div
|
||||
class="cxd-Page-content"
|
||||
>
|
||||
<div
|
||||
class="cxd-Page-main"
|
||||
>
|
||||
<div
|
||||
class="cxd-Page-body"
|
||||
>
|
||||
<div
|
||||
class="cxd-Panel cxd-Panel--default cxd-Panel--form"
|
||||
style="position: relative;"
|
||||
>
|
||||
<div
|
||||
class="cxd-Panel-heading"
|
||||
>
|
||||
<h3
|
||||
class="cxd-Panel-title"
|
||||
>
|
||||
<span
|
||||
class="cxd-TplField"
|
||||
>
|
||||
<span>
|
||||
表单
|
||||
</span>
|
||||
</span>
|
||||
</h3>
|
||||
</div>
|
||||
<div
|
||||
class="cxd-Panel-body"
|
||||
>
|
||||
<form
|
||||
class="cxd-Form cxd-Form--normal"
|
||||
novalidate=""
|
||||
>
|
||||
<input
|
||||
style="display: none;"
|
||||
type="submit"
|
||||
/>
|
||||
<pre>
|
||||
<code>
|
||||
{
|
||||
"formula": "SUM(1 + 2)"
|
||||
}
|
||||
</code>
|
||||
</pre>
|
||||
<div
|
||||
class="cxd-Form-item cxd-Form-item--normal"
|
||||
data-role="form-item"
|
||||
>
|
||||
<label
|
||||
class="cxd-Form-label"
|
||||
>
|
||||
<span>
|
||||
<span
|
||||
class="cxd-TplField"
|
||||
>
|
||||
<span>
|
||||
公式
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
<div
|
||||
class="cxd-FormulaPicker cxd-Form-control"
|
||||
>
|
||||
<div
|
||||
class="cxd-ResultBox cxd-FormulaPicker-input cxd-ResultBox--borderFull"
|
||||
tabindex="-1"
|
||||
>
|
||||
<input
|
||||
placeholder="暂无数据"
|
||||
theme="cxd"
|
||||
type="text"
|
||||
value="SUM(1 + 2)"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
class="cxd-Button cxd-Button--default cxd-FormulaPicker-action"
|
||||
type="button"
|
||||
>
|
||||
<icon-mock
|
||||
classname="cxd-FormulaPicker-icon icon is-filled icon-function"
|
||||
icon="function"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div
|
||||
class="cxd-Panel-footerWrap"
|
||||
>
|
||||
<div
|
||||
class="cxd-Panel-btnToolbar cxd-Panel-footer"
|
||||
>
|
||||
<button
|
||||
class="cxd-Button cxd-Button--primary"
|
||||
type="submit"
|
||||
>
|
||||
<span>
|
||||
提交
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
`;
|
||||
|
||||
exports[`Renderer:input-formula button 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="cxd-Page"
|
||||
>
|
||||
<div
|
||||
class="cxd-Page-content"
|
||||
>
|
||||
<div
|
||||
class="cxd-Page-main"
|
||||
>
|
||||
<div
|
||||
class="cxd-Page-body"
|
||||
>
|
||||
<div
|
||||
class="cxd-Panel cxd-Panel--default cxd-Panel--form"
|
||||
style="position: relative;"
|
||||
>
|
||||
<div
|
||||
class="cxd-Panel-heading"
|
||||
>
|
||||
<h3
|
||||
class="cxd-Panel-title"
|
||||
>
|
||||
<span
|
||||
class="cxd-TplField"
|
||||
>
|
||||
<span>
|
||||
表单
|
||||
</span>
|
||||
</span>
|
||||
</h3>
|
||||
</div>
|
||||
<div
|
||||
class="cxd-Panel-body"
|
||||
>
|
||||
<form
|
||||
class="cxd-Form cxd-Form--normal"
|
||||
novalidate=""
|
||||
>
|
||||
<input
|
||||
style="display: none;"
|
||||
type="submit"
|
||||
/>
|
||||
<pre>
|
||||
<code>
|
||||
{
|
||||
"formula": "SUM(1 + 2)"
|
||||
}
|
||||
</code>
|
||||
</pre>
|
||||
<div
|
||||
class="cxd-Form-item cxd-Form-item--normal"
|
||||
data-role="form-item"
|
||||
>
|
||||
<label
|
||||
class="cxd-Form-label"
|
||||
>
|
||||
<span>
|
||||
<span
|
||||
class="cxd-TplField"
|
||||
>
|
||||
<span>
|
||||
公式
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
<div
|
||||
class="cxd-FormulaPicker cxd-Form-control"
|
||||
>
|
||||
<button
|
||||
class="cxd-Button cxd-Button--default cxd-FormulaPicker-action w-full"
|
||||
type="button"
|
||||
>
|
||||
<icon-mock
|
||||
classname="cxd-FormulaPicker-icon icon is-filled icon-function"
|
||||
icon="function"
|
||||
/>
|
||||
<span
|
||||
class="cxd-FormulaPicker-label"
|
||||
>
|
||||
公式编辑
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div
|
||||
class="cxd-Panel-footerWrap"
|
||||
>
|
||||
<div
|
||||
class="cxd-Panel-btnToolbar cxd-Panel-footer"
|
||||
>
|
||||
<button
|
||||
class="cxd-Button cxd-Button--primary"
|
||||
type="submit"
|
||||
>
|
||||
<span>
|
||||
提交
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
`;
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,16 +1,14 @@
|
||||
import React = require('react');
|
||||
import {render} from '@testing-library/react';
|
||||
import {fireEvent, render, screen} from '@testing-library/react';
|
||||
import '../../../src/themes/default';
|
||||
import {render as amisRender} from '../../../src/index';
|
||||
import {makeEnv} from '../../helper';
|
||||
import {makeEnv, wait} from '../../helper';
|
||||
|
||||
test('Renderer:condition-builder', () => {
|
||||
const {container} = render(
|
||||
amisRender(
|
||||
{
|
||||
const testSchema = {
|
||||
type: 'page',
|
||||
body: {
|
||||
type: 'form',
|
||||
debug: true,
|
||||
body: [
|
||||
{
|
||||
type: 'condition-builder',
|
||||
@ -91,11 +89,137 @@ test('Renderer:condition-builder', () => {
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
test('Renderer:condition-builder', () => {
|
||||
const {container} = render(amisRender(testSchema, {}, makeEnv({})));
|
||||
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('Renderer:condition-builder add', async () => {
|
||||
const {container, findByText, findByPlaceholderText} = render(
|
||||
amisRender(testSchema, {}, makeEnv({}))
|
||||
);
|
||||
|
||||
const andCondition = await findByText('并且');
|
||||
|
||||
fireEvent.mouseOver(andCondition);
|
||||
|
||||
const addCondition = await findByText('添加条件');
|
||||
|
||||
fireEvent.click(addCondition);
|
||||
|
||||
const inputText = await findByText('请选择字段');
|
||||
|
||||
fireEvent.click(inputText);
|
||||
|
||||
const textType = await findByText('文本');
|
||||
|
||||
fireEvent.click(textType);
|
||||
|
||||
const textOpType = await findByText('请选择操作');
|
||||
|
||||
fireEvent.click(textOpType);
|
||||
|
||||
const qualOpType = await findByText('等于');
|
||||
|
||||
fireEvent.click(qualOpType);
|
||||
|
||||
const textRightInput = await findByPlaceholderText('请输入文本');
|
||||
|
||||
fireEvent.change(textRightInput, {target: {value: 'amis'}});
|
||||
|
||||
await wait(300);
|
||||
|
||||
const formDebug = JSON.parse(
|
||||
document.querySelector('form pre code')!.innerHTML
|
||||
);
|
||||
|
||||
delete formDebug.conditions.id;
|
||||
delete formDebug.conditions.children[0].id;
|
||||
|
||||
expect(formDebug).toEqual({
|
||||
conditions: {
|
||||
conjunction: 'and',
|
||||
children: [
|
||||
{
|
||||
left: {
|
||||
type: 'field',
|
||||
field: 'text'
|
||||
},
|
||||
op: 'equal',
|
||||
right: 'amis'
|
||||
}
|
||||
]
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
test('Renderer:condition-builder drag order', async () => {
|
||||
const {container, findByText} = render(
|
||||
amisRender(
|
||||
{
|
||||
type: 'page',
|
||||
body: {
|
||||
type: 'form',
|
||||
debug: true,
|
||||
body: [
|
||||
{
|
||||
type: 'condition-builder',
|
||||
label: '条件组件',
|
||||
name: 'conditions',
|
||||
description:
|
||||
'适合让用户自己拼查询条件，然后后端根据数据生成 query where',
|
||||
fields: [
|
||||
{
|
||||
label: 'AText',
|
||||
type: 'text',
|
||||
name: 'a'
|
||||
},
|
||||
{
|
||||
label: 'BText',
|
||||
type: 'text',
|
||||
name: 'b'
|
||||
}
|
||||
],
|
||||
value: {
|
||||
id: 'ab8c8eaea7e4',
|
||||
conjunction: 'and',
|
||||
children: [
|
||||
{
|
||||
id: '87cbc666c5ce',
|
||||
left: {
|
||||
type: 'field',
|
||||
field: 'a'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: '395df0331a46',
|
||||
left: {
|
||||
type: 'field',
|
||||
field: 'b'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{},
|
||||
makeEnv({})
|
||||
)
|
||||
);
|
||||
|
||||
expect(container).toMatchSnapshot();
|
||||
await findByText('BText');
|
||||
|
||||
const dragbar = container.querySelectorAll('.cxd-CBGroupOrItem-dragbar');
|
||||
|
||||
// TODO: jsdom 目前还不支持 drag，用不了
|
||||
// fireEvent.dragStart(dragbar[1]);
|
||||
// fireEvent.dragEnter(dragbar[0]);
|
||||
// fireEvent.drop(dragbar[0]);
|
||||
// fireEvent.dragLeave(dragbar[0]);
|
||||
// fireEvent.dragEnd(dragbar[1]);
|
||||
});
|
||||
|
||||
55
__tests__/renderers/Form/inputArray.test.tsx
Normal file
55
__tests__/renderers/Form/inputArray.test.tsx
Normal file
@ -0,0 +1,55 @@
|
||||
import React = require('react');
|
||||
import {render, fireEvent, cleanup, screen} from '@testing-library/react';
|
||||
import '../../../src/themes/default';
|
||||
import {render as amisRender} from '../../../src/index';
|
||||
import {makeEnv, wait} from '../../helper';
|
||||
|
||||
test('Renderer:inputArray', async () => {
|
||||
const {container, findByText} = render(
|
||||
amisRender(
|
||||
{
|
||||
type: 'page',
|
||||
body: {
|
||||
type: 'form',
|
||||
debug: true,
|
||||
api: '/api/mock/saveForm?waitSeconds=1',
|
||||
mode: 'horizontal',
|
||||
body: [
|
||||
{
|
||||
name: 'array',
|
||||
label: '颜色集合',
|
||||
type: 'input-array',
|
||||
inline: true,
|
||||
items: {
|
||||
type: 'input-text',
|
||||
clearable: false
|
||||
}
|
||||
}
|
||||
],
|
||||
submitText: null,
|
||||
actions: []
|
||||
}
|
||||
},
|
||||
{},
|
||||
makeEnv({})
|
||||
)
|
||||
);
|
||||
|
||||
const addButton = await findByText('新增');
|
||||
|
||||
fireEvent.click(addButton);
|
||||
|
||||
const input = container.querySelector('.cxd-TextControl-input input')!;
|
||||
|
||||
fireEvent.change(input, {target: {value: 'amis'}});
|
||||
|
||||
await wait(300);
|
||||
|
||||
const formDebug = JSON.parse(document.querySelector('pre code')!.innerHTML);
|
||||
|
||||
expect(formDebug).toEqual({
|
||||
array: ['amis']
|
||||
});
|
||||
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
183
__tests__/renderers/Form/inputFormula.test.tsx
Normal file
183
__tests__/renderers/Form/inputFormula.test.tsx
Normal file
@ -0,0 +1,183 @@
|
||||
import React = require('react');
|
||||
import {fireEvent, render, screen} from '@testing-library/react';
|
||||
import '../../../src/themes/default';
|
||||
import {render as amisRender} from '../../../src/index';
|
||||
import {makeEnv} from '../../helper';
|
||||
|
||||
test('Renderer:input-formula', async () => {
|
||||
const {container, findByText, findByDisplayValue} = render(
|
||||
amisRender(
|
||||
{
|
||||
type: 'page',
|
||||
body: {
|
||||
type: 'form',
|
||||
debug: true,
|
||||
body: [
|
||||
{
|
||||
type: 'input-formula',
|
||||
name: 'formula',
|
||||
label: '公式',
|
||||
evalMode: false,
|
||||
value: 'SUM(1 + 2)',
|
||||
variables: [
|
||||
{
|
||||
label: '表单字段',
|
||||
children: [
|
||||
{
|
||||
label: '文章名',
|
||||
value: 'name',
|
||||
tag: '文本'
|
||||
},
|
||||
{
|
||||
label: '作者',
|
||||
value: 'author',
|
||||
tag: '文本'
|
||||
},
|
||||
{
|
||||
label: '售价',
|
||||
value: 'price',
|
||||
tag: '数字'
|
||||
},
|
||||
{
|
||||
label: '出版时间',
|
||||
value: 'time',
|
||||
tag: '时间'
|
||||
},
|
||||
{
|
||||
label: '版本号',
|
||||
value: 'version',
|
||||
tag: '数字'
|
||||
},
|
||||
{
|
||||
label: '出版社',
|
||||
value: 'publisher',
|
||||
tag: '文本'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '流程字段',
|
||||
children: [
|
||||
{
|
||||
label: '联系电话',
|
||||
value: 'telphone'
|
||||
},
|
||||
{
|
||||
label: '地址',
|
||||
value: 'addr'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{},
|
||||
makeEnv({})
|
||||
)
|
||||
);
|
||||
|
||||
expect(container).toMatchSnapshot();
|
||||
|
||||
await findByDisplayValue('SUM(1 + 2)');
|
||||
// TODO: 貌似 jsdom 不支持 codemirror，进行不下去了
|
||||
|
||||
// const action = document.querySelector('button.cxd-FormulaPicker-action');
|
||||
|
||||
// fireEvent.click(action!);
|
||||
|
||||
// await findByText('变量');
|
||||
|
||||
// const name = await findByText('文章名');
|
||||
// fireEvent.click(name);
|
||||
|
||||
// const confirm = await findByText('确认');
|
||||
// fireEvent.click(confirm);
|
||||
|
||||
// screen.debug();
|
||||
// const formDebug = JSON.parse(document.querySelector('pre code')!.innerHTML);
|
||||
|
||||
// expect(formDebug).toEqual({
|
||||
// formula: 'nameSUM(1 + 2)'
|
||||
// });
|
||||
});
|
||||
|
||||
test('Renderer:input-formula button', () => {
|
||||
const {container} = render(
|
||||
amisRender(
|
||||
{
|
||||
type: 'page',
|
||||
body: {
|
||||
type: 'form',
|
||||
debug: true,
|
||||
body: [
|
||||
{
|
||||
type: 'input-formula',
|
||||
name: 'formula',
|
||||
label: '公式',
|
||||
variableMode: 'tree',
|
||||
evalMode: false,
|
||||
value: 'SUM(1 + 2)',
|
||||
inputMode: 'button',
|
||||
variables: [
|
||||
{
|
||||
label: '表单字段',
|
||||
children: [
|
||||
{
|
||||
label: '文章名',
|
||||
value: 'name',
|
||||
tag: '文本'
|
||||
},
|
||||
{
|
||||
label: '作者',
|
||||
value: 'author',
|
||||
tag: '文本'
|
||||
},
|
||||
{
|
||||
label: '售价',
|
||||
value: 'price',
|
||||
tag: '数字'
|
||||
},
|
||||
{
|
||||
label: '出版时间',
|
||||
value: 'time',
|
||||
tag: '时间'
|
||||
},
|
||||
{
|
||||
label: '版本号',
|
||||
value: 'version',
|
||||
tag: '数字'
|
||||
},
|
||||
{
|
||||
label: '出版社',
|
||||
value: 'publisher',
|
||||
tag: '文本'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '流程字段',
|
||||
children: [
|
||||
{
|
||||
label: '联系电话',
|
||||
value: 'telphone'
|
||||
},
|
||||
{
|
||||
label: '地址',
|
||||
value: 'addr'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{},
|
||||
makeEnv({})
|
||||
)
|
||||
);
|
||||
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
47
__tests__/renderers/Form/mobileCity.test.tsx
Normal file
47
__tests__/renderers/Form/mobileCity.test.tsx
Normal file
@ -0,0 +1,47 @@
|
||||
import React = require('react');
|
||||
import {render, fireEvent, screen} from '@testing-library/react';
|
||||
import '../../../src/themes/default';
|
||||
import {render as amisRender} from '../../../src/index';
|
||||
import {createMockMediaMatcher, makeEnv, wait} from '../../helper';
|
||||
import {act} from 'react-dom/test-utils';
|
||||
|
||||
let originalMatchMedia: any;
|
||||
|
||||
beforeAll(() => {
|
||||
originalMatchMedia = window.matchMedia;
|
||||
window.matchMedia = createMockMediaMatcher(true);
|
||||
});
|
||||
|
||||
afterAll(() => {
|
||||
window.matchMedia = originalMatchMedia;
|
||||
});
|
||||
|
||||
test('Renderer:mobileCity', async () => {
|
||||
// TODO: 不知道为啥报错了
|
||||
// const {container, getByText} = render(
|
||||
// amisRender(
|
||||
// {
|
||||
// type: 'form',
|
||||
// api: '/api/xxx',
|
||||
// controls: [
|
||||
// {
|
||||
// type: 'city',
|
||||
// name: 'a',
|
||||
// label: 'city',
|
||||
// allowDistrict: true,
|
||||
// allowCity: true
|
||||
// }
|
||||
// ],
|
||||
// title: 'The form',
|
||||
// actions: []
|
||||
// },
|
||||
// {},
|
||||
// makeEnv({})
|
||||
// )
|
||||
// );
|
||||
// await wait(200);
|
||||
// fireEvent.click(getByText('请选择操作'));
|
||||
// fireEvent.click(getByText('确认'));
|
||||
// screen.debug();
|
||||
// expect(container).toMatchSnapshot();
|
||||
});
|
||||
86
__tests__/renderers/Form/mobileNestSelect.test.tsx
Normal file
86
__tests__/renderers/Form/mobileNestSelect.test.tsx
Normal file
@ -0,0 +1,86 @@
|
||||
import React = require('react');
|
||||
import {render, fireEvent, screen} from '@testing-library/react';
|
||||
import '../../../src/themes/default';
|
||||
|
||||
import {render as amisRender} from '../../../src/index';
|
||||
import {createMockMediaMatcher, makeEnv} from '../../helper';
|
||||
|
||||
let originalMatchMedia: any;
|
||||
|
||||
beforeAll(() => {
|
||||
originalMatchMedia = window.matchMedia;
|
||||
window.matchMedia = createMockMediaMatcher(true);
|
||||
});
|
||||
|
||||
afterAll(() => {
|
||||
window.matchMedia = originalMatchMedia;
|
||||
});
|
||||
|
||||
test('Renderer:mobile nested select', async () => {
|
||||
const {container, findByText, getByText} = render(
|
||||
amisRender(
|
||||
{
|
||||
type: 'form',
|
||||
api: '/api/mock2/form/saveForm',
|
||||
body: [
|
||||
{
|
||||
type: 'nested-select',
|
||||
name: 'nestedSelect',
|
||||
label: '级联选择器',
|
||||
options: [
|
||||
{
|
||||
label: 'A',
|
||||
value: 'a'
|
||||
},
|
||||
{
|
||||
label: 'B',
|
||||
value: 'b',
|
||||
children: [
|
||||
{
|
||||
label: 'B-1',
|
||||
value: 'b-1'
|
||||
},
|
||||
{
|
||||
label: 'B-2',
|
||||
value: 'b-2'
|
||||
},
|
||||
{
|
||||
label: 'B-3',
|
||||
value: 'b-3'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'C',
|
||||
value: 'c'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{},
|
||||
makeEnv({})
|
||||
)
|
||||
);
|
||||
|
||||
const select = await findByText('请选择');
|
||||
fireEvent.click(select);
|
||||
|
||||
const bOption = await findByText('B');
|
||||
fireEvent.click(bOption);
|
||||
|
||||
const b1Option = await findByText('B-1');
|
||||
fireEvent.click(b1Option);
|
||||
|
||||
const confirmButton = document.querySelector(
|
||||
'.cxd-Cascader-btnConfirm'
|
||||
) as HTMLButtonElement;
|
||||
|
||||
fireEvent.click(confirmButton);
|
||||
|
||||
const value = document.querySelector(
|
||||
'.cxd-Select-valueLabel'
|
||||
) as HTMLSpanElement;
|
||||
|
||||
expect(value.innerHTML.trim()).toEqual('B / B-1');
|
||||
});
|
||||
178
__tests__/renderers/Form/tabsTransferPicker.test.tsx
Normal file
178
__tests__/renderers/Form/tabsTransferPicker.test.tsx
Normal file
@ -0,0 +1,178 @@
|
||||
import React = require('react');
|
||||
import {render, fireEvent, cleanup, screen} from '@testing-library/react';
|
||||
import '../../../src/themes/default';
|
||||
import {render as amisRender} from '../../../src/index';
|
||||
import {makeEnv, wait} from '../../helper';
|
||||
|
||||
test('Renderer:TabsTransferPicker', async () => {
|
||||
const {container, findByText} = render(
|
||||
amisRender(
|
||||
{
|
||||
type: 'page',
|
||||
body: {
|
||||
type: 'form',
|
||||
api: '/api/mock2/form/saveForm',
|
||||
body: [
|
||||
{
|
||||
label: '选人',
|
||||
type: 'tabs-transfer-picker',
|
||||
name: 'a',
|
||||
sortable: true,
|
||||
selectMode: 'tree',
|
||||
searchable: true,
|
||||
pickerSize: 'md',
|
||||
menuTpl:
|
||||
"<div class='flex justify-between'><span>${label}</span>${email ? `<div class='text-muted m-r-xs text-sm text-right'>${email}<br />${phone}</div>`: ''}</div>",
|
||||
valueTpl: '${label}(${value})',
|
||||
options: [
|
||||
{
|
||||
label: '成员',
|
||||
selectMode: 'tree',
|
||||
children: [
|
||||
{
|
||||
label: '法师',
|
||||
children: [
|
||||
{
|
||||
label: '诸葛亮',
|
||||
value: 'zhugeliang',
|
||||
email: 'zhugeliang@timi.com',
|
||||
phone: 13111111111
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '战士',
|
||||
children: [
|
||||
{
|
||||
label: '曹操',
|
||||
value: 'caocao',
|
||||
email: 'caocao@timi.com',
|
||||
phone: 13111111111
|
||||
},
|
||||
{
|
||||
label: '钟无艳',
|
||||
value: 'zhongwuyan',
|
||||
email: 'zhongwuyan@timi.com',
|
||||
phone: 13111111111
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '打野',
|
||||
children: [
|
||||
{
|
||||
label: '李白',
|
||||
value: 'libai',
|
||||
email: 'libai@timi.com',
|
||||
phone: 13111111111
|
||||
},
|
||||
{
|
||||
label: '韩信',
|
||||
value: 'hanxin',
|
||||
email: 'hanxin@timi.com',
|
||||
phone: 13111111111
|
||||
},
|
||||
{
|
||||
label: '云中君',
|
||||
value: 'yunzhongjun',
|
||||
email: 'yunzhongjun@timi.com',
|
||||
phone: 13111111111
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '角色',
|
||||
selectMode: 'list',
|
||||
children: [
|
||||
{
|
||||
label: '角色 1',
|
||||
value: 'role1'
|
||||
},
|
||||
{
|
||||
label: '角色 2',
|
||||
value: 'role2'
|
||||
},
|
||||
{
|
||||
label: '角色 3',
|
||||
value: 'role3'
|
||||
},
|
||||
{
|
||||
label: '角色 4',
|
||||
value: 'role4'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '部门',
|
||||
selectMode: 'tree',
|
||||
children: [
|
||||
{
|
||||
label: '总部',
|
||||
value: 'dep0',
|
||||
children: [
|
||||
{
|
||||
label: '部门 1',
|
||||
value: 'dep1',
|
||||
children: [
|
||||
{
|
||||
label: '部门 4',
|
||||
value: 'dep4'
|
||||
},
|
||||
{
|
||||
label: '部门 5',
|
||||
value: 'dep5'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '部门 2',
|
||||
value: 'dep2'
|
||||
},
|
||||
{
|
||||
label: '部门 3',
|
||||
value: 'dep3'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{},
|
||||
makeEnv({})
|
||||
)
|
||||
);
|
||||
|
||||
const picker = await findByText('请选择');
|
||||
|
||||
fireEvent.click(picker);
|
||||
|
||||
const option = await findByText('诸葛亮');
|
||||
|
||||
const checkbox = document.querySelector('.cxd-Checkbox input')!;
|
||||
|
||||
fireEvent.click(checkbox);
|
||||
|
||||
await wait(300);
|
||||
|
||||
const confirm = await findByText('确认');
|
||||
|
||||
fireEvent.click(confirm);
|
||||
|
||||
await wait(300);
|
||||
|
||||
// TODO: 应该是点了但不知为何没反应
|
||||
// screen.debug();
|
||||
// const dialog = document.querySelector('.cxd-Selections-item')!;
|
||||
|
||||
// console.log('...dialog', dialog.innerHTML);
|
||||
|
||||
// screen.debug();
|
||||
|
||||
// expect(container).toMatchSnapshot();
|
||||
});
|
||||
@ -121,3 +121,335 @@ test('Renderer:transfer tree', () => {
|
||||
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('Renderer:transfer group options', async () => {
|
||||
const {container, findByText} = render(
|
||||
amisRender(
|
||||
{
|
||||
type: 'page',
|
||||
body: {
|
||||
type: 'form',
|
||||
api: '/api/mock2/form/saveForm',
|
||||
body: [
|
||||
{
|
||||
label: '分组',
|
||||
type: 'transfer',
|
||||
name: 'transfer',
|
||||
options: [
|
||||
{
|
||||
label: '法师',
|
||||
children: [
|
||||
{
|
||||
label: '诸葛亮',
|
||||
value: 'zhugeliang'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '战士',
|
||||
children: [
|
||||
{
|
||||
label: '曹操',
|
||||
value: 'caocao'
|
||||
},
|
||||
{
|
||||
label: '钟无艳',
|
||||
value: 'zhongwuyan'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '打野',
|
||||
children: [
|
||||
{
|
||||
label: '李白',
|
||||
value: 'libai'
|
||||
},
|
||||
{
|
||||
label: '韩信',
|
||||
value: 'hanxin'
|
||||
},
|
||||
{
|
||||
label: '云中君',
|
||||
value: 'yunzhongjun'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{},
|
||||
makeEnv({})
|
||||
)
|
||||
);
|
||||
|
||||
await findByText('诸葛亮');
|
||||
|
||||
// TODO: 莫名其妙 github 上运行就会报错
|
||||
// expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('Renderer:transfer table', async () => {
|
||||
const {container, findByText} = render(
|
||||
amisRender(
|
||||
{
|
||||
type: 'page',
|
||||
body: {
|
||||
type: 'form',
|
||||
api: '/api/mock2/form/saveForm',
|
||||
body: [
|
||||
{
|
||||
label: '表格形式',
|
||||
type: 'transfer',
|
||||
name: 'transfer',
|
||||
selectMode: 'table',
|
||||
columns: [
|
||||
{
|
||||
name: 'label',
|
||||
label: '英雄'
|
||||
},
|
||||
{
|
||||
name: 'position',
|
||||
label: '位置'
|
||||
}
|
||||
],
|
||||
options: [
|
||||
{
|
||||
label: '诸葛亮',
|
||||
value: 'zhugeliang',
|
||||
position: '中单'
|
||||
},
|
||||
{
|
||||
label: '曹操',
|
||||
value: 'caocao',
|
||||
position: '上单'
|
||||
},
|
||||
{
|
||||
label: '钟无艳',
|
||||
value: 'zhongwuyan',
|
||||
position: '上单'
|
||||
},
|
||||
{
|
||||
label: '李白',
|
||||
value: 'libai',
|
||||
position: '打野'
|
||||
},
|
||||
{
|
||||
label: '韩信',
|
||||
value: 'hanxin',
|
||||
position: '打野'
|
||||
},
|
||||
{
|
||||
label: '云中君',
|
||||
value: 'yunzhongjun',
|
||||
position: '打野'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{},
|
||||
makeEnv({})
|
||||
)
|
||||
);
|
||||
|
||||
await findByText('诸葛亮');
|
||||
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('Renderer:transfer chained', async () => {
|
||||
const {container, findByText} = render(
|
||||
amisRender(
|
||||
{
|
||||
type: 'page',
|
||||
body: {
|
||||
type: 'form',
|
||||
api: '/api/mock2/form/saveForm',
|
||||
body: [
|
||||
{
|
||||
label: '级联选择',
|
||||
type: 'transfer',
|
||||
name: 'transfer5',
|
||||
selectMode: 'chained',
|
||||
searchable: true,
|
||||
sortable: true,
|
||||
options: [
|
||||
{
|
||||
label: '法师',
|
||||
children: [
|
||||
{
|
||||
label: '诸葛亮',
|
||||
value: 'zhugeliang'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '战士',
|
||||
children: [
|
||||
{
|
||||
label: '曹操',
|
||||
value: 'caocao'
|
||||
},
|
||||
{
|
||||
label: '钟无艳',
|
||||
value: 'zhongwuyan'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '打野',
|
||||
children: [
|
||||
{
|
||||
label: '李白',
|
||||
value: 'libai'
|
||||
},
|
||||
{
|
||||
label: '韩信',
|
||||
value: 'hanxin'
|
||||
},
|
||||
{
|
||||
label: '云中君',
|
||||
value: 'yunzhongjun'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{},
|
||||
makeEnv({})
|
||||
)
|
||||
);
|
||||
|
||||
await findByText('法师');
|
||||
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('Renderer:transfer left tree', async () => {
|
||||
const {container, findByText} = render(
|
||||
amisRender(
|
||||
{
|
||||
type: 'page',
|
||||
body: {
|
||||
type: 'form',
|
||||
api: '/api/mock2/form/saveForm',
|
||||
body: [
|
||||
{
|
||||
label: '关联选择模式',
|
||||
type: 'transfer',
|
||||
name: 'b',
|
||||
sortable: true,
|
||||
searchable: true,
|
||||
deferApi: '/api/mock2/form/deferOptions?label=${label}',
|
||||
selectMode: 'associated',
|
||||
leftMode: 'tree',
|
||||
leftOptions: [
|
||||
{
|
||||
label: '法师',
|
||||
children: [
|
||||
{
|
||||
label: '诸葛亮',
|
||||
value: 'zhugeliang'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '战士',
|
||||
children: [
|
||||
{
|
||||
label: '曹操',
|
||||
value: 'caocao'
|
||||
},
|
||||
{
|
||||
label: '钟无艳',
|
||||
value: 'zhongwuyan'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '打野',
|
||||
children: [
|
||||
{
|
||||
label: '李白',
|
||||
value: 'libai'
|
||||
},
|
||||
{
|
||||
label: '韩信',
|
||||
value: 'hanxin'
|
||||
},
|
||||
{
|
||||
label: '云中君',
|
||||
value: 'yunzhongjun'
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
options: [
|
||||
{
|
||||
ref: 'zhugeliang',
|
||||
children: [
|
||||
{
|
||||
label: 'A',
|
||||
value: 'a'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
ref: 'caocao',
|
||||
children: [
|
||||
{
|
||||
label: 'B',
|
||||
value: 'b'
|
||||
},
|
||||
{
|
||||
label: 'C',
|
||||
value: 'c'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
ref: 'zhongwuyan',
|
||||
children: [
|
||||
{
|
||||
label: 'D',
|
||||
value: 'd'
|
||||
},
|
||||
{
|
||||
label: 'E',
|
||||
value: 'e'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
ref: 'libai',
|
||||
defer: true
|
||||
},
|
||||
{
|
||||
ref: 'hanxin',
|
||||
defer: true
|
||||
},
|
||||
{
|
||||
ref: 'yunzhongjun',
|
||||
defer: true
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{},
|
||||
makeEnv({})
|
||||
)
|
||||
);
|
||||
|
||||
await findByText('诸葛亮');
|
||||
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
@ -118,3 +118,96 @@ exports[`Renderers:Action download shortcut 1`] = `
|
||||
</span>
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`Renderers:Action tooltip 1`] = `
|
||||
<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"
|
||||
style="position: relative;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
top
|
||||
</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>
|
||||
</button>
|
||||
<button
|
||||
class="cxd-Button cxd-Button--default"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
bottom
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="cxd-Button cxd-Button--default"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
left
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="cxd-Button cxd-Button--default"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
right
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -4,49 +4,6 @@ import hoistNonReactStatic from 'hoist-non-react-statics';
|
||||
import getOffset from './offset';
|
||||
import getPosition from './position';
|
||||
|
||||
const bsMapping: {
|
||||
[propName: string]: string;
|
||||
} = {
|
||||
level: 'bsStyle',
|
||||
classPrefix: 'bsClass',
|
||||
size: 'bsSize'
|
||||
};
|
||||
|
||||
/**
|
||||
* 主要目的是希望在是用 bootstrap 组件的时候不需要带 bs 前缀。
|
||||
*
|
||||
* @param {Object} rawProps 原始属性对象。
|
||||
* @return {Object}
|
||||
*/
|
||||
export const props2BsProps = (rawProps: {[propName: string]: any}) => {
|
||||
let props: {[propName: string]: any} = {};
|
||||
|
||||
Object.keys(rawProps).forEach(
|
||||
key => (props[bsMapping[key] || key] = rawProps[key])
|
||||
);
|
||||
|
||||
return props;
|
||||
};
|
||||
|
||||
/**
|
||||
* props2BsProps 的 hoc 版本
|
||||
*
|
||||
* @param {*} ComposedComponent 组合组件
|
||||
* @return {Component}
|
||||
*/
|
||||
export const props2BsPropsHoc: (
|
||||
ComposedComponent: React.ComponentType<any>
|
||||
) => React.ComponentType<any> = ComposedComponent => {
|
||||
class BsComponent extends React.Component<any> {
|
||||
render() {
|
||||
return <ComposedComponent {...props2BsProps(this.props)} />;
|
||||
}
|
||||
}
|
||||
|
||||
hoistNonReactStatic(BsComponent, ComposedComponent);
|
||||
return BsComponent;
|
||||
};
|
||||
|
||||
export function getContainer(container: any, defaultContainer: any) {
|
||||
container = typeof container === 'function' ? container() : container;
|
||||
return ReactDOM.findDOMNode(container) || defaultContainer;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user