[CI-3307] useProductInfo hook tests (#72)

* useProductInfo hook tests

* address comemnts

* cspell addition

Author: stanlp1

cspell.json

@@ -19,6 +19,7 @@
     "Favorited",
     "favorited",
     "dtype",
-    "cnstrc"
+    "cnstrc",
+    "Catchify",
   ]
 }

spec/ProductCard.server.test.jsx

@@ -36,7 +36,7 @@ describe('ProductCard: React Server-Side Rendering', () => {
         <ProductCard item={transformResultItem(testItem)} />
       </CioPlp>,
     );
-    expect(html).toContain('$79.00');
+    expect(html).toContain('$90.00');
   });
 
   test('Should render custom price formatting if overridden at the PlpContext level', () => {
@@ -46,7 +46,7 @@ describe('ProductCard: React Server-Side Rendering', () => {
         <ProductCard item={transformResultItem(testItem)} />
       </CioPlp>,
     );
-    expect(html).toContain('USD$79.00');
+    expect(html).toContain('USD$90.00');
   });
 
   test('Should retrieve custom price if overridden at the PlpContext level', () => {
@@ -72,7 +72,7 @@ describe('ProductCard: React Server-Side Rendering', () => {
     );
 
     // React injects <!-- --> on the server to mark dynamic content for rehydration
-    expect(html).toContain('My Rendered Price: <!-- -->$79.00');
+    expect(html).toContain('My Rendered Price: <!-- -->$90.00');
   });
 
   test('Should throw error for invalid item format', () => {

spec/local_examples/item.json

@@ -5,7 +5,7 @@
   "data": {
     "id": "KNITS00423-park bench dot",
     "url": "https://constructorio-integrations.s3.amazonaws.com/tikus-threads/2022-06-29/KNIT-CASUAL-SHIRT_BUTTON-DOWN-KNIT-SHIRT_BKT00110SG1733_3_category.jpg",
-    "price": 79,
+    "price": 90,
     "altPrice": 69,
     "sale_price": 23,
     "image_url": "https://constructorio-integrations.s3.amazonaws.com/tikus-threads/2022-06-29/KNIT-CASUAL-SHIRT_BUTTON-DOWN-KNIT-SHIRT_BKT00110SG1733_3_category.jpg",
@@ -23,7 +23,7 @@
     ],
     "variation_id": "BKT00110DG1733LR"
   },
-  "value": "Jersey Riviera Shirt (Park Bench Dot)",
+  "value": "Jersey Riviera Shirt (Red Park Bench Dot)",
   "is_slotted": false,
   "labels": {},
   "variations": [

spec/useProductInfo.test.js

@@ -0,0 +1,111 @@
+import '@testing-library/jest-dom';
+import { renderHook, waitFor } from '@testing-library/react';
+import useProductInfo from '../src/hooks/useProduct';
+import { transformResultItem } from '../src/utils/transformers';
+import mockItem from './local_examples/item.json';
+import { renderHookWithCioPlp } from './test-utils';
+
+describe('Testing Hook: useProductInfo', () => {
+  beforeEach(() => {
+    // Mock console error to de-clutter the console for expected errors
+    const spy = jest.spyOn(console, 'error');
+    spy.mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks(); // This will reset all mocks after each test
+  });
+
+  it('Should throw error if called outside of PlpContext', () => {
+    expect(() => renderHook(() => useProductInfo())).toThrow();
+  });
+
+  const transformedItem = transformResultItem(mockItem);
+
+  it('Should return productSwatch, itemName, itemImageUrl, itemUrl, itemPrice', async () => {
+    const { result } = renderHookWithCioPlp(() => useProductInfo({ item: transformedItem }));
+
+    await waitFor(() => {
+      const {
+        current: { productSwatch, itemName, itemImageUrl, itemUrl, itemPrice },
+      } = result;
+
+      expect(productSwatch).not.toBeNull();
+      expect(itemName).toEqual(transformedItem.itemName);
+      expect(itemImageUrl).toEqual(transformedItem.imageUrl);
+      expect(itemUrl).toEqual(transformedItem.url);
+      expect(itemPrice).toEqual(transformedItem.data.price);
+    });
+  });
+
+  it('Should return nothing properly with getters that return nothing', async () => {
+    const { result } = renderHookWithCioPlp(() => useProductInfo({ item: transformedItem }), {
+      initialProps: {
+        itemFieldGetters: {
+          getPrice: () => {},
+          getSwatches: () => {},
+          getSwatchPreview: () => {},
+        },
+      },
+    });
+
+    await waitFor(() => {
+      const {
+        current: { productSwatch, itemName, itemImageUrl, itemUrl, itemPrice },
+      } = result;
+
+      expect(productSwatch).not.toBeNull();
+      expect(itemName).toEqual(transformedItem.itemName);
+      expect(itemImageUrl).toEqual(transformedItem.imageUrl);
+      expect(itemUrl).toEqual(transformedItem.url);
+      expect(itemPrice).toBeUndefined();
+    });
+  });
+
+  it('Should return correctly after different variation is selected', async () => {
+    const { result } = renderHookWithCioPlp(() => useProductInfo({ item: transformedItem }));
+
+    await waitFor(() => {
+      const {
+        current: { productSwatch, itemName, itemImageUrl, itemUrl, itemPrice },
+      } = result;
+      const { selectVariation, swatchList } = productSwatch;
+      selectVariation(swatchList[1]);
+
+      expect(itemName).toEqual(swatchList[1].itemName);
+      expect(itemImageUrl).toEqual(swatchList[1].imageUrl || transformedItem.imageUrl);
+      expect(itemUrl).toEqual(swatchList[1].url || transformedItem.url);
+      expect(itemPrice).toEqual(swatchList[1].price || transformedItem.data.price);
+    });
+  });
+
+  it('Should return nothing properly with getters that throw errors', async () => {
+    const { result } = renderHookWithCioPlp(() => useProductInfo({ item: transformedItem }), {
+      initialProps: {
+        itemFieldGetters: {
+          getPrice: () => {
+            throw new Error();
+          },
+          getSwatches: () => {
+            throw new Error();
+          },
+          getSwatchPreview: () => {
+            throw new Error();
+          },
+        },
+      },
+    });
+
+    await waitFor(() => {
+      const {
+        current: { productSwatch, itemName, itemImageUrl, itemUrl, itemPrice },
+      } = result;
+
+      expect(productSwatch).not.toBeNull();
+      expect(itemName).toEqual(transformedItem.itemName);
+      expect(itemImageUrl).toEqual(transformedItem.imageUrl);
+      expect(itemUrl).toEqual(transformedItem.url);
+      expect(itemPrice).toBeUndefined();
+    });
+  });
+});

src/hooks/useProduct.ts

@@ -1,6 +1,7 @@
 import useProductSwatch from '../components/ProductSwatch/useProductSwatch';
 import { useCioPlpContext } from './useCioPlpContext';
 import { UseProductInfo } from '../types';
+import { tryCatchify } from '../utils';
 
 const useProductInfo: UseProductInfo = ({ item }) => {
   const state = useCioPlpContext();
@@ -10,7 +11,7 @@ const useProductInfo: UseProductInfo = ({ item }) => {
     throw new Error('data, itemId, or itemName are required.');
   }
 
-  const getPrice = state?.itemFieldGetters?.getPrice;
+  const getPrice = tryCatchify(state?.itemFieldGetters?.getPrice);
 
   const itemName = productSwatch?.selectedVariation?.itemName || item.itemName;
   const itemPrice = productSwatch?.selectedVariation?.price || getPrice(item);

src/types.ts

@@ -266,7 +266,7 @@ export type UseProductSwatch = (props: UseProductSwatchProps) => ProductSwatchOb
 export interface ProductInfoObject {
   productSwatch: ProductSwatchObject | undefined;
   itemName: string;
-  itemPrice: number;
+  itemPrice: number | undefined;
   itemUrl: string | undefined;
   itemImageUrl: string | undefined;
 }

src/utils.tsx

@@ -13,6 +13,30 @@ export function sleep(ms) {
   return new Promise((resolve) => setTimeout(resolve, ms));
 }
 
+/* istanbul ignore next */
+export const logger = (error: any) => {
+  try {
+    if (typeof process !== 'undefined' && process?.env?.LOGGER) {
+      // eslint-disable-next-line no-console
+      console.log(error);
+    }
+  } catch (e) {
+    // process variable is not available and logger should not be active
+  }
+};
+
+// eslint-disable-next-line @cspell/spellchecker
+export function tryCatchify(func: Function) {
+  return (...args: any) => {
+    try {
+      return func(...args);
+    } catch (e) {
+      logger(e);
+    }
+    return undefined;
+  };
+}
+
 export function removeNullValuesFromObject(obj: Object) {
   const filteredListOfEntries = Object.entries(obj).filter(([, val]) => val != null);