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:
parent
966f6df162
commit
cb5452d429
@ -1,6 +1,6 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Renderer:tabs-transfer 1`] = `
|
||||
exports[`Renderer:tabsTransfer 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="cxd-Page"
|
||||
@ -484,7 +484,7 @@ exports[`Renderer:tabs-transfer 1`] = `
|
||||
<span
|
||||
class=""
|
||||
>
|
||||
法师
|
||||
法师2
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -497,7 +497,7 @@ exports[`Renderer:tabs-transfer 1`] = `
|
||||
<span
|
||||
class=""
|
||||
>
|
||||
战士
|
||||
战士2
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -510,7 +510,7 @@ exports[`Renderer:tabs-transfer 1`] = `
|
||||
<span
|
||||
class=""
|
||||
>
|
||||
打野
|
||||
打野2
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -571,7 +571,580 @@ exports[`Renderer:tabs-transfer 1`] = `
|
||||
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>
|
||||
</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>
|
||||
</button>
|
||||
</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 {render as amisRender} from '../../../src';
|
||||
import {makeEnv} from '../../helper';
|
||||
import {makeEnv, wait} from '../../helper';
|
||||
|
||||
test('Renderer:tabs-transfer', () => {
|
||||
const {container} = render(
|
||||
test('Renderer:tabsTransfer', async () => {
|
||||
const onSubmit = jest.fn();
|
||||
const {container, getByText} = render(
|
||||
amisRender(
|
||||
{
|
||||
type: 'page',
|
||||
body: {
|
||||
type: 'form',
|
||||
api: '/api/mock2/form/saveForm',
|
||||
submitText: 'submitText',
|
||||
body: [
|
||||
{
|
||||
label: '组合穿梭器',
|
||||
@ -71,40 +79,40 @@ test('Renderer:tabs-transfer', () => {
|
||||
selectMode: 'chained',
|
||||
children: [
|
||||
{
|
||||
label: '法师',
|
||||
label: '法师2',
|
||||
children: [
|
||||
{
|
||||
label: '诸葛亮',
|
||||
label: '诸葛亮2',
|
||||
value: 'zhugeliang2'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '战士',
|
||||
label: '战士2',
|
||||
children: [
|
||||
{
|
||||
label: '曹操',
|
||||
label: '曹操2',
|
||||
value: 'caocao2'
|
||||
},
|
||||
{
|
||||
label: '钟无艳',
|
||||
label: '钟无艳2',
|
||||
value: 'zhongwuyan2'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '打野',
|
||||
label: '打野2',
|
||||
children: [
|
||||
{
|
||||
label: '李白',
|
||||
label: '李白2',
|
||||
value: 'libai2'
|
||||
},
|
||||
{
|
||||
label: '韩信',
|
||||
label: '韩信2',
|
||||
value: 'hanxin2'
|
||||
},
|
||||
{
|
||||
label: '云中君',
|
||||
label: '云中君2',
|
||||
value: 'yunzhongjun2'
|
||||
}
|
||||
]
|
||||
@ -116,10 +124,149 @@ test('Renderer:tabs-transfer', () => {
|
||||
]
|
||||
}
|
||||
},
|
||||
{},
|
||||
{onSubmit},
|
||||
makeEnv({})
|
||||
)
|
||||
);
|
||||
|
||||
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 '../../../src';
|
||||
import {render as amisRender} from '../../../src';
|
||||
import {makeEnv, wait} from '../../helper';
|
||||
|
||||
test('Renderer:TabsTransferPicker', async () => {
|
||||
const {container, findByText} = render(
|
||||
const {container, findByText, baseElement} = render(
|
||||
amisRender(
|
||||
{
|
||||
type: 'page',
|
||||
@ -151,28 +157,28 @@ test('Renderer:TabsTransferPicker', async () => {
|
||||
const picker = await findByText('请选择');
|
||||
|
||||
fireEvent.click(picker);
|
||||
await wait(500);
|
||||
expect(baseElement.querySelector('.cxd-Modal')!).toBeInTheDocument();
|
||||
|
||||
const option = await findByText('诸葛亮');
|
||||
|
||||
const checkbox = document.querySelector('.cxd-Checkbox input')!;
|
||||
expect(option).toBeInTheDocument();
|
||||
fireEvent.click(option);
|
||||
|
||||
fireEvent.click(checkbox);
|
||||
|
||||
await wait(500);
|
||||
await wait(200);
|
||||
expect(baseElement).toMatchSnapshot('dialog open');
|
||||
|
||||
const confirm = await findByText('确认');
|
||||
|
||||
expect(confirm).toBeInTheDocument();
|
||||
fireEvent.click(confirm);
|
||||
|
||||
await wait(500);
|
||||
await wait(1000);
|
||||
expect(baseElement.querySelector('.cxd-Modal')!).not.toBeInTheDocument();
|
||||
|
||||
// TODO: 应该是点了但不知为何没反应
|
||||
// screen.debug();
|
||||
// const dialog = document.querySelector('.cxd-Selections-item')!;
|
||||
const valueWrap = container.querySelector('.cxd-ResultBox-value-wrap')!;
|
||||
expect(valueWrap).not.toHaveTextContent('请选择');
|
||||
expect(valueWrap).toHaveTextContent('诸葛亮');
|
||||
|
||||
// console.log('...dialog', dialog.innerHTML);
|
||||
|
||||
// screen.debug();
|
||||
|
||||
// expect(container).toMatchSnapshot();
|
||||
expect(baseElement).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 {
|
||||
render,
|
||||
cleanup,
|
||||
@ -16,6 +33,7 @@ afterEach(() => {
|
||||
clearStoresCache();
|
||||
});
|
||||
|
||||
// 1. 点击切换
|
||||
test('Renderer:tabs change active tab', async () => {
|
||||
const {container, getByText} = render(
|
||||
amisRender(
|
||||
@ -57,6 +75,7 @@ test('Renderer:tabs change active tab', async () => {
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
// 2. 各种展示模式
|
||||
test('Renderer:tabs tabsMode', async () => {
|
||||
const baseSchema = {
|
||||
type: 'tabs',
|
||||
@ -107,6 +126,7 @@ test('Renderer:tabs tabsMode', async () => {
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
// 3. 通过 source 获取数据
|
||||
test('Renderer:tabs source', async () => {
|
||||
const {getByText} = render(
|
||||
amisRender(
|
||||
@ -149,6 +169,7 @@ test('Renderer:tabs source', async () => {
|
||||
expect(!getByText('支出')).toBeFalsy();
|
||||
});
|
||||
|
||||
// 4. 配置toolbar实现顶部工具栏
|
||||
test('Renderer:tabs toolbar', async () => {
|
||||
const {container, getByText} = render(
|
||||
amisRender(
|
||||
@ -198,6 +219,7 @@ test('Renderer:tabs toolbar', async () => {
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
// 5. addable 可新增
|
||||
test('Renderer:tabs addable', async () => {
|
||||
const {container, getByText} = render(
|
||||
amisRender(
|
||||
@ -257,6 +279,7 @@ const fireMouseEvent = function (
|
||||
return elem.dispatchEvent(evt);
|
||||
};
|
||||
|
||||
// 6. draggable 可拖拽
|
||||
test('Renderer:tabs draggable', async () => {
|
||||
const {container, getByText} = render(
|
||||
amisRender(
|
||||
@ -283,6 +306,7 @@ test('Renderer:tabs draggable', async () => {
|
||||
expect(container.querySelectorAll('[draggable=true]').length).toBe(1);
|
||||
});
|
||||
|
||||
// 7. showTip 提示信息
|
||||
test('Renderer:tabs showTip', async () => {
|
||||
const {getByText, getAllByText} = render(
|
||||
amisRender(
|
||||
@ -313,6 +337,7 @@ test('Renderer:tabs showTip', async () => {
|
||||
expect(!document.querySelector('.showTipClassName')).toBeFalsy();
|
||||
});
|
||||
|
||||
// 8. editable 可编辑
|
||||
test('Renderer:tabs editable', async () => {
|
||||
const {container, getByText} = render(
|
||||
amisRender(
|
||||
@ -342,6 +367,7 @@ test('Renderer:tabs editable', async () => {
|
||||
});
|
||||
});
|
||||
|
||||
// 9. closable 可关闭标签
|
||||
test('Renderer:tabs closable', async () => {
|
||||
const {container, getByText} = render(
|
||||
amisRender(
|
||||
@ -376,6 +402,7 @@ test('Renderer:tabs closable', async () => {
|
||||
});
|
||||
});
|
||||
|
||||
// 10. disabled 可禁用
|
||||
test('Renderer:tabs disabled', async () => {
|
||||
const {container, getByText} = render(
|
||||
amisRender(
|
||||
@ -408,3 +435,113 @@ test('Renderer:tabs disabled', async () => {
|
||||
.classList.contains('is-active')
|
||||
).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
|
||||
|
||||
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`] = `
|
||||
<div>
|
||||
<div
|
||||
@ -1244,3 +1442,240 @@ exports[`Renderer:tabs toolbar 1`] = `
|
||||
</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