feat: add anchor component docs & test

7 years ago · a1448e06d9
11 changed files with 234 additions and 28 deletions
--- 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,
 }

--- a/components/anchor/tests/Anchor.test.js
+++ 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 (
+          <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()
+    })
+  })
+})
--- a/components/anchor/tests/snapshots/demo.test.js.snap
+++ 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`] = `
+<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>
+`;
--- a/components/anchor/demo/basic.md
+++ b/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>
+```
--- a/components/anchor/demo/index.vue
+++ b/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>
--- a/components/anchor/demo/static.md
+++ b/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>
+```
--- 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

--- 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

--- 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)
--- 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'
--- 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",