feat: add anchor component docs & test

components/anchor/Anchor.jsx

@@ -79,8 +79,8 @@ export const AnchorProps = {
   prefixCls: PropTypes.string,
   offsetTop: PropTypes.number,
   bounds: PropTypes.number,
-  affix: PropTypes.boolean,
+  affix: PropTypes.bool,
-  showInkInFixed: PropTypes.boolean,
+  showInkInFixed: PropTypes.bool,
   getContainer: PropTypes.func,
 }
 

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 (
+          <Anchor ref='anchor'>
+            <Link href='#API' title='API' />
+          </Anchor>
+        )
+      },
+    }, { 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 (
+          <Anchor ref='anchor'>
+            <Link href='http://www.example.com/#API' title='API' />
+          </Anchor>
+        )
+      },
+    }, { 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 (
+          <div>
+            <div id='API'>Hello</div>
+            <Anchor ref='anchor'>
+              <Link href='http://www.example.com/#API' title='API' />
+            </Anchor>
+          </div>
+        )
+      },
+    }, { 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 (
+          <div>
+            <div id='API'>Hello</div>
+            <Anchor ref='anchor'>
+              <Link href='##API' title='API' />
+            </Anchor>
+          </div>
+        )
+      },
+    }, { sync: false, attachToDocument: true })
+    Vue.nextTick(() => {
+      wrapper.vm.$refs.anchor.handleScrollTo('##API')
+      expect(wrapper.vm.$refs.anchor.$data.activeLink).toBe('##API')
+      done()
+    })
+  })
+})

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`] = `
+<div>
+  <div class="">
+    <div class="ant-anchor-wrapper" style="max-height: 100vh;">
+      <div class="ant-anchor">
+        <div class="ant-anchor-ink"><span class="ant-anchor-ink-ball"></span></div>
+        <div class="ant-anchor-link">
+          <a href="#components-anchor-demo-basic" title="Basic demo" class="ant-anchor-link-title">Basic demo</a>
+        </div>
+        <div class="ant-anchor-link">
+          <a href="#components-anchor-demo-static-anchor" title="Fixed demo" class="ant-anchor-link-title">Fixed demo</a>
+        </div>
+        <div class="ant-anchor-link">
+          <a href="#API" title="API" class="ant-anchor-link-title">API</a>
+          <div class="ant-anchor-link">
+            <a href="#Anchor-Props" title="Anchor Props" class="ant-anchor-link-title">Anchor Props</a>
+          </div>
+          <div class="ant-anchor-link">
+            <a href="#Link-Props" title="Link Props" class="ant-anchor-link-title">Link Props</a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders ./components/anchor/demo/static.md correctly 1`] = `
+<div class="ant-anchor-wrapper" style="max-height: 100vh;">
+  <div class="ant-anchor fixed">
+    <div class="ant-anchor-ink"><span class="ant-anchor-ink-ball"></span></div>
+    <div class="ant-anchor-link">
+      <a href="#components-anchor-demo-basic" title="Basic demo" class="ant-anchor-link-title">Basic demo</a>
+    </div>
+    <div class="ant-anchor-link">
+      <a href="#components-anchor-demo-static-anchor" title="Fixed demo" class="ant-anchor-link-title">Fixed demo</a>
+    </div>
+    <div class="ant-anchor-link">
+      <a href="#API" title="API" class="ant-anchor-link-title">API</a>
+      <div class="ant-anchor-link">
+        <a href="#Anchor-Props" title="Anchor Props" class="ant-anchor-link-title">Anchor Props</a>
+      </div>
+      <div class="ant-anchor-link">
+        <a href="#Link-Props" title="Link Props" class="ant-anchor-link-title">Link Props</a>
+      </div>
+    </div>
+  </div>
+</div>
+`;

components/anchor/demo/basic.md

@@ -0,0 +1,22 @@
+<cn>
+#### 基本
+最简单的用法。
+</cn>
+
+<us>
+#### basic
+The simplest usage.
+</us>
+
+```html
+<template>
+  <a-anchor>
+    <a-anchor-link href="#components-anchor-demo-basic" title="Basic demo" />
+    <a-anchor-link href="#components-anchor-demo-static-anchor" title="Fixed demo" />
+    <a-anchor-link href="#API" title="API">
+      <a-anchor-link href="#Anchor-Props" title="Anchor Props" />
+      <a-anchor-link href="#Link-Props" title="Link Props" />
+    </a-anchor-link>
+  </a-anchor>
+</template>
+```

components/anchor/demo/index.vue

@@ -0,0 +1,50 @@
+<script>
+import Basic from './basic'
+import Static from './static'
+
+import CN from '../index.zh-CN.md'
+import US from '../index.en-US.md'
+const md = {
+  cn: `# Anchor 锚点
+          用于跳转到页面指定位置。
+
+## 何时使用
+
+需要展现当前页面上可供跳转的锚点链接，以及快速在锚点之间跳转。
+          ## 代码演示`,
+  us: `# Anchor
+
+Hyperlinks to scroll on one page.
+
+## When To Use
+
+For displaying anchor hyperlinks on page and jumping between them.
+## Examples
+`,
+}
+export default {
+  category: 'Components',
+  subtitle: '锚点',
+  cols: 2,
+  type: 'Other',
+  title: 'Anchor',
+  render () {
+    return (
+      <div id='components-anchor-demo'>
+        <md cn={md.cn} us={md.us}/>
+        <Basic/>
+        <Static/>
+        <api>
+          <CN slot='cn' />
+          <US/>
+        </api>
+      </div>
+    )
+  },
+}
+</script>
+<style>
+#components-anchor-demo .ant-affix {
+  z-index: 11;
+}
+</style>

components/anchor/demo/static.md

@@ -0,0 +1,22 @@
+<cn>
+#### 静态位置
+不浮动，状态不随页面滚动变化。
+</cn>
+
+<us>
+#### Static Anchor
+Do not change state when page is scrolling.
+</us>
+
+```html
+<template>
+  <a-anchor :affix="false">
+    <a-anchor-link href="#components-anchor-demo-basic" title="Basic demo" />
+    <a-anchor-link href="#components-anchor-demo-static-anchor" title="Fixed demo" />
+    <a-anchor-link href="#API" title="API">
+      <a-anchor-link href="#Anchor-Props" title="Anchor Props" />
+      <a-anchor-link href="#Link-Props" title="Link Props" />
+    </a-anchor-link>
+  </a-anchor>
+</template>
+```

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
 

components/anchor/index.zh-CN.md

@@ -1,16 +1,3 @@
----
-category: Components
-subtitle: 锚点
-cols: 2
-type: Other
-title: Anchor
----
-
-用于跳转到页面指定位置。
-
-## 何时使用
-
-需要展现当前页面上可供跳转的锚点链接，以及快速在锚点之间跳转。
 
 ## API
 

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)

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'

tests/__snapshots__/index.test.js.snap

@@ -7,6 +7,7 @@ Array [
   "message",
   "notification",
   "Affix",
+  "Anchor",
   "AutoComplete",
   "Alert",
   "Avatar",