chore: tabs、tabsTransfer、tabsTransferPicker 单测补充 (#5821)

* tabs

* tabsTransfer

* d

* tabsTransferPicker
This commit is contained in:
sansiro 2022-11-28 09:58:47 +08:00 committed by GitHub
parent 966f6df162
commit cb5452d429
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 2668 additions and 37 deletions

View File

@ -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>

View File

@ -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();
});

View File

@ -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();
});

View File

@ -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');
});

View File

@ -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>
`;