Merge c9632d9 into 425d5df

JoeKarlsson · Oct 17, 2018 · a1892ad · a1892ad
2 parents 425d5df + c9632d9
commit a1892ad
Show file tree

Hide file tree

Showing 6 changed files with 91 additions and 15 deletions.
diff --git a/app/components/shared/ZeroState/ZeroState.js b/app/components/shared/ZeroState/ZeroState.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const ImageContainer = styled.div`
+  text-align: center;
+`;
+
+const ZeroState = () => (
+  <ImageContainer>
+    <p>Zero State</p>
+  </ImageContainer>
+);
+
+export default ZeroState;
diff --git a/app/components/shared/ZeroState/ZeroState.spec.js b/app/components/shared/ZeroState/ZeroState.spec.js
@@ -0,0 +1,35 @@
+import React from 'react';
+import { shallow, configure } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import renderer from 'react-test-renderer';
+import ZeroState from './ZeroState';
+
+configure({ adapter: new Adapter() });
+
+describe('ZeroState', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = shallow(<ZeroState />);
+  });
+
+  describe('rendering', () => {
+    describe('initial state', () => {
+      it('is rendered', () => {
+        const component = renderer.create(<ZeroState />);
+        const tree = component.toJSON();
+        expect(tree).toMatchSnapshot();
+      });
+
+      it('is rendered correctly', () => {
+        expect(wrapper).toHaveLength(1);
+      });
+
+      it('should have correct inital instance', () => {
+        const initialInstance = wrapper.instance();
+        const expectedInstance = null;
+        expect(initialInstance).toBe(expectedInstance);
+      });
+    });
+  });
+});
diff --git a/app/components/shared/ZeroState/__snapshots__/ZeroState.spec.js.snap b/app/components/shared/ZeroState/__snapshots__/ZeroState.spec.js.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ZeroState rendering initial state is rendered 1`] = `
+<div
+  className="sc-bdVaJa khUSez"
+>
+  <p>
+    Zero State
+  </p>
+</div>
+`;
diff --git a/app/containers/App/App.js b/app/containers/App/App.js
@@ -1,10 +1,10 @@
-import React from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import Error from '../../components/shared/Error/Error';
 import Loader from '../../components/shared/Loader/Loader';
 import Body from '../../components/Body/Body';
 
-class App extends React.PureComponent {
+class App extends PureComponent {
   constructor() {
     super();
 
@@ -43,11 +43,13 @@ class App extends React.PureComponent {
       price,
       addToCartUrl,
     } = this.props;
+
     const { validProduct } = this.state;
 
     if (isLoading && isPopup) {
       return <Loader />;
     }
+
     if (validProduct) {
       return (
         <Body

diff --git a/app/containers/App/AppContainer.js b/app/containers/App/AppContainer.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import App from './App';
 import ErrorBoundary from '../../components/shared/ErrorBoundary/ErrorBoundary';
 import getProductAvailability from '../../util/getProductAvailability';
+import handleError from '../../util/handleError';
 
 class AppContainer extends Component {
   constructor() {
@@ -21,26 +22,31 @@ class AppContainer extends Component {
   }
 
   componentDidMount() {
-    this.getProductCode();
+    return this.getProductCode();
   }
 
   getProductCode() {
     chrome.storage.local.get(['productCode', 'codeType'], this.getProductData);
   }
 
   async getProductData({ productCode, codeType }) {
-    const productData = await getProductAvailability(productCode, codeType);
-    const {
-      addToCartUrl, nearestStore, nearestStoreMapUrl, price
-    } = productData;
+    try {
+      const productData = await getProductAvailability(productCode, codeType);
+
+      const {
+        addToCartUrl, nearestStore, nearestStoreMapUrl, price
+      } = productData;
 
-    this.setState({
-      addToCartUrl,
-      nearestStore,
-      nearestStoreMapUrl,
-      price,
-      isLoading: false,
-    });
+      this.setState({
+        addToCartUrl,
+        nearestStore,
+        nearestStoreMapUrl,
+        price,
+        isLoading: false,
+      });
+    } catch (err) {
+      handleError(err);
+    }
   }
 
   render() {

diff --git a/app/util/getProductAvailability.js b/app/util/getProductAvailability.js
@@ -13,9 +13,9 @@ const isValidStoreData = storeData => storeData.stores && storeData.stores.lengt
 
 const getProductAvailability = async (productCode, codeType) => {
   const productURL = constructProductURL(productCode, codeType);
-  const productData = await api(productURL);
 
   try {
+    const productData = await api(productURL);
     if (isValidProductData(productData)) {
       const product = productData.products[0];
 
@@ -52,6 +52,14 @@ const getProductAvailability = async (productCode, codeType) => {
 
       return data;
     }
+    // No product found
+    const data = {
+      addToCartUrl: '',
+      nearestStore: undefined,
+      nearestStoreMapUrl: undefined,
+      price: undefined,
+    };
+    return data;
   } catch (err) {
     return handleError(err);
   }