From ad5706fe1e6c44eeeccf94eddbc1809e311433f3 Mon Sep 17 00:00:00 2001 From: Stephen Rugh Date: Thu, 23 Jan 2020 14:05:53 -0600 Subject: [PATCH 1/4] Enable intermediate level breadcrumbs using category_url_path Signed-off-by: Stephen Rugh --- packages/peregrine/lib/talons/Breadcrumbs/useBreadcrumbs.js | 4 ++-- packages/venia-ui/lib/queries/getBreadcrumbData.graphql | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/peregrine/lib/talons/Breadcrumbs/useBreadcrumbs.js b/packages/peregrine/lib/talons/Breadcrumbs/useBreadcrumbs.js index 769ef739a3..012f056cfd 100644 --- a/packages/peregrine/lib/talons/Breadcrumbs/useBreadcrumbs.js +++ b/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}`; } diff --git a/packages/venia-ui/lib/queries/getBreadcrumbData.graphql b/packages/venia-ui/lib/queries/getBreadcrumbData.graphql index 3fd3bb84d8..438fa441e9 100644 --- a/packages/venia-ui/lib/queries/getBreadcrumbData.graphql +++ b/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 From dbd5bca07da02e77cc136e4bc891ed5ffdd70f5e Mon Sep 17 00:00:00 2001 From: Stephen Rugh Date: Thu, 23 Jan 2020 14:51:47 -0600 Subject: [PATCH 2/4] fix tests Signed-off-by: Stephen Rugh --- .../__snapshots__/breadcrumbs.spec.js.snap | 79 +++++++++++++++++++ .../Breadcrumbs/__tests__/breadcrumbs.spec.js | 79 +++++++++++++++++++ .../lib/components/Breadcrumbs/breadcrumbs.js | 4 +- 3 files changed, 160 insertions(+), 2 deletions(-) create mode 100644 packages/venia-ui/lib/components/Breadcrumbs/__tests__/__snapshots__/breadcrumbs.spec.js.snap create mode 100644 packages/venia-ui/lib/components/Breadcrumbs/__tests__/breadcrumbs.spec.js diff --git a/packages/venia-ui/lib/components/Breadcrumbs/__tests__/__snapshots__/breadcrumbs.spec.js.snap b/packages/venia-ui/lib/components/Breadcrumbs/__tests__/__snapshots__/breadcrumbs.spec.js.snap new file mode 100644 index 0000000000..3fb158decb --- /dev/null +++ b/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`] = ` +
+`; + +exports[`renders an empty div if there was an error fetching breadcrumbs 1`] = ` +
+`; + +exports[`renders breadcrumbs for a category view 1`] = ` +
+ Home + + / + + + ACME Category + +
+`; + +exports[`renders breadcrumbs for a product view 1`] = ` +
+ Home + + / + + ACME Category + + / + + + ACME Product + +
+`; + +exports[`renders breadcrumbs for intermediate links 1`] = ` +
+ Home + + / + + Intermediate Category + + / + + + ACME Category + +
+`; diff --git a/packages/venia-ui/lib/components/Breadcrumbs/__tests__/breadcrumbs.spec.js b/packages/venia-ui/lib/components/Breadcrumbs/__tests__/breadcrumbs.spec.js new file mode 100644 index 0000000000..9a9638d889 --- /dev/null +++ b/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(); + expect(instance.toJSON()).toMatchSnapshot(); +}); + +test('renders an empty div if there was an error fetching breadcrumbs', () => { + useBreadcrumbs.mockReturnValueOnce({ + hasError: true, + normalizedData: [] + }); + + const instance = createTestInstance(); + 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(); + expect(instance.toJSON()).toMatchSnapshot(); +}); + +test('renders breadcrumbs for a category view', () => { + useBreadcrumbs.mockReturnValueOnce({ + currentCategory: 'ACME Category', + currentCategoryPath: '/acmeCategory', + normalizedData: [] + }); + + const instance = createTestInstance(); + 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(); + expect(instance.toJSON()).toMatchSnapshot(); +}); diff --git a/packages/venia-ui/lib/components/Breadcrumbs/breadcrumbs.js b/packages/venia-ui/lib/components/Breadcrumbs/breadcrumbs.js index 5ff3359f71..0fc0390841 100644 --- a/packages/venia-ui/lib/components/Breadcrumbs/breadcrumbs.js +++ b/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. From 0d0fddbdcf318b2816976c4413875edbe20c21f6 Mon Sep 17 00:00:00 2001 From: Stephen Rugh Date: Wed, 29 Jan 2020 14:31:16 -0600 Subject: [PATCH 3/4] feedback Signed-off-by: Stephen Rugh --- packages/peregrine/lib/talons/Breadcrumbs/useBreadcrumbs.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/peregrine/lib/talons/Breadcrumbs/useBreadcrumbs.js b/packages/peregrine/lib/talons/Breadcrumbs/useBreadcrumbs.js index 012f056cfd..0cda782727 100644 --- a/packages/peregrine/lib/talons/Breadcrumbs/useBreadcrumbs.js +++ b/packages/peregrine/lib/talons/Breadcrumbs/useBreadcrumbs.js @@ -5,9 +5,9 @@ import { useQuery } from '@apollo/react-hooks'; const sortCrumbs = (a, b) => a.category_level > b.category_level; // Generates the path for the category. -const getPath = (category_url_path, suffix) => { - if (category_url_path) { - return `/${category_url_path}${suffix}`; +const getPath = (path, suffix) => { + if (path) { + return `/${path}${suffix}`; } // If there is no path this is just a dead link. From 5ecf18508a48022983a7fbd9446c7be54df2d737 Mon Sep 17 00:00:00 2001 From: Jimmy Sanford Date: Wed, 29 Jan 2020 15:23:25 -0600 Subject: [PATCH 4/4] Add whitespace --- packages/venia-ui/lib/components/Breadcrumbs/breadcrumbs.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/venia-ui/lib/components/Breadcrumbs/breadcrumbs.js b/packages/venia-ui/lib/components/Breadcrumbs/breadcrumbs.js index 0fc0390841..1af544ed53 100644 --- a/packages/venia-ui/lib/components/Breadcrumbs/breadcrumbs.js +++ b/packages/venia-ui/lib/components/Breadcrumbs/breadcrumbs.js @@ -1,6 +1,7 @@ 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';