[feature] intermediate breadcrumbs

packages/peregrine/lib/talons/Breadcrumbs/useBreadcrumbs.js

@@ -5,8 +5,8 @@ import { useQuery } from '@apollo/react-hooks';
 const sortCrumbs = (a, b) => a.category_level > b.category_level;
 
 // Generates the path for the category.
-const getPath = (path, suffix) => {
-    if (path) {
+const getPath = (category_url_path, suffix) => {
+    if (category_url_path) {
         return `/${category_url_path}${suffix}`;
     }
 

packages/venia-ui/lib/components/Breadcrumbs/__tests__/__snapshots__/breadcrumbs.spec.js.snap

@@ -0,0 +1,79 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders an empty div if breadcrumbs are loading 1`] = `
+<div
+  className="root"
+/>
+`;
+
+exports[`renders an empty div if there was an error fetching breadcrumbs 1`] = `
+<div
+  className="root"
+/>
+`;
+
+exports[`renders breadcrumbs for a category view 1`] = `
+<div
+  className="root"
+>
+  Home
+  <span
+    className="divider"
+  >
+    /
+  </span>
+  <span
+    className="currentCategory"
+  >
+    ACME Category
+  </span>
+</div>
+`;
+
+exports[`renders breadcrumbs for a product view 1`] = `
+<div
+  className="root"
+>
+  Home
+  <span
+    className="divider"
+  >
+    /
+  </span>
+  ACME Category
+  <span
+    className="divider"
+  >
+    /
+  </span>
+  <span
+    className="text"
+  >
+    ACME Product
+  </span>
+</div>
+`;
+
+exports[`renders breadcrumbs for intermediate links 1`] = `
+<div
+  className="root"
+>
+  Home
+  <span
+    className="divider"
+  >
+    /
+  </span>
+  Intermediate Category
+  <span
+    className="divider"
+  >
+    /
+  </span>
+  <span
+    className="currentCategory"
+  >
+    ACME Category
+  </span>
+</div>
+`;

packages/venia-ui/lib/components/Breadcrumbs/__tests__/breadcrumbs.spec.js

@@ -0,0 +1,79 @@
+import React from 'react';
+import { createTestInstance } from '@magento/peregrine';
+import { useBreadcrumbs } from '@magento/peregrine/lib/talons/Breadcrumbs/useBreadcrumbs';
+
+import Breadcrumbs from '../breadcrumbs';
+
+jest.mock('@magento/venia-drivers', () => ({
+    Link: ({ children }) => children,
+    resourceUrl: url => `${url}.html`
+}));
+
+jest.mock('../../../classify');
+jest.mock('@magento/peregrine/lib/talons/Breadcrumbs/useBreadcrumbs');
+
+const defaultProps = {
+    categoryId: 'category1'
+};
+test('renders an empty div if breadcrumbs are loading', () => {
+    useBreadcrumbs.mockReturnValueOnce({
+        isLoading: true,
+        normalizedData: []
+    });
+
+    const instance = createTestInstance(<Breadcrumbs {...defaultProps} />);
+    expect(instance.toJSON()).toMatchSnapshot();
+});
+
+test('renders an empty div if there was an error fetching breadcrumbs', () => {
+    useBreadcrumbs.mockReturnValueOnce({
+        hasError: true,
+        normalizedData: []
+    });
+
+    const instance = createTestInstance(<Breadcrumbs {...defaultProps} />);
+    expect(instance.toJSON()).toMatchSnapshot();
+});
+
+test('renders breadcrumbs for a product view', () => {
+    const props = {
+        ...defaultProps,
+        currentProduct: 'ACME Product'
+    };
+
+    useBreadcrumbs.mockReturnValueOnce({
+        currentCategory: 'ACME Category',
+        currentCategoryPath: '/acmeCategory',
+        normalizedData: []
+    });
+
+    const instance = createTestInstance(<Breadcrumbs {...props} />);
+    expect(instance.toJSON()).toMatchSnapshot();
+});
+
+test('renders breadcrumbs for a category view', () => {
+    useBreadcrumbs.mockReturnValueOnce({
+        currentCategory: 'ACME Category',
+        currentCategoryPath: '/acmeCategory',
+        normalizedData: []
+    });
+
+    const instance = createTestInstance(<Breadcrumbs {...defaultProps} />);
+    expect(instance.toJSON()).toMatchSnapshot();
+});
+
+test('renders breadcrumbs for intermediate links', () => {
+    useBreadcrumbs.mockReturnValueOnce({
+        currentCategory: 'ACME Category',
+        currentCategoryPath: '/acmeCategory',
+        normalizedData: [
+            {
+                text: 'Intermediate Category',
+                path: 'intermediateCategory'
+            }
+        ]
+    });
+
+    const instance = createTestInstance(<Breadcrumbs {...defaultProps} />);
+    expect(instance.toJSON()).toMatchSnapshot();
+});

packages/venia-ui/lib/components/Breadcrumbs/breadcrumbs.js

@@ -1,10 +1,10 @@
 import React, { Fragment, useMemo } from 'react';
 import { number, string } from 'prop-types';
 import { Link, resourceUrl } from '@magento/venia-drivers';
+import { useBreadcrumbs } from '@magento/peregrine/lib/talons/Breadcrumbs/useBreadcrumbs';
+import GET_BREADCRUMB_DATA from '../../queries/getBreadcrumbData.graphql';
 import { mergeClasses } from '../../classify';
 import defaultClasses from './breadcrumbs.css';
-import { useBreadcrumbs } from '../../../../peregrine/lib/talons/Breadcrumbs/useBreadcrumbs';
-import GET_BREADCRUMB_DATA from '../../queries/getBreadcrumbData.graphql';
 
 /**
  * Breadcrumbs! Generates a sorted display of category links.

packages/venia-ui/lib/queries/getBreadcrumbData.graphql

@@ -4,12 +4,12 @@ query getBreadcrumbData($category_id: Int!) {
         category_url_suffix
     }
     category(id: $category_id) {
+        id
         breadcrumbs {
             # We may not need level if `breadcrumbs` is sorted.
             category_level
             category_name
-            # TODO: Uncomment when MC-20255 is released (2.3.4?)
-            # category_url_path
+            category_url_path
         }
         id
         name