diff --git a/components/anchor/Anchor.jsx b/components/anchor/Anchor.jsx index cbadc4be9..c93007809 100644 --- a/components/anchor/Anchor.jsx +++ b/components/anchor/Anchor.jsx @@ -79,8 +79,8 @@ export const AnchorProps = { prefixCls: PropTypes.string, offsetTop: PropTypes.number, bounds: PropTypes.number, - affix: PropTypes.boolean, - showInkInFixed: PropTypes.boolean, + affix: PropTypes.bool, + showInkInFixed: PropTypes.bool, getContainer: PropTypes.func, } diff --git a/components/anchor/__tests__/Anchor.test.js b/components/anchor/__tests__/Anchor.test.js new file mode 100644 index 000000000..91b259319 --- /dev/null +++ b/components/anchor/__tests__/Anchor.test.js @@ -0,0 +1,82 @@ +import { mount } from '@vue/test-utils' +import Vue from 'vue' +import Anchor from '..' + +const { Link } = Anchor + +describe('Anchor Render', () => { + it('Anchor render perfectly', (done) => { + const wrapper = mount({ + render () { + return ( + + + + ) + }, + }, { sync: false }) + Vue.nextTick(() => { + wrapper.find('a[href="#API"]').trigger('click') + wrapper.vm.$refs.anchor.handleScroll() + expect(wrapper.vm.$refs.anchor.$data.activeLink).not.toBe(null) + done() + }) + }) + + it('Anchor render perfectly for complete href - click', (done) => { + const wrapper = mount({ + render () { + return ( + + + + ) + }, + }, { sync: false }) + Vue.nextTick(() => { + wrapper.find('a[href="http://www.example.com/#API"]').trigger('click') + expect(wrapper.vm.$refs.anchor.$data.activeLink).toBe('http://www.example.com/#API') + done() + }) + }) + + it('Anchor render perfectly for complete href - scoll', (done) => { + const wrapper = mount({ + render () { + return ( +
+
Hello
+ + + +
+ ) + }, + }, { sync: false, attachToDocument: true }) + Vue.nextTick(() => { + wrapper.vm.$refs.anchor.handleScroll() + expect(wrapper.vm.$refs.anchor.$data.activeLink).toBe('http://www.example.com/#API') + done() + }) + }) + + it('Anchor render perfectly for complete href - scollTo', (done) => { + const wrapper = mount({ + render () { + return ( +
+
Hello
+ + + +
+ ) + }, + }, { sync: false, attachToDocument: true }) + Vue.nextTick(() => { + wrapper.vm.$refs.anchor.handleScrollTo('##API') + expect(wrapper.vm.$refs.anchor.$data.activeLink).toBe('##API') + done() + }) + }) +}) diff --git a/components/anchor/__tests__/__snapshots__/demo.test.js.snap b/components/anchor/__tests__/__snapshots__/demo.test.js.snap new file mode 100644 index 000000000..92b2618e4 --- /dev/null +++ b/components/anchor/__tests__/__snapshots__/demo.test.js.snap @@ -0,0 +1,51 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders ./components/anchor/demo/basic.md correctly 1`] = ` +
+
+
+
+
+
+ Basic demo +
+
+ Fixed demo +
+
+ API +
+ Anchor Props +
+
+ Link Props +
+
+
+
+
+
+`; + +exports[`renders ./components/anchor/demo/static.md correctly 1`] = ` +
+
+
+
+ Basic demo +
+
+ Fixed demo +
+
+ API +
+ Anchor Props +
+
+ Link Props +
+
+
+
+`; diff --git a/components/anchor/demo/basic.md b/components/anchor/demo/basic.md new file mode 100644 index 000000000..0dcc0ed6a --- /dev/null +++ b/components/anchor/demo/basic.md @@ -0,0 +1,22 @@ + +#### 基本 +最简单的用法。 + + + +#### basic +The simplest usage. + + +```html + +``` diff --git a/components/anchor/demo/index.vue b/components/anchor/demo/index.vue new file mode 100644 index 000000000..8dfe8c482 --- /dev/null +++ b/components/anchor/demo/index.vue @@ -0,0 +1,50 @@ + + diff --git a/components/anchor/demo/static.md b/components/anchor/demo/static.md new file mode 100644 index 000000000..0c8f02eea --- /dev/null +++ b/components/anchor/demo/static.md @@ -0,0 +1,22 @@ + +#### 静态位置 +不浮动，状态不随页面滚动变化。 + + + +#### Static Anchor +Do not change state when page is scrolling. + + +```html + +``` diff --git a/components/anchor/index.en-US.md b/components/anchor/index.en-US.md index de521789e..264f56255 100644 --- a/components/anchor/index.en-US.md +++ b/components/anchor/index.en-US.md @@ -1,15 +1,3 @@ ---- -category: Components -type: Other -cols: 2 -title: Anchor ---- - -Hyperlinks to scroll on one page. - -## When To Use - -For displaying anchor hyperlinks on page and jumping between them. ## API diff --git a/components/anchor/index.zh-CN.md b/components/anchor/index.zh-CN.md index 71d753ee4..ac3a084f2 100644 --- a/components/anchor/index.zh-CN.md +++ b/components/anchor/index.zh-CN.md @@ -1,16 +1,3 @@ ---- -category: Components -subtitle: 锚点 -cols: 2 -type: Other -title: Anchor ---- - -用于跳转到页面指定位置。 - -## 何时使用 - -需要展现当前页面上可供跳转的锚点链接，以及快速在锚点之间跳转。 ## API diff --git a/site/components.js b/site/components.js index e001b8298..6422abf9b 100644 --- a/site/components.js +++ b/site/components.js @@ -1,7 +1,7 @@ import Vue from 'vue' import { Affix, - // Anchor, + Anchor, AutoComplete, Alert, Avatar, @@ -57,6 +57,8 @@ import { } from 'antd' Vue.component(Affix.name, Affix) // a-affix +Vue.component(Anchor.name, Anchor) +Vue.component(Anchor.Link.name, Anchor.Link) Vue.component(AutoComplete.name, AutoComplete) Vue.component(Alert.name, Alert) Vue.component(Avatar.name, Avatar) diff --git a/site/demo.js b/site/demo.js index b26f78e09..23694d32d 100644 --- a/site/demo.js +++ b/site/demo.js @@ -45,3 +45,4 @@ export { default as upload } from 'antd/upload/demo/index.vue' export { default as tree } from 'antd/tree/demo/index.vue' export { default as layout } from 'antd/layout/demo/index.vue' export { default as form } from 'antd/form/demo/index.vue' +export { default as anchor } from 'antd/anchor/demo/index.vue' diff --git a/tests/__snapshots__/index.test.js.snap b/tests/__snapshots__/index.test.js.snap index b18df367a..9adcc0cc1 100644 --- a/tests/__snapshots__/index.test.js.snap +++ b/tests/__snapshots__/index.test.js.snap @@ -7,6 +7,7 @@ Array [ "message", "notification", "Affix", + "Anchor", "AutoComplete", "Alert", "Avatar",