mirror of
https://gitee.com/baidu/amis.git
synced 2024-11-29 18:48:45 +08:00
chore: input-city chained-select 单测补充 (#5777)
* input-city * chained-select * add
This commit is contained in:
sansiro
GitHub
parent
08536ab30f
commit
59339030da
@ -243,6 +243,60 @@ exports[`Renderer:chained-select 1`] = `
|
||||
class="cxd-Select cxd-Select--inline"
|
||||
role="combobox"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="cxd-Select-valueWrap"
|
||||
>
|
||||
<div
|
||||
class="cxd-Select-value"
|
||||
>
|
||||
D 2
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
class="cxd-Select-arrow"
|
||||
>
|
||||
<icon-mock
|
||||
classname="icon icon-right-arrow-bold"
|
||||
icon="right-arrow-bold"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-labelledby="downshift-4-label"
|
||||
class="cxd-Select cxd-Select--inline"
|
||||
role="combobox"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="cxd-Select-valueWrap"
|
||||
>
|
||||
<div
|
||||
class="cxd-Select-value"
|
||||
>
|
||||
C 3
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
class="cxd-Select-arrow"
|
||||
>
|
||||
<icon-mock
|
||||
classname="icon icon-right-arrow-bold"
|
||||
icon="right-arrow-bold"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="true"
|
||||
aria-haspopup="listbox"
|
||||
aria-labelledby="downshift-5-label"
|
||||
aria-owns="downshift-5-menu"
|
||||
class="cxd-Select cxd-Select--inline is-opened has-popover"
|
||||
role="combobox"
|
||||
style="position: relative;"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="cxd-Select-valueWrap"
|
||||
@ -261,6 +315,102 @@ exports[`Renderer:chained-select 1`] = `
|
||||
icon="right-arrow-bold"
|
||||
/>
|
||||
</span>
|
||||
<div
|
||||
class="cxd-PopOver cxd-Select-popover cxd-PopOver--leftBottomLeftTop"
|
||||
style="display: block; width: auto; left: 0px; top: 0px; position: relative;"
|
||||
theme="cxd"
|
||||
>
|
||||
<div
|
||||
class="cxd-PopOver-overlay"
|
||||
/>
|
||||
<div
|
||||
class="cxd-Select-menu"
|
||||
>
|
||||
<div
|
||||
class="cxd-Select-noResult"
|
||||
>
|
||||
未找到任何结果
|
||||
</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
|
||||
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>
|
||||
|
||||
@ -1,202 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Renderer:city 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>
|
||||
city
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
<div
|
||||
class="cxd-CityPicker"
|
||||
>
|
||||
<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"
|
||||
>
|
||||
北京市
|
||||
</div>
|
||||
</div>
|
||||
<a
|
||||
class="cxd-Select-clear"
|
||||
>
|
||||
<icon-mock
|
||||
classname="icon icon-close-small"
|
||||
icon="close-small"
|
||||
/>
|
||||
</a>
|
||||
<span
|
||||
class="cxd-Select-arrow"
|
||||
>
|
||||
<icon-mock
|
||||
classname="icon icon-right-arrow-bold"
|
||||
icon="right-arrow-bold"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-labelledby="downshift-1-label"
|
||||
class="cxd-Select"
|
||||
role="combobox"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="cxd-Select-valueWrap"
|
||||
>
|
||||
<div
|
||||
class="cxd-Select-value"
|
||||
>
|
||||
北京市市辖区
|
||||
</div>
|
||||
</div>
|
||||
<a
|
||||
class="cxd-Select-clear"
|
||||
>
|
||||
<icon-mock
|
||||
classname="icon icon-close-small"
|
||||
icon="close-small"
|
||||
/>
|
||||
</a>
|
||||
<span
|
||||
class="cxd-Select-arrow"
|
||||
>
|
||||
<icon-mock
|
||||
classname="icon icon-right-arrow-bold"
|
||||
icon="right-arrow-bold"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-labelledby="downshift-2-label"
|
||||
class="cxd-Select is-focused"
|
||||
role="combobox"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="cxd-Select-valueWrap"
|
||||
>
|
||||
<div
|
||||
class="cxd-Select-value"
|
||||
>
|
||||
东城区
|
||||
</div>
|
||||
</div>
|
||||
<a
|
||||
class="cxd-Select-clear"
|
||||
>
|
||||
<icon-mock
|
||||
classname="icon icon-close-small"
|
||||
icon="close-small"
|
||||
/>
|
||||
</a>
|
||||
<span
|
||||
class="cxd-Select-arrow"
|
||||
>
|
||||
<icon-mock
|
||||
classname="icon icon-right-arrow-bold"
|
||||
icon="right-arrow-bold"
|
||||
/>
|
||||
</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;"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@ -0,0 +1,952 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Renderer:inputCity 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="cxd-Page"
|
||||
>
|
||||
<div
|
||||
class="cxd-Page-content"
|
||||
>
|
||||
<div
|
||||
class="cxd-Page-main"
|
||||
>
|
||||
<div
|
||||
class="cxd-Page-body"
|
||||
>
|
||||
<div
|
||||
class="cxd-Panel cxd-Panel--default cxd-Panel--form"
|
||||
style="position: relative;"
|
||||
>
|
||||
<div
|
||||
class="cxd-Panel-heading"
|
||||
>
|
||||
<h3
|
||||
class="cxd-Panel-title"
|
||||
>
|
||||
<span
|
||||
class="cxd-TplField"
|
||||
>
|
||||
<span>
|
||||
表单
|
||||
</span>
|
||||
</span>
|
||||
</h3>
|
||||
</div>
|
||||
<div
|
||||
class="cxd-Panel-body"
|
||||
>
|
||||
<form
|
||||
class="cxd-Form cxd-Form--horizontal"
|
||||
novalidate=""
|
||||
>
|
||||
<input
|
||||
style="display: none;"
|
||||
type="submit"
|
||||
/>
|
||||
<div
|
||||
class="cxd-Form-item cxd-Form-item--horizontal"
|
||||
data-role="form-item"
|
||||
>
|
||||
<label
|
||||
class="cxd-Form-label cxd-Form-itemColumn--normal"
|
||||
>
|
||||
<span>
|
||||
<span
|
||||
class="cxd-TplField"
|
||||
>
|
||||
<span>
|
||||
城市
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
<div
|
||||
class="cxd-Form-value"
|
||||
>
|
||||
<div
|
||||
class="cxd-CityPicker"
|
||||
>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-labelledby="downshift-0-label"
|
||||
class="cxd-Select is-focused"
|
||||
role="combobox"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="cxd-Select-valueWrap"
|
||||
>
|
||||
<div
|
||||
class="cxd-Select-value"
|
||||
>
|
||||
北京市
|
||||
</div>
|
||||
</div>
|
||||
<a
|
||||
class="cxd-Select-clear"
|
||||
>
|
||||
<icon-mock
|
||||
classname="icon icon-close-small"
|
||||
icon="close-small"
|
||||
/>
|
||||
</a>
|
||||
<span
|
||||
class="cxd-Select-arrow"
|
||||
>
|
||||
<icon-mock
|
||||
classname="icon icon-right-arrow-bold"
|
||||
icon="right-arrow-bold"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-labelledby="downshift-1-label"
|
||||
class="cxd-Select"
|
||||
role="combobox"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="cxd-Select-valueWrap"
|
||||
>
|
||||
<div
|
||||
class="cxd-Select-value"
|
||||
>
|
||||
北京市市辖区
|
||||
</div>
|
||||
</div>
|
||||
<a
|
||||
class="cxd-Select-clear"
|
||||
>
|
||||
<icon-mock
|
||||
classname="icon icon-close-small"
|
||||
icon="close-small"
|
||||
/>
|
||||
</a>
|
||||
<span
|
||||
class="cxd-Select-arrow"
|
||||
>
|
||||
<icon-mock
|
||||
classname="icon icon-right-arrow-bold"
|
||||
icon="right-arrow-bold"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-labelledby="downshift-2-label"
|
||||
class="cxd-Select"
|
||||
role="combobox"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="cxd-Select-valueWrap"
|
||||
>
|
||||
<div
|
||||
class="cxd-Select-value"
|
||||
>
|
||||
海淀区
|
||||
</div>
|
||||
</div>
|
||||
<a
|
||||
class="cxd-Select-clear"
|
||||
>
|
||||
<icon-mock
|
||||
classname="icon icon-close-small"
|
||||
icon="close-small"
|
||||
/>
|
||||
</a>
|
||||
<span
|
||||
class="cxd-Select-arrow"
|
||||
>
|
||||
<icon-mock
|
||||
classname="icon icon-right-arrow-bold"
|
||||
icon="right-arrow-bold"
|
||||
/>
|
||||
</span>
|
||||
</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>
|
||||
Submit
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="resize-sensor"
|
||||
style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
|
||||
>
|
||||
|
||||
|
||||
<div
|
||||
class="resize-sensor-expand"
|
||||
style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
|
||||
>
|
||||
|
||||
|
||||
<div
|
||||
style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
|
||||
/>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div
|
||||
class="resize-sensor-shrink"
|
||||
style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
|
||||
>
|
||||
|
||||
|
||||
<div
|
||||
style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
|
||||
/>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div
|
||||
class="resize-sensor-appear"
|
||||
style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Renderer:inputCity with searchable: open select 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="cxd-Page"
|
||||
>
|
||||
<div
|
||||
class="cxd-Page-content"
|
||||
>
|
||||
<div
|
||||
class="cxd-Page-main"
|
||||
>
|
||||
<div
|
||||
class="cxd-Page-body"
|
||||
>
|
||||
<div
|
||||
class="cxd-Panel cxd-Panel--default cxd-Panel--form"
|
||||
style="position: relative;"
|
||||
>
|
||||
<div
|
||||
class="cxd-Panel-heading"
|
||||
>
|
||||
<h3
|
||||
class="cxd-Panel-title"
|
||||
>
|
||||
<span
|
||||
class="cxd-TplField"
|
||||
>
|
||||
<span>
|
||||
表单
|
||||
</span>
|
||||
</span>
|
||||
</h3>
|
||||
</div>
|
||||
<div
|
||||
class="cxd-Panel-body"
|
||||
>
|
||||
<form
|
||||
class="cxd-Form cxd-Form--horizontal"
|
||||
novalidate=""
|
||||
>
|
||||
<input
|
||||
style="display: none;"
|
||||
type="submit"
|
||||
/>
|
||||
<div
|
||||
class="cxd-Form-item cxd-Form-item--horizontal"
|
||||
data-role="form-item"
|
||||
>
|
||||
<label
|
||||
class="cxd-Form-label cxd-Form-itemColumn--normal"
|
||||
>
|
||||
<span>
|
||||
<span
|
||||
class="cxd-TplField"
|
||||
>
|
||||
<span>
|
||||
城市
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
<div
|
||||
class="cxd-Form-value"
|
||||
>
|
||||
<div
|
||||
class="cxd-CityPicker"
|
||||
>
|
||||
<div
|
||||
aria-expanded="true"
|
||||
aria-haspopup="listbox"
|
||||
aria-labelledby="downshift-3-label"
|
||||
aria-owns="downshift-3-menu"
|
||||
class="cxd-Select cxd-Select--searchable is-opened has-popover"
|
||||
role="combobox"
|
||||
style="position: relative;"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="cxd-Select-valueWrap"
|
||||
>
|
||||
<div
|
||||
class="cxd-Select-placeholder"
|
||||
>
|
||||
请选择
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
class="cxd-Select-arrow"
|
||||
>
|
||||
<icon-mock
|
||||
classname="icon icon-right-arrow-bold"
|
||||
icon="right-arrow-bold"
|
||||
/>
|
||||
</span>
|
||||
<div
|
||||
class="cxd-PopOver cxd-Select-popover cxd-PopOver--leftBottomLeftTop"
|
||||
style="display: block; width: auto; left: 0px; top: 0px; position: relative;"
|
||||
theme="cxd"
|
||||
>
|
||||
<div
|
||||
class="cxd-PopOver-overlay"
|
||||
/>
|
||||
<div
|
||||
class="cxd-Select-menu"
|
||||
>
|
||||
<div
|
||||
class="cxd-Select-input"
|
||||
>
|
||||
<icon-mock
|
||||
classname="icon icon-search"
|
||||
icon="search"
|
||||
/>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="downshift-3-menu"
|
||||
aria-labelledby="downshift-3-label"
|
||||
autocomplete="off"
|
||||
id="downshift-3-input"
|
||||
placeholder="搜索"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
aria-selected="false"
|
||||
class="cxd-Select-option"
|
||||
id="downshift-3-item-0"
|
||||
role="option"
|
||||
>
|
||||
<span
|
||||
class="cxd-Select-option-content"
|
||||
title="北京市"
|
||||
>
|
||||
北京市
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
aria-selected="false"
|
||||
class="cxd-Select-option"
|
||||
id="downshift-3-item-1"
|
||||
role="option"
|
||||
>
|
||||
<span
|
||||
class="cxd-Select-option-content"
|
||||
title="天津市"
|
||||
>
|
||||
天津市
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
aria-selected="false"
|
||||
class="cxd-Select-option"
|
||||
id="downshift-3-item-2"
|
||||
role="option"
|
||||
>
|
||||
<span
|
||||
class="cxd-Select-option-content"
|
||||
title="河北省"
|
||||
>
|
||||
河北省
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
aria-selected="false"
|
||||
class="cxd-Select-option"
|
||||
id="downshift-3-item-3"
|
||||
role="option"
|
||||
>
|
||||
<span
|
||||
class="cxd-Select-option-content"
|
||||
title="山西省"
|
||||
>
|
||||
山西省
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
aria-selected="false"
|
||||
class="cxd-Select-option"
|
||||
id="downshift-3-item-4"
|
||||
role="option"
|
||||
>
|
||||
<span
|
||||
class="cxd-Select-option-content"
|
||||
title="内蒙古自治区"
|
||||
>
|
||||
内蒙古自治区
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
aria-selected="false"
|
||||
class="cxd-Select-option"
|
||||
id="downshift-3-item-5"
|
||||
role="option"
|
||||
>
|
||||
<span
|
||||
class="cxd-Select-option-content"
|
||||
title="辽宁省"
|
||||
>
|
||||
辽宁省
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
aria-selected="false"
|
||||
class="cxd-Select-option"
|
||||
id="downshift-3-item-6"
|
||||
role="option"
|
||||
>
|
||||
<span
|
||||
class="cxd-Select-option-content"
|
||||
title="吉林省"
|
||||
>
|
||||
吉林省
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
aria-selected="false"
|
||||
class="cxd-Select-option"
|
||||
id="downshift-3-item-7"
|
||||
role="option"
|
||||
>
|
||||
<span
|
||||
class="cxd-Select-option-content"
|
||||
title="黑龙江省"
|
||||
>
|
||||
黑龙江省
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
aria-selected="false"
|
||||
class="cxd-Select-option"
|
||||
id="downshift-3-item-8"
|
||||
role="option"
|
||||
>
|
||||
<span
|
||||
class="cxd-Select-option-content"
|
||||
title="上海市"
|
||||
>
|
||||
上海市
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
aria-selected="false"
|
||||
class="cxd-Select-option"
|
||||
id="downshift-3-item-9"
|
||||
role="option"
|
||||
>
|
||||
<span
|
||||
class="cxd-Select-option-content"
|
||||
title="江苏省"
|
||||
>
|
||||
江苏省
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
aria-selected="false"
|
||||
class="cxd-Select-option"
|
||||
id="downshift-3-item-10"
|
||||
role="option"
|
||||
>
|
||||
<span
|
||||
class="cxd-Select-option-content"
|
||||
title="浙江省"
|
||||
>
|
||||
浙江省
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
aria-selected="false"
|
||||
class="cxd-Select-option"
|
||||
id="downshift-3-item-11"
|
||||
role="option"
|
||||
>
|
||||
<span
|
||||
class="cxd-Select-option-content"
|
||||
title="安徽省"
|
||||
>
|
||||
安徽省
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
aria-selected="false"
|
||||
class="cxd-Select-option"
|
||||
id="downshift-3-item-12"
|
||||
role="option"
|
||||
>
|
||||
<span
|
||||
class="cxd-Select-option-content"
|
||||
title="福建省"
|
||||
>
|
||||
福建省
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
aria-selected="false"
|
||||
class="cxd-Select-option"
|
||||
id="downshift-3-item-13"
|
||||
role="option"
|
||||
>
|
||||
<span
|
||||
class="cxd-Select-option-content"
|
||||
title="江西省"
|
||||
>
|
||||
江西省
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
aria-selected="false"
|
||||
class="cxd-Select-option"
|
||||
id="downshift-3-item-14"
|
||||
role="option"
|
||||
>
|
||||
<span
|
||||
class="cxd-Select-option-content"
|
||||
title="山东省"
|
||||
>
|
||||
山东省
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
aria-selected="false"
|
||||
class="cxd-Select-option"
|
||||
id="downshift-3-item-15"
|
||||
role="option"
|
||||
>
|
||||
<span
|
||||
class="cxd-Select-option-content"
|
||||
title="河南省"
|
||||
>
|
||||
河南省
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
aria-selected="false"
|
||||
class="cxd-Select-option"
|
||||
id="downshift-3-item-16"
|
||||
role="option"
|
||||
>
|
||||
<span
|
||||
class="cxd-Select-option-content"
|
||||
title="湖北省"
|
||||
>
|
||||
湖北省
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
aria-selected="false"
|
||||
class="cxd-Select-option"
|
||||
id="downshift-3-item-17"
|
||||
role="option"
|
||||
>
|
||||
<span
|
||||
class="cxd-Select-option-content"
|
||||
title="湖南省"
|
||||
>
|
||||
湖南省
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
aria-selected="false"
|
||||
class="cxd-Select-option"
|
||||
id="downshift-3-item-18"
|
||||
role="option"
|
||||
>
|
||||
<span
|
||||
class="cxd-Select-option-content"
|
||||
title="广东省"
|
||||
>
|
||||
广东省
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
aria-selected="false"
|
||||
class="cxd-Select-option"
|
||||
id="downshift-3-item-19"
|
||||
role="option"
|
||||
>
|
||||
<span
|
||||
class="cxd-Select-option-content"
|
||||
title="广西壮族自治区"
|
||||
>
|
||||
广西壮族自治区
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
aria-selected="false"
|
||||
class="cxd-Select-option"
|
||||
id="downshift-3-item-20"
|
||||
role="option"
|
||||
>
|
||||
<span
|
||||
class="cxd-Select-option-content"
|
||||
title="海南省"
|
||||
>
|
||||
海南省
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
aria-selected="false"
|
||||
class="cxd-Select-option"
|
||||
id="downshift-3-item-21"
|
||||
role="option"
|
||||
>
|
||||
<span
|
||||
class="cxd-Select-option-content"
|
||||
title="重庆市"
|
||||
>
|
||||
重庆市
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
aria-selected="false"
|
||||
class="cxd-Select-option"
|
||||
id="downshift-3-item-22"
|
||||
role="option"
|
||||
>
|
||||
<span
|
||||
class="cxd-Select-option-content"
|
||||
title="四川省"
|
||||
>
|
||||
四川省
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
aria-selected="false"
|
||||
class="cxd-Select-option"
|
||||
id="downshift-3-item-23"
|
||||
role="option"
|
||||
>
|
||||
<span
|
||||
class="cxd-Select-option-content"
|
||||
title="贵州省"
|
||||
>
|
||||
贵州省
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
aria-selected="false"
|
||||
class="cxd-Select-option"
|
||||
id="downshift-3-item-24"
|
||||
role="option"
|
||||
>
|
||||
<span
|
||||
class="cxd-Select-option-content"
|
||||
title="云南省"
|
||||
>
|
||||
云南省
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
aria-selected="false"
|
||||
class="cxd-Select-option"
|
||||
id="downshift-3-item-25"
|
||||
role="option"
|
||||
>
|
||||
<span
|
||||
class="cxd-Select-option-content"
|
||||
title="西藏自治区"
|
||||
>
|
||||
西藏自治区
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
aria-selected="false"
|
||||
class="cxd-Select-option"
|
||||
id="downshift-3-item-26"
|
||||
role="option"
|
||||
>
|
||||
<span
|
||||
class="cxd-Select-option-content"
|
||||
title="陕西省"
|
||||
>
|
||||
陕西省
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
aria-selected="false"
|
||||
class="cxd-Select-option"
|
||||
id="downshift-3-item-27"
|
||||
role="option"
|
||||
>
|
||||
<span
|
||||
class="cxd-Select-option-content"
|
||||
title="甘肃省"
|
||||
>
|
||||
甘肃省
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
aria-selected="false"
|
||||
class="cxd-Select-option"
|
||||
id="downshift-3-item-28"
|
||||
role="option"
|
||||
>
|
||||
<span
|
||||
class="cxd-Select-option-content"
|
||||
title="青海省"
|
||||
>
|
||||
青海省
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
aria-selected="false"
|
||||
class="cxd-Select-option"
|
||||
id="downshift-3-item-29"
|
||||
role="option"
|
||||
>
|
||||
<span
|
||||
class="cxd-Select-option-content"
|
||||
title="宁夏回族自治区"
|
||||
>
|
||||
宁夏回族自治区
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
aria-selected="false"
|
||||
class="cxd-Select-option"
|
||||
id="downshift-3-item-30"
|
||||
role="option"
|
||||
>
|
||||
<span
|
||||
class="cxd-Select-option-content"
|
||||
title="新疆维吾尔自治区"
|
||||
>
|
||||
新疆维吾尔自治区
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
aria-selected="false"
|
||||
class="cxd-Select-option"
|
||||
id="downshift-3-item-31"
|
||||
role="option"
|
||||
>
|
||||
<span
|
||||
class="cxd-Select-option-content"
|
||||
title="台湾省"
|
||||
>
|
||||
台湾省
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
aria-selected="false"
|
||||
class="cxd-Select-option"
|
||||
id="downshift-3-item-32"
|
||||
role="option"
|
||||
>
|
||||
<span
|
||||
class="cxd-Select-option-content"
|
||||
title="香港特别行政区"
|
||||
>
|
||||
香港特别行政区
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
aria-selected="false"
|
||||
class="cxd-Select-option"
|
||||
id="downshift-3-item-33"
|
||||
role="option"
|
||||
>
|
||||
<span
|
||||
class="cxd-Select-option-content"
|
||||
title="澳门特别行政区"
|
||||
>
|
||||
澳门特别行政区
|
||||
</span>
|
||||
</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
|
||||
class="resize-sensor"
|
||||
style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
|
||||
>
|
||||
|
||||
|
||||
<div
|
||||
class="resize-sensor-expand"
|
||||
style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
|
||||
>
|
||||
|
||||
|
||||
<div
|
||||
style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
|
||||
/>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div
|
||||
class="resize-sensor-shrink"
|
||||
style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
|
||||
>
|
||||
|
||||
|
||||
<div
|
||||
style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
|
||||
/>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div
|
||||
class="resize-sensor-appear"
|
||||
style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
Submit
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="resize-sensor"
|
||||
style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
|
||||
>
|
||||
|
||||
|
||||
<div
|
||||
class="resize-sensor-expand"
|
||||
style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
|
||||
>
|
||||
|
||||
|
||||
<div
|
||||
style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
|
||||
/>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div
|
||||
class="resize-sensor-shrink"
|
||||
style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
|
||||
>
|
||||
|
||||
|
||||
<div
|
||||
style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
|
||||
/>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div
|
||||
class="resize-sensor-appear"
|
||||
style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@ -1,4 +1,9 @@
|
||||
import React = require('react');
|
||||
/**
|
||||
* 组件名称：Button-Toolbar 按钮工具栏
|
||||
* 单测内容：
|
||||
* 1. 基础使用
|
||||
*/
|
||||
|
||||
import {render, cleanup, fireEvent} from '@testing-library/react';
|
||||
import '../../../src';
|
||||
import {render as amisRender} from '../../../src';
|
||||
|
||||
@ -1,7 +1,13 @@
|
||||
import React = require('react');
|
||||
/**
|
||||
* 组件名称：Chained-Select 链式下拉框
|
||||
* 单测内容：
|
||||
* 1. 基础使用
|
||||
*/
|
||||
|
||||
import {
|
||||
render,
|
||||
waitFor,
|
||||
fireEvent,
|
||||
waitForElementToBeRemoved
|
||||
} from '@testing-library/react';
|
||||
import '../../../src';
|
||||
@ -9,39 +15,21 @@ import {render as amisRender} from '../../../src';
|
||||
import {makeEnv, wait} from '../../helper';
|
||||
|
||||
test('Renderer:chained-select', async () => {
|
||||
const {container, findByText, getByText, getByTestId} = render(
|
||||
amisRender(
|
||||
{
|
||||
type: 'form',
|
||||
debug: true,
|
||||
api: '/api/mock2/form/saveForm',
|
||||
body: [
|
||||
{
|
||||
name: 'select3',
|
||||
type: 'chained-select',
|
||||
label: '级联下拉',
|
||||
source:
|
||||
'/api/mock2/options/chainedOptions?parentId=$parentId&level=$level&maxLevel=4',
|
||||
value: 'a,b'
|
||||
}
|
||||
]
|
||||
},
|
||||
{},
|
||||
makeEnv({
|
||||
async fetcher(config: any): Promise<any> {
|
||||
const fetcher = jest.fn().mockImplementation((config: any) => {
|
||||
return new Promise(resolve => {
|
||||
const level = parseInt(config.query.level, 10) || 0;
|
||||
const maxLevel = parseInt(config.query.maxLevel, 10) || 0;
|
||||
if (level >= maxLevel) {
|
||||
return {
|
||||
resolve({
|
||||
status: 200,
|
||||
headers: {},
|
||||
data: {
|
||||
status: 0,
|
||||
data: null
|
||||
}
|
||||
};
|
||||
});
|
||||
} else {
|
||||
return {
|
||||
resolve({
|
||||
status: 200,
|
||||
headers: {},
|
||||
data: {
|
||||
@ -69,19 +57,66 @@ test('Renderer:chained-select', async () => {
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
const {container, findByText, getByText, getByTestId} = render(
|
||||
amisRender(
|
||||
{
|
||||
type: 'form',
|
||||
debug: true,
|
||||
api: '/api/mock2/form/saveForm',
|
||||
body: [
|
||||
{
|
||||
name: 'select3',
|
||||
type: 'chained-select',
|
||||
label: '级联下拉',
|
||||
source: '/api/xxx?parentId=$parentId&level=$level&maxLevel=4',
|
||||
value: 'a,b'
|
||||
}
|
||||
]
|
||||
},
|
||||
{},
|
||||
makeEnv({
|
||||
fetcher
|
||||
})
|
||||
)
|
||||
);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(fetcher).toBeCalledTimes(3);
|
||||
expect(fetcher.mock.calls[2][0].query).toMatchObject({
|
||||
parentId: 'b',
|
||||
level: 2,
|
||||
maxLevel: '4'
|
||||
});
|
||||
expect(getByText('B 1')).toBeInTheDocument();
|
||||
expect(
|
||||
container.querySelector('[data-testid="spinner"]')
|
||||
).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
fireEvent.click(getByText('请选择'));
|
||||
expect(getByText('D 2')).toBeInTheDocument();
|
||||
fireEvent.click(getByText('D 2'));
|
||||
|
||||
await wait(100);
|
||||
expect(fetcher).toBeCalledTimes(4);
|
||||
expect(fetcher.mock.calls[3][0].query).toMatchObject({
|
||||
parentId: 'd',
|
||||
level: 3,
|
||||
maxLevel: '4'
|
||||
});
|
||||
|
||||
fireEvent.click(getByText('请选择'));
|
||||
expect(getByText('C 3')).toBeInTheDocument();
|
||||
fireEvent.click(getByText('C 3'));
|
||||
|
||||
await wait(100);
|
||||
expect(fetcher).toBeCalledTimes(5);
|
||||
fireEvent.click(getByText('请选择'));
|
||||
expect(getByText('未找到任何结果')).toBeInTheDocument();
|
||||
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
@ -1,43 +0,0 @@
|
||||
import React = require('react');
|
||||
import {render, fireEvent, waitFor} from '@testing-library/react';
|
||||
import '../../../src';
|
||||
import {render as amisRender} from '../../../src';
|
||||
import {makeEnv, wait} from '../../helper';
|
||||
|
||||
test('Renderer:city', async () => {
|
||||
const {container, getByText, findByText} = render(
|
||||
amisRender(
|
||||
{
|
||||
type: 'form',
|
||||
api: '/api/xxx',
|
||||
controls: [
|
||||
{
|
||||
type: 'city',
|
||||
name: 'a',
|
||||
label: 'city',
|
||||
allowDistrict: true,
|
||||
allowCity: true
|
||||
}
|
||||
],
|
||||
title: 'The form',
|
||||
actions: []
|
||||
},
|
||||
{},
|
||||
makeEnv({})
|
||||
)
|
||||
);
|
||||
|
||||
await waitFor(() => {
|
||||
getByText('请选择');
|
||||
});
|
||||
|
||||
fireEvent.click(getByText('请选择'));
|
||||
fireEvent.click(getByText('北京市'));
|
||||
fireEvent.click(getByText('请选择'));
|
||||
fireEvent.click(getByText('北京市市辖区'));
|
||||
fireEvent.click(getByText('请选择'));
|
||||
fireEvent.click(getByText('东城区'));
|
||||
|
||||
await wait(500);
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
235
packages/amis/__tests__/renderers/Form/inputCity.test.tsx
Normal file
235
packages/amis/__tests__/renderers/Form/inputCity.test.tsx
Normal file
@ -0,0 +1,235 @@
|
||||
/**
|
||||
* 组件名称：InputCity 城市选择器
|
||||
* 单测内容：
|
||||
* 1. 基础使用
|
||||
* 2. searchable
|
||||
* 3. allowDistrict & allowCity
|
||||
*/
|
||||
|
||||
import {
|
||||
render,
|
||||
fireEvent,
|
||||
cleanup,
|
||||
getByText,
|
||||
within,
|
||||
waitFor
|
||||
} from '@testing-library/react';
|
||||
import '../../../src';
|
||||
import {render as amisRender} from '../../../src';
|
||||
import {makeEnv, wait} from '../../helper';
|
||||
|
||||
const setup = async (items: any[] = []) => {
|
||||
const onSubmit = jest.fn();
|
||||
const utils = render(
|
||||
amisRender(
|
||||
{
|
||||
type: 'page',
|
||||
body: {
|
||||
type: 'form',
|
||||
submitText: 'Submit',
|
||||
api: '/api/mock/saveForm?waitSeconds=1',
|
||||
mode: 'horizontal',
|
||||
body: items
|
||||
}
|
||||
},
|
||||
{onSubmit},
|
||||
makeEnv()
|
||||
)
|
||||
);
|
||||
|
||||
const submitBtn = utils.container.querySelector(
|
||||
'button[type="submit"]'
|
||||
) as HTMLElement;
|
||||
|
||||
return {
|
||||
onSubmit,
|
||||
submitBtn,
|
||||
...utils,
|
||||
rerender: (items: any[]) =>
|
||||
utils.rerender(
|
||||
amisRender(
|
||||
{
|
||||
type: 'page',
|
||||
body: {
|
||||
type: 'form',
|
||||
submitText: 'Submit',
|
||||
api: '/api/mock/saveForm?waitSeconds=1',
|
||||
mode: 'horizontal',
|
||||
body: items
|
||||
}
|
||||
},
|
||||
{onSubmit},
|
||||
makeEnv()
|
||||
)
|
||||
)
|
||||
};
|
||||
};
|
||||
|
||||
// 1. 基础使用
|
||||
test('Renderer:inputCity', async () => {
|
||||
const {container, getByText, onSubmit, submitBtn} = await setup([
|
||||
{
|
||||
name: 'city',
|
||||
type: 'input-city',
|
||||
label: '城市'
|
||||
}
|
||||
]);
|
||||
await wait(100);
|
||||
|
||||
const select = container.querySelector('.cxd-CityPicker > .cxd-Select')!;
|
||||
expect(select).toBeInTheDocument();
|
||||
fireEvent.click(select);
|
||||
expect(getByText('北京市')).toBeInTheDocument();
|
||||
fireEvent.click(getByText('北京市'));
|
||||
await wait(100);
|
||||
fireEvent.click(submitBtn);
|
||||
await waitFor(() => {
|
||||
expect(onSubmit).toBeCalled();
|
||||
expect(onSubmit.mock.calls[0][0]).toMatchObject({
|
||||
city: '110000'
|
||||
});
|
||||
});
|
||||
|
||||
const select2 = container.querySelector(
|
||||
'.cxd-CityPicker > .cxd-Select:nth-child(2)'
|
||||
)!;
|
||||
expect(select2).toBeInTheDocument();
|
||||
fireEvent.click(select2);
|
||||
expect(getByText('北京市市辖区')).toBeInTheDocument();
|
||||
fireEvent.click(getByText('北京市市辖区'));
|
||||
await wait(100);
|
||||
fireEvent.click(submitBtn);
|
||||
await waitFor(() => {
|
||||
expect(onSubmit).toBeCalledTimes(2);
|
||||
expect(onSubmit.mock.calls[1][0]).toMatchObject({
|
||||
city: '110100'
|
||||
});
|
||||
});
|
||||
|
||||
const select3 = container.querySelector(
|
||||
'.cxd-CityPicker > .cxd-Select:nth-child(3)'
|
||||
)!;
|
||||
expect(select3).toBeInTheDocument();
|
||||
fireEvent.click(select3);
|
||||
expect(getByText('海淀区')).toBeInTheDocument();
|
||||
fireEvent.click(getByText('海淀区'));
|
||||
await wait(100);
|
||||
fireEvent.click(submitBtn);
|
||||
await waitFor(() => {
|
||||
expect(onSubmit).toBeCalledTimes(3);
|
||||
expect(onSubmit.mock.calls[2][0]).toMatchObject({
|
||||
city: '110108'
|
||||
});
|
||||
});
|
||||
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
// 2. searchable
|
||||
test('Renderer:inputCity with searchable', async () => {
|
||||
const {container, getByText, onSubmit, submitBtn, getByTitle} = await setup([
|
||||
{
|
||||
name: 'city',
|
||||
type: 'input-city',
|
||||
label: '城市',
|
||||
searchable: true
|
||||
}
|
||||
]);
|
||||
await wait(100);
|
||||
|
||||
const select = container.querySelector('.cxd-CityPicker > .cxd-Select')!;
|
||||
expect(select).toBeInTheDocument();
|
||||
fireEvent.click(select);
|
||||
|
||||
await wait(100);
|
||||
expect(container).toMatchSnapshot('open select');
|
||||
|
||||
const input = select.querySelector('.cxd-Select-input input')!;
|
||||
expect(input).toBeInTheDocument();
|
||||
|
||||
fireEvent.change(input, {target: {value: '山'}});
|
||||
await wait(100);
|
||||
|
||||
expect(
|
||||
select.querySelectorAll('.cxd-Select-menu > .cxd-Select-option')!.length
|
||||
).toBe(2);
|
||||
expect(
|
||||
await within(select as HTMLElement).getByTitle('山东省')
|
||||
).toBeInTheDocument();
|
||||
expect(
|
||||
await within(select as HTMLElement).getByTitle('山西省')
|
||||
).toBeInTheDocument();
|
||||
});
|
||||
|
||||
// 3. allowDistrict & allowCity
|
||||
test('Renderer:inputCity with allowDistrict & allowCity', async () => {
|
||||
const {container, getByText, onSubmit, submitBtn, getByTitle, rerender} =
|
||||
await setup([
|
||||
{
|
||||
name: 'city',
|
||||
type: 'input-city',
|
||||
label: '城市',
|
||||
allowDistrict: false,
|
||||
allowCity: false
|
||||
}
|
||||
]);
|
||||
await wait(100);
|
||||
|
||||
const select = container.querySelector('.cxd-CityPicker > .cxd-Select')!;
|
||||
expect(select).toBeInTheDocument();
|
||||
fireEvent.click(select);
|
||||
expect(getByText('北京市')).toBeInTheDocument();
|
||||
fireEvent.click(getByText('北京市'));
|
||||
|
||||
await wait(100);
|
||||
expect(
|
||||
container.querySelector('.cxd-CityPicker > .cxd-Select:nth-child(2)')!
|
||||
).not.toBeInTheDocument();
|
||||
|
||||
rerender([
|
||||
{
|
||||
name: 'city',
|
||||
type: 'input-city',
|
||||
label: '城市',
|
||||
allowDistrict: false,
|
||||
allowCity: true
|
||||
}
|
||||
]);
|
||||
|
||||
fireEvent.click(select);
|
||||
expect(getByText('山西省')).toBeInTheDocument();
|
||||
fireEvent.click(getByText('山西省'));
|
||||
|
||||
await wait(100);
|
||||
const select2 = container.querySelector(
|
||||
'.cxd-CityPicker > .cxd-Select:nth-child(2)'
|
||||
)!;
|
||||
expect(select2).toBeInTheDocument();
|
||||
fireEvent.click(select2);
|
||||
expect(getByText('太原市')).toBeInTheDocument();
|
||||
fireEvent.click(getByText('太原市'));
|
||||
|
||||
await wait(100);
|
||||
expect(
|
||||
container.querySelector('.cxd-CityPicker > .cxd-Select:nth-child(3)')!
|
||||
).not.toBeInTheDocument();
|
||||
|
||||
rerender([
|
||||
{
|
||||
name: 'city',
|
||||
type: 'input-city',
|
||||
label: '城市',
|
||||
allowDistrict: true,
|
||||
allowCity: true
|
||||
}
|
||||
]);
|
||||
|
||||
fireEvent.click(select2);
|
||||
expect(getByText('忻州市')).toBeInTheDocument();
|
||||
fireEvent.click(getByText('忻州市'));
|
||||
|
||||
await wait(100);
|
||||
expect(
|
||||
container.querySelector('.cxd-CityPicker > .cxd-Select:nth-child(3)')!
|
||||
).toBeInTheDocument();
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user