panel 优化affixFooter，初始加载数据后，固定底部
This commit is contained in:
catchonme
parent
2db4bd6313
commit
afa86e1dea
|
|
@ -0,0 +1,28 @@
|
|||
import React = require('react');
|
||||
import {render} from 'react-testing-library';
|
||||
import '../../src/themes/default';
|
||||
import {
|
||||
render as amisRender
|
||||
} from '../../src/index';
|
||||
import { makeEnv } from '../helper';
|
||||
|
||||
test('Renderer:alert', () => {
|
||||
const {
|
||||
container
|
||||
} = render(amisRender({
|
||||
type: 'page',
|
||||
body: {
|
||||
type: 'alert',
|
||||
level: 'success',
|
||||
body: [
|
||||
{
|
||||
type: 'tpl',
|
||||
tpl: '提示内容'
|
||||
}
|
||||
]
|
||||
}
|
||||
}, {}, makeEnv({
|
||||
})));
|
||||
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
import React = require('react');
|
||||
import {render} from 'react-testing-library';
|
||||
import '../../src/themes/default';
|
||||
import {
|
||||
render as amisRender
|
||||
} from '../../src/index';
|
||||
import { makeEnv } from '../helper';
|
||||
|
||||
test('Renderer:container', () => {
|
||||
const {
|
||||
container
|
||||
} = render(amisRender({
|
||||
type: 'page',
|
||||
body: {
|
||||
type: 'container',
|
||||
className: 'bg-white',
|
||||
body: [
|
||||
{
|
||||
type: 'tpl',
|
||||
tpl: '内容1'
|
||||
},
|
||||
{
|
||||
type: 'plain',
|
||||
tpl: '内容2'
|
||||
}
|
||||
]
|
||||
}
|
||||
}, {}, makeEnv({
|
||||
})));
|
||||
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
|
@ -0,0 +1,110 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Renderer:city 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="a-Panel a-Panel--default a-Panel--form"
|
||||
>
|
||||
<div
|
||||
class="a-Panel-heading"
|
||||
>
|
||||
<h3
|
||||
class="a-Panel-title"
|
||||
>
|
||||
<span
|
||||
class="a-TplField"
|
||||
>
|
||||
The form
|
||||
</span>
|
||||
</h3>
|
||||
</div>
|
||||
<div
|
||||
class="a-Panel-body"
|
||||
>
|
||||
<form
|
||||
class="a-Form a-Form--normal"
|
||||
novalidate=""
|
||||
>
|
||||
<div
|
||||
class="a-Form-item a-Form-item--normal"
|
||||
>
|
||||
<label
|
||||
class="a-Form-label"
|
||||
>
|
||||
<span>
|
||||
city
|
||||
</span>
|
||||
</label>
|
||||
<div
|
||||
class="a-CityPicker"
|
||||
>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-labelledby="downshift-0-label"
|
||||
class="a-Select"
|
||||
role="combobox"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="a-Select-valueWrap"
|
||||
>
|
||||
<div
|
||||
class="a-Select-value"
|
||||
>
|
||||
北京市
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
class="a-Select-arrow"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-labelledby="downshift-1-label"
|
||||
class="a-Select"
|
||||
role="combobox"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="a-Select-valueWrap"
|
||||
>
|
||||
<div
|
||||
class="a-Select-value"
|
||||
>
|
||||
北京市市辖区
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
class="a-Select-arrow"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-labelledby="downshift-2-label"
|
||||
class="a-Select"
|
||||
role="combobox"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="a-Select-valueWrap"
|
||||
>
|
||||
<div
|
||||
class="a-Select-value"
|
||||
>
|
||||
东城区
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
class="a-Select-arrow"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Renderer:color 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="a-Panel a-Panel--default a-Panel--form"
|
||||
>
|
||||
<div
|
||||
class="a-Panel-heading"
|
||||
>
|
||||
<h3
|
||||
class="a-Panel-title"
|
||||
>
|
||||
<span
|
||||
class="a-TplField"
|
||||
>
|
||||
The form
|
||||
</span>
|
||||
</h3>
|
||||
</div>
|
||||
<div
|
||||
class="a-Panel-body"
|
||||
>
|
||||
<form
|
||||
class="a-Form a-Form--normal"
|
||||
novalidate=""
|
||||
>
|
||||
<div
|
||||
class="a-Form-item a-Form-item--normal"
|
||||
>
|
||||
<label
|
||||
class="a-Form-label"
|
||||
>
|
||||
<span>
|
||||
color
|
||||
</span>
|
||||
</label>
|
||||
<div
|
||||
class="a-ColorControl a-Form-control"
|
||||
>
|
||||
<div
|
||||
class="a-ColorPicker"
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
class="a-ColorPicker-input"
|
||||
placeholder="请选择颜色"
|
||||
size="10"
|
||||
type="text"
|
||||
value="#1a1438"
|
||||
/>
|
||||
<a
|
||||
class="a-ColorPicker-clear"
|
||||
>
|
||||
<svg
|
||||
class="icon"
|
||||
p-id="1463"
|
||||
version="1.1"
|
||||
viewBox="0 0 1024 1024"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M967.81435 106.836237 917.16274 56.18565 512 461.34839 106.836237 56.18565 56.184627 106.836237 461.34839 512 56.184627 917.163763 106.836237 967.815373 512 562.65161 917.16274 967.815373 967.81435 917.163763 562.650587 512Z"
|
||||
data-spm-anchor-id="a313x.7781069.0.i0"
|
||||
p-id="1464"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
<span
|
||||
class="a-ColorPicker-preview"
|
||||
>
|
||||
<i
|
||||
class="a-ColorPicker-previewIcon"
|
||||
style="background: rgb(26, 20, 56);"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
|
@ -0,0 +1,109 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Renderer:combo:single 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="a-Panel a-Panel--default a-Panel--form"
|
||||
>
|
||||
<div
|
||||
class="a-Panel-heading"
|
||||
>
|
||||
<h3
|
||||
class="a-Panel-title"
|
||||
>
|
||||
<span
|
||||
class="a-TplField"
|
||||
>
|
||||
The form
|
||||
</span>
|
||||
</h3>
|
||||
</div>
|
||||
<div
|
||||
class="a-Panel-body"
|
||||
>
|
||||
<form
|
||||
class="a-Form a-Form--normal"
|
||||
novalidate=""
|
||||
>
|
||||
<div
|
||||
class="a-Form-item a-Form-item--normal"
|
||||
>
|
||||
<label
|
||||
class="a-Form-label"
|
||||
>
|
||||
<span>
|
||||
combo
|
||||
</span>
|
||||
</label>
|
||||
<div
|
||||
class="a-ComboControl a-Form-control"
|
||||
>
|
||||
<div
|
||||
class="a-Combo a-Combo--single a-Combo--hor"
|
||||
>
|
||||
<div
|
||||
class="a-Combo-item"
|
||||
>
|
||||
<div
|
||||
class="a-Combo-itemInner"
|
||||
>
|
||||
<div
|
||||
class="a-Form a-Form--row a-Combo-form"
|
||||
novalidate=""
|
||||
>
|
||||
<div
|
||||
class="a-Form-row"
|
||||
>
|
||||
<div
|
||||
class="a-Form-col"
|
||||
>
|
||||
<div
|
||||
class="a-Form-item a-Form-item--row"
|
||||
>
|
||||
<div
|
||||
class="a-Form-rowInner"
|
||||
>
|
||||
<div
|
||||
class="a-Form-control a-TextControl"
|
||||
>
|
||||
<div
|
||||
class="a-TextControl-input"
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
name="text1"
|
||||
placeholder=""
|
||||
type="text"
|
||||
value="1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="a-Panel-btnToolbar a-Panel-footer"
|
||||
>
|
||||
<button
|
||||
class="a-Button a-Button--primary"
|
||||
type="submit"
|
||||
>
|
||||
<span>
|
||||
提交
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
|
@ -0,0 +1,95 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Renderer:container 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="a-Panel a-Panel--default a-Panel--form"
|
||||
>
|
||||
<div
|
||||
class="a-Panel-heading"
|
||||
>
|
||||
<h3
|
||||
class="a-Panel-title"
|
||||
>
|
||||
<span
|
||||
class="a-TplField"
|
||||
>
|
||||
The form
|
||||
</span>
|
||||
</h3>
|
||||
</div>
|
||||
<div
|
||||
class="a-Panel-body"
|
||||
>
|
||||
<form
|
||||
class="a-Form a-Form--normal"
|
||||
novalidate=""
|
||||
>
|
||||
<div
|
||||
class="a-Form-item a-Form-item--horizontal no-border"
|
||||
>
|
||||
<label
|
||||
class="a-Form-label a-Form-itemColumn--normal"
|
||||
>
|
||||
<span>
|
||||
container
|
||||
</span>
|
||||
</label>
|
||||
<div
|
||||
class="a-Form-value a-Form-itemColumn--7"
|
||||
>
|
||||
<div
|
||||
class="a-Container a-Form-control"
|
||||
>
|
||||
<div
|
||||
class="a-Form--horizontal bg-white"
|
||||
>
|
||||
<div
|
||||
class="a-Form-item a-Form-item--horizontal"
|
||||
>
|
||||
<label
|
||||
class="a-Form-label a-Form-itemColumn--normal"
|
||||
>
|
||||
<span />
|
||||
</label>
|
||||
<div
|
||||
class="a-Form-value a-Form-itemColumn--7"
|
||||
>
|
||||
<div
|
||||
class="a-Form-control a-TextControl a-TextControl--withAddOn"
|
||||
>
|
||||
<div
|
||||
class="a-TextControl-input"
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
name="text"
|
||||
placeholder=""
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="a-TextControl-button"
|
||||
>
|
||||
<button
|
||||
class="a-Button a-Button--default"
|
||||
type="submit"
|
||||
>
|
||||
<span>
|
||||
按钮
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Renderer:date 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="a-Panel a-Panel--default a-Panel--form"
|
||||
>
|
||||
<div
|
||||
class="a-Panel-heading"
|
||||
>
|
||||
<h3
|
||||
class="a-Panel-title"
|
||||
>
|
||||
<span
|
||||
class="a-TplField"
|
||||
>
|
||||
The form
|
||||
</span>
|
||||
</h3>
|
||||
</div>
|
||||
<div
|
||||
class="a-Panel-body"
|
||||
>
|
||||
<form
|
||||
class="a-Form a-Form--normal"
|
||||
novalidate=""
|
||||
>
|
||||
<div
|
||||
class="a-Form-item a-Form-item--normal"
|
||||
>
|
||||
<label
|
||||
class="a-Form-label"
|
||||
>
|
||||
<span>
|
||||
date
|
||||
</span>
|
||||
</label>
|
||||
<div
|
||||
class="a-DateControl a-Form-control"
|
||||
>
|
||||
<div
|
||||
class="a-DatePicker"
|
||||
tabindex="0"
|
||||
>
|
||||
<span
|
||||
class="a-DatePicker-value"
|
||||
>
|
||||
2019-06-07
|
||||
</span>
|
||||
<a
|
||||
class="a-DatePicker-clear"
|
||||
>
|
||||
<svg
|
||||
class="icon"
|
||||
p-id="1463"
|
||||
version="1.1"
|
||||
viewBox="0 0 1024 1024"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M967.81435 106.836237 917.16274 56.18565 512 461.34839 106.836237 56.18565 56.184627 106.836237 461.34839 512 56.184627 917.163763 106.836237 967.815373 512 562.65161 917.16274 967.815373 967.81435 917.163763 562.650587 512Z"
|
||||
data-spm-anchor-id="a313x.7781069.0.i0"
|
||||
p-id="1464"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
class="a-DatePicker-toggler"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Renderer:dateRange 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="a-Panel a-Panel--default a-Panel--form"
|
||||
>
|
||||
<div
|
||||
class="a-Panel-heading"
|
||||
>
|
||||
<h3
|
||||
class="a-Panel-title"
|
||||
>
|
||||
<span
|
||||
class="a-TplField"
|
||||
>
|
||||
The form
|
||||
</span>
|
||||
</h3>
|
||||
</div>
|
||||
<div
|
||||
class="a-Panel-body"
|
||||
>
|
||||
<form
|
||||
class="a-Form a-Form--normal"
|
||||
novalidate=""
|
||||
>
|
||||
<div
|
||||
class="a-Form-item a-Form-item--normal"
|
||||
>
|
||||
<label
|
||||
class="a-Form-label"
|
||||
>
|
||||
<span>
|
||||
date-range
|
||||
</span>
|
||||
</label>
|
||||
<div
|
||||
class="a-DateRangeControl a-Form-control"
|
||||
>
|
||||
<div
|
||||
class="a-DateRangePicker"
|
||||
tabindex="0"
|
||||
>
|
||||
<span
|
||||
class="a-DateRangePicker-value"
|
||||
>
|
||||
2019-06-06 至 2019-06-26
|
||||
</span>
|
||||
<a
|
||||
class="a-DateRangePicker-clear"
|
||||
>
|
||||
<svg
|
||||
class="icon"
|
||||
p-id="1463"
|
||||
version="1.1"
|
||||
viewBox="0 0 1024 1024"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M967.81435 106.836237 917.16274 56.18565 512 461.34839 106.836237 56.18565 56.184627 106.836237 461.34839 512 56.184627 917.163763 106.836237 967.815373 512 562.65161 917.16274 967.815373 967.81435 917.163763 562.650587 512Z"
|
||||
data-spm-anchor-id="a313x.7781069.0.i0"
|
||||
p-id="1464"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
class="a-DateRangePicker-toggler"
|
||||
>
|
||||
<i
|
||||
class="fa fa-calendar"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Renderer:date 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="a-Panel a-Panel--default a-Panel--form"
|
||||
>
|
||||
<div
|
||||
class="a-Panel-heading"
|
||||
>
|
||||
<h3
|
||||
class="a-Panel-title"
|
||||
>
|
||||
<span
|
||||
class="a-TplField"
|
||||
>
|
||||
The form
|
||||
</span>
|
||||
</h3>
|
||||
</div>
|
||||
<div
|
||||
class="a-Panel-body"
|
||||
>
|
||||
<form
|
||||
class="a-Form a-Form--normal"
|
||||
novalidate=""
|
||||
>
|
||||
<div
|
||||
class="a-Form-item a-Form-item--normal"
|
||||
>
|
||||
<label
|
||||
class="a-Form-label"
|
||||
>
|
||||
<span>
|
||||
date
|
||||
</span>
|
||||
</label>
|
||||
<div
|
||||
class="a-DateControl a-Form-control"
|
||||
>
|
||||
<div
|
||||
class="a-DatePicker"
|
||||
tabindex="0"
|
||||
>
|
||||
<span
|
||||
class="a-DatePicker-value"
|
||||
>
|
||||
2019-06-06 21:11
|
||||
</span>
|
||||
<a
|
||||
class="a-DatePicker-clear"
|
||||
>
|
||||
<svg
|
||||
class="icon"
|
||||
p-id="1463"
|
||||
version="1.1"
|
||||
viewBox="0 0 1024 1024"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M967.81435 106.836237 917.16274 56.18565 512 461.34839 106.836237 56.18565 56.184627 106.836237 461.34839 512 56.184627 917.163763 106.836237 967.815373 512 562.65161 917.16274 967.815373 967.81435 917.163763 562.650587 512Z"
|
||||
data-spm-anchor-id="a313x.7781069.0.i0"
|
||||
p-id="1464"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
class="a-DatePicker-toggler"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Renderer:diff-editor 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="a-Panel a-Panel--default a-Panel--form"
|
||||
>
|
||||
<div
|
||||
class="a-Panel-heading"
|
||||
>
|
||||
<h3
|
||||
class="a-Panel-title"
|
||||
>
|
||||
<span
|
||||
class="a-TplField"
|
||||
>
|
||||
The form
|
||||
</span>
|
||||
</h3>
|
||||
</div>
|
||||
<div
|
||||
class="a-Panel-body"
|
||||
>
|
||||
<form
|
||||
class="a-Form a-Form--normal"
|
||||
novalidate=""
|
||||
>
|
||||
<div
|
||||
class="a-Form-item a-Form-item--normal"
|
||||
>
|
||||
<label
|
||||
class="a-Form-label"
|
||||
>
|
||||
<span>
|
||||
diff-editor
|
||||
</span>
|
||||
</label>
|
||||
<div
|
||||
class="a-EditorControl a-Form-control"
|
||||
>
|
||||
<div>
|
||||
加载中...
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Renderer:fieldSet 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="a-Panel a-Panel--default a-Panel--form"
|
||||
>
|
||||
<div
|
||||
class="a-Panel-heading"
|
||||
>
|
||||
<h3
|
||||
class="a-Panel-title"
|
||||
>
|
||||
<span
|
||||
class="a-TplField"
|
||||
>
|
||||
The form
|
||||
</span>
|
||||
</h3>
|
||||
</div>
|
||||
<div
|
||||
class="a-Panel-body"
|
||||
>
|
||||
<form
|
||||
class="a-Form a-Form--normal"
|
||||
novalidate=""
|
||||
>
|
||||
<fieldset
|
||||
class="a-Collapse a-Collapse--collapsable no-border"
|
||||
>
|
||||
<div
|
||||
class="a-Collapse-body bg-white collapse in"
|
||||
>
|
||||
<div
|
||||
class="a-Form--horizontal"
|
||||
>
|
||||
<div
|
||||
class="a-Form-item a-Form-item--horizontal"
|
||||
>
|
||||
<label
|
||||
class="a-Form-label a-Form-itemColumn--normal"
|
||||
>
|
||||
<span />
|
||||
</label>
|
||||
<div
|
||||
class="a-Form-value a-Form-itemColumn--7"
|
||||
>
|
||||
<div
|
||||
class="a-Form-control a-TextControl"
|
||||
>
|
||||
<div
|
||||
class="a-TextControl-input"
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
name="text"
|
||||
placeholder=""
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
|
@ -0,0 +1,337 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Renderer:formula 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="a-Panel a-Panel--default a-Panel--form"
|
||||
>
|
||||
<div
|
||||
class="a-Panel-heading"
|
||||
>
|
||||
<h3
|
||||
class="a-Panel-title"
|
||||
>
|
||||
<span
|
||||
class="a-TplField"
|
||||
>
|
||||
The form
|
||||
</span>
|
||||
</h3>
|
||||
</div>
|
||||
<div
|
||||
class="a-Panel-body"
|
||||
>
|
||||
<form
|
||||
class="a-Form a-Form--normal"
|
||||
novalidate=""
|
||||
>
|
||||
<div
|
||||
class="a-Form-item a-Form-item--normal"
|
||||
>
|
||||
<label
|
||||
class="a-Form-label"
|
||||
>
|
||||
<span>
|
||||
a
|
||||
</span>
|
||||
</label>
|
||||
<div
|
||||
class="a-NumberControl a-Form-control"
|
||||
>
|
||||
<div
|
||||
class="a-Number"
|
||||
>
|
||||
<div
|
||||
class="a-Number-handler-wrap"
|
||||
>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
aria-label="Increase Value"
|
||||
class="a-Number-handler a-Number-handler-up "
|
||||
role="button"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
<span
|
||||
class="a-Number-handler-up-inner"
|
||||
unselectable="unselectable"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
aria-label="Decrease Value"
|
||||
class="a-Number-handler a-Number-handler-down "
|
||||
role="button"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
<span
|
||||
class="a-Number-handler-down-inner"
|
||||
unselectable="unselectable"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
aria-valuemin="-9007199254740991"
|
||||
aria-valuenow="1"
|
||||
class="a-Number-input-wrap"
|
||||
role="spinbutton"
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
class="a-Number-input"
|
||||
min="-9007199254740991"
|
||||
step="1"
|
||||
value="1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="a-Form-item a-Form-item--normal"
|
||||
>
|
||||
<label
|
||||
class="a-Form-label"
|
||||
>
|
||||
<span>
|
||||
b
|
||||
</span>
|
||||
</label>
|
||||
<div
|
||||
class="a-NumberControl a-Form-control"
|
||||
>
|
||||
<div
|
||||
class="a-Number"
|
||||
>
|
||||
<div
|
||||
class="a-Number-handler-wrap"
|
||||
>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
aria-label="Increase Value"
|
||||
class="a-Number-handler a-Number-handler-up "
|
||||
role="button"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
<span
|
||||
class="a-Number-handler-up-inner"
|
||||
unselectable="unselectable"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
aria-label="Decrease Value"
|
||||
class="a-Number-handler a-Number-handler-down "
|
||||
role="button"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
<span
|
||||
class="a-Number-handler-down-inner"
|
||||
unselectable="unselectable"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
aria-valuemin="-9007199254740991"
|
||||
aria-valuenow="2"
|
||||
class="a-Number-input-wrap"
|
||||
role="spinbutton"
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
class="a-Number-input"
|
||||
min="-9007199254740991"
|
||||
step="1"
|
||||
value="2"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="a-Form-item a-Form-item--normal"
|
||||
>
|
||||
<label
|
||||
class="a-Form-label"
|
||||
>
|
||||
<span>
|
||||
sum1
|
||||
</span>
|
||||
</label>
|
||||
<div
|
||||
class="a-NumberControl a-Form-control"
|
||||
>
|
||||
<div
|
||||
class="a-Number"
|
||||
>
|
||||
<div
|
||||
class="a-Number-handler-wrap"
|
||||
>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
aria-label="Increase Value"
|
||||
class="a-Number-handler a-Number-handler-up "
|
||||
role="button"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
<span
|
||||
class="a-Number-handler-up-inner"
|
||||
unselectable="unselectable"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
aria-label="Decrease Value"
|
||||
class="a-Number-handler a-Number-handler-down "
|
||||
role="button"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
<span
|
||||
class="a-Number-handler-down-inner"
|
||||
unselectable="unselectable"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
aria-valuemin="-9007199254740991"
|
||||
aria-valuenow="3"
|
||||
class="a-Number-input-wrap"
|
||||
role="spinbutton"
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
class="a-Number-input"
|
||||
min="-9007199254740991"
|
||||
step="1"
|
||||
value="3"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="a-Form-item a-Form-item--normal"
|
||||
>
|
||||
<label
|
||||
class="a-Form-label"
|
||||
>
|
||||
<span>
|
||||
sum2
|
||||
</span>
|
||||
</label>
|
||||
<div
|
||||
class="a-NumberControl a-Form-control"
|
||||
>
|
||||
<div
|
||||
class="a-Number"
|
||||
>
|
||||
<div
|
||||
class="a-Number-handler-wrap"
|
||||
>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
aria-label="Increase Value"
|
||||
class="a-Number-handler a-Number-handler-up "
|
||||
role="button"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
<span
|
||||
class="a-Number-handler-up-inner"
|
||||
unselectable="unselectable"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
aria-label="Decrease Value"
|
||||
class="a-Number-handler a-Number-handler-down "
|
||||
role="button"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
<span
|
||||
class="a-Number-handler-down-inner"
|
||||
unselectable="unselectable"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
aria-valuemin="-9007199254740991"
|
||||
aria-valuenow="4"
|
||||
class="a-Number-input-wrap"
|
||||
role="spinbutton"
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
class="a-Number-input"
|
||||
min="-9007199254740991"
|
||||
step="1"
|
||||
value="4"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="a-Form-item a-Form-item--normal"
|
||||
>
|
||||
<label
|
||||
class="a-Form-label"
|
||||
>
|
||||
<span>
|
||||
sum3
|
||||
</span>
|
||||
</label>
|
||||
<div
|
||||
class="a-NumberControl a-Form-control"
|
||||
>
|
||||
<div
|
||||
class="a-Number"
|
||||
>
|
||||
<div
|
||||
class="a-Number-handler-wrap"
|
||||
>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
aria-label="Increase Value"
|
||||
class="a-Number-handler a-Number-handler-up "
|
||||
role="button"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
<span
|
||||
class="a-Number-handler-up-inner"
|
||||
unselectable="unselectable"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
aria-label="Decrease Value"
|
||||
class="a-Number-handler a-Number-handler-down "
|
||||
role="button"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
<span
|
||||
class="a-Number-handler-down-inner"
|
||||
unselectable="unselectable"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
aria-valuemin="-9007199254740991"
|
||||
aria-valuenow="5"
|
||||
class="a-Number-input-wrap"
|
||||
role="spinbutton"
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
class="a-Number-input"
|
||||
min="-9007199254740991"
|
||||
step="1"
|
||||
value="5"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Renderer:icon-picker 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="a-Panel a-Panel--default a-Panel--form"
|
||||
>
|
||||
<div
|
||||
class="a-Panel-heading"
|
||||
>
|
||||
<h3
|
||||
class="a-Panel-title"
|
||||
>
|
||||
<span
|
||||
class="a-TplField"
|
||||
>
|
||||
The form
|
||||
</span>
|
||||
</h3>
|
||||
</div>
|
||||
<div
|
||||
class="a-Panel-body"
|
||||
>
|
||||
<form
|
||||
class="a-Form a-Form--normal"
|
||||
novalidate=""
|
||||
>
|
||||
<div
|
||||
class="a-Form-item a-Form-item--normal"
|
||||
>
|
||||
<label
|
||||
class="a-Form-label"
|
||||
>
|
||||
<span>
|
||||
icon-picker
|
||||
</span>
|
||||
</label>
|
||||
<div
|
||||
class="a-Form-control a-IconPickerControl"
|
||||
>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-labelledby="downshift-0-label"
|
||||
class="a-IconPickerControl-input a-IconPickerControl-input--withAC"
|
||||
role="combobox"
|
||||
>
|
||||
<div
|
||||
class="a-IconPickerControl-valueWrap"
|
||||
>
|
||||
<div
|
||||
class="a-IconPickerControl-value"
|
||||
>
|
||||
<i
|
||||
class="glyphicon glyphicon-plus"
|
||||
/>
|
||||
glyphicon glyphicon-plus
|
||||
</div>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-labelledby="downshift-0-label"
|
||||
autocomplete="off"
|
||||
id="downshift-0-input"
|
||||
name="a"
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Renderer:fieldSet 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="a-Panel a-Panel--default a-Panel--form"
|
||||
>
|
||||
<div
|
||||
class="a-Panel-heading"
|
||||
>
|
||||
<h3
|
||||
class="a-Panel-title"
|
||||
>
|
||||
<span
|
||||
class="a-TplField"
|
||||
>
|
||||
The form
|
||||
</span>
|
||||
</h3>
|
||||
</div>
|
||||
<div
|
||||
class="a-Panel-body"
|
||||
>
|
||||
<form
|
||||
class="a-Form a-Form--normal"
|
||||
novalidate=""
|
||||
>
|
||||
<div
|
||||
class="a-Form-item a-Form-item--horizontal no-border"
|
||||
>
|
||||
<label
|
||||
class="a-Form-label a-Form-itemColumn--normal"
|
||||
>
|
||||
<span>
|
||||
input-group
|
||||
</span>
|
||||
</label>
|
||||
<div
|
||||
class="a-Form-value a-Form-itemColumn--7"
|
||||
>
|
||||
<div
|
||||
class="a-InputGroup a-Form-control"
|
||||
>
|
||||
<div
|
||||
class="a-TextControl-input a-Form-control"
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
name="text"
|
||||
placeholder=""
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
|
@ -0,0 +1,140 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Renderer:matrix 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="a-Panel a-Panel--default a-Panel--form"
|
||||
>
|
||||
<div
|
||||
class="a-Panel-heading"
|
||||
>
|
||||
<h3
|
||||
class="a-Panel-title"
|
||||
>
|
||||
<span
|
||||
class="a-TplField"
|
||||
>
|
||||
The form
|
||||
</span>
|
||||
</h3>
|
||||
</div>
|
||||
<div
|
||||
class="a-Panel-body"
|
||||
>
|
||||
<form
|
||||
class="a-Form a-Form--normal"
|
||||
novalidate=""
|
||||
>
|
||||
<div
|
||||
class="a-Form-item a-Form-item--normal"
|
||||
>
|
||||
<label
|
||||
class="a-Form-label"
|
||||
>
|
||||
<span>
|
||||
matrix
|
||||
</span>
|
||||
</label>
|
||||
<div
|
||||
class="a-MatrixControl a-Form-control"
|
||||
>
|
||||
<div
|
||||
class="a-Table m-b-none"
|
||||
>
|
||||
<div
|
||||
class="a-Table-content"
|
||||
>
|
||||
<table
|
||||
class="a-Table-table"
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
行标题说明
|
||||
</th>
|
||||
<th
|
||||
class="text-center"
|
||||
>
|
||||
列1
|
||||
</th>
|
||||
<th
|
||||
class="text-center"
|
||||
>
|
||||
列2
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
行1
|
||||
</td>
|
||||
<td
|
||||
class="text-center"
|
||||
>
|
||||
<label
|
||||
class="a-Checkbox a-Checkbox--checkbox a-Checkbox--full"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
/>
|
||||
<i />
|
||||
<span />
|
||||
</label>
|
||||
</td>
|
||||
<td
|
||||
class="text-center"
|
||||
>
|
||||
<label
|
||||
class="a-Checkbox a-Checkbox--checkbox a-Checkbox--full"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
/>
|
||||
<i />
|
||||
<span />
|
||||
</label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
行2
|
||||
</td>
|
||||
<td
|
||||
class="text-center"
|
||||
>
|
||||
<label
|
||||
class="a-Checkbox a-Checkbox--checkbox a-Checkbox--full"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
/>
|
||||
<i />
|
||||
<span />
|
||||
</label>
|
||||
</td>
|
||||
<td
|
||||
class="text-center"
|
||||
>
|
||||
<label
|
||||
class="a-Checkbox a-Checkbox--checkbox a-Checkbox--full"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
/>
|
||||
<i />
|
||||
<span />
|
||||
</label>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
|
@ -0,0 +1,93 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Renderer:number 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="a-Panel a-Panel--default a-Panel--form"
|
||||
>
|
||||
<div
|
||||
class="a-Panel-heading"
|
||||
>
|
||||
<h3
|
||||
class="a-Panel-title"
|
||||
>
|
||||
<span
|
||||
class="a-TplField"
|
||||
>
|
||||
The form
|
||||
</span>
|
||||
</h3>
|
||||
</div>
|
||||
<div
|
||||
class="a-Panel-body"
|
||||
>
|
||||
<form
|
||||
class="a-Form a-Form--normal"
|
||||
novalidate=""
|
||||
>
|
||||
<div
|
||||
class="a-Form-item a-Form-item--normal"
|
||||
>
|
||||
<label
|
||||
class="a-Form-label"
|
||||
>
|
||||
<span>
|
||||
number
|
||||
</span>
|
||||
</label>
|
||||
<div
|
||||
class="a-NumberControl a-Form-control"
|
||||
>
|
||||
<div
|
||||
class="a-Number"
|
||||
>
|
||||
<div
|
||||
class="a-Number-handler-wrap"
|
||||
>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
aria-label="Increase Value"
|
||||
class="a-Number-handler a-Number-handler-up "
|
||||
role="button"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
<span
|
||||
class="a-Number-handler-up-inner"
|
||||
unselectable="unselectable"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
aria-label="Decrease Value"
|
||||
class="a-Number-handler a-Number-handler-down "
|
||||
role="button"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
<span
|
||||
class="a-Number-handler-down-inner"
|
||||
unselectable="unselectable"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
aria-valuemin="-9007199254740991"
|
||||
aria-valuenow="456"
|
||||
class="a-Number-input-wrap"
|
||||
role="spinbutton"
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
class="a-Number-input"
|
||||
min="-9007199254740991"
|
||||
step="1"
|
||||
value="456"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
|
@ -0,0 +1,307 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Renderer:number 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="a-Panel a-Panel--default a-Panel--form"
|
||||
>
|
||||
<div
|
||||
class="a-Panel-heading"
|
||||
>
|
||||
<h3
|
||||
class="a-Panel-title"
|
||||
>
|
||||
<span
|
||||
class="a-TplField"
|
||||
>
|
||||
The form
|
||||
</span>
|
||||
</h3>
|
||||
</div>
|
||||
<div
|
||||
class="a-Panel-body"
|
||||
>
|
||||
<form
|
||||
class="a-Form a-Form--normal"
|
||||
novalidate=""
|
||||
>
|
||||
<div
|
||||
class="a-Form-item a-Form-item--normal"
|
||||
>
|
||||
<label
|
||||
class="a-Form-label"
|
||||
>
|
||||
<span>
|
||||
range
|
||||
</span>
|
||||
</label>
|
||||
<div
|
||||
class="a-RangeControl a-RangeControl--withInput a-RangeControl--clearable a-Form-control"
|
||||
>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
class="a-InputRange"
|
||||
>
|
||||
<span
|
||||
class="a-InputRange-label a-InputRange-label--min"
|
||||
>
|
||||
<span
|
||||
class="a-InputRange-labelContainer"
|
||||
>
|
||||
0
|
||||
</span>
|
||||
</span>
|
||||
<div
|
||||
class="a-InputRange-track a-InputRange-track--background"
|
||||
>
|
||||
<div
|
||||
class="a-InputRange-track"
|
||||
style="left: 0%; width: 40%;"
|
||||
/>
|
||||
<span
|
||||
class="a-InputRange-sliderContainer"
|
||||
style="position: absolute; left: 40%;"
|
||||
>
|
||||
<span
|
||||
class="a-InputRange-label a-InputRange-label--value"
|
||||
>
|
||||
<span
|
||||
class="a-InputRange-labelContainer"
|
||||
>
|
||||
8
|
||||
</span>
|
||||
</span>
|
||||
<div
|
||||
aria-valuemax="20"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="8"
|
||||
class="a-InputRange-slider"
|
||||
draggable="false"
|
||||
role="slider"
|
||||
tabindex="0"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
class="a-InputRange-label a-InputRange-label--max"
|
||||
>
|
||||
<span
|
||||
class="a-InputRange-labelContainer"
|
||||
>
|
||||
20
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
class="a-InputRange-label a-InputRange-label--mid"
|
||||
>
|
||||
<span
|
||||
class="a-InputRange-labelContainer"
|
||||
>
|
||||
10
|
||||
</span>
|
||||
</span>
|
||||
<div
|
||||
class="a-InputRange-input"
|
||||
>
|
||||
<input
|
||||
class="is-active"
|
||||
name="a"
|
||||
type="text"
|
||||
value="8"
|
||||
/>
|
||||
</div>
|
||||
<a
|
||||
class="a-InputRange-clear is-active"
|
||||
>
|
||||
<svg
|
||||
class="icon"
|
||||
p-id="1463"
|
||||
version="1.1"
|
||||
viewBox="0 0 1024 1024"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M967.81435 106.836237 917.16274 56.18565 512 461.34839 106.836237 56.18565 56.184627 106.836237 461.34839 512 56.184627 917.163763 106.836237 967.815373 512 562.65161 917.16274 967.815373 967.81435 917.163763 562.650587 512Z"
|
||||
data-spm-anchor-id="a313x.7781069.0.i0"
|
||||
p-id="1464"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Renderer:range:multiple 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="a-Panel a-Panel--default a-Panel--form"
|
||||
>
|
||||
<div
|
||||
class="a-Panel-heading"
|
||||
>
|
||||
<h3
|
||||
class="a-Panel-title"
|
||||
>
|
||||
<span
|
||||
class="a-TplField"
|
||||
>
|
||||
The form
|
||||
</span>
|
||||
</h3>
|
||||
</div>
|
||||
<div
|
||||
class="a-Panel-body"
|
||||
>
|
||||
<form
|
||||
class="a-Form a-Form--normal"
|
||||
novalidate=""
|
||||
>
|
||||
<div
|
||||
class="a-Form-item a-Form-item--normal"
|
||||
>
|
||||
<label
|
||||
class="a-Form-label"
|
||||
>
|
||||
<span>
|
||||
range
|
||||
</span>
|
||||
</label>
|
||||
<div
|
||||
class="a-RangeControl a-RangeControl--withInput a-RangeControl--clearable is-multiple a-Form-control"
|
||||
>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
class="a-InputRange"
|
||||
>
|
||||
<span
|
||||
class="a-InputRange-label a-InputRange-label--min"
|
||||
>
|
||||
<span
|
||||
class="a-InputRange-labelContainer"
|
||||
>
|
||||
0
|
||||
</span>
|
||||
</span>
|
||||
<div
|
||||
class="a-InputRange-track a-InputRange-track--background"
|
||||
>
|
||||
<div
|
||||
class="a-InputRange-track is-active"
|
||||
style="left: 0%; width: 100%;"
|
||||
/>
|
||||
<span
|
||||
class="a-InputRange-sliderContainer"
|
||||
style="position: absolute; left: 0%;"
|
||||
>
|
||||
<span
|
||||
class="a-InputRange-label a-InputRange-label--value"
|
||||
>
|
||||
<span
|
||||
class="a-InputRange-labelContainer"
|
||||
>
|
||||
0
|
||||
</span>
|
||||
</span>
|
||||
<div
|
||||
aria-valuemax="20"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="0"
|
||||
class="a-InputRange-slider"
|
||||
draggable="false"
|
||||
role="slider"
|
||||
tabindex="0"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="a-InputRange-sliderContainer"
|
||||
style="position: absolute; left: 100%;"
|
||||
>
|
||||
<span
|
||||
class="a-InputRange-label a-InputRange-label--value"
|
||||
>
|
||||
<span
|
||||
class="a-InputRange-labelContainer"
|
||||
>
|
||||
20
|
||||
</span>
|
||||
</span>
|
||||
<div
|
||||
aria-valuemax="20"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="20"
|
||||
class="a-InputRange-slider"
|
||||
draggable="false"
|
||||
role="slider"
|
||||
tabindex="0"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
class="a-InputRange-label a-InputRange-label--max"
|
||||
>
|
||||
<span
|
||||
class="a-InputRange-labelContainer"
|
||||
>
|
||||
20
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
class="a-InputRange-label a-InputRange-label--mid"
|
||||
>
|
||||
<span
|
||||
class="a-InputRange-labelContainer"
|
||||
>
|
||||
10
|
||||
</span>
|
||||
</span>
|
||||
<div
|
||||
class="a-InputRange-input is-multiple"
|
||||
>
|
||||
<input
|
||||
class=""
|
||||
name="a"
|
||||
type="text"
|
||||
value="0"
|
||||
/>
|
||||
<span
|
||||
class="a-InputRange-input-separator"
|
||||
>
|
||||
-
|
||||
</span>
|
||||
<input
|
||||
class=""
|
||||
name="a"
|
||||
type="text"
|
||||
value="20"
|
||||
/>
|
||||
</div>
|
||||
<a
|
||||
class="a-InputRange-clear is-active"
|
||||
>
|
||||
<svg
|
||||
class="icon"
|
||||
p-id="1463"
|
||||
version="1.1"
|
||||
viewBox="0 0 1024 1024"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M967.81435 106.836237 917.16274 56.18565 512 461.34839 106.836237 56.18565 56.184627 106.836237 461.34839 512 56.184627 917.163763 106.836237 967.815373 512 562.65161 917.16274 967.815373 967.81435 917.163763 562.650587 512Z"
|
||||
data-spm-anchor-id="a313x.7781069.0.i0"
|
||||
p-id="1464"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Renderer:rating 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="a-Panel a-Panel--default a-Panel--form"
|
||||
>
|
||||
<div
|
||||
class="a-Panel-heading"
|
||||
>
|
||||
<h3
|
||||
class="a-Panel-title"
|
||||
>
|
||||
<span
|
||||
class="a-TplField"
|
||||
>
|
||||
The form
|
||||
</span>
|
||||
</h3>
|
||||
</div>
|
||||
<div
|
||||
class="a-Panel-body"
|
||||
>
|
||||
<form
|
||||
class="a-Form a-Form--normal"
|
||||
novalidate=""
|
||||
>
|
||||
<div
|
||||
class="a-Form-item a-Form-item--normal"
|
||||
>
|
||||
<label
|
||||
class="a-Form-label"
|
||||
>
|
||||
<span>
|
||||
rating
|
||||
</span>
|
||||
</label>
|
||||
<div
|
||||
class="a-RatingControl a-Form-control"
|
||||
>
|
||||
<div
|
||||
class=""
|
||||
>
|
||||
<span
|
||||
class="a-Rating is-active"
|
||||
data-forhalf="★"
|
||||
data-index="0"
|
||||
>
|
||||
★
|
||||
</span>
|
||||
<span
|
||||
class="a-Rating is-active"
|
||||
data-forhalf="★"
|
||||
data-index="1"
|
||||
>
|
||||
★
|
||||
</span>
|
||||
<span
|
||||
class="a-Rating is-active"
|
||||
data-forhalf="★"
|
||||
data-index="2"
|
||||
>
|
||||
★
|
||||
</span>
|
||||
<span
|
||||
class="a-Rating"
|
||||
data-forhalf="★"
|
||||
data-index="3"
|
||||
>
|
||||
★
|
||||
</span>
|
||||
<span
|
||||
class="a-Rating"
|
||||
data-forhalf="★"
|
||||
data-index="4"
|
||||
>
|
||||
★
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
|
@ -0,0 +1,223 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Renderer:repeat 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="a-Panel a-Panel--default a-Panel--form"
|
||||
>
|
||||
<div
|
||||
class="a-Panel-heading"
|
||||
>
|
||||
<h3
|
||||
class="a-Panel-title"
|
||||
>
|
||||
<span
|
||||
class="a-TplField"
|
||||
>
|
||||
The form
|
||||
</span>
|
||||
</h3>
|
||||
</div>
|
||||
<div
|
||||
class="a-Panel-body"
|
||||
>
|
||||
<form
|
||||
class="a-Form a-Form--normal"
|
||||
novalidate=""
|
||||
>
|
||||
<div
|
||||
class="a-Form-item a-Form-item--normal"
|
||||
>
|
||||
<label
|
||||
class="a-Form-label"
|
||||
>
|
||||
<span>
|
||||
repeat
|
||||
</span>
|
||||
</label>
|
||||
<div
|
||||
class="a-RepeatControl a-Form-control"
|
||||
>
|
||||
<div
|
||||
class="repeat-control hbox"
|
||||
>
|
||||
<div
|
||||
class="col v-middle"
|
||||
style="width: 30px;"
|
||||
>
|
||||
<span>
|
||||
每
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="col v-middle"
|
||||
>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
class="a-InputRange"
|
||||
>
|
||||
<span
|
||||
class="a-InputRange-label a-InputRange-label--min"
|
||||
>
|
||||
<span
|
||||
class="a-InputRange-labelContainer"
|
||||
>
|
||||
1
|
||||
</span>
|
||||
</span>
|
||||
<div
|
||||
class="a-InputRange-track a-InputRange-track--background"
|
||||
>
|
||||
<div
|
||||
class="a-InputRange-track"
|
||||
style="left: 0%; width: 0%;"
|
||||
/>
|
||||
<span
|
||||
class="a-InputRange-sliderContainer"
|
||||
style="position: absolute; left: 0%;"
|
||||
>
|
||||
<span
|
||||
class="a-InputRange-label a-InputRange-label--value"
|
||||
>
|
||||
<span
|
||||
class="a-InputRange-labelContainer"
|
||||
>
|
||||
1
|
||||
</span>
|
||||
</span>
|
||||
<div
|
||||
aria-valuemax="20"
|
||||
aria-valuemin="1"
|
||||
aria-valuenow="1"
|
||||
class="a-InputRange-slider"
|
||||
draggable="false"
|
||||
role="slider"
|
||||
tabindex="0"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
class="a-InputRange-label a-InputRange-label--max"
|
||||
>
|
||||
<span
|
||||
class="a-InputRange-labelContainer"
|
||||
>
|
||||
20
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="col v-middle repeat-btn"
|
||||
>
|
||||
<div
|
||||
aria-expanded="true"
|
||||
aria-haspopup="listbox"
|
||||
aria-labelledby="downshift-0-label"
|
||||
aria-owns="downshift-0-menu"
|
||||
class="a-Select is-opened pull-right"
|
||||
role="combobox"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="a-Select-valueWrap"
|
||||
>
|
||||
<div
|
||||
class="a-Select-value"
|
||||
>
|
||||
年
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
class="a-Select-arrow"
|
||||
/>
|
||||
<div
|
||||
class="a-Select-menuOuter"
|
||||
>
|
||||
<div
|
||||
class="a-Select-menu"
|
||||
>
|
||||
<div
|
||||
aria-selected="false"
|
||||
class="a-Select-option"
|
||||
id="downshift-0-item-0"
|
||||
role="option"
|
||||
>
|
||||
不重复
|
||||
</div>
|
||||
<div
|
||||
aria-selected="false"
|
||||
class="a-Select-option"
|
||||
id="downshift-0-item-1"
|
||||
role="option"
|
||||
>
|
||||
秒
|
||||
</div>
|
||||
<div
|
||||
aria-selected="false"
|
||||
class="a-Select-option"
|
||||
id="downshift-0-item-2"
|
||||
role="option"
|
||||
>
|
||||
分
|
||||
</div>
|
||||
<div
|
||||
aria-selected="false"
|
||||
class="a-Select-option"
|
||||
id="downshift-0-item-3"
|
||||
role="option"
|
||||
>
|
||||
时
|
||||
</div>
|
||||
<div
|
||||
aria-selected="false"
|
||||
class="a-Select-option"
|
||||
id="downshift-0-item-4"
|
||||
role="option"
|
||||
>
|
||||
天
|
||||
</div>
|
||||
<div
|
||||
aria-selected="false"
|
||||
class="a-Select-option"
|
||||
id="downshift-0-item-5"
|
||||
role="option"
|
||||
>
|
||||
周中
|
||||
</div>
|
||||
<div
|
||||
aria-selected="false"
|
||||
class="a-Select-option"
|
||||
id="downshift-0-item-6"
|
||||
role="option"
|
||||
>
|
||||
周
|
||||
</div>
|
||||
<div
|
||||
aria-selected="false"
|
||||
class="a-Select-option"
|
||||
id="downshift-0-item-7"
|
||||
role="option"
|
||||
>
|
||||
月
|
||||
</div>
|
||||
<div
|
||||
aria-selected="false"
|
||||
class="a-Select-option is-active"
|
||||
id="downshift-0-item-8"
|
||||
role="option"
|
||||
>
|
||||
年
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
|
@ -0,0 +1,342 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Renderer:select 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="a-Panel a-Panel--default a-Panel--form"
|
||||
>
|
||||
<div
|
||||
class="a-Panel-heading"
|
||||
>
|
||||
<h3
|
||||
class="a-Panel-title"
|
||||
>
|
||||
<span
|
||||
class="a-TplField"
|
||||
>
|
||||
The form
|
||||
</span>
|
||||
</h3>
|
||||
</div>
|
||||
<div
|
||||
class="a-Panel-body"
|
||||
>
|
||||
<form
|
||||
class="a-Form a-Form--normal"
|
||||
novalidate=""
|
||||
>
|
||||
<div
|
||||
class="a-Form-item a-Form-item--normal"
|
||||
>
|
||||
<label
|
||||
class="a-Form-label"
|
||||
>
|
||||
<span>
|
||||
select
|
||||
</span>
|
||||
</label>
|
||||
<div
|
||||
class="a-SelectControl a-Form-control"
|
||||
>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-labelledby="downshift-0-label"
|
||||
class="a-Select a-Select--multi"
|
||||
role="combobox"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="a-Select-valueWrap"
|
||||
>
|
||||
<div
|
||||
class="a-Select-value"
|
||||
>
|
||||
<span
|
||||
class="a-Select-valueIcon"
|
||||
>
|
||||
×
|
||||
</span>
|
||||
<span
|
||||
class="a-Select-valueLabel"
|
||||
>
|
||||
Option B
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="a-Select-value"
|
||||
>
|
||||
<span
|
||||
class="a-Select-valueIcon"
|
||||
>
|
||||
×
|
||||
</span>
|
||||
<span
|
||||
class="a-Select-valueLabel"
|
||||
>
|
||||
Option A
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<a
|
||||
class="a-Select-clear"
|
||||
>
|
||||
<svg
|
||||
class="icon"
|
||||
p-id="1463"
|
||||
version="1.1"
|
||||
viewBox="0 0 1024 1024"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M967.81435 106.836237 917.16274 56.18565 512 461.34839 106.836237 56.18565 56.184627 106.836237 461.34839 512 56.184627 917.163763 106.836237 967.815373 512 562.65161 917.16274 967.815373 967.81435 917.163763 562.650587 512Z"
|
||||
data-spm-anchor-id="a313x.7781069.0.i0"
|
||||
p-id="1464"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
<span
|
||||
class="a-Select-arrow"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Renderer:select 2`] = `
|
||||
<div>
|
||||
<div
|
||||
class="a-Panel a-Panel--default a-Panel--form"
|
||||
>
|
||||
<div
|
||||
class="a-Panel-heading"
|
||||
>
|
||||
<h3
|
||||
class="a-Panel-title"
|
||||
>
|
||||
<span
|
||||
class="a-TplField"
|
||||
>
|
||||
The form
|
||||
</span>
|
||||
</h3>
|
||||
</div>
|
||||
<div
|
||||
class="a-Panel-body"
|
||||
>
|
||||
<form
|
||||
class="a-Form a-Form--normal"
|
||||
novalidate=""
|
||||
>
|
||||
<div
|
||||
class="a-Form-item a-Form-item--normal"
|
||||
>
|
||||
<label
|
||||
class="a-Form-label"
|
||||
>
|
||||
<span>
|
||||
select
|
||||
</span>
|
||||
</label>
|
||||
<div
|
||||
class="a-SelectControl a-Form-control"
|
||||
>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-labelledby="downshift-0-label"
|
||||
class="a-Select a-Select--multi"
|
||||
role="combobox"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="a-Select-valueWrap"
|
||||
>
|
||||
<div
|
||||
class="a-Select-placeholder"
|
||||
>
|
||||
请选择
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
class="a-Select-arrow"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Renderer:select:checkAll 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="a-Panel a-Panel--default a-Panel--form"
|
||||
>
|
||||
<div
|
||||
class="a-Panel-heading"
|
||||
>
|
||||
<h3
|
||||
class="a-Panel-title"
|
||||
>
|
||||
<span
|
||||
class="a-TplField"
|
||||
>
|
||||
The form
|
||||
</span>
|
||||
</h3>
|
||||
</div>
|
||||
<div
|
||||
class="a-Panel-body"
|
||||
>
|
||||
<form
|
||||
class="a-Form a-Form--normal"
|
||||
novalidate=""
|
||||
>
|
||||
<div
|
||||
class="a-Form-item a-Form-item--normal"
|
||||
>
|
||||
<label
|
||||
class="a-Form-label"
|
||||
>
|
||||
<span>
|
||||
select
|
||||
</span>
|
||||
</label>
|
||||
<div
|
||||
class="a-SelectControl a-Form-control"
|
||||
>
|
||||
<div
|
||||
aria-expanded="true"
|
||||
aria-haspopup="listbox"
|
||||
aria-labelledby="downshift-1-label"
|
||||
aria-owns="downshift-1-menu"
|
||||
class="a-Select a-Select--multi is-opened"
|
||||
role="combobox"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="a-Select-valueWrap"
|
||||
>
|
||||
<div
|
||||
class="a-Select-value"
|
||||
>
|
||||
<span
|
||||
class="a-Select-valueIcon"
|
||||
>
|
||||
×
|
||||
</span>
|
||||
<span
|
||||
class="a-Select-valueLabel"
|
||||
>
|
||||
Option A
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="a-Select-value"
|
||||
>
|
||||
<span
|
||||
class="a-Select-valueIcon"
|
||||
>
|
||||
×
|
||||
</span>
|
||||
<span
|
||||
class="a-Select-valueLabel"
|
||||
>
|
||||
Option B
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<a
|
||||
class="a-Select-clear"
|
||||
>
|
||||
<svg
|
||||
class="icon"
|
||||
p-id="1463"
|
||||
version="1.1"
|
||||
viewBox="0 0 1024 1024"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M967.81435 106.836237 917.16274 56.18565 512 461.34839 106.836237 56.18565 56.184627 106.836237 461.34839 512 56.184627 917.163763 106.836237 967.815373 512 562.65161 917.16274 967.815373 967.81435 917.163763 562.650587 512Z"
|
||||
data-spm-anchor-id="a313x.7781069.0.i0"
|
||||
p-id="1464"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
<span
|
||||
class="a-Select-arrow"
|
||||
/>
|
||||
<div
|
||||
class="a-Select-menuOuter"
|
||||
>
|
||||
<div
|
||||
class="a-Select-menu"
|
||||
>
|
||||
<div
|
||||
class="a-Select-checkAll"
|
||||
>
|
||||
<label
|
||||
class="a-Checkbox a-Checkbox--checkbox a-Checkbox--full"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
/>
|
||||
<i />
|
||||
<span>
|
||||
全选
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
aria-selected="false"
|
||||
class="a-Select-option is-active"
|
||||
id="downshift-1-item-0"
|
||||
role="option"
|
||||
>
|
||||
<label
|
||||
class="a-Checkbox a-Checkbox--checkbox a-Checkbox--full"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
/>
|
||||
<i />
|
||||
<span>
|
||||
Option A
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
aria-selected="false"
|
||||
class="a-Select-option is-active"
|
||||
id="downshift-1-item-1"
|
||||
role="option"
|
||||
>
|
||||
<label
|
||||
class="a-Checkbox a-Checkbox--checkbox a-Checkbox--full"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
/>
|
||||
<i />
|
||||
<span>
|
||||
Option B
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Renderer:textarea 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="a-Panel a-Panel--default a-Panel--form"
|
||||
>
|
||||
<div
|
||||
class="a-Panel-heading"
|
||||
>
|
||||
<h3
|
||||
class="a-Panel-title"
|
||||
>
|
||||
<span
|
||||
class="a-TplField"
|
||||
>
|
||||
The form
|
||||
</span>
|
||||
</h3>
|
||||
</div>
|
||||
<div
|
||||
class="a-Panel-body"
|
||||
>
|
||||
<form
|
||||
class="a-Form a-Form--normal"
|
||||
novalidate=""
|
||||
>
|
||||
<div
|
||||
class="a-Form-item a-Form-item--normal"
|
||||
>
|
||||
<label
|
||||
class="a-Form-label"
|
||||
>
|
||||
<span>
|
||||
textarea
|
||||
</span>
|
||||
</label>
|
||||
<textarea
|
||||
autocomplete="off"
|
||||
class="a-TextareaControl a-Form-control"
|
||||
name="a"
|
||||
style="height: -40px;"
|
||||
type="textarea"
|
||||
>
|
||||
456
|
||||
</textarea>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Renderer:text 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="a-Panel a-Panel--default a-Panel--form"
|
||||
>
|
||||
<div
|
||||
class="a-Panel-heading"
|
||||
>
|
||||
<h3
|
||||
class="a-Panel-title"
|
||||
>
|
||||
<span
|
||||
class="a-TplField"
|
||||
>
|
||||
The form
|
||||
</span>
|
||||
</h3>
|
||||
</div>
|
||||
<div
|
||||
class="a-Panel-body"
|
||||
>
|
||||
<form
|
||||
class="a-Form a-Form--normal"
|
||||
novalidate=""
|
||||
>
|
||||
<div
|
||||
class="a-Form-item a-Form-item--normal is-required"
|
||||
>
|
||||
<label
|
||||
class="a-Form-label"
|
||||
>
|
||||
<span>
|
||||
text
|
||||
<span
|
||||
class="a-Form-star"
|
||||
>
|
||||
*
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
<div
|
||||
class="a-Form-control is-inline a-TextControl a-TextControl--withAddOn is-focused"
|
||||
>
|
||||
<div
|
||||
class="a-TextControl-input"
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
name="text"
|
||||
placeholder=""
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="a-TextControl-button"
|
||||
>
|
||||
<button
|
||||
class="a-Button a-Button--default"
|
||||
type="submit"
|
||||
>
|
||||
<span>
|
||||
提交
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
class="a-TplField a-Form-hint"
|
||||
>
|
||||
text 输入
|
||||
</span>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Renderer:time 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="a-Panel a-Panel--default a-Panel--form"
|
||||
>
|
||||
<div
|
||||
class="a-Panel-heading"
|
||||
>
|
||||
<h3
|
||||
class="a-Panel-title"
|
||||
>
|
||||
<span
|
||||
class="a-TplField"
|
||||
>
|
||||
The form
|
||||
</span>
|
||||
</h3>
|
||||
</div>
|
||||
<div
|
||||
class="a-Panel-body"
|
||||
>
|
||||
<form
|
||||
class="a-Form a-Form--normal"
|
||||
novalidate=""
|
||||
>
|
||||
<div
|
||||
class="a-Form-item a-Form-item--normal"
|
||||
>
|
||||
<label
|
||||
class="a-Form-label"
|
||||
>
|
||||
<span>
|
||||
time
|
||||
</span>
|
||||
</label>
|
||||
<div
|
||||
class="a-DateControl a-Form-control"
|
||||
>
|
||||
<div
|
||||
class="a-DatePicker"
|
||||
tabindex="0"
|
||||
>
|
||||
<span
|
||||
class="a-DatePicker-value"
|
||||
>
|
||||
01:01
|
||||
</span>
|
||||
<a
|
||||
class="a-DatePicker-clear"
|
||||
>
|
||||
<svg
|
||||
class="icon"
|
||||
p-id="1463"
|
||||
version="1.1"
|
||||
viewBox="0 0 1024 1024"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M967.81435 106.836237 917.16274 56.18565 512 461.34839 106.836237 56.18565 56.184627 106.836237 461.34839 512 56.184627 917.163763 106.836237 967.815373 512 562.65161 917.16274 967.815373 967.81435 917.163763 562.650587 512Z"
|
||||
data-spm-anchor-id="a313x.7781069.0.i0"
|
||||
p-id="1464"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
class="a-DatePicker-toggler"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
import React = require('react');
|
||||
import {render, fireEvent} from 'react-testing-library';
|
||||
import '../../../src/themes/default';
|
||||
import {
|
||||
render as amisRender
|
||||
} from '../../../src/index';
|
||||
import { makeEnv } from '../../helper';
|
||||
|
||||
test('Renderer:city', async () => {
|
||||
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({
|
||||
})));
|
||||
|
||||
fireEvent.click(getByText('请选择'));
|
||||
fireEvent.click(getByText('北京市'));
|
||||
fireEvent.click(getByText('请选择'));
|
||||
fireEvent.click(getByText('北京市市辖区'));
|
||||
fireEvent.click(getByText('请选择'));
|
||||
fireEvent.click(getByText('东城区'));
|
||||
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
import React = require('react');
|
||||
import {render, fireEvent} from 'react-testing-library';
|
||||
import '../../../src/themes/default';
|
||||
import {
|
||||
render as amisRender
|
||||
} from '../../../src/index';
|
||||
import { makeEnv } from '../../helper';
|
||||
|
||||
test('Renderer:color', async () => {
|
||||
const {
|
||||
container
|
||||
} = render(amisRender({
|
||||
type: 'form',
|
||||
api: '/api/xxx',
|
||||
controls: [
|
||||
{
|
||||
type: 'color',
|
||||
name: 'a',
|
||||
label: 'color',
|
||||
value: '#51458f'
|
||||
}
|
||||
],
|
||||
title: 'The form',
|
||||
actions: []
|
||||
}, {}, makeEnv({
|
||||
})));
|
||||
|
||||
const input = container.querySelector('input');
|
||||
expect(input.value).toEqual('#51458f');
|
||||
fireEvent.change(input, {
|
||||
target: {
|
||||
value: '#1a1438'
|
||||
}
|
||||
});
|
||||
expect(input.value).toEqual('#1a1438');
|
||||
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
import React = require('react');
|
||||
import {render, fireEvent} from 'react-testing-library';
|
||||
import '../../../src/themes/default';
|
||||
import {
|
||||
render as amisRender
|
||||
} from '../../../src/index';
|
||||
import { makeEnv } from '../../helper';
|
||||
|
||||
test('Renderer:container', async () => {
|
||||
const {
|
||||
container
|
||||
} = render(amisRender({
|
||||
type: 'form',
|
||||
api: '/api/xxx',
|
||||
controls: [
|
||||
{
|
||||
type: 'container',
|
||||
name: 'a',
|
||||
label: 'container',
|
||||
mode: 'horizontal',
|
||||
className: 'no-border',
|
||||
bodyClassName: 'bg-white',
|
||||
horizontal: {
|
||||
leftFixed: 1,
|
||||
left: 4,
|
||||
right: 7
|
||||
},
|
||||
controls: [
|
||||
{
|
||||
name: 'text',
|
||||
type: 'text',
|
||||
validation: 'isUrl',
|
||||
addOn: {
|
||||
label: '按钮',
|
||||
type: 'submit'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'text1',
|
||||
type: 'text',
|
||||
hidden: true
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
title: 'The form',
|
||||
actions: []
|
||||
}, {}, makeEnv({
|
||||
})));
|
||||
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
import React = require('react');
|
||||
import PageRenderer from '../../../src/renderers/Form';
|
||||
import * as renderer from 'react-test-renderer';
|
||||
import {render, fireEvent, cleanup, getByText} from 'react-testing-library';
|
||||
import '../../../src/themes/default';
|
||||
import {
|
||||
render as amisRender
|
||||
} from '../../../src/index';
|
||||
import { makeEnv } from '../../helper';
|
||||
|
||||
test('Renderer:date', async () => {
|
||||
const {
|
||||
container
|
||||
} = render(amisRender({
|
||||
type: 'form',
|
||||
api: '/api/xxx',
|
||||
controls: [
|
||||
{
|
||||
type: 'date',
|
||||
name: 'a',
|
||||
label: 'date',
|
||||
value: '1559836800',
|
||||
minDate: '1559664000',
|
||||
maxDate: '1561737600'
|
||||
}
|
||||
],
|
||||
title: 'The form',
|
||||
actions: []
|
||||
}, {}, makeEnv({
|
||||
})));
|
||||
|
||||
const input = container.querySelector('.a-DatePicker-value');
|
||||
expect(input.innerHTML).toEqual('2019-06-07');
|
||||
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
import React = require('react');
|
||||
import PageRenderer from '../../../src/renderers/Form';
|
||||
import * as renderer from 'react-test-renderer';
|
||||
import {render, fireEvent, cleanup, getByText} from 'react-testing-library';
|
||||
import '../../../src/themes/default';
|
||||
import {
|
||||
render as amisRender
|
||||
} from '../../../src/index';
|
||||
import { makeEnv } from '../../helper';
|
||||
|
||||
test('Renderer:dateRange', async () => {
|
||||
const {
|
||||
container
|
||||
} = render(amisRender({
|
||||
type: 'form',
|
||||
api: '/api/xxx',
|
||||
controls: [
|
||||
{
|
||||
type: 'date-range',
|
||||
name: 'a',
|
||||
label: 'date-range',
|
||||
value: '1559750400,1561564799',
|
||||
minDate: '1559664000',
|
||||
maxDate: '1561737600'
|
||||
}
|
||||
],
|
||||
title: 'The form',
|
||||
actions: []
|
||||
}, {}, makeEnv({
|
||||
})));
|
||||
|
||||
const input = container.querySelector('.a-DateRangePicker-value');
|
||||
expect(input.innerHTML).toEqual('2019-06-06 至 2019-06-26');
|
||||
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
import React = require('react');
|
||||
import PageRenderer from '../../../src/renderers/Form';
|
||||
import * as renderer from 'react-test-renderer';
|
||||
import {render, fireEvent, cleanup, getByText} from 'react-testing-library';
|
||||
import '../../../src/themes/default';
|
||||
import {
|
||||
render as amisRender
|
||||
} from '../../../src/index';
|
||||
import { makeEnv } from '../../helper';
|
||||
|
||||
test('Renderer:date', async () => {
|
||||
const {
|
||||
container
|
||||
} = render(amisRender({
|
||||
type: 'form',
|
||||
api: '/api/xxx',
|
||||
controls: [
|
||||
{
|
||||
type: 'datetime',
|
||||
name: 'a',
|
||||
label: 'date',
|
||||
value: '1559826660',
|
||||
minDate: '1559664000',
|
||||
maxDate: '1561737600'
|
||||
}
|
||||
],
|
||||
title: 'The form',
|
||||
actions: []
|
||||
}, {}, makeEnv({
|
||||
})));
|
||||
|
||||
const input = container.querySelector('.a-DatePicker-value');
|
||||
expect(input.innerHTML).toEqual('2019-06-06 21:11');
|
||||
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
import React = require('react');
|
||||
import {render, fireEvent} from 'react-testing-library';
|
||||
import '../../../src/themes/default';
|
||||
import {
|
||||
render as amisRender
|
||||
} from '../../../src/index';
|
||||
import { makeEnv } from '../../helper';
|
||||
|
||||
test('Renderer:fieldSet', async () => {
|
||||
const {
|
||||
container
|
||||
} = render(amisRender({
|
||||
type: 'form',
|
||||
api: '/api/xxx',
|
||||
controls: [
|
||||
{
|
||||
type: 'fieldSet',
|
||||
name: 'a',
|
||||
label: 'fieldSet',
|
||||
mode: 'horizontal',
|
||||
collapsable: true,
|
||||
collapsed: false,
|
||||
className: 'no-border',
|
||||
headingClassName: 'bg-dark',
|
||||
bodyClassName: 'bg-white',
|
||||
horizontal: {
|
||||
leftFixed: 1,
|
||||
left: 4,
|
||||
right: 7
|
||||
},
|
||||
controls: [
|
||||
{
|
||||
name: 'text',
|
||||
type: 'text',
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
title: 'The form',
|
||||
actions: []
|
||||
}, {}, makeEnv({
|
||||
})));
|
||||
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
import React = require('react');
|
||||
import {render, fireEvent} from 'react-testing-library';
|
||||
import '../../../src/themes/default';
|
||||
import {
|
||||
render as amisRender
|
||||
} from '../../../src/index';
|
||||
import { makeEnv } from '../../helper';
|
||||
|
||||
test('Renderer:formula', async () => {
|
||||
const {
|
||||
container
|
||||
} = render(amisRender({
|
||||
type: 'form',
|
||||
api: '/api/xxx',
|
||||
controls: [
|
||||
{
|
||||
type: 'number',
|
||||
name: 'a',
|
||||
label: 'a'
|
||||
},
|
||||
{
|
||||
type: 'number',
|
||||
name: 'b',
|
||||
label: 'b'
|
||||
},
|
||||
{
|
||||
type: 'number',
|
||||
name: 'sum1',
|
||||
label: 'sum1'
|
||||
},
|
||||
{
|
||||
type: 'number',
|
||||
name: 'sum2',
|
||||
label: 'sum2'
|
||||
},
|
||||
{
|
||||
type: 'number',
|
||||
name: 'sum3',
|
||||
label: 'sum3'
|
||||
},
|
||||
{
|
||||
type: 'formula',
|
||||
name: 'sum1',
|
||||
value: 0,
|
||||
formula: "a + b"
|
||||
},
|
||||
{
|
||||
type: 'formula',
|
||||
name: 'sum2',
|
||||
condition: '${b}',
|
||||
value: 0,
|
||||
formula: "a + b + 1"
|
||||
},
|
||||
{
|
||||
type: 'formula',
|
||||
name: 'sum3',
|
||||
condition: 'data.b',
|
||||
value: 0,
|
||||
formula: "a + b + 2"
|
||||
}
|
||||
],
|
||||
title: 'The form',
|
||||
actions: []
|
||||
}, {}, makeEnv({
|
||||
})));
|
||||
|
||||
const inputs = document.querySelectorAll('input')
|
||||
fireEvent.change(inputs[0], {
|
||||
target: {
|
||||
value: 1
|
||||
}
|
||||
});
|
||||
fireEvent.change(inputs[1], {
|
||||
target: {
|
||||
value: 2
|
||||
}
|
||||
});
|
||||
expect(inputs[2].value).toBe('3');
|
||||
expect(inputs[3].value).toBe('4');
|
||||
expect(inputs[4].value).toBe('5');
|
||||
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
import React = require('react');
|
||||
import {fireEvent, render} from 'react-testing-library';
|
||||
import '../../../src/themes/default';
|
||||
import {
|
||||
render as amisRender,
|
||||
setIconVendor
|
||||
} from '../../../src/index';
|
||||
import { makeEnv } from '../../helper';
|
||||
|
||||
test('Renderer:icon-picker', async () => {
|
||||
const vendors = [
|
||||
{
|
||||
name: 'Font Awesome 4.7',
|
||||
prefix: 'fa fa-',
|
||||
icons: ["address-book", "address-book-o", "address-card"]
|
||||
},
|
||||
{
|
||||
name: 'Glyphicons',
|
||||
prefix: 'glyphicon glyphicon-',
|
||||
icons: ["asterisk", "plus", "euro", "eur", "minus"]
|
||||
}];
|
||||
setIconVendor(vendors);
|
||||
|
||||
const {
|
||||
container,
|
||||
getByText,
|
||||
getByTitle
|
||||
} = render(amisRender({
|
||||
type: 'form',
|
||||
api: '/api/xxx',
|
||||
controls: [
|
||||
{
|
||||
type: 'icon-picker',
|
||||
name: 'a',
|
||||
label: 'icon-picker',
|
||||
value: 'address-card'
|
||||
}
|
||||
],
|
||||
title: 'The form',
|
||||
actions: []
|
||||
}, {}, makeEnv({
|
||||
})));
|
||||
|
||||
const faIcon = container.querySelector('.a-IconPickerControl-value');
|
||||
expect(faIcon.innerHTML.replace(/<\s*i[^>]*><\s*\/\s*i>/g,'')).toEqual('address-card');
|
||||
|
||||
const input = container.querySelector('input');
|
||||
input.focus();
|
||||
fireEvent.click(getByText(/Glyphicons/));
|
||||
|
||||
fireEvent.change(input, {
|
||||
target: {
|
||||
value: 'glyphicon glyphicon-plus'
|
||||
}
|
||||
});
|
||||
|
||||
fireEvent.click(getByTitle('glyphicon glyphicon-plus'));
|
||||
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
import React = require('react');
|
||||
import {render, fireEvent} from 'react-testing-library';
|
||||
import '../../../src/themes/default';
|
||||
import {
|
||||
render as amisRender
|
||||
} from '../../../src/index';
|
||||
import { makeEnv } from '../../helper';
|
||||
|
||||
test('Renderer:fieldSet', async () => {
|
||||
const {
|
||||
container
|
||||
} = render(amisRender({
|
||||
type: 'form',
|
||||
api: '/api/xxx',
|
||||
controls: [
|
||||
{
|
||||
type: 'input-group',
|
||||
name: 'a',
|
||||
label: 'input-group',
|
||||
mode: 'horizontal',
|
||||
className: 'no-border',
|
||||
horizontal: {
|
||||
leftFixed: 1,
|
||||
left: 4,
|
||||
right: 7
|
||||
},
|
||||
controls: [
|
||||
{
|
||||
name: 'text',
|
||||
type: 'text',
|
||||
validation: 'isUrl',
|
||||
addOn: {
|
||||
label: '按钮',
|
||||
type: 'submit'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'text1',
|
||||
type: 'text',
|
||||
hidden: true
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
title: 'The form',
|
||||
actions: []
|
||||
}, {}, makeEnv({
|
||||
})));
|
||||
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
import React = require('react');
|
||||
import {render, fireEvent} from 'react-testing-library';
|
||||
import '../../../src/themes/default';
|
||||
import {
|
||||
render as amisRender
|
||||
} from '../../../src/index';
|
||||
import { makeEnv } from '../../helper';
|
||||
|
||||
test('Renderer:number', async () => {
|
||||
const {
|
||||
container
|
||||
} = render(amisRender({
|
||||
type: 'form',
|
||||
api: '/api/xxx',
|
||||
controls: [
|
||||
{
|
||||
type: 'number',
|
||||
name: 'a',
|
||||
label: 'number',
|
||||
value: '123'
|
||||
}
|
||||
],
|
||||
title: 'The form',
|
||||
actions: []
|
||||
}, {}, makeEnv({
|
||||
})));
|
||||
|
||||
const input = container.querySelector('input');
|
||||
expect(input.value).toEqual('123');
|
||||
fireEvent.change(input, {
|
||||
target: {
|
||||
value: '456'
|
||||
}
|
||||
});
|
||||
expect(input.value).toEqual('456');
|
||||
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
|
@ -0,0 +1,93 @@
|
|||
import React = require('react');
|
||||
import {render, fireEvent} from 'react-testing-library';
|
||||
import '../../../src/themes/default';
|
||||
import {
|
||||
render as amisRender
|
||||
} from '../../../src/index';
|
||||
import { makeEnv } from '../../helper';
|
||||
|
||||
test('Renderer:number', async () => {
|
||||
const {
|
||||
container,
|
||||
getByRole
|
||||
} = render(amisRender({
|
||||
type: 'form',
|
||||
api: '/api/xxx',
|
||||
controls: [
|
||||
{
|
||||
type: 'range',
|
||||
name: 'a',
|
||||
label: 'range',
|
||||
min: 0,
|
||||
max: 20,
|
||||
step: 2,
|
||||
value: '10',
|
||||
showInput: true
|
||||
}
|
||||
],
|
||||
title: 'The form',
|
||||
actions: []
|
||||
}, {}, makeEnv({
|
||||
})));
|
||||
|
||||
fireEvent.mouseDown(getByRole('slider'));
|
||||
fireEvent.mouseMove(getByRole('slider'), {
|
||||
clientX: 400,
|
||||
clientY: 400
|
||||
});
|
||||
fireEvent.mouseUp(getByRole('slider'));
|
||||
|
||||
const input = container.querySelector('input[name=a]');
|
||||
fireEvent.change(input, {
|
||||
target: {
|
||||
value: '7'
|
||||
}
|
||||
});
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('Renderer:range:multiple', async () => {
|
||||
const {
|
||||
container
|
||||
} = render(amisRender({
|
||||
type: 'form',
|
||||
api: '/api/xxx',
|
||||
controls: [
|
||||
{
|
||||
type: 'range',
|
||||
name: 'a',
|
||||
label: 'range',
|
||||
min: 0,
|
||||
max: 20,
|
||||
step: 2,
|
||||
value: '10,15',
|
||||
multiple: true,
|
||||
joinValues: true,
|
||||
delimiter: ',',
|
||||
clearable: true,
|
||||
showInput: true
|
||||
}
|
||||
],
|
||||
title: 'The form',
|
||||
actions: []
|
||||
}, {}, makeEnv({
|
||||
})));
|
||||
|
||||
const inputs = container.querySelectorAll('input[name=a]');
|
||||
fireEvent.change(inputs[0], {
|
||||
target: {
|
||||
value: '7'
|
||||
}
|
||||
});
|
||||
fireEvent.blur(inputs[0]);
|
||||
fireEvent.change(inputs[1], {
|
||||
target: {
|
||||
value: '13'
|
||||
}
|
||||
});
|
||||
fireEvent.blur(inputs[1]);
|
||||
const close = container.querySelector('a.a-InputRange-clear');
|
||||
fireEvent.click(close);
|
||||
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
import React = require('react');
|
||||
import {render} from 'react-testing-library';
|
||||
import '../../../src/themes/default';
|
||||
import {
|
||||
render as amisRender
|
||||
} from '../../../src/index';
|
||||
import { makeEnv } from '../../helper';
|
||||
|
||||
test('Renderer:rating', async () => {
|
||||
const {
|
||||
container
|
||||
} = render(amisRender({
|
||||
type: 'form',
|
||||
api: '/api/xxx',
|
||||
controls: [
|
||||
{
|
||||
type: 'rating',
|
||||
name: 'a',
|
||||
label: 'rating',
|
||||
value: 3,
|
||||
count: 5,
|
||||
half: true,
|
||||
readOnly: false
|
||||
}
|
||||
],
|
||||
title: 'The form',
|
||||
actions: []
|
||||
}, {}, makeEnv({
|
||||
})));
|
||||
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
import React = require('react');
|
||||
import {render, fireEvent} from 'react-testing-library';
|
||||
import '../../../src/themes/default';
|
||||
import {
|
||||
render as amisRender
|
||||
} from '../../../src/index';
|
||||
import { makeEnv } from '../../helper';
|
||||
|
||||
test('Renderer:repeat', async () => {
|
||||
const {
|
||||
container,
|
||||
getByText
|
||||
} = render(amisRender({
|
||||
type: 'form',
|
||||
api: '/api/xxx',
|
||||
controls: [
|
||||
{
|
||||
type: 'repeat',
|
||||
name: 'a',
|
||||
label: 'repeat',
|
||||
options: 'secondly,minutely,hourly,daily,weekdays,weekly,monthly,yearly'
|
||||
}
|
||||
],
|
||||
title: 'The form',
|
||||
actions: []
|
||||
}, {}, makeEnv({
|
||||
})));
|
||||
|
||||
fireEvent.click(getByText('不重复'));
|
||||
fireEvent.click(getByText('秒'));
|
||||
fireEvent.click(getByText('秒'));
|
||||
fireEvent.click(getByText('时'));
|
||||
fireEvent.click(getByText('时'));
|
||||
fireEvent.click(getByText('分'));
|
||||
fireEvent.click(getByText('分'));
|
||||
fireEvent.click(getByText('天'));
|
||||
fireEvent.click(getByText('天'));
|
||||
fireEvent.click(getByText('周中'));
|
||||
fireEvent.click(getByText('周中'));
|
||||
fireEvent.click(getByText('周'));
|
||||
fireEvent.click(getByText('周'));
|
||||
fireEvent.click(getByText('月'));
|
||||
fireEvent.click(getByText('月'));
|
||||
fireEvent.click(getByText('年'));
|
||||
fireEvent.click(getByText('年'));
|
||||
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
import React = require('react');
|
||||
import {render, fireEvent} from 'react-testing-library';
|
||||
import '../../../src/themes/default';
|
||||
import {
|
||||
render as amisRender
|
||||
} from '../../../src/index';
|
||||
import { makeEnv } from '../../helper';
|
||||
|
||||
test('Renderer:textarea', async () => {
|
||||
const {
|
||||
container
|
||||
} = render(amisRender({
|
||||
type: 'form',
|
||||
api: '/api/xxx',
|
||||
controls: [
|
||||
{
|
||||
type: 'textarea',
|
||||
name: 'a',
|
||||
label: 'textarea',
|
||||
minRows: 3,
|
||||
maxRows: 10,
|
||||
trimContents: true,
|
||||
value: '123'
|
||||
}
|
||||
],
|
||||
title: 'The form',
|
||||
actions: []
|
||||
}, {}, makeEnv({
|
||||
})));
|
||||
|
||||
const textarea = container.querySelector('textarea');
|
||||
expect(textarea.innerHTML).toEqual('123');
|
||||
fireEvent.focus(textarea);
|
||||
fireEvent.change(textarea, {
|
||||
target: {
|
||||
value: '456'
|
||||
}
|
||||
});
|
||||
fireEvent.blur(textarea);
|
||||
const textareaChanged = container.querySelector('textarea');
|
||||
expect(textareaChanged.innerHTML).toEqual('456');
|
||||
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
import React = require('react');
|
||||
import PageRenderer from '../../../src/renderers/Form';
|
||||
import * as renderer from 'react-test-renderer';
|
||||
import {render, fireEvent, cleanup, getByText} from 'react-testing-library';
|
||||
import '../../../src/themes/default';
|
||||
import {
|
||||
render as amisRender
|
||||
} from '../../../src/index';
|
||||
import { makeEnv } from '../../helper';
|
||||
|
||||
test('Renderer:time', async () => {
|
||||
const {
|
||||
container
|
||||
} = render(amisRender({
|
||||
type: 'form',
|
||||
api: '/api/xxx',
|
||||
controls: [
|
||||
{
|
||||
type: 'time',
|
||||
name: 'a',
|
||||
label: 'time',
|
||||
value: '1559322060'
|
||||
}
|
||||
],
|
||||
title: 'The form',
|
||||
actions: []
|
||||
}, {}, makeEnv({
|
||||
})));
|
||||
|
||||
const input = container.querySelector('.a-DatePicker-value');
|
||||
expect(input.innerHTML).toEqual('01:01');
|
||||
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
import React = require('react');
|
||||
import {render, fireEvent} from 'react-testing-library';
|
||||
import '../../src/themes/default';
|
||||
import {
|
||||
render as amisRender
|
||||
} from '../../src/index';
|
||||
import { makeEnv } from '../helper';
|
||||
import 'jest-canvas-mock';
|
||||
|
||||
test('Renderer:qr-code', () => {
|
||||
const {
|
||||
container
|
||||
} = render(amisRender({
|
||||
type: 'page',
|
||||
body: {
|
||||
type: 'qr-code',
|
||||
value: 'amis'
|
||||
}
|
||||
}, {}, makeEnv({
|
||||
})));
|
||||
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Renderer:alert 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="a-Page"
|
||||
>
|
||||
<div
|
||||
class="a-Page-content"
|
||||
>
|
||||
<div
|
||||
class="a-Page-main"
|
||||
>
|
||||
<div
|
||||
class="a-Page-body"
|
||||
>
|
||||
<div
|
||||
class="a-Alert a-Alert--success"
|
||||
>
|
||||
<span
|
||||
class="a-TplField"
|
||||
>
|
||||
提示内容
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Renderer:container 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="a-Page"
|
||||
>
|
||||
<div
|
||||
class="a-Page-content"
|
||||
>
|
||||
<div
|
||||
class="a-Page-main"
|
||||
>
|
||||
<div
|
||||
class="a-Page-body"
|
||||
>
|
||||
<div
|
||||
class="a-Container bg-white"
|
||||
>
|
||||
<div
|
||||
class="a-Container-body"
|
||||
>
|
||||
<span
|
||||
class="a-TplField"
|
||||
>
|
||||
内容1
|
||||
</span>
|
||||
<span
|
||||
class="a-PlainField"
|
||||
>
|
||||
内容2
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Renderer:qr-code 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="a-Page"
|
||||
>
|
||||
<div
|
||||
class="a-Page-content"
|
||||
>
|
||||
<div
|
||||
class="a-Page-main"
|
||||
>
|
||||
<div
|
||||
class="a-Page-body"
|
||||
>
|
||||
<div
|
||||
class="a-QrCode"
|
||||
>
|
||||
<canvas
|
||||
height="128"
|
||||
style="height: 128px; width: 128px;"
|
||||
width="128"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "amis",
|
||||
"version": "1.0.0-rc.3",
|
||||
"version": "1.0.0-rc.4",
|
||||
"description": "一种MIS页面生成工具",
|
||||
"main": "lib/index.js",
|
||||
"scripts": {
|
||||
|
|
@ -118,6 +118,7 @@
|
|||
"highlight.js": "^9.12.0",
|
||||
"husky": "^2.2.0",
|
||||
"jest": "^24.5.0",
|
||||
"jest-canvas-mock": "^2.1.0",
|
||||
"js-yaml": "^3.10.0",
|
||||
"lint-staged": "^8.1.6",
|
||||
"marked": "^0.3.7",
|
||||
|
|
@ -144,7 +145,9 @@
|
|||
"transform": {
|
||||
"\\.(ts|tsx)$": "ts-jest"
|
||||
},
|
||||
"setupFiles": [],
|
||||
"setupFiles": [
|
||||
"jest-canvas-mock"
|
||||
],
|
||||
"testRegex": "/.*\\.test\\.(ts|tsx|js)$",
|
||||
"moduleNameMapper": {
|
||||
"\\.(css|less|sass|scss)$": "<rootDir>/__mocks__/styleMock.js"
|
||||
|
|
|
|||
|
|
@ -78,6 +78,20 @@ export class Audio extends React.Component<AudioProps, AudioState> {
|
|||
);
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps:AudioProps) {
|
||||
const props = this.props;
|
||||
|
||||
if (props.value !== nextProps.value || props.src !== nextProps.src) {
|
||||
this.setState({
|
||||
src: nextProps.value || nextProps.src,
|
||||
playing: false
|
||||
}, () => {
|
||||
this.audio.load();
|
||||
this.progress();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@autobind
|
||||
progress() {
|
||||
clearTimeout(this.progressTimeout);
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
import React from 'react';
|
||||
import {Renderer, RendererProps} from '../factory';
|
||||
import {SchemaNode, Action} from '../types';
|
||||
import {getScrollParent} from '../utils/helper';
|
||||
import {getScrollParent, autobind} from '../utils/helper';
|
||||
import {findDOMNode} from 'react-dom';
|
||||
import {resizeSensor} from '../utils/resize-sensor';
|
||||
|
||||
export interface PanelProps extends RendererProps {
|
||||
title?: string; // 标题
|
||||
|
|
@ -30,6 +31,7 @@ export default class Panel extends React.Component<PanelProps> {
|
|||
};
|
||||
|
||||
parentNode?: any;
|
||||
unSensor: Function;
|
||||
affixDom: React.RefObject<HTMLDivElement> = React.createRef();
|
||||
footerDom: React.RefObject<HTMLDivElement> = React.createRef();
|
||||
|
||||
|
|
@ -40,18 +42,17 @@ export default class Panel extends React.Component<PanelProps> {
|
|||
parent = window;
|
||||
}
|
||||
this.parentNode = parent;
|
||||
this.affixDetect = this.affixDetect.bind(this);
|
||||
this.affixDetect();
|
||||
parent.addEventListener('scroll', this.affixDetect);
|
||||
window.addEventListener('resize', this.affixDetect);
|
||||
this.unSensor = resizeSensor(dom as HTMLElement, this.affixDetect);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
const parent = this.parentNode;
|
||||
parent && parent.removeEventListener('scroll', this.affixDetect);
|
||||
window.removeEventListener('resize', this.affixDetect);
|
||||
this.unSensor && this.unSensor();
|
||||
}
|
||||
|
||||
@autobind
|
||||
affixDetect() {
|
||||
if (!this.props.affixFooter || !this.affixDom.current || !this.footerDom.current) {
|
||||
return;
|
||||
|
|
|
|||
Loading…
Reference in New Issue