mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-02 11:58:10 +08:00
chore: input-number、input-range、checkbox 单测用例补充 & range style 百分比最多保留两位 (#5076)
* checkbox 单测补充 * input-number 单测补充 * input-range 单测补充 & range style 百分比最多保留两位 Co-authored-by: tooeast <liuzedong02@baidu.com>
This commit is contained in:
sansiro
GitHub
parent
026c141b96
commit
1349ef4aa0
@ -78,7 +78,8 @@ const MARKS_REG = /^[0-9]+(\.?[0-9]+)?%$/;
|
||||
* @returns position.left
|
||||
*/
|
||||
const valueToOffsetLeft = (value: any, min: number, max: number) =>
|
||||
((value - min) * 100) / (max - min) + '%';
|
||||
// 最多保留两位小数，且尽量取整
|
||||
Math.floor(((value - min) * 10000) / (max - min)) / 100 + '%';
|
||||
|
||||
/**
|
||||
* 滑块handle
|
||||
|
||||
@ -109,6 +109,274 @@ exports[`Renderer:checkbox 1`] = `
|
||||
</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:checkbox with checked 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>
|
||||
The form
|
||||
</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>
|
||||
Checkbox
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
<div
|
||||
class="cxd-CheckboxControl cxd-Form-control"
|
||||
>
|
||||
<label
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox cxd-Checkbox--full"
|
||||
>
|
||||
<input
|
||||
checked=""
|
||||
type="checkbox"
|
||||
/>
|
||||
<i />
|
||||
<span
|
||||
class=""
|
||||
>
|
||||
<span
|
||||
class="cxd-TplField"
|
||||
>
|
||||
<span>
|
||||
选项说明
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div
|
||||
class="resize-sensor"
|
||||
style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
|
||||
>
|
||||
|
||||
|
||||
<div
|
||||
class="resize-sensor-expand"
|
||||
style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
|
||||
>
|
||||
|
||||
|
||||
<div
|
||||
style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
|
||||
/>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div
|
||||
class="resize-sensor-shrink"
|
||||
style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
|
||||
>
|
||||
|
||||
|
||||
<div
|
||||
style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
|
||||
/>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div
|
||||
class="resize-sensor-appear"
|
||||
style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Renderer:checkbox with optionType 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>
|
||||
The form
|
||||
</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>
|
||||
Checkbox
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
<div
|
||||
class="cxd-CheckboxControl cxd-Form-control"
|
||||
>
|
||||
<label
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox cxd-Checkbox--full cxd-Checkbox--button cxd-Checkbox--button--checked"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
/>
|
||||
<i />
|
||||
<span
|
||||
class=""
|
||||
>
|
||||
<span
|
||||
class="cxd-TplField"
|
||||
>
|
||||
<span>
|
||||
去吃饭
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<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-Form-static"
|
||||
>
|
||||
<div
|
||||
class="cxd-Form-control"
|
||||
>
|
||||
<span
|
||||
class="cxd-PlainField"
|
||||
>
|
||||
吃了
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div
|
||||
class="resize-sensor"
|
||||
style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
|
||||
>
|
||||
|
||||
|
||||
<div
|
||||
class="resize-sensor-expand"
|
||||
style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
|
||||
>
|
||||
|
||||
|
||||
<div
|
||||
style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
|
||||
/>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div
|
||||
class="resize-sensor-shrink"
|
||||
style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
|
||||
>
|
||||
|
||||
|
||||
<div
|
||||
style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
|
||||
/>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div
|
||||
class="resize-sensor-appear"
|
||||
style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
|
||||
|
||||
@ -134,6 +134,863 @@ exports[`Renderer:number 1`] = `
|
||||
</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:number with borderMode 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>
|
||||
number
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
<div
|
||||
class="cxd-NumberControl cxd-Form-control"
|
||||
>
|
||||
<div
|
||||
class="cxd-Number cxd-Number--borderNone"
|
||||
>
|
||||
<div
|
||||
class="cxd-Number-handler-wrap"
|
||||
>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
aria-label="Increase Value"
|
||||
class="cxd-Number-handler cxd-Number-handler-up"
|
||||
role="button"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
class="cxd-Number-handler-up-inner"
|
||||
unselectable="on"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
aria-label="Decrease Value"
|
||||
class="cxd-Number-handler cxd-Number-handler-down"
|
||||
role="button"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
class="cxd-Number-handler-down-inner"
|
||||
unselectable="on"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="cxd-Number-input-wrap"
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
class="cxd-Number-input"
|
||||
role="spinbutton"
|
||||
step="1"
|
||||
value=""
|
||||
/>
|
||||
</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"
|
||||
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:number with borderMode 2`] = `
|
||||
<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>
|
||||
number
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
<div
|
||||
class="cxd-NumberControl cxd-Form-control"
|
||||
>
|
||||
<div
|
||||
class="cxd-Number cxd-Number--borderHalf"
|
||||
>
|
||||
<div
|
||||
class="cxd-Number-handler-wrap"
|
||||
>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
aria-label="Increase Value"
|
||||
class="cxd-Number-handler cxd-Number-handler-up"
|
||||
role="button"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
class="cxd-Number-handler-up-inner"
|
||||
unselectable="on"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
aria-label="Decrease Value"
|
||||
class="cxd-Number-handler cxd-Number-handler-down"
|
||||
role="button"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
class="cxd-Number-handler-down-inner"
|
||||
unselectable="on"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="cxd-Number-input-wrap"
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
class="cxd-Number-input"
|
||||
role="spinbutton"
|
||||
step="1"
|
||||
value=""
|
||||
/>
|
||||
</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"
|
||||
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:number with prefix & suffix & kilobitSeparator 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>
|
||||
number
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
<div
|
||||
class="cxd-NumberControl cxd-Form-control"
|
||||
>
|
||||
<div
|
||||
class="cxd-Number cxd-Number--borderFull"
|
||||
>
|
||||
<div
|
||||
class="cxd-Number-handler-wrap"
|
||||
>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
aria-label="Increase Value"
|
||||
class="cxd-Number-handler cxd-Number-handler-up"
|
||||
role="button"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
class="cxd-Number-handler-up-inner"
|
||||
unselectable="on"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
aria-label="Decrease Value"
|
||||
class="cxd-Number-handler cxd-Number-handler-down"
|
||||
role="button"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
class="cxd-Number-handler-down-inner"
|
||||
unselectable="on"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="cxd-Number-input-wrap"
|
||||
>
|
||||
<input
|
||||
aria-valuenow="123456"
|
||||
autocomplete="off"
|
||||
class="cxd-Number-input"
|
||||
role="spinbutton"
|
||||
step="1"
|
||||
value="$123,456%"
|
||||
/>
|
||||
</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"
|
||||
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:number with step & precision & displayMode & keyboard 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>
|
||||
number
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
<div
|
||||
class="cxd-NumberControl cxd-Form-control"
|
||||
>
|
||||
<div
|
||||
class="cxd-Number--enhance cxd-Number--enhance-borderFull"
|
||||
>
|
||||
<div
|
||||
class="cxd-Number--enhance-left-icon"
|
||||
>
|
||||
<icon-mock
|
||||
classname="icon icon-minus"
|
||||
icon="minus"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="cxd-Number cxd-Number--enhance-input cxd-Number--borderFull"
|
||||
>
|
||||
<div
|
||||
class="cxd-Number-handler-wrap"
|
||||
>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
aria-label="Increase Value"
|
||||
class="cxd-Number-handler cxd-Number-handler-up"
|
||||
role="button"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
class="cxd-Number-handler-up-inner"
|
||||
unselectable="on"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
aria-label="Decrease Value"
|
||||
class="cxd-Number-handler cxd-Number-handler-down"
|
||||
role="button"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
class="cxd-Number-handler-down-inner"
|
||||
unselectable="on"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="cxd-Number-input-wrap"
|
||||
>
|
||||
<input
|
||||
aria-valuenow="14.111"
|
||||
autocomplete="off"
|
||||
class="cxd-Number-input"
|
||||
role="spinbutton"
|
||||
step="3"
|
||||
value="14.111"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="cxd-Number--enhance-right-icon"
|
||||
>
|
||||
<icon-mock
|
||||
classname="icon icon-plus"
|
||||
icon="plus"
|
||||
/>
|
||||
</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"
|
||||
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:number with unitOptions 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>
|
||||
number
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
<div
|
||||
class="cxd-NumberControl cxd-NumberControl--withUnit cxd-Form-control"
|
||||
>
|
||||
<div
|
||||
class="cxd-Number cxd-Number--borderFull"
|
||||
>
|
||||
<div
|
||||
class="cxd-Number-handler-wrap"
|
||||
>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
aria-label="Increase Value"
|
||||
class="cxd-Number-handler cxd-Number-handler-up"
|
||||
role="button"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
class="cxd-Number-handler-up-inner"
|
||||
unselectable="on"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
aria-label="Decrease Value"
|
||||
class="cxd-Number-handler cxd-Number-handler-down"
|
||||
role="button"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
class="cxd-Number-handler-down-inner"
|
||||
unselectable="on"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="cxd-Number-input-wrap"
|
||||
>
|
||||
<input
|
||||
aria-valuenow="99"
|
||||
autocomplete="off"
|
||||
class="cxd-Number-input"
|
||||
role="spinbutton"
|
||||
step="1"
|
||||
value="99"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-labelledby="downshift-0-label"
|
||||
class="cxd-Select"
|
||||
role="combobox"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="cxd-Select-valueWrap"
|
||||
>
|
||||
<div
|
||||
class="cxd-Select-value"
|
||||
>
|
||||
em
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
class="cxd-Select-arrow"
|
||||
>
|
||||
<icon-mock
|
||||
classname="icon icon-right-arrow-bold"
|
||||
icon="right-arrow-bold"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="cxd-Form-item cxd-Form-item--normal"
|
||||
data-role="form-item"
|
||||
>
|
||||
<div
|
||||
class="cxd-Form-static"
|
||||
>
|
||||
<div
|
||||
class="cxd-Form-control"
|
||||
>
|
||||
<span
|
||||
class="cxd-PlainField"
|
||||
>
|
||||
99em
|
||||
</span>
|
||||
</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"
|
||||
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;"
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,8 +1,8 @@
|
||||
import React = require('react');
|
||||
import {render, cleanup, fireEvent} from '@testing-library/react';
|
||||
import {render, cleanup, fireEvent, waitFor} from '@testing-library/react';
|
||||
import '../../../src';
|
||||
import {render as amisRender} from '../../../src';
|
||||
import {makeEnv} from '../../helper';
|
||||
import {makeEnv, wait} from '../../helper';
|
||||
import {clearStoresCache} from '../../../src';
|
||||
|
||||
afterEach(() => {
|
||||
@ -35,3 +35,89 @@ test('Renderer:checkbox', async () => {
|
||||
);
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('Renderer:checkbox with optionType', async () => {
|
||||
const {container, getByText} = render(
|
||||
amisRender(
|
||||
{
|
||||
type: 'form',
|
||||
title: 'The form',
|
||||
controls: [
|
||||
{
|
||||
name: 'checkbox',
|
||||
type: 'checkbox',
|
||||
label: 'Checkbox',
|
||||
option: '去吃饭',
|
||||
trueValue: '吃了',
|
||||
falseValue: '没吃呢',
|
||||
optionType: 'button',
|
||||
value: '没吃呢'
|
||||
},
|
||||
{
|
||||
type: 'static',
|
||||
label: '您吃了吗',
|
||||
name: 'checkbox'
|
||||
}
|
||||
],
|
||||
submitText: null,
|
||||
actions: []
|
||||
},
|
||||
{},
|
||||
makeEnv()
|
||||
)
|
||||
);
|
||||
|
||||
await wait(300);
|
||||
|
||||
expect(
|
||||
container.querySelector('.cxd-Checkbox.cxd-Checkbox--button') as Element
|
||||
).toBeInTheDocument();
|
||||
|
||||
|
||||
fireEvent.click(getByText(/去吃饭/));
|
||||
|
||||
await waitFor(() => {
|
||||
expect(
|
||||
(container.querySelector('.cxd-PlainField') as Element).innerHTML
|
||||
).toBe('吃了');
|
||||
|
||||
expect(
|
||||
container.querySelector('.cxd-Checkbox.cxd-Checkbox--button.cxd-Checkbox--button--checked') as Element
|
||||
).toBeInTheDocument();
|
||||
});
|
||||
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
|
||||
test('Renderer:checkbox with checked', async () => {
|
||||
const {container, getByText} = render(
|
||||
amisRender(
|
||||
{
|
||||
type: 'form',
|
||||
title: 'The form',
|
||||
controls: [
|
||||
{
|
||||
name: 'checkbox',
|
||||
type: 'checkbox',
|
||||
label: 'Checkbox',
|
||||
option: '选项说明',
|
||||
checked: true
|
||||
}
|
||||
],
|
||||
submitText: null,
|
||||
actions: []
|
||||
},
|
||||
{},
|
||||
makeEnv()
|
||||
)
|
||||
);
|
||||
|
||||
await wait(300);
|
||||
|
||||
expect(
|
||||
container.querySelector('.cxd-Checkbox input[checked]') as Element
|
||||
).toBeInTheDocument();
|
||||
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
@ -1,9 +1,66 @@
|
||||
import React = require('react');
|
||||
import {render, fireEvent} from '@testing-library/react';
|
||||
import {render, fireEvent, waitFor} from '@testing-library/react';
|
||||
import '../../../src';
|
||||
import {render as amisRender} from '../../../src';
|
||||
import {makeEnv, wait} from '../../helper';
|
||||
|
||||
const setup = async (
|
||||
inputOptions: any = {},
|
||||
formOptions: any = {},
|
||||
formItems: any[] = [{}]
|
||||
) => {
|
||||
const utils = render(
|
||||
amisRender(
|
||||
{
|
||||
type: 'form',
|
||||
api: '/api/mock2/form/saveForm',
|
||||
body: [
|
||||
{
|
||||
name: 'number',
|
||||
label: 'number',
|
||||
type: 'input-number',
|
||||
changeImmediately: true,
|
||||
...inputOptions
|
||||
},
|
||||
...formItems
|
||||
],
|
||||
...formOptions
|
||||
},
|
||||
{},
|
||||
makeEnv()
|
||||
)
|
||||
);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(
|
||||
utils.container.querySelector('.cxd-Number-input-wrap input')
|
||||
).toBeInTheDocument();
|
||||
|
||||
expect(
|
||||
utils.container.querySelector('button[type="submit"]')
|
||||
).toBeInTheDocument();
|
||||
});
|
||||
|
||||
const input = utils.container.querySelector(
|
||||
'.cxd-Number-input-wrap input'
|
||||
) as HTMLInputElement;
|
||||
|
||||
const wrap = utils.container.querySelector(
|
||||
'.cxd-Number-input-wrap'
|
||||
) as HTMLInputElement;
|
||||
|
||||
const submitBtn = utils.container.querySelector(
|
||||
'button[type="submit"]'
|
||||
) as HTMLElement;
|
||||
|
||||
return {
|
||||
input,
|
||||
submitBtn,
|
||||
wrap,
|
||||
...utils
|
||||
};
|
||||
};
|
||||
|
||||
test('Renderer:number', async () => {
|
||||
const {container} = render(
|
||||
amisRender(
|
||||
@ -38,3 +95,127 @@ test('Renderer:number', async () => {
|
||||
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('Renderer:number with min & max', async () => {
|
||||
const {input, wrap, container} = await setup({
|
||||
min: 5,
|
||||
max: 10
|
||||
});
|
||||
|
||||
fireEvent.click(wrap);
|
||||
await wait(300);
|
||||
fireEvent.change(input, {target: {value: 6}});
|
||||
fireEvent.blur(input);
|
||||
await wait(300);
|
||||
expect(input.value).toEqual('6');
|
||||
|
||||
fireEvent.click(wrap);
|
||||
await wait(300);
|
||||
fireEvent.change(input, {target: {value: 2}});
|
||||
fireEvent.blur(input);
|
||||
await wait(300);
|
||||
expect(input.value).toEqual('5');
|
||||
|
||||
fireEvent.click(wrap);
|
||||
await wait(300);
|
||||
fireEvent.change(input, {target: {value: 12}});
|
||||
fireEvent.blur(input);
|
||||
await wait(300);
|
||||
expect(input.value).toEqual('10');
|
||||
});
|
||||
|
||||
test('Renderer:number with prefix & suffix & kilobitSeparator', async () => {
|
||||
const {input, container} = await setup({
|
||||
prefix: '$',
|
||||
suffix: '%',
|
||||
kilobitSeparator: true,
|
||||
value: '123456'
|
||||
});
|
||||
|
||||
expect(input.value).toEqual('$123,456%');
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('Renderer:number with unitOptions', async () => {
|
||||
const {input, wrap, container, getByText} = await setup(
|
||||
{
|
||||
unitOptions: ['px', '%', 'em']
|
||||
},
|
||||
{},
|
||||
[
|
||||
{
|
||||
type: 'static',
|
||||
name: 'number'
|
||||
}
|
||||
]
|
||||
);
|
||||
|
||||
const staticDom = container.querySelector('.cxd-PlainField') as Element;
|
||||
|
||||
expect(staticDom.innerHTML).toBe('<span class="text-muted">-</span>');
|
||||
|
||||
fireEvent.click(wrap);
|
||||
await wait(300);
|
||||
fireEvent.change(input, {target: {value: 99}});
|
||||
fireEvent.blur(input);
|
||||
await wait(300);
|
||||
expect(staticDom.innerHTML).toBe('99px');
|
||||
|
||||
fireEvent.click(container.querySelector('.cxd-Select') as Element);
|
||||
fireEvent.click(getByText(/em/));
|
||||
await wait(300);
|
||||
expect(staticDom.innerHTML).toBe('99em');
|
||||
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('Renderer:number with step & precision & displayMode & keyboard', async () => {
|
||||
const {input, wrap, container, getByText} = await setup({
|
||||
step: 3,
|
||||
precision: 3,
|
||||
displayMode: 'enhance'
|
||||
});
|
||||
|
||||
const rightBtn = container.querySelector(
|
||||
'.cxd-Number--enhance-right-icon'
|
||||
) as Element;
|
||||
|
||||
fireEvent.click(wrap);
|
||||
await wait(300);
|
||||
fireEvent.change(input, {target: {value: 11.111111}});
|
||||
fireEvent.blur(input);
|
||||
await wait(300);
|
||||
expect(input.value).toBe('11.111');
|
||||
|
||||
fireEvent.click(rightBtn);
|
||||
await wait(300);
|
||||
expect(input.value).toBe('14.111');
|
||||
|
||||
// rc-input-number 中 keyDown 使用 which 判断 keyCode，当前环境此字段为空，无法响应
|
||||
// fireEvent.focus(input);
|
||||
// await wait(300);
|
||||
// fireEvent.keyDown(input, {key: 'ArrowUp', code: 38});
|
||||
// await wait(300);
|
||||
// expect(input.value).toBe('17.111');
|
||||
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('Renderer:number with borderMode', async () => {
|
||||
const {container: noBorder} = await setup({
|
||||
borderMode: 'none'
|
||||
});
|
||||
const {container: halfBorder} = await setup({
|
||||
borderMode: 'half'
|
||||
});
|
||||
|
||||
expect(
|
||||
noBorder.querySelector('.cxd-Number.cxd-Number--borderNone') as Element
|
||||
).toBeInTheDocument();
|
||||
expect(
|
||||
halfBorder.querySelector('.cxd-Number.cxd-Number--borderHalf') as Element
|
||||
).toBeInTheDocument();
|
||||
|
||||
expect(noBorder).toMatchSnapshot();
|
||||
expect(halfBorder).toMatchSnapshot();
|
||||
});
|
||||
|
||||
@ -4,7 +4,7 @@ import '../../../src';
|
||||
import {render as amisRender} from '../../../src';
|
||||
import {makeEnv, wait} from '../../helper';
|
||||
|
||||
test('Renderer:range', async () => {
|
||||
test('Renderer:range with showInput', async () => {
|
||||
const {container} = render(
|
||||
amisRender(
|
||||
{
|
||||
@ -34,6 +34,10 @@ test('Renderer:range', async () => {
|
||||
});
|
||||
fireEvent.mouseUp(slider);
|
||||
|
||||
expect(
|
||||
container.querySelector('.cxd-InputRange-input') as Element
|
||||
).toBeInTheDocument();
|
||||
|
||||
const input = container.querySelector('.cxd-InputRange-input input');
|
||||
fireEvent.change(input!, {
|
||||
target: {
|
||||
@ -42,10 +46,16 @@ test('Renderer:range', async () => {
|
||||
});
|
||||
await wait(200);
|
||||
|
||||
expect(
|
||||
(
|
||||
container.querySelector('.cxd-InputRange-track-active') as Element
|
||||
).getAttribute('style')
|
||||
).toContain('width: 7%');
|
||||
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('Renderer:range:multiple', async () => {
|
||||
test('Renderer:range with multiple & clearable & delimiter', async () => {
|
||||
const {container} = render(
|
||||
amisRender(
|
||||
{
|
||||
@ -56,8 +66,14 @@ test('Renderer:range:multiple', async () => {
|
||||
type: 'input-range',
|
||||
name: 'range',
|
||||
multiple: true,
|
||||
value: [10, 20],
|
||||
showInput: true
|
||||
delimiter: '--',
|
||||
value: '10--20',
|
||||
showInput: true,
|
||||
clearable: false
|
||||
},
|
||||
{
|
||||
type: 'static',
|
||||
name: 'range'
|
||||
}
|
||||
],
|
||||
title: 'The form',
|
||||
@ -68,6 +84,10 @@ test('Renderer:range:multiple', async () => {
|
||||
)
|
||||
);
|
||||
|
||||
expect(
|
||||
container.querySelector('.cxd-InputRange-clear')
|
||||
).not.toBeInTheDocument();
|
||||
|
||||
const inputs = container.querySelectorAll('.cxd-InputRange-input input');
|
||||
fireEvent.change(inputs[0], {
|
||||
target: {
|
||||
@ -81,15 +101,26 @@ test('Renderer:range:multiple', async () => {
|
||||
}
|
||||
});
|
||||
fireEvent.blur(inputs[1]);
|
||||
const close = container.querySelector('a.cxd-InputRange-clear');
|
||||
fireEvent.click(close!);
|
||||
|
||||
await wait(200);
|
||||
expect(
|
||||
(
|
||||
container.querySelector('.cxd-InputRange-track-active') as Element
|
||||
).getAttribute('style')
|
||||
).toBe('width: 6%; left: 7%;');
|
||||
|
||||
const icons = container.querySelectorAll('.cxd-InputRange-handle');
|
||||
expect(icons[0].getAttribute('style')).toContain('left: 7%;');
|
||||
expect(icons[1].getAttribute('style')).toContain('left: 13%;');
|
||||
|
||||
expect(
|
||||
(container.querySelector('.cxd-PlainField') as Element).innerHTML
|
||||
).toBe('7--13');
|
||||
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('Renderer:range:showSteps', async () => {
|
||||
test('Renderer:range with showSteps', async () => {
|
||||
const {container} = render(
|
||||
amisRender(
|
||||
{
|
||||
@ -113,10 +144,16 @@ test('Renderer:range:showSteps', async () => {
|
||||
);
|
||||
|
||||
await wait(200);
|
||||
|
||||
const dots = container.querySelectorAll('.cxd-InputRange-track-dot');
|
||||
|
||||
expect(dots.length).toBe(9);
|
||||
expect(dots[8].getAttribute('style')).toContain('left: 90%;');
|
||||
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('Renderer:range:marks', async () => {
|
||||
test('Renderer:range with marks', async () => {
|
||||
const {container} = render(
|
||||
amisRender(
|
||||
{
|
||||
@ -133,7 +170,7 @@ test('Renderer:range:marks', async () => {
|
||||
'40%': '40Mbps',
|
||||
'60%': '60Mbps',
|
||||
'80%': '80Mbps',
|
||||
'100': '100'
|
||||
'100%': '100'
|
||||
}
|
||||
}
|
||||
],
|
||||
@ -146,10 +183,17 @@ test('Renderer:range:marks', async () => {
|
||||
);
|
||||
|
||||
await wait(200);
|
||||
|
||||
const marks = container.querySelectorAll('.cxd-InputRange-marks > div');
|
||||
|
||||
expect(marks.length).toBe(6);
|
||||
expect(marks[3].innerHTML).toBe('<span>60Mbps</span>');
|
||||
expect(marks[3].getAttribute('style')).toContain('left: 60%;');
|
||||
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('Renderer:range:tooltipVisible', async () => {
|
||||
test('Renderer:range with tooltipVisible & tooltipPlacement', async () => {
|
||||
const {container} = render(
|
||||
amisRender(
|
||||
{
|
||||
@ -160,7 +204,8 @@ test('Renderer:range:tooltipVisible', async () => {
|
||||
type: 'input-range',
|
||||
name: 'range',
|
||||
tooltipVisible: true,
|
||||
tooltipPlacement: 'right'
|
||||
tooltipPlacement: 'right',
|
||||
value: 41
|
||||
}
|
||||
],
|
||||
title: 'The form',
|
||||
@ -172,5 +217,76 @@ test('Renderer:range:tooltipVisible', async () => {
|
||||
);
|
||||
|
||||
await wait(200);
|
||||
|
||||
expect(
|
||||
container.querySelector(
|
||||
'.cxd-InputRange-label.pos-right.cxd-InputRange-label-visible'
|
||||
)
|
||||
).toBeInTheDocument();
|
||||
|
||||
const labelSpan = container.querySelector('.cxd-InputRange-label span');
|
||||
expect(labelSpan).toBeI;
|
||||
|
||||
expect(labelSpan!.innerHTML).toBe('41');
|
||||
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('Renderer:range with min & max & step & joinValues', async () => {
|
||||
const {container} = render(
|
||||
amisRender(
|
||||
{
|
||||
type: 'form',
|
||||
debug: true,
|
||||
api: '/api/xxx',
|
||||
controls: [
|
||||
{
|
||||
type: 'input-range',
|
||||
name: 'range',
|
||||
min: 0,
|
||||
max: 1,
|
||||
step: 0.1,
|
||||
multiple: true,
|
||||
showInput: true,
|
||||
joinValues: false
|
||||
}
|
||||
],
|
||||
title: 'The form',
|
||||
actions: []
|
||||
},
|
||||
{},
|
||||
makeEnv({})
|
||||
)
|
||||
);
|
||||
|
||||
const inputs = container.querySelectorAll('.cxd-InputRange-input input');
|
||||
fireEvent.change(inputs[0], {
|
||||
target: {
|
||||
value: '0.2'
|
||||
}
|
||||
});
|
||||
fireEvent.blur(inputs[0]);
|
||||
fireEvent.change(inputs[1], {
|
||||
target: {
|
||||
value: '0.8'
|
||||
}
|
||||
});
|
||||
fireEvent.blur(inputs[1]);
|
||||
|
||||
await wait(200);
|
||||
expect(
|
||||
(
|
||||
container.querySelector('.cxd-InputRange-track-active') as Element
|
||||
).getAttribute('style')
|
||||
).toContain('width: 60%; left: 20%;');
|
||||
|
||||
expect((container.querySelector('.cxd-Form--debug') as Element).innerHTML)
|
||||
.toBe(`{
|
||||
"range": {
|
||||
"min": 0.2,
|
||||
"max": 0.8
|
||||
}
|
||||
}`);
|
||||
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user