amis2/packages/amis/__tests__/renderers/AnchorNav.test.tsx

209 lines
4.4 KiB
TypeScript
Raw Normal View History

2022-12-16 10:17:17 +08:00
/**
* AnchorNav
*
* 1. 使
* 2.
* 3.
*/
import React from 'react';
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-12-16 10:17:17 +08:00
// 1. 基本使用
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'
}
},
{},
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'
);
expect(container).toMatchSnapshot();
});
2022-12-16 10:17:17 +08:00
// 2. 水平模式
test('Renderer:anchorNav with horizontal', () => {
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('工作信息');
});