diff --git a/packages/venia-concept/src/RootComponents/Product/Product.js b/packages/venia-concept/src/RootComponents/Product/Product.js index e62ca6a447..db1c5bd3f2 100644 --- a/packages/venia-concept/src/RootComponents/Product/Product.js +++ b/packages/venia-concept/src/RootComponents/Product/Product.js @@ -3,6 +3,7 @@ import { string, func } from 'prop-types'; import { connect, Query } from 'src/drivers'; import { addItemToCart } from 'src/actions/cart'; +import ErrorView from 'src/components/ErrorView'; import { loadingIndicator } from 'src/components/LoadingIndicator'; import ProductFullDetail from 'src/components/ProductFullDetail'; import getUrlKey from 'src/util/getUrlKey'; @@ -52,6 +53,10 @@ class Product extends Component { const product = data.productDetail.items[0]; + if (!product) { + return ; + } + return ( + + + Fetching Data... + + + +`; + +exports[`it renders the correct tree when out of stock 1`] = ` +

+ This Product is currently out of stock. Please try again later. +

+`; + +exports[`it renders the correct tree when page not found 1`] = ` +

+ That page could not be found. Please try again. +

+`; + +exports[`it renders the internal error tree otherwise 1`] = ` +

+ Something went wrong. Please try again. +

+`; diff --git a/packages/venia-concept/src/components/ErrorView/__tests__/errorView.spec.js b/packages/venia-concept/src/components/ErrorView/__tests__/errorView.spec.js new file mode 100644 index 0000000000..12a54b80c6 --- /dev/null +++ b/packages/venia-concept/src/components/ErrorView/__tests__/errorView.spec.js @@ -0,0 +1,30 @@ +import React from 'react'; +import ShallowRenderer from 'react-test-renderer/shallow'; + +import ErrorView from '../errorView'; + +const renderer = new ShallowRenderer(); + +test('it renders the correct tree when loading', () => { + const tree = renderer.render(); + + expect(tree).toMatchSnapshot(); +}); + +test('it renders the correct tree when page not found', () => { + const tree = renderer.render(); + + expect(tree).toMatchSnapshot(); +}); + +test('it renders the correct tree when out of stock', () => { + const tree = renderer.render(); + + expect(tree).toMatchSnapshot(); +}); + +test('it renders the internal error tree otherwise', () => { + const tree = renderer.render(); + + expect(tree).toMatchSnapshot(); +}); diff --git a/packages/venia-concept/src/components/ErrorView/errorView.js b/packages/venia-concept/src/components/ErrorView/errorView.js index b75a213735..25d013ff99 100644 --- a/packages/venia-concept/src/components/ErrorView/errorView.js +++ b/packages/venia-concept/src/components/ErrorView/errorView.js @@ -5,15 +5,21 @@ import { loadingIndicator } from 'src/components/LoadingIndicator'; const messages = new Map() .set('loading', loadingIndicator) .set('notFound', 'That page could not be found. Please try again.') - .set('internalError', 'Something went wrong. Please try again.'); + .set('internalError', 'Something went wrong. Please try again.') + .set( + 'outOfStock', + 'This Product is currently out of stock. Please try again later.' + ); class ErrorView extends Component { render() { - const { loading, notFound } = this.props; + const { loading, notFound, outOfStock } = this.props; const message = loading ? messages.get('loading') : notFound ? messages.get('notFound') + : outOfStock + ? messages.get('outOfStock') : messages.get('internalError'); return

{message}

;