Merge pull request #5 from ShadowDraco/finishing

fix quiet unhandled rejection errors
ShadowDraco · Jul 12, 2023 · 94bc235 · 94bc235
2 parents e92c60b + dac2871
commit 94bc235
Show file tree

Hide file tree

Showing 11 changed files with 107 additions and 38 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -10,7 +10,7 @@ import CartPage from './components/CartPage';
 import StoreFront from './components/StoreFront';
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
 
-function App() {
+function App({ testProducts, testCategories }) {
   return (
     <Box>
       <Header />
@@ -19,7 +19,12 @@ function App() {
         <Routes>
           <Route
             path='/'
-            element={<StoreFront />}
+            element={
+              <StoreFront
+                testProducts={testProducts}
+                testCategories={testCategories}
+              />
+            }
           />
           <Route
             path='/cart'

diff --git a/src/components/ActiveProduct/ActiveProduct.test.jsx b/src/components/ActiveProduct/ActiveProduct.test.jsx
@@ -7,9 +7,9 @@ test('renders selected product card', () => {
   const product = {
     name: 'TV',
     description: 'See all the things',
-    url: `${import.meta.env.VITE_UNSPLASH_URL}tv`,
+    url: `https://source.unsplash.com/random?tv`,
     price: 600,
-    inventory: Math.random() * 20 + 10,
+    inStock: Math.random() * 20 + 10,
   };
   render(
     <Provider store={store}>

diff --git a/src/components/ActiveProduct/index.jsx b/src/components/ActiveProduct/index.jsx
@@ -41,19 +41,25 @@ export default function ActiveProduct({ product }) {
   const params = useParams();
 
   useEffect(() => {
-    dispatch(setCurrentProduct()).then(data =>
-      dispatch(
-        getCurrentProduct({ results: data.payload.results, id: params.id })
-      )
-    );
+    if (typeof product === undefined) {
+      console.log('\n\nNO TEST ACTIVE PRODUCT ', product);
+      try {
+        dispatch(setCurrentProduct()).then(data =>
+          dispatch(
+            getCurrentProduct({ results: data.payload.results, id: params.id })
+          )
+        );
+      } catch (error) {
+        console.error('Error in ActiveProduct UseEffect', error);
+      }
+    }
   }, [params.id]);
 
   const currentProduct = product
     ? product
     : useSelector(state => state.products.currentProduct);
   const dispatch = useDispatch();
 
-
   return (
     currentProduct && (
       <Box mb={10}>

diff --git a/src/components/Categories/Categories.test.jsx b/src/components/Categories/Categories.test.jsx
@@ -2,15 +2,12 @@ import { render, screen, fireEvent } from '@testing-library/react';
 import Categories from '../Categories';
 import store from '../../redux/store';
 import { Provider } from 'react-redux';
+import { initialCategories } from '../../redux/reducers/categories';
 
 test('renders main title', () => {
-  const mockFunction = parameter => {
-    return parameter;
-  };
-
   render(
     <Provider store={store}>
-      <Categories setChosenCategory={mockFunction} />
+      <Categories testCategories={initialCategories} />
     </Provider>
   );
 

diff --git a/src/components/Categories/index.jsx b/src/components/Categories/index.jsx
@@ -10,15 +10,24 @@ import { ButtonGroup, Button, Box, Typography, Container } from '@mui/material';
 import PropTypes from 'prop-types';
 import { useEffect } from 'react';
 
-export default function Categories() {
+export default function Categories({ testCategories }) {
   const chosenCategory = useSelector(state => state.chosenCategory);
-  const categories = useSelector(state => state.categories);
+  const categories = testCategories
+    ? testCategories
+    : useSelector(state => state.categories);
   const dispatch = useDispatch();
 
   useEffect(() => {
-    dispatch(fetchCategories()).then(data => {
-      dispatch(updateCategories(data));
-    });
+    if (typeof testCategories === undefined) {
+      console.log('\n\nNO TEST CATEGORY ', testCategories);
+      try {
+        dispatch(fetchCategories()).then(data => {
+          dispatch(updateCategories(data));
+        });
+      } catch (error) {
+        console.error('Error in Categories UseEffect', error);
+      }
+    }
   }, []);
 
   return (

diff --git a/src/components/Products/Products.test.jsx b/src/components/Products/Products.test.jsx
@@ -4,9 +4,26 @@ import store from '../../redux/store';
 import { Provider } from 'react-redux';
 
 test('renders product card', () => {
+  const testProducts = [
+    {
+      name: 'Pizza',
+      description: 'See all the things',
+      category: 'food',
+      price: 600,
+      inStock: Math.random() * 20 + 10,
+    },
+    {
+      name: 'cookies',
+      description: 'See all the things',
+      category: 'food',
+      price: 600,
+
+      inStock: Math.random() * 20 + 10,
+    },
+  ];
   render(
     <Provider store={store}>
-      <Products />
+      <Products testProducts={testProducts} />
     </Provider>
   );
 

diff --git a/src/components/Products/index.jsx b/src/components/Products/index.jsx
@@ -23,14 +23,24 @@ import {
 import { setCurrentProduct } from '../../redux/reducers/currentProduct';
 import { addToCart } from '../../redux/reducers/cart';
 
-export default function Products() {
+export default function Products({ testCategories, testProducts }) {
   useEffect(() => {
-    dispatch(fetchProducts()).then(data => dispatch(getProducts(data)));
+    if (typeof testProducts === undefined) {
+      try {
+        dispatch(fetchProducts()).then(data => dispatch(getProducts(data)));
+      } catch (error) {
+        console.error('Error in Products UseEffect', error);
+      }
+    }
   }, []);
 
-  const categories = useSelector(state => state.categories);
+  const categories = testCategories
+    ? testCategories
+    : useSelector(state => state.categories);
   const chosenCategory = useSelector(state => state.chosenCategory);
-  const products = useSelector(state => state.products);
+  const products = testProducts
+    ? testProducts
+    : useSelector(state => state.products);
   const dispatch = useDispatch();
 
   return (

diff --git a/src/components/StoreFront/index.jsx b/src/components/StoreFront/index.jsx
@@ -7,12 +7,12 @@ import { Container } from '@mui/material';
 
 import Cart from '../Cart';
 
-export default function StoreFront() {
+export default function StoreFront({ testProducts, testCategories }) {
   return (
     <Container>
       <Cart />
-      <Categories />
-      <Products />
+      <Categories testCategories={testCategories} />
+      <Products testProducts={testProducts} />
     </Container>
   );
 }
diff --git a/src/redux/reducers/categories.js b/src/redux/reducers/categories.js
@@ -30,9 +30,13 @@ export const chosenCategory = createReducer(initialChosenCategory, {
 export const fetchCategories = createAsyncThunk(
   'updateCategories',
   async () => {
+    try {
     const response = await axios.get(
       `${import.meta.env.VITE_API_URL}/categories`
     );
     return response.data;
+    } catch(error) {
+      console.error('Error fetching Categories', error)
+    }
   }
 );
diff --git a/src/redux/reducers/products.js b/src/redux/reducers/products.js
@@ -41,27 +41,41 @@ export const products = createReducer(initialProducts, {
 export const setCurrentProduct = createAsyncThunk(
   getCurrentProduct,
   async () => {
+    try {
+      const response = await axios.get(
+        `${import.meta.env.VITE_API_URL}/products`
+      );
+      return response.data;
+    } catch (error) {
+      console.error('Error setting current product', error);
+    }
+  }
+);
+
+export const fetchProducts = createAsyncThunk(getProducts, async () => {
+  try {
     const response = await axios.get(
       `${import.meta.env.VITE_API_URL}/products`
     );
     return response.data;
+  } catch (error) {
+    console.error('Error fetching Products', error);
   }
-);
-
-export const fetchProducts = createAsyncThunk(getProducts, async () => {
-  const response = await axios.get(`${import.meta.env.VITE_API_URL}/products`);
-  return response.data;
 });
 
 export const asyncUpdateProduct = createAsyncThunk(
   updateProduct,
   async item => {
-    const response = await axios.put(
-      `${import.meta.env.VITE_API_URL}/products/${item._id}`,
-      { inStock: item.inStock }
-    );
+    try {
+      const response = await axios.put(
+        `${import.meta.env.VITE_API_URL}/products/${item._id}`,
+        { inStock: item.inStock }
+      );
 
-    return response.data;
+      return response.data;
+    } catch (error) {
+      console.error('Error Updating Product', error);
+    }
   }
 );
 

diff --git a/tests/setup.ts b/tests/setup.ts
@@ -7,3 +7,10 @@ expect.extend(matchers);
 afterEach(() => {
   cleanup();
 });
+
+// FAIL LOUDLY on unhandled promise rejections / errors
+process.on('unhandledRejection', reason => {
+  // eslint-disable-next-line no-console
+  console.log(`FAILED TO HANDLE PROMISE REJECTION`);
+  throw reason;
+});