Skip to content

Commit 4e21633

Browse files
tangjinzhoutangjinzhou
committed
feat: add anchor component docs & test
1 parent b883cc7 commit 4e21633

File tree

11 files changed

+234
-28
lines changed

11 files changed

+234
-28
lines changed

‎components/anchor/Anchor.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -79,8 +79,8 @@ export const AnchorProps = {
7979
prefixCls: PropTypes.string,
8080
offsetTop: PropTypes.number,
8181
bounds: PropTypes.number,
82-
affix: PropTypes.boolean,
83-
showInkInFixed: PropTypes.boolean,
82+
affix: PropTypes.bool,
83+
showInkInFixed: PropTypes.bool,
8484
getContainer: PropTypes.func,
8585
}
8686

‎components/anchor/__tests__/Anchor.test.js

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
import { mount } from '@vue/test-utils'
2+
import Vue from 'vue'
3+
import Anchor from '..'
4+
5+
const { Link } = Anchor
6+
7+
describe('Anchor Render', () => {
8+
it('Anchor render perfectly', (done) => {
9+
const wrapper = mount({
10+
render () {
11+
return (
12+
<Anchor ref='anchor'>
13+
<Link href='#API' title='API' />
14+
</Anchor>
15+
)
16+
},
17+
}, { sync: false })
18+
Vue.nextTick(() => {
19+
wrapper.find('a[href="#API"]').trigger('click')
20+
wrapper.vm.$refs.anchor.handleScroll()
21+
expect(wrapper.vm.$refs.anchor.$data.activeLink).not.toBe(null)
22+
done()
23+
})
24+
})
25+
26+
it('Anchor render perfectly for complete href - click', (done) => {
27+
const wrapper = mount({
28+
render () {
29+
return (
30+
<Anchor ref='anchor'>
31+
<Link href='http://www.example.com/#API' title='API' />
32+
</Anchor>
33+
)
34+
},
35+
}, { sync: false })
36+
Vue.nextTick(() => {
37+
wrapper.find('a[href="http://www.example.com/#API"]').trigger('click')
38+
expect(wrapper.vm.$refs.anchor.$data.activeLink).toBe('http://www.example.com/#API')
39+
done()
40+
})
41+
})
42+
43+
it('Anchor render perfectly for complete href - scoll', (done) => {
44+
const wrapper = mount({
45+
render () {
46+
return (
47+
<div>
48+
<div id='API'>Hello</div>
49+
<Anchor ref='anchor'>
50+
<Link href='http://www.example.com/#API' title='API' />
51+
</Anchor>
52+
</div>
53+
)
54+
},
55+
}, { sync: false, attachToDocument: true })
56+
Vue.nextTick(() => {
57+
wrapper.vm.$refs.anchor.handleScroll()
58+
expect(wrapper.vm.$refs.anchor.$data.activeLink).toBe('http://www.example.com/#API')
59+
done()
60+
})
61+
})
62+
63+
it('Anchor render perfectly for complete href - scollTo', (done) => {
64+
const wrapper = mount({
65+
render () {
66+
return (
67+
<div>
68+
<div id='API'>Hello</div>
69+
<Anchor ref='anchor'>
70+
<Link href='##API' title='API' />
71+
</Anchor>
72+
</div>
73+
)
74+
},
75+
}, { sync: false, attachToDocument: true })
76+
Vue.nextTick(() => {
77+
wrapper.vm.$refs.anchor.handleScrollTo('##API')
78+
expect(wrapper.vm.$refs.anchor.$data.activeLink).toBe('##API')
79+
done()
80+
})
81+
})
82+
})

‎components/anchor/__tests__/__snapshots__/demo.test.js.snap

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`renders ./components/anchor/demo/basic.md correctly 1`] = `
4+
<div>
5+
<div class="">
6+
<div class="ant-anchor-wrapper" style="max-height: 100vh;">
7+
<div class="ant-anchor">
8+
<div class="ant-anchor-ink"><span class="ant-anchor-ink-ball"></span></div>
9+
<div class="ant-anchor-link">
10+
<a href="#components-anchor-demo-basic" title="Basic demo" class="ant-anchor-link-title">Basic demo</a>
11+
</div>
12+
<div class="ant-anchor-link">
13+
<a href="#components-anchor-demo-static-anchor" title="Fixed demo" class="ant-anchor-link-title">Fixed demo</a>
14+
</div>
15+
<div class="ant-anchor-link">
16+
<a href="#API" title="API" class="ant-anchor-link-title">API</a>
17+
<div class="ant-anchor-link">
18+
<a href="#Anchor-Props" title="Anchor Props" class="ant-anchor-link-title">Anchor Props</a>
19+
</div>
20+
<div class="ant-anchor-link">
21+
<a href="#Link-Props" title="Link Props" class="ant-anchor-link-title">Link Props</a>
22+
</div>
23+
</div>
24+
</div>
25+
</div>
26+
</div>
27+
</div>
28+
`;
29+
30+
exports[`renders ./components/anchor/demo/static.md correctly 1`] = `
31+
<div class="ant-anchor-wrapper" style="max-height: 100vh;">
32+
<div class="ant-anchor fixed">
33+
<div class="ant-anchor-ink"><span class="ant-anchor-ink-ball"></span></div>
34+
<div class="ant-anchor-link">
35+
<a href="#components-anchor-demo-basic" title="Basic demo" class="ant-anchor-link-title">Basic demo</a>
36+
</div>
37+
<div class="ant-anchor-link">
38+
<a href="#components-anchor-demo-static-anchor" title="Fixed demo" class="ant-anchor-link-title">Fixed demo</a>
39+
</div>
40+
<div class="ant-anchor-link">
41+
<a href="#API" title="API" class="ant-anchor-link-title">API</a>
42+
<div class="ant-anchor-link">
43+
<a href="#Anchor-Props" title="Anchor Props" class="ant-anchor-link-title">Anchor Props</a>
44+
</div>
45+
<div class="ant-anchor-link">
46+
<a href="#Link-Props" title="Link Props" class="ant-anchor-link-title">Link Props</a>
47+
</div>
48+
</div>
49+
</div>
50+
</div>
51+
`;

