2022-12-16 10:17:17 +08:00
|
|
|
|
/**
|
|
|
|
|
* 组件名称:AnchorNav 锚点导航
|
|
|
|
|
* 单测内容:
|
|
|
|
|
* 1. 基本使用
|
|
|
|
|
* 2. 水平模式
|
|
|
|
|
* 3. 默认定位到某个区域
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
import React from 'react';
|
2022-02-10 20:15:39 +08:00
|
|
|
|
import {render} from '@testing-library/react';
|
2022-06-02 10:00:09 +08:00
|
|
|
|
import '../../src';
|
|
|
|
|
import {render as amisRender} from '../../src';
|
2022-12-16 10:17:17 +08:00
|
|
|
|
import {makeEnv, wait} from '../helper';
|
|
|
|
|
|
|
|
|
|
const defaultLinks = [
|
|
|
|
|
{
|
|
|
|
|
title: '基本信息',
|
|
|
|
|
body: [
|
|
|
|
|
{
|
|
|
|
|
type: 'form',
|
|
|
|
|
title: '基本信息',
|
|
|
|
|
body: [
|
|
|
|
|
{
|
|
|
|
|
type: 'input-text',
|
|
|
|
|
name: 'name',
|
|
|
|
|
label: '姓名:'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: 'email',
|
|
|
|
|
type: 'input-email',
|
|
|
|
|
label: '邮箱:'
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '工作信息',
|
|
|
|
|
body: [
|
|
|
|
|
{
|
|
|
|
|
type: 'form',
|
|
|
|
|
title: '工作信息',
|
|
|
|
|
body: [
|
|
|
|
|
{
|
|
|
|
|
type: 'input-text',
|
|
|
|
|
name: 'cname',
|
|
|
|
|
label: '公司名称:'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: 'caddress',
|
|
|
|
|
type: 'input-text',
|
|
|
|
|
label: '公司地址:'
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '兴趣爱好',
|
|
|
|
|
body: [
|
|
|
|
|
{
|
|
|
|
|
type: 'form',
|
|
|
|
|
title: '兴趣爱好',
|
|
|
|
|
body: [
|
|
|
|
|
{
|
|
|
|
|
type: 'input-text',
|
|
|
|
|
name: 'interest1',
|
|
|
|
|
label: '兴趣爱好1:'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: 'interest2',
|
|
|
|
|
type: 'input-text',
|
|
|
|
|
label: '兴趣爱好2:'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: 'interest3',
|
|
|
|
|
type: 'input-text',
|
|
|
|
|
label: '兴趣爱好3:'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: 'interest4',
|
|
|
|
|
type: 'input-text',
|
|
|
|
|
label: '兴趣爱好4:'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: 'interest5',
|
|
|
|
|
type: 'input-text',
|
|
|
|
|
label: '兴趣爱好5:'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: 'interest6',
|
|
|
|
|
type: 'input-text',
|
|
|
|
|
label: '兴趣爱好6:'
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
];
|
2022-02-10 20:15:39 +08:00
|
|
|
|
|
2022-12-16 10:17:17 +08:00
|
|
|
|
// 1. 基本使用
|
2022-02-10 20:15:39 +08:00
|
|
|
|
test('Renderer:anchorNav', () => {
|
|
|
|
|
const {container} = render(
|
|
|
|
|
amisRender(
|
|
|
|
|
{
|
|
|
|
|
type: 'page',
|
|
|
|
|
body: {
|
|
|
|
|
type: 'anchor-nav',
|
2022-12-16 10:17:17 +08:00
|
|
|
|
links: defaultLinks,
|
|
|
|
|
linkClassName: 'linksWrap',
|
|
|
|
|
sectionClassName: 'sectionsWrap'
|
2022-02-10 20:15:39 +08:00
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{},
|
|
|
|
|
makeEnv({})
|
|
|
|
|
)
|
|
|
|
|
);
|
|
|
|
|
|
2022-12-16 10:17:17 +08:00
|
|
|
|
expect(container.querySelector('.cxd-AnchorNav-link-wrap')).toHaveClass(
|
|
|
|
|
'linksWrap'
|
|
|
|
|
);
|
|
|
|
|
expect(container.querySelector('.cxd-AnchorNav-section-wrap')).toHaveClass(
|
|
|
|
|
'sectionsWrap'
|
|
|
|
|
);
|
|
|
|
|
|
2022-02-10 20:15:39 +08:00
|
|
|
|
expect(container).toMatchSnapshot();
|
|
|
|
|
});
|
|
|
|
|
|
2022-12-16 10:17:17 +08:00
|
|
|
|
// 2. 水平模式
|
|
|
|
|
test('Renderer:anchorNav with horizontal', () => {
|
2022-02-10 20:15:39 +08:00
|
|
|
|
const {container} = render(
|
|
|
|
|
amisRender(
|
|
|
|
|
{
|
|
|
|
|
type: 'page',
|
|
|
|
|
body: {
|
|
|
|
|
type: 'anchor-nav',
|
|
|
|
|
direction: 'horizontal',
|
|
|
|
|
links: [
|
|
|
|
|
{
|
|
|
|
|
title: '基本信息',
|
|
|
|
|
body: [
|
|
|
|
|
{
|
|
|
|
|
type: 'form',
|
|
|
|
|
title: '基本信息',
|
|
|
|
|
body: [
|
|
|
|
|
{
|
|
|
|
|
type: 'input-text',
|
|
|
|
|
name: 'name',
|
|
|
|
|
label: '姓名:'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: 'email',
|
|
|
|
|
type: 'input-email',
|
|
|
|
|
label: '邮箱:'
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{},
|
|
|
|
|
makeEnv({})
|
|
|
|
|
)
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
expect(container).toMatchSnapshot();
|
|
|
|
|
});
|
2022-12-16 10:17:17 +08:00
|
|
|
|
|
|
|
|
|
// 3.默认定位到某个区域
|
|
|
|
|
test('Renderer:anchorNav with active', async () => {
|
|
|
|
|
const {container} = render(
|
|
|
|
|
amisRender(
|
|
|
|
|
{
|
|
|
|
|
type: 'page',
|
|
|
|
|
body: [
|
|
|
|
|
{
|
|
|
|
|
type: 'anchor-nav',
|
|
|
|
|
className: 'one',
|
|
|
|
|
active: 2,
|
|
|
|
|
links: defaultLinks
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
type: 'anchor-nav',
|
|
|
|
|
className: 'two',
|
|
|
|
|
active: 'work',
|
|
|
|
|
links: defaultLinks.map((item, index) => ({
|
|
|
|
|
...item,
|
|
|
|
|
href: ['base', 'work', 'interest'][index]
|
|
|
|
|
}))
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{},
|
|
|
|
|
makeEnv({})
|
|
|
|
|
)
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
await wait(500);
|
|
|
|
|
|
|
|
|
|
expect(
|
|
|
|
|
container.querySelector('.one .cxd-AnchorNav-link.is-active')
|
|
|
|
|
).toHaveTextContent('兴趣爱好');
|
|
|
|
|
expect(
|
|
|
|
|
container.querySelector('.two .cxd-AnchorNav-link.is-active')
|
|
|
|
|
).toHaveTextContent('工作信息');
|
|
|
|
|
});
|