mirror of
https://gitee.com/baidu/amis.git
synced 2024-11-29 18:48:45 +08:00
chore: tabs、tabsTransfer、tabsTransferPicker 单测补充 (#5821)
* tabs * tabsTransfer * d * tabsTransferPicker
This commit is contained in:
sansiro
GitHub
parent
966f6df162
commit
cb5452d429
@ -1,6 +1,6 @@
|
|||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
exports[`Renderer:tabs-transfer 1`] = `
|
exports[`Renderer:tabsTransfer 1`] = `
|
||||||
<div>
|
<div>
|
||||||
<div
|
<div
|
||||||
class="cxd-Page"
|
class="cxd-Page"
|
||||||
@ -484,7 +484,7 @@ exports[`Renderer:tabs-transfer 1`] = `
|
|||||||
<span
|
<span
|
||||||
class=""
|
class=""
|
||||||
>
|
>
|
||||||
法师
|
法师2
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -497,7 +497,7 @@ exports[`Renderer:tabs-transfer 1`] = `
|
|||||||
<span
|
<span
|
||||||
class=""
|
class=""
|
||||||
>
|
>
|
||||||
战士
|
战士2
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -510,7 +510,7 @@ exports[`Renderer:tabs-transfer 1`] = `
|
|||||||
<span
|
<span
|
||||||
class=""
|
class=""
|
||||||
>
|
>
|
||||||
打野
|
打野2
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -571,7 +571,580 @@ exports[`Renderer:tabs-transfer 1`] = `
|
|||||||
type="submit"
|
type="submit"
|
||||||
>
|
>
|
||||||
<span>
|
<span>
|
||||||
提交
|
submitText
|
||||||
|
</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:tabsTransfer with deferApi 1`] = `
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
class="cxd-Page"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="cxd-Page-content"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="cxd-Page-main"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="cxd-Page-body"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="cxd-Panel cxd-Panel--default cxd-Panel--form"
|
||||||
|
style="position: relative;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="cxd-Panel-heading"
|
||||||
|
>
|
||||||
|
<h3
|
||||||
|
class="cxd-Panel-title"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="cxd-TplField"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
表单
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="cxd-Panel-body"
|
||||||
|
>
|
||||||
|
<form
|
||||||
|
class="cxd-Form cxd-Form--normal"
|
||||||
|
novalidate=""
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
style="display: none;"
|
||||||
|
type="submit"
|
||||||
|
/>
|
||||||
|
<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-TabsTransferControl cxd-Form-control"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="cxd-Transfer cxd-TabsTransfer"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="cxd-Transfer-select"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="cxd-Tabs cxd-Tabs--line cxd-TabsTransfer-tabs"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="cxd-Tabs-linksContainer-wrapper"
|
||||||
|
style="position: relative;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="cxd-Tabs-linksContainer"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="cxd-Tabs-linksContainer-main"
|
||||||
|
>
|
||||||
|
<ul
|
||||||
|
class="cxd-Tabs-links"
|
||||||
|
role="tablist"
|
||||||
|
>
|
||||||
|
<li
|
||||||
|
class="cxd-Tabs-link is-active"
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
title="成员"
|
||||||
|
>
|
||||||
|
成员
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li
|
||||||
|
class="cxd-Tabs-link"
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
title="用户"
|
||||||
|
>
|
||||||
|
用户
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</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="cxd-Tabs-content"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="in is-active cxd-Tabs-pane cxd-TabsTransfer-tab"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="cxd-TabsTransfer-search"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="cxd-InputBox"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
placeholder="请输入关键字"
|
||||||
|
size="12"
|
||||||
|
theme="cxd"
|
||||||
|
type="text"
|
||||||
|
value=""
|
||||||
|
/>
|
||||||
|
<icon-mock
|
||||||
|
classname="icon icon-search"
|
||||||
|
icon="search"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="cxd-AssociatedSelection cxd-Transfer-checkboxes"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="cxd-AssociatedSelection-left"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="cxd-Tree "
|
||||||
|
>
|
||||||
|
<ul
|
||||||
|
class="cxd-Tree-list"
|
||||||
|
>
|
||||||
|
<li
|
||||||
|
class="cxd-Tree-item "
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="cxd-Tree-itemLabel"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="cxd-Tree-itemArrow"
|
||||||
|
>
|
||||||
|
<icon-mock
|
||||||
|
classname="icon icon-down-arrow-bold"
|
||||||
|
icon="down-arrow-bold"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="cxd-Tree-itemLabel-item"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="cxd-Tree-itemIcon cxd-Tree-folderIcon"
|
||||||
|
>
|
||||||
|
<icon-mock
|
||||||
|
classname="icon icon-folder"
|
||||||
|
icon="folder"
|
||||||
|
/>
|
||||||
|
</i>
|
||||||
|
<span
|
||||||
|
class="cxd-Tree-itemText"
|
||||||
|
title="DEFER"
|
||||||
|
>
|
||||||
|
DEFER
|
||||||
|
</span>
|
||||||
|
<div
|
||||||
|
class="cxd-Tree-item-icons"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<ul
|
||||||
|
class="cxd-Tree-sublist"
|
||||||
|
>
|
||||||
|
<li
|
||||||
|
class="cxd-Tree-item cxd-Tree-item--isLeaf"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="cxd-Tree-itemLabel"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="cxd-Tree-itemArrowPlaceholder"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="cxd-Tree-itemLabel-item"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="cxd-Tree-itemIcon cxd-Tree-leafIcon"
|
||||||
|
>
|
||||||
|
<icon-mock
|
||||||
|
classname="icon icon-file"
|
||||||
|
icon="file"
|
||||||
|
/>
|
||||||
|
</i>
|
||||||
|
<span
|
||||||
|
class="cxd-Tree-itemText"
|
||||||
|
title="Option A"
|
||||||
|
>
|
||||||
|
Option A
|
||||||
|
</span>
|
||||||
|
<div
|
||||||
|
class="cxd-Tree-item-icons"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li
|
||||||
|
class="cxd-Tree-item cxd-Tree-item--isLeaf"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="cxd-Tree-itemLabel is-checked"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="cxd-Tree-itemArrowPlaceholder"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="cxd-Tree-itemLabel-item"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="cxd-Tree-itemIcon cxd-Tree-leafIcon"
|
||||||
|
>
|
||||||
|
<icon-mock
|
||||||
|
classname="icon icon-file"
|
||||||
|
icon="file"
|
||||||
|
/>
|
||||||
|
</i>
|
||||||
|
<span
|
||||||
|
class="cxd-Tree-itemText"
|
||||||
|
title="Option B"
|
||||||
|
>
|
||||||
|
Option B
|
||||||
|
</span>
|
||||||
|
<div
|
||||||
|
class="cxd-Tree-item-icons"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li
|
||||||
|
class="cxd-Tree-item cxd-Tree-item--isLeaf"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="cxd-Tree-itemLabel"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="cxd-Tree-itemArrowPlaceholder"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="cxd-Tree-itemLabel-item"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="cxd-Tree-itemIcon cxd-Tree-leafIcon"
|
||||||
|
>
|
||||||
|
<icon-mock
|
||||||
|
classname="icon icon-file"
|
||||||
|
icon="file"
|
||||||
|
/>
|
||||||
|
</i>
|
||||||
|
<span
|
||||||
|
class="cxd-Tree-itemText"
|
||||||
|
title="Option C"
|
||||||
|
>
|
||||||
|
Option C
|
||||||
|
</span>
|
||||||
|
<div
|
||||||
|
class="cxd-Tree-item-icons"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li
|
||||||
|
class="cxd-Tree-item cxd-Tree-item--isLeaf"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="cxd-Tree-itemLabel"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="cxd-Tree-itemArrowPlaceholder"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="cxd-Tree-itemLabel-item"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="cxd-Tree-itemIcon cxd-Tree-leafIcon"
|
||||||
|
>
|
||||||
|
<icon-mock
|
||||||
|
classname="icon icon-file"
|
||||||
|
icon="file"
|
||||||
|
/>
|
||||||
|
</i>
|
||||||
|
<span
|
||||||
|
class="cxd-Tree-itemText"
|
||||||
|
title="Option D"
|
||||||
|
>
|
||||||
|
Option D
|
||||||
|
</span>
|
||||||
|
<div
|
||||||
|
class="cxd-Tree-item-icons"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li
|
||||||
|
class="cxd-Tree-item cxd-Tree-item--isLeaf"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="cxd-Tree-itemLabel"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="cxd-Tree-itemArrowPlaceholder"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="cxd-Tree-itemLabel-item"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="cxd-Tree-itemIcon cxd-Tree-leafIcon"
|
||||||
|
>
|
||||||
|
<icon-mock
|
||||||
|
classname="icon icon-file"
|
||||||
|
icon="file"
|
||||||
|
/>
|
||||||
|
</i>
|
||||||
|
<span
|
||||||
|
class="cxd-Tree-itemText"
|
||||||
|
title="Option E"
|
||||||
|
>
|
||||||
|
Option E
|
||||||
|
</span>
|
||||||
|
<div
|
||||||
|
class="cxd-Tree-item-icons"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li
|
||||||
|
class="cxd-Tree-item cxd-Tree-item--isLeaf"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="cxd-Tree-itemLabel"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="cxd-Tree-itemArrowPlaceholder"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="cxd-Tree-itemLabel-item"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="cxd-Tree-itemIcon cxd-Tree-leafIcon"
|
||||||
|
>
|
||||||
|
<icon-mock
|
||||||
|
classname="icon icon-file"
|
||||||
|
icon="file"
|
||||||
|
/>
|
||||||
|
</i>
|
||||||
|
<span
|
||||||
|
class="cxd-Tree-itemText"
|
||||||
|
title="法师"
|
||||||
|
>
|
||||||
|
法师
|
||||||
|
</span>
|
||||||
|
<div
|
||||||
|
class="cxd-Tree-item-icons"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="cxd-AssociatedSelection-right"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="cxd-AssociatedSelection-box"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="cxd-AssociatedSelection-reload is-clickable"
|
||||||
|
>
|
||||||
|
<icon-mock
|
||||||
|
classname="icon icon-reload"
|
||||||
|
icon="reload"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<p>
|
||||||
|
点击刷新重新加载
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="cxd-Tabs-pane cxd-TabsTransfer-tab"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="cxd-ChainedSelection cxd-Transfer-checkboxes"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="cxd-ChainedSelection-col"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="cxd-ChainedSelection-item"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="cxd-ChainedSelection-itemLabel"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class=""
|
||||||
|
>
|
||||||
|
法师2
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="cxd-ChainedSelection-col"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="cxd-ChainedSelection-placeholder"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="cxd-Transfer-mid"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="cxd-Transfer-result"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="cxd-Transfer-title"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
已选项
|
||||||
|
</span>
|
||||||
|
<a
|
||||||
|
class="cxd-Transfer-clearAll is-disabled"
|
||||||
|
>
|
||||||
|
清空
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="cxd-Selections cxd-Transfer-value"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="cxd-Selections-placeholder"
|
||||||
|
>
|
||||||
|
请选择左侧数据
|
||||||
|
</div>
|
||||||
|
</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>
|
||||||
|
submitText
|
||||||
</span>
|
</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@ -1,17 +1,25 @@
|
|||||||
import React = require('react');
|
/**
|
||||||
import {render} from '@testing-library/react';
|
* 组件名称：TabsTransfer 组合穿梭器
|
||||||
|
*
|
||||||
|
* 单测内容：
|
||||||
|
1. 点击切换
|
||||||
|
2. deferApi 数据懒加载
|
||||||
|
*/
|
||||||
|
|
||||||
|
import {fireEvent, getByText, render} from '@testing-library/react';
|
||||||
import '../../../src';
|
import '../../../src';
|
||||||
import {render as amisRender} from '../../../src';
|
import {render as amisRender} from '../../../src';
|
||||||
import {makeEnv} from '../../helper';
|
import {makeEnv, wait} from '../../helper';
|
||||||
|
|
||||||
test('Renderer:tabs-transfer', () => {
|
test('Renderer:tabsTransfer', async () => {
|
||||||
const {container} = render(
|
const onSubmit = jest.fn();
|
||||||
|
const {container, getByText} = render(
|
||||||
amisRender(
|
amisRender(
|
||||||
{
|
{
|
||||||
type: 'page',
|
type: 'page',
|
||||||
body: {
|
body: {
|
||||||
type: 'form',
|
type: 'form',
|
||||||
api: '/api/mock2/form/saveForm',
|
submitText: 'submitText',
|
||||||
body: [
|
body: [
|
||||||
{
|
{
|
||||||
label: '组合穿梭器',
|
label: '组合穿梭器',
|
||||||
@ -71,40 +79,40 @@ test('Renderer:tabs-transfer', () => {
|
|||||||
selectMode: 'chained',
|
selectMode: 'chained',
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
label: '法师',
|
label: '法师2',
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
label: '诸葛亮',
|
label: '诸葛亮2',
|
||||||
value: 'zhugeliang2'
|
value: 'zhugeliang2'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '战士',
|
label: '战士2',
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
label: '曹操',
|
label: '曹操2',
|
||||||
value: 'caocao2'
|
value: 'caocao2'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '钟无艳',
|
label: '钟无艳2',
|
||||||
value: 'zhongwuyan2'
|
value: 'zhongwuyan2'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '打野',
|
label: '打野2',
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
label: '李白',
|
label: '李白2',
|
||||||
value: 'libai2'
|
value: 'libai2'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '韩信',
|
label: '韩信2',
|
||||||
value: 'hanxin2'
|
value: 'hanxin2'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '云中君',
|
label: '云中君2',
|
||||||
value: 'yunzhongjun2'
|
value: 'yunzhongjun2'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
@ -116,10 +124,149 @@ test('Renderer:tabs-transfer', () => {
|
|||||||
]
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{},
|
{onSubmit},
|
||||||
makeEnv({})
|
makeEnv({})
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
|
|
||||||
expect(container).toMatchSnapshot();
|
expect(container).toMatchSnapshot();
|
||||||
|
|
||||||
|
fireEvent.click(getByText('诸葛亮'));
|
||||||
|
fireEvent.click(getByText('用户'));
|
||||||
|
// 这里必须长，不然切不过来
|
||||||
|
await wait(2000);
|
||||||
|
fireEvent.click(getByText('打野2'));
|
||||||
|
fireEvent.click(getByText('云中君2'));
|
||||||
|
await wait(400);
|
||||||
|
fireEvent.click(getByText('submitText'));
|
||||||
|
await wait(100);
|
||||||
|
expect(onSubmit).toBeCalled();
|
||||||
|
expect(onSubmit.mock.calls[0][0]).toEqual({
|
||||||
|
a: 'zhugeliang,yunzhongjun2'
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
test('Renderer:tabsTransfer with deferApi', async () => {
|
||||||
|
const fetcher = jest.fn().mockImplementation(() =>
|
||||||
|
Promise.resolve({
|
||||||
|
data: {
|
||||||
|
options: [
|
||||||
|
{label: 'Option A', value: 'a'},
|
||||||
|
{label: 'Option B', value: 'b'},
|
||||||
|
{label: 'Option C', value: 'c'},
|
||||||
|
{label: 'Option D', value: 'd'},
|
||||||
|
{label: 'Option E', value: 'e'}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
status: 0
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
|
const notify = jest.fn();
|
||||||
|
const {container, getByText} = render(
|
||||||
|
amisRender(
|
||||||
|
{
|
||||||
|
type: 'page',
|
||||||
|
body: {
|
||||||
|
type: 'form',
|
||||||
|
submitText: 'submitText',
|
||||||
|
body: [
|
||||||
|
{
|
||||||
|
label: '组合穿梭器',
|
||||||
|
type: 'tabs-transfer',
|
||||||
|
name: 'a',
|
||||||
|
selectMode: 'tree',
|
||||||
|
options: [
|
||||||
|
{
|
||||||
|
label: '成员',
|
||||||
|
selectMode: 'associated',
|
||||||
|
searchable: true,
|
||||||
|
leftMode: 'tree',
|
||||||
|
leftOptions: [
|
||||||
|
{
|
||||||
|
defer: true,
|
||||||
|
label: 'DEFER',
|
||||||
|
deferApi: '/api/xxx'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '法师',
|
||||||
|
value: 'user'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
ref: 'user',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
label: '诸葛亮',
|
||||||
|
value: 'zhugeliang2'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '上官婉儿',
|
||||||
|
value: 'shangguan'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
ref: 'a',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
label: 'Option A Child 1',
|
||||||
|
value: 'a-1'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Option A Child 2',
|
||||||
|
value: 'a-2'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '用户',
|
||||||
|
selectMode: 'chained',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
label: '法师2',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
label: '诸葛亮2',
|
||||||
|
value: 'zhugeliang2'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{},
|
||||||
|
makeEnv({
|
||||||
|
fetcher,
|
||||||
|
notify,
|
||||||
|
session: 'test-case-3'
|
||||||
|
})
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(getByText('DEFER')).toBeInTheDocument();
|
||||||
|
fireEvent.click(getByText('DEFER'));
|
||||||
|
|
||||||
|
await wait(1000);
|
||||||
|
|
||||||
|
expect(fetcher).toHaveBeenCalled();
|
||||||
|
expect(getByText('Option A')).toBeInTheDocument();
|
||||||
|
|
||||||
|
fireEvent.click(getByText('Option A'));
|
||||||
|
|
||||||
|
await wait(100);
|
||||||
|
expect(getByText('Option A Child 1')).toBeInTheDocument();
|
||||||
|
|
||||||
|
fireEvent.click(getByText('Option B'));
|
||||||
|
await wait(100);
|
||||||
|
expect(notify).toBeCalledTimes(1);
|
||||||
|
|
||||||
|
expect(container).toMatchSnapshot();
|
||||||
});
|
});
|
||||||
|
|||||||
@ -1,11 +1,17 @@
|
|||||||
import React = require('react');
|
/**
|
||||||
|
* 组件名称：TabsTransferPicker 穿梭选择器
|
||||||
|
*
|
||||||
|
* 单测内容：
|
||||||
|
1. 点击选择
|
||||||
|
*/
|
||||||
|
|
||||||
import {render, fireEvent, cleanup, screen} from '@testing-library/react';
|
import {render, fireEvent, cleanup, screen} from '@testing-library/react';
|
||||||
import '../../../src';
|
import '../../../src';
|
||||||
import {render as amisRender} from '../../../src';
|
import {render as amisRender} from '../../../src';
|
||||||
import {makeEnv, wait} from '../../helper';
|
import {makeEnv, wait} from '../../helper';
|
||||||
|
|
||||||
test('Renderer:TabsTransferPicker', async () => {
|
test('Renderer:TabsTransferPicker', async () => {
|
||||||
const {container, findByText} = render(
|
const {container, findByText, baseElement} = render(
|
||||||
amisRender(
|
amisRender(
|
||||||
{
|
{
|
||||||
type: 'page',
|
type: 'page',
|
||||||
@ -151,28 +157,28 @@ test('Renderer:TabsTransferPicker', async () => {
|
|||||||
const picker = await findByText('请选择');
|
const picker = await findByText('请选择');
|
||||||
|
|
||||||
fireEvent.click(picker);
|
fireEvent.click(picker);
|
||||||
|
await wait(500);
|
||||||
|
expect(baseElement.querySelector('.cxd-Modal')!).toBeInTheDocument();
|
||||||
|
|
||||||
const option = await findByText('诸葛亮');
|
const option = await findByText('诸葛亮');
|
||||||
|
|
||||||
const checkbox = document.querySelector('.cxd-Checkbox input')!;
|
expect(option).toBeInTheDocument();
|
||||||
|
fireEvent.click(option);
|
||||||
|
|
||||||
fireEvent.click(checkbox);
|
await wait(200);
|
||||||
|
expect(baseElement).toMatchSnapshot('dialog open');
|
||||||
await wait(500);
|
|
||||||
|
|
||||||
const confirm = await findByText('确认');
|
const confirm = await findByText('确认');
|
||||||
|
|
||||||
|
expect(confirm).toBeInTheDocument();
|
||||||
fireEvent.click(confirm);
|
fireEvent.click(confirm);
|
||||||
|
|
||||||
await wait(500);
|
await wait(1000);
|
||||||
|
expect(baseElement.querySelector('.cxd-Modal')!).not.toBeInTheDocument();
|
||||||
|
|
||||||
// TODO: 应该是点了但不知为何没反应
|
const valueWrap = container.querySelector('.cxd-ResultBox-value-wrap')!;
|
||||||
// screen.debug();
|
expect(valueWrap).not.toHaveTextContent('请选择');
|
||||||
// const dialog = document.querySelector('.cxd-Selections-item')!;
|
expect(valueWrap).toHaveTextContent('诸葛亮');
|
||||||
|
|
||||||
// console.log('...dialog', dialog.innerHTML);
|
expect(baseElement).toMatchSnapshot();
|
||||||
|
|
||||||
// screen.debug();
|
|
||||||
|
|
||||||
// expect(container).toMatchSnapshot();
|
|
||||||
});
|
});
|
||||||
|
|||||||
@ -1,4 +1,21 @@
|
|||||||
import React = require('react');
|
/**
|
||||||
|
* 组件名称：Tabs 选项卡
|
||||||
|
*
|
||||||
|
* 单测内容：
|
||||||
|
1. 点击切换
|
||||||
|
2. 各种展示模式
|
||||||
|
3. 通过 source 获取数据
|
||||||
|
4. 配置toolbar实现顶部工具栏
|
||||||
|
5. addable 可新增
|
||||||
|
6. draggable 可拖拽
|
||||||
|
7. showTip 提示信息
|
||||||
|
8. editable 可编辑
|
||||||
|
9. closable 可关闭标签
|
||||||
|
10. disabled 可禁用
|
||||||
|
11. tabs 作为表单项
|
||||||
|
12. collapseOnExceed 配置超出折叠
|
||||||
|
*/
|
||||||
|
|
||||||
import {
|
import {
|
||||||
render,
|
render,
|
||||||
cleanup,
|
cleanup,
|
||||||
@ -16,6 +33,7 @@ afterEach(() => {
|
|||||||
clearStoresCache();
|
clearStoresCache();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 1. 点击切换
|
||||||
test('Renderer:tabs change active tab', async () => {
|
test('Renderer:tabs change active tab', async () => {
|
||||||
const {container, getByText} = render(
|
const {container, getByText} = render(
|
||||||
amisRender(
|
amisRender(
|
||||||
@ -57,6 +75,7 @@ test('Renderer:tabs change active tab', async () => {
|
|||||||
expect(container).toMatchSnapshot();
|
expect(container).toMatchSnapshot();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 2. 各种展示模式
|
||||||
test('Renderer:tabs tabsMode', async () => {
|
test('Renderer:tabs tabsMode', async () => {
|
||||||
const baseSchema = {
|
const baseSchema = {
|
||||||
type: 'tabs',
|
type: 'tabs',
|
||||||
@ -107,6 +126,7 @@ test('Renderer:tabs tabsMode', async () => {
|
|||||||
expect(container).toMatchSnapshot();
|
expect(container).toMatchSnapshot();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 3. 通过 source 获取数据
|
||||||
test('Renderer:tabs source', async () => {
|
test('Renderer:tabs source', async () => {
|
||||||
const {getByText} = render(
|
const {getByText} = render(
|
||||||
amisRender(
|
amisRender(
|
||||||
@ -149,6 +169,7 @@ test('Renderer:tabs source', async () => {
|
|||||||
expect(!getByText('支出')).toBeFalsy();
|
expect(!getByText('支出')).toBeFalsy();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 4. 配置toolbar实现顶部工具栏
|
||||||
test('Renderer:tabs toolbar', async () => {
|
test('Renderer:tabs toolbar', async () => {
|
||||||
const {container, getByText} = render(
|
const {container, getByText} = render(
|
||||||
amisRender(
|
amisRender(
|
||||||
@ -198,6 +219,7 @@ test('Renderer:tabs toolbar', async () => {
|
|||||||
expect(container).toMatchSnapshot();
|
expect(container).toMatchSnapshot();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 5. addable 可新增
|
||||||
test('Renderer:tabs addable', async () => {
|
test('Renderer:tabs addable', async () => {
|
||||||
const {container, getByText} = render(
|
const {container, getByText} = render(
|
||||||
amisRender(
|
amisRender(
|
||||||
@ -257,6 +279,7 @@ const fireMouseEvent = function (
|
|||||||
return elem.dispatchEvent(evt);
|
return elem.dispatchEvent(evt);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// 6. draggable 可拖拽
|
||||||
test('Renderer:tabs draggable', async () => {
|
test('Renderer:tabs draggable', async () => {
|
||||||
const {container, getByText} = render(
|
const {container, getByText} = render(
|
||||||
amisRender(
|
amisRender(
|
||||||
@ -283,6 +306,7 @@ test('Renderer:tabs draggable', async () => {
|
|||||||
expect(container.querySelectorAll('[draggable=true]').length).toBe(1);
|
expect(container.querySelectorAll('[draggable=true]').length).toBe(1);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 7. showTip 提示信息
|
||||||
test('Renderer:tabs showTip', async () => {
|
test('Renderer:tabs showTip', async () => {
|
||||||
const {getByText, getAllByText} = render(
|
const {getByText, getAllByText} = render(
|
||||||
amisRender(
|
amisRender(
|
||||||
@ -313,6 +337,7 @@ test('Renderer:tabs showTip', async () => {
|
|||||||
expect(!document.querySelector('.showTipClassName')).toBeFalsy();
|
expect(!document.querySelector('.showTipClassName')).toBeFalsy();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 8. editable 可编辑
|
||||||
test('Renderer:tabs editable', async () => {
|
test('Renderer:tabs editable', async () => {
|
||||||
const {container, getByText} = render(
|
const {container, getByText} = render(
|
||||||
amisRender(
|
amisRender(
|
||||||
@ -342,6 +367,7 @@ test('Renderer:tabs editable', async () => {
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 9. closable 可关闭标签
|
||||||
test('Renderer:tabs closable', async () => {
|
test('Renderer:tabs closable', async () => {
|
||||||
const {container, getByText} = render(
|
const {container, getByText} = render(
|
||||||
amisRender(
|
amisRender(
|
||||||
@ -376,6 +402,7 @@ test('Renderer:tabs closable', async () => {
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 10. disabled 可禁用
|
||||||
test('Renderer:tabs disabled', async () => {
|
test('Renderer:tabs disabled', async () => {
|
||||||
const {container, getByText} = render(
|
const {container, getByText} = render(
|
||||||
amisRender(
|
amisRender(
|
||||||
@ -408,3 +435,113 @@ test('Renderer:tabs disabled', async () => {
|
|||||||
.classList.contains('is-active')
|
.classList.contains('is-active')
|
||||||
).toBeTruthy();
|
).toBeTruthy();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 11. tabs 作为表单项
|
||||||
|
test('Renderer:tabs as form item', async () => {
|
||||||
|
const onSubmit = jest.fn();
|
||||||
|
const {container, getByText} = render(
|
||||||
|
amisRender(
|
||||||
|
{
|
||||||
|
type: 'form',
|
||||||
|
submitText: 'submitText',
|
||||||
|
body: [
|
||||||
|
{
|
||||||
|
type: 'tabs',
|
||||||
|
name: 'tab',
|
||||||
|
tabs: [
|
||||||
|
{
|
||||||
|
title: 'Tab 1',
|
||||||
|
tab: 'Content 1',
|
||||||
|
value: 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Tab 2',
|
||||||
|
tab: 'Content 2'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{onSubmit},
|
||||||
|
makeEnv()
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
|
fireEvent.click(getByText('submitText'));
|
||||||
|
await wait(100);
|
||||||
|
expect(onSubmit).toBeCalled();
|
||||||
|
expect(onSubmit.mock.calls[0][0]).toEqual({
|
||||||
|
tab: 1
|
||||||
|
});
|
||||||
|
|
||||||
|
fireEvent.click(getByText('Tab 2'));
|
||||||
|
await wait(500);
|
||||||
|
fireEvent.click(getByText('submitText'));
|
||||||
|
|
||||||
|
await wait(100);
|
||||||
|
expect(onSubmit).toBeCalledTimes(2);
|
||||||
|
expect(onSubmit.mock.calls[1][0]).toEqual({
|
||||||
|
tab: 'Tab 2'
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(container).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
|
||||||
|
// 12. collapseOnExceed 配置超出折叠
|
||||||
|
test('Renderer:tabs with collapseOnExceed', async () => {
|
||||||
|
const {container, getByText} = render(
|
||||||
|
amisRender(
|
||||||
|
{
|
||||||
|
type: 'tabs',
|
||||||
|
tabsMode: 'tiled',
|
||||||
|
tabs: [
|
||||||
|
{
|
||||||
|
title: 'Tab 1',
|
||||||
|
tab: 'Content 1'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Tab 2',
|
||||||
|
tab: 'Content 2'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Tab 3',
|
||||||
|
tab: 'Content 3'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Tab 4',
|
||||||
|
tab: 'Content 4'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Tab 5',
|
||||||
|
tab: 'Content 5'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
collapseOnExceed: 3
|
||||||
|
},
|
||||||
|
{},
|
||||||
|
makeEnv()
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(container.querySelectorAll('.cxd-Tabs-link')!.length).toBe(3);
|
||||||
|
expect(
|
||||||
|
container.querySelector('.is-active.cxd-Tabs-pane')!
|
||||||
|
).toHaveTextContent('Content 1');
|
||||||
|
|
||||||
|
const showMore = container.querySelector('.cxd-Tabs-link .cxd-Tabs-togglor')!;
|
||||||
|
expect(showMore).toBeInTheDocument();
|
||||||
|
|
||||||
|
fireEvent.click(showMore);
|
||||||
|
await wait(100);
|
||||||
|
|
||||||
|
expect(
|
||||||
|
container.querySelectorAll('.cxd-Tabs-PopOver .cxd-Tabs-link')!.length
|
||||||
|
).toBe(3);
|
||||||
|
expect(container).toMatchSnapshot('popover show');
|
||||||
|
|
||||||
|
fireEvent.click(getByText('Tab 5'));
|
||||||
|
await wait(100);
|
||||||
|
expect(
|
||||||
|
container.querySelector('.is-active.cxd-Tabs-pane')!
|
||||||
|
).toHaveTextContent('Content 5');
|
||||||
|
});
|
||||||
|
|||||||
@ -1,5 +1,203 @@
|
|||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`Renderer:tabs as form item 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-Tabs cxd-Tabs--line"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="cxd-Tabs-linksContainer-wrapper"
|
||||||
|
style="position: relative;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="cxd-Tabs-linksContainer"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="cxd-Tabs-linksContainer-main"
|
||||||
|
>
|
||||||
|
<ul
|
||||||
|
class="cxd-Tabs-links"
|
||||||
|
role="tablist"
|
||||||
|
>
|
||||||
|
<li
|
||||||
|
class="cxd-Tabs-link"
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
title="Tab 1"
|
||||||
|
>
|
||||||
|
Tab 1
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li
|
||||||
|
class="cxd-Tabs-link is-active"
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
title="Tab 2"
|
||||||
|
>
|
||||||
|
Tab 2
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</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="cxd-Tabs-content"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="cxd-Tabs-pane"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="cxd-TplField"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
Content 1
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="in is-active cxd-Tabs-pane"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="cxd-TplField"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
Content 2
|
||||||
|
</span>
|
||||||
|
</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 cxd-Button--size-default"
|
||||||
|
type="submit"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
submitText
|
||||||
|
</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:tabs change active tab 1`] = `
|
exports[`Renderer:tabs change active tab 1`] = `
|
||||||
<div>
|
<div>
|
||||||
<div
|
<div
|
||||||
@ -1244,3 +1442,240 @@ exports[`Renderer:tabs toolbar 1`] = `
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
exports[`Renderer:tabs with collapseOnExceed: popover show 1`] = `
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
class="cxd-Tabs cxd-Tabs--tiled has-popover"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="cxd-Tabs-linksContainer-wrapper"
|
||||||
|
style="position: relative;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="cxd-Tabs-linksContainer"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="cxd-Tabs-linksContainer-main"
|
||||||
|
>
|
||||||
|
<ul
|
||||||
|
class="cxd-Tabs-links"
|
||||||
|
role="tablist"
|
||||||
|
>
|
||||||
|
<li
|
||||||
|
class="cxd-Tabs-link is-active"
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
title="Tab 1"
|
||||||
|
>
|
||||||
|
Tab 1
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li
|
||||||
|
class="cxd-Tabs-link"
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
title="Tab 2"
|
||||||
|
>
|
||||||
|
Tab 2
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li
|
||||||
|
class="cxd-Tabs-link"
|
||||||
|
style="position: relative;"
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
class="cxd-Tabs-togglor is-opened"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
更多
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="cxd-Tabs-togglor-arrow"
|
||||||
|
>
|
||||||
|
<icon-mock
|
||||||
|
classname="icon icon-right-arrow-bold"
|
||||||
|
icon="right-arrow-bold"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
<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>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</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="cxd-Tabs-content"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="in is-active cxd-Tabs-pane"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="cxd-TplField"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
Content 1
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="cxd-PopOver cxd-Tabs-PopOver cxd-PopOver--centerTopCenterBottom"
|
||||||
|
style="display: block; min-width: auto; left: 0px; top: 0px; position: relative;"
|
||||||
|
theme="cxd"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="cxd-PopOver-overlay"
|
||||||
|
/>
|
||||||
|
<ul
|
||||||
|
class="cxd-Tabs-PopOverList cxd-DropDown-menu"
|
||||||
|
>
|
||||||
|
<li
|
||||||
|
class="cxd-Tabs-link"
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
title="Tab 3"
|
||||||
|
>
|
||||||
|
Tab 3
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li
|
||||||
|
class="cxd-Tabs-link"
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
title="Tab 4"
|
||||||
|
>
|
||||||
|
Tab 4
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li
|
||||||
|
class="cxd-Tabs-link"
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
title="Tab 5"
|
||||||
|
>
|
||||||
|
Tab 5
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<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>
|
||||||
|
`;
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user