‎components/anchor/demo/basic.md

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<cn>
2+
#### 基本
3+
最简单的用法。
4+
</cn>
5+
6+
<us>
7+
#### basic
8+
The simplest usage.
9+
</us>
10+
11+
```html
12+
<template>
13+
<a-anchor>
14+
<a-anchor-link href="#components-anchor-demo-basic" title="Basic demo" />
15+
<a-anchor-link href="#components-anchor-demo-static-anchor" title="Fixed demo" />
16+
<a-anchor-link href="#API" title="API">
17+
<a-anchor-link href="#Anchor-Props" title="Anchor Props" />
18+
<a-anchor-link href="#Link-Props" title="Link Props" />
19+
</a-anchor-link>
20+
</a-anchor>
21+
</template>
22+
```

‎components/anchor/demo/index.vue

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<script>
2+
import Basic from './basic'
3+
import Static from './static'
4+
5+
import CN from '../index.zh-CN.md'
6+
import US from '../index.en-US.md'
7+
const md = {
8+
cn: `# Anchor 锚点
9+
用于跳转到页面指定位置。
10+
11+
## 何时使用
12+
13+
需要展现当前页面上可供跳转的锚点链接，以及快速在锚点之间跳转。
14+
## 代码演示`,
15+
us: `# Anchor
16+
17+
Hyperlinks to scroll on one page.
18+
19+
## When To Use
20+
21+
For displaying anchor hyperlinks on page and jumping between them.
22+
## Examples
23+
`,
24+
}
25+
export default {
26+
category: 'Components',
27+
subtitle: '锚点',
28+
cols: 2,
29+
type: 'Other',
30+
title: 'Anchor',
31+
render () {
32+
return (
33+
<div id='components-anchor-demo'>
34+
<md cn={md.cn} us={md.us}/>
35+
<Basic/>
36+
<Static/>
37+
<api>
38+
<CN slot='cn' />
39+
<US/>
40+
</api>
41+
</div>
42+
)
43+
},
44+
}
45+
</script>
46+
<style>
47+
#components-anchor-demo .ant-affix {
48+
z-index: 11;
49+
}
50+
</style>

‎components/anchor/demo/static.md

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<cn>
2+
#### 静态位置
3+
不浮动，状态不随页面滚动变化。
4+
</cn>
5+
6+
<us>
7+
#### Static Anchor
8+
Do not change state when page is scrolling.
9+
</us>
10+
11+
```html
12+
<template>
13+
<a-anchor :affix="false">
14+
<a-anchor-link href="#components-anchor-demo-basic" title="Basic demo" />
15+
<a-anchor-link href="#components-anchor-demo-static-anchor" title="Fixed demo" />
16+
<a-anchor-link href="#API" title="API">
17+
<a-anchor-link href="#Anchor-Props" title="Anchor Props" />
18+
<a-anchor-link href="#Link-Props" title="Link Props" />
19+
</a-anchor-link>
20+
</a-anchor>
21+
</template>
22+
```

‎components/anchor/index.en-US.md

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,3 @@
1-
---
2-
category: Components
3-
type: Other
4-
cols: 2
5-
title: Anchor
6-
---
7-
8-
Hyperlinks to scroll on one page.
9-
10-
## When To Use
11-
12-
For displaying anchor hyperlinks on page and jumping between them.
131

142
## API
153

‎components/anchor/index.zh-CN.md

Lines changed: 0 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,3 @@
1-
---
2-
category: Components
3-
subtitle: 锚点
4-
cols: 2
5-
type: Other
6-
title: Anchor
7-
---
8-
9-
用于跳转到页面指定位置。
10-
11-
## 何时使用
12-
13-
需要展现当前页面上可供跳转的锚点链接，以及快速在锚点之间跳转。
141

152
## API
163

‎site/components.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import Vue from 'vue'
22
import {
33
Affix,
4-
// Anchor,
4+
Anchor,
55
AutoComplete,
66
Alert,
77
Avatar,
@@ -57,6 +57,8 @@ import {
5757
} from 'antd'
5858

5959
Vue.component(Affix.name, Affix) // a-affix
60+
Vue.component(Anchor.name, Anchor)
61+
Vue.component(Anchor.Link.name, Anchor.Link)
6062
Vue.component(AutoComplete.name, AutoComplete)
6163
Vue.component(Alert.name, Alert)
6264
Vue.component(Avatar.name, Avatar)

‎site/demo.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,3 +45,4 @@ export { default as upload } from 'antd/upload/demo/index.vue'
4545
export { default as tree } from 'antd/tree/demo/index.vue'
4646
export { default as layout } from 'antd/layout/demo/index.vue'
4747
export { default as form } from 'antd/form/demo/index.vue'
48+
export { default as anchor } from 'antd/anchor/demo/index.vue'

0 commit comments

Comments
 (0)