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}
;