mirror of
https://gitee.com/baidu/amis.git
synced 2024-11-29 18:48:45 +08:00
chore: InputSubForm 单测补充 (#6049)
This commit is contained in:
sansiro
GitHub
parent
482a025743
commit
c5f985c761
@ -0,0 +1,945 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Renderer:InputSubForm base 1`] = `
|
||||
<body
|
||||
class="is-modalOpened"
|
||||
style="width: calc(100% - 0px);"
|
||||
>
|
||||
<div>
|
||||
<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"
|
||||
/>
|
||||
<div
|
||||
class="cxd-Form-item cxd-Form-item--normal"
|
||||
data-role="form-item"
|
||||
>
|
||||
<label
|
||||
class="cxd-Form-label"
|
||||
>
|
||||
<span>
|
||||
<span
|
||||
class="cxd-TplField"
|
||||
>
|
||||
<span>
|
||||
子Form
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
<div
|
||||
class="cxd-SubFormControl cxd-Form-control"
|
||||
>
|
||||
<div
|
||||
class="cxd-SubForm-values"
|
||||
>
|
||||
<div
|
||||
class="cxd-SubForm-value"
|
||||
data-position="bottom"
|
||||
data-tooltip="编辑详情"
|
||||
>
|
||||
<span
|
||||
class="cxd-SubForm-valueLabel"
|
||||
>
|
||||
<span
|
||||
class="cxd-TplField"
|
||||
>
|
||||
<span>
|
||||
设置子表单
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
<a
|
||||
class="cxd-SubForm-valueEdit"
|
||||
>
|
||||
<icon-mock
|
||||
classname="icon icon-pencil"
|
||||
icon="pencil"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div
|
||||
class="cxd-Panel-footerWrap"
|
||||
>
|
||||
<div
|
||||
class="cxd-Panel-btnToolbar cxd-Panel-footer"
|
||||
>
|
||||
<button
|
||||
class="cxd-Button cxd-Button--primary cxd-Button--size-default"
|
||||
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
|
||||
class="amis-dialog-widget cxd-Modal cxd-Modal--1th"
|
||||
role="dialog"
|
||||
>
|
||||
<div
|
||||
class="cxd-Modal-overlay in"
|
||||
/>
|
||||
<div
|
||||
class="cxd-Modal-content in"
|
||||
>
|
||||
<div
|
||||
class="cxd-Modal-header"
|
||||
>
|
||||
<a
|
||||
class="cxd-Modal-close"
|
||||
data-position="left"
|
||||
data-tooltip="关闭"
|
||||
>
|
||||
<icon-mock
|
||||
classname="icon icon-close"
|
||||
icon="close"
|
||||
/>
|
||||
</a>
|
||||
<div
|
||||
class="cxd-Modal-title"
|
||||
>
|
||||
配置子表单
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="cxd-Modal-body"
|
||||
role="dialog-body"
|
||||
>
|
||||
<div
|
||||
class="cxd-Form cxd-Form--horizontal"
|
||||
novalidate=""
|
||||
>
|
||||
<input
|
||||
style="display: none;"
|
||||
type="submit"
|
||||
/>
|
||||
<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>
|
||||
A
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
<div
|
||||
class="cxd-Form-value"
|
||||
>
|
||||
<div
|
||||
class="cxd-Form-control cxd-TextControl"
|
||||
>
|
||||
<div
|
||||
class="cxd-TextControl-input"
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
class=""
|
||||
name="a"
|
||||
placeholder=""
|
||||
size="10"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
B
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
<div
|
||||
class="cxd-Form-value"
|
||||
>
|
||||
<div
|
||||
class="cxd-Form-control cxd-TextControl"
|
||||
>
|
||||
<div
|
||||
class="cxd-TextControl-input"
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
class=""
|
||||
name="b"
|
||||
placeholder=""
|
||||
size="10"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="cxd-Modal-footer"
|
||||
>
|
||||
<button
|
||||
class="cxd-Button cxd-Button--default cxd-Button--size-default"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
取消
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="cxd-Button cxd-Button--primary cxd-Button--size-default"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
确认
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
`;
|
||||
|
||||
exports[`Renderer:InputSubForm with addButtonClassName & itemsClassName & itemClassName & addButtonText & labelField 1`] = `
|
||||
<div>
|
||||
<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"
|
||||
/>
|
||||
<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-SubFormControl cxd-Form-control"
|
||||
>
|
||||
<div
|
||||
class="cxd-SubForm-values items-wrapper"
|
||||
>
|
||||
<div
|
||||
class="cxd-SubForm-value item-classname"
|
||||
>
|
||||
<span
|
||||
class="cxd-SubForm-valueLabel"
|
||||
>
|
||||
<span
|
||||
class="cxd-TplField"
|
||||
>
|
||||
<span>
|
||||
设置
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
<a
|
||||
class="cxd-SubForm-valueEdit"
|
||||
data-index="0"
|
||||
>
|
||||
<icon-mock
|
||||
classname="icon icon-pencil"
|
||||
icon="pencil"
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
class="cxd-SubForm-valueDel"
|
||||
data-index="0"
|
||||
>
|
||||
<icon-mock
|
||||
classname="icon icon-close"
|
||||
icon="close"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
class="cxd-SubForm-value item-classname"
|
||||
>
|
||||
<span
|
||||
class="cxd-SubForm-valueLabel"
|
||||
>
|
||||
<span
|
||||
class="cxd-TplField"
|
||||
>
|
||||
<span>
|
||||
设置
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
<a
|
||||
class="cxd-SubForm-valueEdit"
|
||||
data-index="1"
|
||||
>
|
||||
<icon-mock
|
||||
classname="icon icon-pencil"
|
||||
icon="pencil"
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
class="cxd-SubForm-valueDel"
|
||||
data-index="1"
|
||||
>
|
||||
<icon-mock
|
||||
classname="icon icon-close"
|
||||
icon="close"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="cxd-SubForm-toolbar"
|
||||
>
|
||||
<button
|
||||
class="cxd-Button cxd-SubForm-addBtn thisis-add-btn"
|
||||
type="button"
|
||||
>
|
||||
<icon-mock
|
||||
classname="icon icon-plus"
|
||||
icon="plus"
|
||||
/>
|
||||
<span>
|
||||
自定义的新增
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div
|
||||
class="cxd-Panel-footerWrap"
|
||||
>
|
||||
<div
|
||||
class="cxd-Panel-btnToolbar cxd-Panel-footer"
|
||||
>
|
||||
<button
|
||||
class="cxd-Button cxd-Button--primary cxd-Button--size-default"
|
||||
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>
|
||||
`;
|
||||
|
||||
exports[`Renderer:InputSubForm with draggable & addable & removable 1`] = `
|
||||
<div>
|
||||
<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"
|
||||
/>
|
||||
<div
|
||||
class="cxd-Form-item cxd-Form-item--normal"
|
||||
data-role="form-item"
|
||||
>
|
||||
<label
|
||||
class="cxd-Form-label"
|
||||
>
|
||||
<span>
|
||||
<span
|
||||
class="cxd-TplField"
|
||||
>
|
||||
<span>
|
||||
子Form
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
<div
|
||||
class="cxd-SubFormControl cxd-Form-control"
|
||||
>
|
||||
<div
|
||||
class="cxd-SubForm-values"
|
||||
>
|
||||
<div
|
||||
class="cxd-SubForm-value"
|
||||
>
|
||||
<a
|
||||
class="cxd-SubForm-valueDragBar"
|
||||
>
|
||||
<icon-mock
|
||||
classname="icon icon-drag-bar"
|
||||
icon="drag-bar"
|
||||
/>
|
||||
</a>
|
||||
<span
|
||||
class="cxd-SubForm-valueLabel"
|
||||
>
|
||||
<span
|
||||
class="cxd-TplField"
|
||||
>
|
||||
<span>
|
||||
设置val-b-change
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
<a
|
||||
class="cxd-SubForm-valueEdit"
|
||||
data-index="0"
|
||||
>
|
||||
<icon-mock
|
||||
classname="icon icon-pencil"
|
||||
icon="pencil"
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
class="cxd-SubForm-valueDel"
|
||||
data-index="0"
|
||||
>
|
||||
<icon-mock
|
||||
classname="icon icon-close"
|
||||
icon="close"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
class="cxd-SubForm-value"
|
||||
>
|
||||
<a
|
||||
class="cxd-SubForm-valueDragBar"
|
||||
>
|
||||
<icon-mock
|
||||
classname="icon icon-drag-bar"
|
||||
icon="drag-bar"
|
||||
/>
|
||||
</a>
|
||||
<span
|
||||
class="cxd-SubForm-valueLabel"
|
||||
>
|
||||
<span
|
||||
class="cxd-TplField"
|
||||
>
|
||||
<span>
|
||||
设置val-c
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
<a
|
||||
class="cxd-SubForm-valueEdit"
|
||||
data-index="1"
|
||||
>
|
||||
<icon-mock
|
||||
classname="icon icon-pencil"
|
||||
icon="pencil"
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
class="cxd-SubForm-valueDel"
|
||||
data-index="1"
|
||||
>
|
||||
<icon-mock
|
||||
classname="icon icon-close"
|
||||
icon="close"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
class="cxd-SubForm-value"
|
||||
>
|
||||
<a
|
||||
class="cxd-SubForm-valueDragBar"
|
||||
>
|
||||
<icon-mock
|
||||
classname="icon icon-drag-bar"
|
||||
icon="drag-bar"
|
||||
/>
|
||||
</a>
|
||||
<span
|
||||
class="cxd-SubForm-valueLabel"
|
||||
>
|
||||
<span
|
||||
class="cxd-TplField"
|
||||
>
|
||||
<span>
|
||||
设置val-d
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
<a
|
||||
class="cxd-SubForm-valueEdit"
|
||||
data-index="2"
|
||||
>
|
||||
<icon-mock
|
||||
classname="icon icon-pencil"
|
||||
icon="pencil"
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
class="cxd-SubForm-valueDel"
|
||||
data-index="2"
|
||||
>
|
||||
<icon-mock
|
||||
classname="icon icon-close"
|
||||
icon="close"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="cxd-SubForm-toolbar"
|
||||
>
|
||||
<span
|
||||
class="cxd-Combo-dragableTip"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div
|
||||
class="cxd-Panel-footerWrap"
|
||||
>
|
||||
<div
|
||||
class="cxd-Panel-btnToolbar cxd-Panel-footer"
|
||||
>
|
||||
<button
|
||||
class="cxd-Button cxd-Button--primary cxd-Button--size-default"
|
||||
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>
|
||||
`;
|
||||
|
||||
exports[`Renderer:InputSubForm with multiple & maxLength & btnLabel 1`] = `
|
||||
<div>
|
||||
<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"
|
||||
/>
|
||||
<div
|
||||
class="cxd-Form-item cxd-Form-item--normal"
|
||||
data-role="form-item"
|
||||
>
|
||||
<label
|
||||
class="cxd-Form-label"
|
||||
>
|
||||
<span>
|
||||
<span
|
||||
class="cxd-TplField"
|
||||
>
|
||||
<span>
|
||||
子Form
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
<div
|
||||
class="cxd-SubFormControl cxd-Form-control"
|
||||
>
|
||||
<div
|
||||
class="cxd-SubForm-values"
|
||||
>
|
||||
<div
|
||||
class="cxd-SubForm-value"
|
||||
>
|
||||
<span
|
||||
class="cxd-SubForm-valueLabel"
|
||||
>
|
||||
<span
|
||||
class="cxd-TplField"
|
||||
>
|
||||
<span>
|
||||
设置val-1-1
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
<a
|
||||
class="cxd-SubForm-valueEdit"
|
||||
data-index="0"
|
||||
>
|
||||
<icon-mock
|
||||
classname="icon icon-pencil"
|
||||
icon="pencil"
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
class="cxd-SubForm-valueDel"
|
||||
data-index="0"
|
||||
>
|
||||
<icon-mock
|
||||
classname="icon icon-close"
|
||||
icon="close"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
class="cxd-SubForm-value"
|
||||
>
|
||||
<span
|
||||
class="cxd-SubForm-valueLabel"
|
||||
>
|
||||
<span
|
||||
class="cxd-TplField"
|
||||
>
|
||||
<span>
|
||||
设置val-2-1
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
<a
|
||||
class="cxd-SubForm-valueEdit"
|
||||
data-index="1"
|
||||
>
|
||||
<icon-mock
|
||||
classname="icon icon-pencil"
|
||||
icon="pencil"
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
class="cxd-SubForm-valueDel"
|
||||
data-index="1"
|
||||
>
|
||||
<icon-mock
|
||||
classname="icon icon-close"
|
||||
icon="close"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="cxd-SubForm-toolbar"
|
||||
>
|
||||
<button
|
||||
class="cxd-Button cxd-SubForm-addBtn"
|
||||
disabled=""
|
||||
type="button"
|
||||
>
|
||||
<icon-mock
|
||||
classname="icon icon-plus"
|
||||
icon="plus"
|
||||
/>
|
||||
<span>
|
||||
新增一项
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div
|
||||
class="cxd-Panel-footerWrap"
|
||||
>
|
||||
<div
|
||||
class="cxd-Panel-btnToolbar cxd-Panel-footer"
|
||||
>
|
||||
<button
|
||||
class="cxd-Button cxd-Button--primary cxd-Button--size-default"
|
||||
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>
|
||||
`;
|
||||
338
packages/amis/__tests__/renderers/Form/inputSubForm.test.tsx
Normal file
338
packages/amis/__tests__/renderers/Form/inputSubForm.test.tsx
Normal file
@ -0,0 +1,338 @@
|
||||
/**
|
||||
* 组件名称：InputSubForm 子表单
|
||||
* 单测内容：
|
||||
* 1. 基础点击勾选
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import {
|
||||
render,
|
||||
cleanup,
|
||||
screen,
|
||||
fireEvent,
|
||||
waitFor
|
||||
} from '@testing-library/react';
|
||||
import '../../../src';
|
||||
import {render as amisRender} from '../../../src';
|
||||
import {makeEnv, wait} from '../../helper';
|
||||
import {clearStoresCache} from '../../../src';
|
||||
|
||||
afterEach(() => {
|
||||
cleanup();
|
||||
clearStoresCache();
|
||||
});
|
||||
|
||||
test('Renderer:InputSubForm base', async () => {
|
||||
const onChange = jest.fn();
|
||||
const {getByText, container, baseElement} = render(
|
||||
amisRender({
|
||||
type: 'form',
|
||||
body: [
|
||||
{
|
||||
type: 'input-sub-form',
|
||||
name: 'form',
|
||||
label: '子Form',
|
||||
btnLabel: '设置子表单',
|
||||
onChange,
|
||||
form: {
|
||||
title: '配置子表单',
|
||||
body: [
|
||||
{
|
||||
name: 'a',
|
||||
label: 'A',
|
||||
type: 'input-text'
|
||||
},
|
||||
{
|
||||
name: 'b',
|
||||
label: 'B',
|
||||
type: 'input-text'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
);
|
||||
|
||||
fireEvent.click(getByText('设置子表单'));
|
||||
|
||||
expect(baseElement.querySelector('.cxd-Modal .cxd-Form')).toBeInTheDocument();
|
||||
|
||||
const inputs = baseElement.querySelectorAll(
|
||||
'.cxd-Modal .cxd-Form .cxd-TextControl-input input'
|
||||
);
|
||||
expect(inputs!.length).toBe(2);
|
||||
expect(baseElement).toMatchSnapshot();
|
||||
|
||||
fireEvent.change(inputs[0], {
|
||||
target: {value: 'text-one'}
|
||||
});
|
||||
await wait(200);
|
||||
fireEvent.change(inputs[1], {
|
||||
target: {value: 'text-two'}
|
||||
});
|
||||
|
||||
await wait(200);
|
||||
fireEvent.click(getByText('确认'));
|
||||
await wait(500);
|
||||
|
||||
expect(onChange).toBeCalled();
|
||||
expect(onChange.mock.calls[0][0]).toEqual({
|
||||
a: 'text-one',
|
||||
b: 'text-two'
|
||||
});
|
||||
});
|
||||
|
||||
test('Renderer:InputSubForm with multiple & maxLength & btnLabel', async () => {
|
||||
const onChange = jest.fn();
|
||||
const {getByText, container, baseElement} = render(
|
||||
amisRender({
|
||||
type: 'form',
|
||||
body: [
|
||||
{
|
||||
type: 'input-sub-form',
|
||||
name: 'form',
|
||||
label: '子Form',
|
||||
btnLabel: '设置${a}',
|
||||
onChange,
|
||||
multiple: true,
|
||||
maxLength: 2,
|
||||
form: {
|
||||
title: '配置子表单',
|
||||
body: [
|
||||
{
|
||||
name: 'a',
|
||||
label: 'A',
|
||||
type: 'input-text'
|
||||
},
|
||||
{
|
||||
name: 'b',
|
||||
label: 'B',
|
||||
type: 'input-text'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
);
|
||||
|
||||
async function addItem(val1, val2) {
|
||||
fireEvent.click(getByText('新增一项'));
|
||||
|
||||
const inputs = baseElement.querySelectorAll(
|
||||
'.cxd-Modal .cxd-Form .cxd-TextControl-input input'
|
||||
);
|
||||
fireEvent.change(inputs[0], {
|
||||
target: {value: val1}
|
||||
});
|
||||
await wait(200);
|
||||
fireEvent.change(inputs[1], {
|
||||
target: {value: val2}
|
||||
});
|
||||
|
||||
await wait(200);
|
||||
fireEvent.click(getByText('确认'));
|
||||
await wait(500);
|
||||
}
|
||||
|
||||
await addItem('val-1-1', 'val-1-2');
|
||||
|
||||
expect(onChange).toBeCalled();
|
||||
expect(onChange.mock.calls[0][0]).toEqual([
|
||||
{
|
||||
a: 'val-1-1',
|
||||
b: 'val-1-2'
|
||||
}
|
||||
]);
|
||||
|
||||
await addItem('val-2-1', 'val-2-2');
|
||||
expect(onChange).toBeCalledTimes(2);
|
||||
expect(onChange.mock.calls[1][0]).toEqual([
|
||||
{
|
||||
a: 'val-1-1',
|
||||
b: 'val-1-2'
|
||||
},
|
||||
{
|
||||
a: 'val-2-1',
|
||||
b: 'val-2-2'
|
||||
}
|
||||
]);
|
||||
|
||||
expect(
|
||||
container.querySelector('.cxd-SubForm-toolbar .cxd-SubForm-addBtn')!
|
||||
).toHaveAttribute('disabled');
|
||||
|
||||
const values = container.querySelectorAll(
|
||||
'.cxd-SubForm-values .cxd-SubForm-value'
|
||||
);
|
||||
|
||||
expect(values!.length).toBe(2);
|
||||
expect(values[1]).toHaveTextContent('设置val-2-1');
|
||||
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('Renderer:InputSubForm with draggable & addable & removable', async () => {
|
||||
const onChange = jest.fn();
|
||||
const {getByText, container, baseElement} = render(
|
||||
amisRender({
|
||||
type: 'form',
|
||||
body: [
|
||||
{
|
||||
type: 'input-sub-form',
|
||||
name: 'form',
|
||||
label: '子Form',
|
||||
btnLabel: '设置${a}',
|
||||
onChange,
|
||||
multiple: true,
|
||||
draggable: true,
|
||||
addable: false,
|
||||
removable: true,
|
||||
form: {
|
||||
title: '配置子表单',
|
||||
body: [
|
||||
{
|
||||
name: 'a',
|
||||
label: 'A',
|
||||
type: 'input-text'
|
||||
},
|
||||
{
|
||||
name: 'b',
|
||||
label: 'B',
|
||||
type: 'input-text'
|
||||
}
|
||||
]
|
||||
},
|
||||
value: [
|
||||
{
|
||||
a: 'val-a'
|
||||
},
|
||||
{
|
||||
a: 'val-b'
|
||||
},
|
||||
{
|
||||
a: 'val-c'
|
||||
},
|
||||
{
|
||||
a: 'val-d'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
})
|
||||
);
|
||||
|
||||
let values = container.querySelectorAll(
|
||||
'.cxd-SubForm-values .cxd-SubForm-value'
|
||||
);
|
||||
|
||||
expect(values!.length).toBe(4);
|
||||
expect(values[1]).toHaveTextContent('设置val-b');
|
||||
|
||||
expect(
|
||||
values[0].querySelector('.cxd-SubForm-valueDragBar')
|
||||
).toBeInTheDocument();
|
||||
|
||||
fireEvent.click(values[0].querySelector('.cxd-SubForm-valueDel')!);
|
||||
|
||||
values = container.querySelectorAll('.cxd-SubForm-values .cxd-SubForm-value');
|
||||
|
||||
expect(values!.length).toBe(3);
|
||||
expect(values[1]).toHaveTextContent('设置val-c');
|
||||
|
||||
fireEvent.click(values[0].querySelector('.cxd-SubForm-valueEdit')!);
|
||||
|
||||
await wait(200);
|
||||
|
||||
expect(baseElement.querySelector('.cxd-Modal .cxd-Form')).toBeInTheDocument();
|
||||
|
||||
const firstInput = baseElement.querySelector(
|
||||
'.cxd-Modal .cxd-Form .cxd-TextControl-input input'
|
||||
)!;
|
||||
|
||||
expect((firstInput as HTMLInputElement)!.value).toBe('val-b');
|
||||
|
||||
fireEvent.change(firstInput, {
|
||||
target: {value: 'val-b-change'}
|
||||
});
|
||||
|
||||
await wait(200);
|
||||
fireEvent.click(getByText('确认'));
|
||||
await wait(500);
|
||||
|
||||
expect(onChange).toBeCalledTimes(2);
|
||||
expect(onChange.mock.calls[1][0]).toEqual([
|
||||
{
|
||||
a: 'val-b-change'
|
||||
},
|
||||
{
|
||||
a: 'val-c'
|
||||
},
|
||||
{
|
||||
a: 'val-d'
|
||||
}
|
||||
]);
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('Renderer:InputSubForm with addButtonClassName & itemsClassName & itemClassName & addButtonText & labelField', async () => {
|
||||
const {getByText, container, baseElement} = render(
|
||||
amisRender({
|
||||
type: 'form',
|
||||
body: [
|
||||
{
|
||||
type: 'input-sub-form',
|
||||
name: 'form2',
|
||||
label: '多选',
|
||||
multiple: true,
|
||||
labelField: 'title',
|
||||
itemsClassName: 'items-wrapper',
|
||||
itemClassName: 'item-classname',
|
||||
addButtonText: '自定义的新增',
|
||||
addButtonClassName: 'thisis-add-btn',
|
||||
value: [
|
||||
{
|
||||
title: 'val-a'
|
||||
},
|
||||
{
|
||||
title: 'val-b'
|
||||
}
|
||||
],
|
||||
form: {
|
||||
title: '配置子表单',
|
||||
body: [
|
||||
{
|
||||
name: 'title',
|
||||
label: '标题',
|
||||
required: true,
|
||||
type: 'input-text'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
);
|
||||
|
||||
await wait(500);
|
||||
|
||||
expect(container).toMatchSnapshot();
|
||||
expect(container.querySelector('.cxd-SubForm-values')).toHaveClass(
|
||||
'items-wrapper'
|
||||
);
|
||||
expect(
|
||||
container.querySelector('.cxd-SubForm-values .cxd-SubForm-value')
|
||||
).toHaveClass('item-classname');
|
||||
|
||||
// labelField 这里不知为何不生效
|
||||
// expect(
|
||||
// container.querySelector('.cxd-SubForm-values .cxd-SubForm-value')
|
||||
// ).toHaveTextContent('val-a');
|
||||
expect(container.querySelector('.cxd-SubForm-addBtn')).toHaveClass(
|
||||
'thisis-add-btn'
|
||||
);
|
||||
expect(container.querySelector('.cxd-SubForm-addBtn')).toHaveTextContent(
|
||||
'自定义的新增'
|
||||
);
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user