Unit testing to increase breadcrumbs

src/components/PageHeader/index.js

@@ -7,8 +7,7 @@ import styles from './index.less';
 
 
 const { TabPane } = Tabs;
-
-function getBreadcrumb(breadcrumbNameMap, url) {
+export function getBreadcrumb(breadcrumbNameMap, url) {
   let breadcrumb = breadcrumbNameMap[url];
   if (!breadcrumb) {
     Object.keys(breadcrumbNameMap).forEach((item) => {
@@ -20,6 +19,14 @@ function getBreadcrumb(breadcrumbNameMap, url) {
   return breadcrumb || {};
 }
 
+// /userinfo/2144/id => ['/userinfo','/useinfo/2144,'/userindo/2144/id']
+export function urlToList(url) {
+  const urllist = url.split('/').filter(i => i);
+  return urllist.map((urlItem, index) => {
+    return `/${urllist.slice(0, index + 1).join('/')}`;
+  });
+}
+
 export default class PageHeader extends PureComponent {
   static contextTypes = {
     routes: PropTypes.array,
@@ -62,11 +69,10 @@ export default class PageHeader extends PureComponent {
   }
   conversionFromLocation = (routerLocation, breadcrumbNameMap) => {
     const { breadcrumbSeparator, linkElement = 'a' } = this.props;
-    // Convert the path to an array
-    const pathSnippets = routerLocation.pathname.split('/').filter(i => i);
+    // Convert the url to an array
+    const pathSnippets = urlToList(routerLocation.pathname);
     // Loop data mosaic routing
-    const extraBreadcrumbItems = pathSnippets.map((_, index) => {
-      const url = `/${pathSnippets.slice(0, index + 1).join('/')}`;
+    const extraBreadcrumbItems = pathSnippets.map((url, index) => {
       const currentBreadcrumb = getBreadcrumb(breadcrumbNameMap, url);
       const isLinkable = (index !== pathSnippets.length - 1) && currentBreadcrumb.component;
       return currentBreadcrumb.name && !currentBreadcrumb.hideInBreadcrumb ? (

src/components/PageHeader/index.test.js

@@ -0,0 +1,71 @@
+import { getBreadcrumb, urlToList } from './index';
+
+describe('test urlToList', () => {
+  it('A path', () => {
+    expect(urlToList('/userinfo')).toEqual(['/userinfo']);
+  });
+  it('Secondary path', () => {
+    expect(urlToList('/userinfo/2144')).toEqual([
+      '/userinfo',
+      '/userinfo/2144',
+    ]);
+  });
+  it('Three paths', () => {
+    expect(urlToList('/userinfo/2144/addr')).toEqual([
+      '/userinfo',
+      '/userinfo/2144',
+      '/userinfo/2144/addr',
+    ]);
+  });
+});
+
+const routerData = {
+  '/dashboard/analysis': {
+    name: '分析页',
+  },
+  '/userinfo': {
+    name: '用户列表',
+  },
+  '/userinfo/:id': {
+    name: '用户信息',
+  },
+  '/userinfo/:id/addr': {
+    name: '收货订单',
+  },
+};
+describe('test getBreadcrumb', () => {
+  it('Simple url', () => {
+    expect(getBreadcrumb(routerData, '/dashboard/analysis').name).toEqual(
+      '分析页'
+    );
+  });
+  it('Parameters url', () => {
+    expect(getBreadcrumb(routerData, '/userinfo/2144').name).toEqual(
+      '用户信息'
+    );
+  });
+  it('The middle parameter url', () => {
+    expect(getBreadcrumb(routerData, '/userinfo/2144/addr').name).toEqual(
+      '收货订单'
+    );
+  });
+  it('Loop through the parameters', () => {
+    const urlNameList = urlToList('/userinfo/2144/addr').map((url) => {
+      return getBreadcrumb(routerData, url).name;
+    });
+    expect(urlNameList).toEqual(['用户列表', '用户信息', '收货订单']);
+  });
+
+  it('a path', () => {
+    const urlNameList = urlToList('/userinfo').map((url) => {
+      return getBreadcrumb(routerData, url).name;
+    });
+    expect(urlNameList).toEqual(['用户列表']);
+  });
+  it('Secondary path', () => {
+    const urlNameList = urlToList('/userinfo/2144').map((url) => {
+      return getBreadcrumb(routerData, url).name;
+    });
+    expect(urlNameList).toEqual(['用户列表', '用户信息']);
+  });
+});