test(breadcrumbs): add testcase

docs: add api for breadcrumbs
2026-04-22 19:48:49 +08:00 · 2020-05-31 08:04:28 +08:00
parent 8418ebfed9
commit 75ebe442c7
4 changed files with 281 additions and 1 deletions
--- a/components/breadcrumbs/tests/snapshots/breadcrumbs.test.tsx.snap
+++ b/components/breadcrumbs/tests/snapshots/breadcrumbs.test.tsx.snap
@@ -0,0 +1,101 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Breadcrumbs should redefined all separators 1`] = `
+"<nav class=\\"\\"><span class=\\"breadcrums-item\\">test-1</span><div class=\\"separator \\">*<style>
+        .separator {
+          display: inline-flex;
+          margin: 0 8px;
+          user-select: none;
+          pointer-events: none;
+          align-items: center;
+        }
+      </style></div><span class=\\"breadcrums-item\\">test-2</span><div class=\\"separator \\">*<style>
+        .separator {
+          display: inline-flex;
+          margin: 0 8px;
+          user-select: none;
+          pointer-events: none;
+          align-items: center;
+        }
+      </style></div><style>
+          nav {
+            margin: 0;
+            padding: 0;
+            line-height: inherit;
+            color: #888;
+            font-size: 1rem;
+            box-sizing: border-box;
+            display: flex;
+            align-items: center;
+          }
+
+          nav :global(.link:hover) {
+            color: rgba(0, 112, 243, 0.85);
+          }
+
+          nav > :global(span:last-of-type) {
+            color: #444;
+          }
+
+          nav > :global(.separator:last-child) {
+            display: none;
+          }
+
+          nav :global(svg) {
+            width: 1em;
+            height: 1em;
+            margin: 0 4px;
+          }
+
+          nav :global(.breadcrums-item) {
+            display: inline-flex;
+            align-items: center;
+          }
+        </style></nav>"
+`;
+
+exports[`Breadcrumbs should render correctly 1`] = `
+"<nav class=\\"\\"><span class=\\"breadcrums-item\\">test-1</span><div class=\\"separator \\">/<style>
+        .separator {
+          display: inline-flex;
+          margin: 0 8px;
+          user-select: none;
+          pointer-events: none;
+          align-items: center;
+        }
+      </style></div><style>
+          nav {
+            margin: 0;
+            padding: 0;
+            line-height: inherit;
+            color: #888;
+            font-size: 1rem;
+            box-sizing: border-box;
+            display: flex;
+            align-items: center;
+          }
+
+          nav :global(.link:hover) {
+            color: rgba(0, 112, 243, 0.85);
+          }
+
+          nav > :global(span:last-of-type) {
+            color: #444;
+          }
+
+          nav > :global(.separator:last-child) {
+            display: none;
+          }
+
+          nav :global(svg) {
+            width: 1em;
+            height: 1em;
+            margin: 0 4px;
+          }
+
+          nav :global(.breadcrums-item) {
+            display: inline-flex;
+            align-items: center;
+          }
+        </style></nav>"
+`;
--- a/components/breadcrumbs/tests/breadcrumbs.test.tsx
+++ b/components/breadcrumbs/tests/breadcrumbs.test.tsx
@@ -0,0 +1,77 @@
+import React from 'react'
+import { mount } from 'enzyme'
+import { Breadcrumbs } from 'components'
+
+describe('Breadcrumbs', () => {
+  it('should render correctly', () => {
+    const wrapper = mount(
+      <Breadcrumbs>
+        <Breadcrumbs.Item>test-1</Breadcrumbs.Item>
+      </Breadcrumbs>,
+    )
+    expect(wrapper.html()).toMatchSnapshot()
+    expect(() => wrapper.unmount()).not.toThrow()
+  })
+
+  it('should redefined all separators', () => {
+    const wrapper = mount(
+      <Breadcrumbs separator="*">
+        <Breadcrumbs.Item>test-1</Breadcrumbs.Item>
+        <Breadcrumbs.Item>test-2</Breadcrumbs.Item>
+      </Breadcrumbs>,
+    )
+    expect(wrapper.html()).toMatchSnapshot()
+    expect(wrapper.html()).toContain('*')
+    expect(() => wrapper.unmount()).not.toThrow()
+  })
+
+  it('the specified separator should be redefined', () => {
+    const wrapper = mount(
+      <Breadcrumbs separator="*">
+        <Breadcrumbs.Item>
+          test-1
+          <Breadcrumbs.Separator>%</Breadcrumbs.Separator>
+        </Breadcrumbs.Item>
+        <Breadcrumbs.Item>test-2</Breadcrumbs.Item>
+      </Breadcrumbs>,
+    )
+    expect(wrapper.html()).toContain('%')
+  })
+
+  it('should render string when href missing', () => {
+    let wrapper = mount(
+      <Breadcrumbs>
+        <Breadcrumbs.Item>test-1</Breadcrumbs.Item>
+      </Breadcrumbs>,
+    )
+    let dom = wrapper.find('.breadcrums-item').at(0).getDOMNode()
+    expect(dom.tagName).toEqual('SPAN')
+
+    wrapper = mount(
+      <Breadcrumbs>
+        <Breadcrumbs.Item href="">test-1</Breadcrumbs.Item>
+      </Breadcrumbs>,
+    )
+    dom = wrapper.find('.breadcrums-item').at(0).getDOMNode()
+    expect(dom.tagName).toEqual('A')
+
+    wrapper = mount(
+      <Breadcrumbs>
+        <Breadcrumbs.Item nextLink>test-1</Breadcrumbs.Item>
+      </Breadcrumbs>,
+    )
+    dom = wrapper.find('.breadcrums-item').at(0).getDOMNode()
+    expect(dom.tagName).toEqual('A')
+  })
+
+  it('should trigger click event', () => {
+    const handler = jest.fn()
+    const wrapper = mount(
+      <Breadcrumbs>
+        <Breadcrumbs.Item onClick={handler}>test-1</Breadcrumbs.Item>
+      </Breadcrumbs>,
+    )
+    wrapper.find('.breadcrums-item').at(0).simulate('click')
+    expect(handler).toHaveBeenCalled()
+  })
+})
--- a/pages/en-us/components/breadcrumbs.mdx
+++ b/pages/en-us/components/breadcrumbs.mdx
@@ -90,7 +90,6 @@ Show where users are in the application.
 | **href** | link address | `string` | - | - |
 | **nextLink** | in `next.js` route | `boolean` | - | `false` |
 | **onClick** | click event | `(event: MouseEvent) => void` | - | - |
-| **onClick** | click event | `(event: MouseEvent) => void` | - | - |
 | ... | native props | `AnchorHTMLAttributes` | `'id', 'className', ...` | - |

 <Attributes.Title>Breadcrumbs.Separator.Props</Attributes.Title>
--- a/pages/zh-cn/components/breadcrumbs.mdx
+++ b/pages/zh-cn/components/breadcrumbs.mdx
@@ -0,0 +1,103 @@
+import { Layout, Playground, Attributes } from 'lib/components'
+import { Breadcrumbs, Spacer } from 'components'
+import NextLink from 'next/link'
+import Home from '@zeit-ui/react-icons/home'
+import Inbox from '@zeit-ui/react-icons/inbox'
+
+export const meta = {
+  title: '面包屑 Breadcrumbs',
+  group: '导航',
+}
+
+## Breadcrumbs / 面包屑导航
+
+显示用户在应用中的层级位置。
+
+<Playground
+  scope={{ Breadcrumbs }}
+  code={`
+<Breadcrumbs>
+  <Breadcrumbs.Item>Home</Breadcrumbs.Item>
+  <Breadcrumbs.Item href="">Catalog</Breadcrumbs.Item>
+  <Breadcrumbs.Item >Page</Breadcrumbs.Item>
+</Breadcrumbs>
+`} />
+
+<Playground
+  title="分隔符"
+  desc="定制字符中的分隔符。"
+  scope={{ Breadcrumbs, Spacer }}
+  code={`
+<>
+  <Breadcrumbs separator="-">
+    <Breadcrumbs.Item>Home</Breadcrumbs.Item>
+    <Breadcrumbs.Item href="">Catalog</Breadcrumbs.Item>
+    <Breadcrumbs.Item >Page</Breadcrumbs.Item>
+  </Breadcrumbs>
+  <Spacer y={.5} />
+  <Breadcrumbs separator=">">
+    <Breadcrumbs.Item>
+      Home
+      <Breadcrumbs.Separator>:</Breadcrumbs.Separator>
+    </Breadcrumbs.Item>
+    <Breadcrumbs.Item href="">Components</Breadcrumbs.Item>
+    <Breadcrumbs.Item href="">Basic</Breadcrumbs.Item>
+    <Breadcrumbs.Item >Button</Breadcrumbs.Item>
+  </Breadcrumbs>
+</>
+`} />
+
+<Playground
+  title="图标"
+  desc="以图标表达更多信息。"
+  scope={{ Breadcrumbs, Home, Inbox }}
+  code={`
+<Breadcrumbs>
+  <Breadcrumbs.Item><Home /></Breadcrumbs.Item>
+  <Breadcrumbs.Item href=""><Inbox /> Inbox</Breadcrumbs.Item>
+  <Breadcrumbs.Item >Page</Breadcrumbs.Item>
+</Breadcrumbs>
+`} />
+
+<Playground
+  title="结合 NextJS"
+  desc="与 `next.js` 结合使用的示例。"
+  scope={{ Breadcrumbs, NextLink }}
+  code={`
+<Breadcrumbs>
+  <NextLink href="/">
+    <Breadcrumbs.Item nextLink>Home</Breadcrumbs.Item>
+  </NextLink>
+  <NextLink href="/en-us/components">
+    <Breadcrumbs.Item nextLink>Components</Breadcrumbs.Item>
+  </NextLink>
+  <Breadcrumbs.Item>Breadcrumbs</Breadcrumbs.Item>
+</Breadcrumbs>
+`} />
+
+<Attributes edit="/pages/zh-cn/components/breadcrumbs.mdx">
+<Attributes.Title>Breadcrumbs.Props</Attributes.Title>
+
+| 属性 | 描述 | 类型 | 推荐值 | 默认
+| ---------- | ---------- | ---- |  -------------- | ------ |
+| **separator** | 分隔符 | `string` | - | `/` |
+| ... | 原生属性 | `HTMLAttributes` | `'id', 'className', ...` | - |
+
+<Attributes.Title>Breadcrumbs.Item.Props</Attributes.Title>
+
+| 属性 | 描述 | 类型 | 推荐值 | 默认
+| ---------- | ---------- | ---- |  -------------- | ------ |
+| **href** |  链接地址 | `string` | - | - |
+| **nextLink** | 是否为 `next.js` 路由 | `boolean` | - | `false` |
+| **onClick** | 点击事件 | `(event: MouseEvent) => void` | - | - |
+| ... | 原生属性 | `AnchorHTMLAttributes` | `'id', 'className', ...` | - |
+
+<Attributes.Title>Breadcrumbs.Separator.Props</Attributes.Title>
+
+| 属性 | 描述 | 类型 | 推荐值 | 默认
+| ---------- | ---------- | ---- |  -------------- | ------ |
+| ... | 原生属性 | `HTMLAttributes` | `'id', 'className', ...` | - |
+
+</Attributes>
+
+export default ({ children }) => <Layout meta={meta}>{children}</Layout>