fix(tests): use more accurate totalValue

Enhances the tests to ensure the totalValue is more accurate. Establishes
that totalValue is indeed the total value of the products in the event.

Author: xav-ie

packages/hydrogen-react/src/analytics-schema-custom-storefront-customer-tracking.test.ts

@@ -8,14 +8,107 @@ import {
 import {
   BASE_PAYLOAD,
   BASE_PRODUCT_PAYLOAD,
+  getProductsValue,
+  getProductValue,
+  randomNatural,
 } from './analytics-schema.test.helpers.js';
 import type {
   ShopifyAnalyticsPayload,
+  ShopifyAnalyticsProduct,
   ShopifyMonorailPayload,
   ShopifyPageViewPayload,
 } from './analytics-types.js';
 import {version} from '../package.json';
 
+describe(`product value helpers - accurate results`, () => {
+  describe(`getProductValue`, () => {
+    it(`gets single quantity product value`, () => {
+      const productPayload = {
+        ...BASE_PRODUCT_PAYLOAD,
+        quantity: 1,
+      };
+      const calculatedValue = getProductValue(productPayload);
+
+      expectType<ShopifyAnalyticsProduct>(productPayload);
+      expect(calculatedValue).toEqual(parseFloat(productPayload.price));
+    });
+
+    it(`gets arbitrary quantity product value`, () => {
+      const productPayload = {
+        ...BASE_PRODUCT_PAYLOAD,
+        quantity: randomNatural(),
+      };
+      const calculatedValue = getProductValue(productPayload);
+
+      expectType<ShopifyAnalyticsProduct>(productPayload);
+      expect(calculatedValue).toBeCloseTo(
+        parseFloat(productPayload.price) * productPayload.quantity,
+      );
+    });
+  });
+
+  describe(`getProductsValue`, () => {
+    it(`gets singleton products value`, () => {
+      const productPayload = {
+        ...BASE_PRODUCT_PAYLOAD,
+        quantity: randomNatural(),
+      };
+      const productsPayload = [productPayload];
+      const addToCartPayload = {
+        ...BASE_PAYLOAD,
+        cartId: 'gid://shopify/Cart/abc123',
+        products: productsPayload,
+        totalValue: getProductsValue(productsPayload),
+      };
+
+      expectType<ShopifyAnalyticsProduct>(productPayload);
+      expect(addToCartPayload.totalValue).toBeCloseTo(
+        parseFloat(productPayload.price) * productPayload.quantity,
+      );
+    });
+
+    it(`gets tuple products value`, () => {
+      const productPayload = {
+        ...BASE_PRODUCT_PAYLOAD,
+        quantity: randomNatural(),
+      };
+      const productsPayload = [productPayload, productPayload];
+      const addToCartPayload = {
+        ...BASE_PAYLOAD,
+        cartId: 'gid://shopify/Cart/abc123',
+        products: productsPayload,
+        totalValue: getProductsValue(productsPayload),
+      };
+
+      expectType<ShopifyAnalyticsProduct>(productPayload);
+      expect(addToCartPayload.totalValue).toBeCloseTo(
+        parseFloat(productPayload.price) * productPayload.quantity * 2,
+      );
+    });
+
+    it(`gets N products value`, () => {
+      const productPayload = {
+        ...BASE_PRODUCT_PAYLOAD,
+        quantity: randomNatural(),
+      };
+      const productsPayload = new Array(randomNatural()).fill(productPayload);
+      const addToCartPayload = {
+        ...BASE_PAYLOAD,
+        cartId: 'gid://shopify/Cart/abc123',
+        products: productsPayload,
+        totalValue: getProductsValue(productsPayload),
+      };
+
+      expectType<ShopifyAnalyticsProduct>(productPayload);
+      expect(addToCartPayload.totalValue).toBeCloseTo(
+        parseFloat(productPayload.price) *
+          productPayload.quantity *
+          productsPayload.length,
+      );
+    });
+  });
+});
+
 describe(`analytics schema - custom storefront customer tracking`, () => {
   describe('page view', () => {
     it(`base payload with default values`, () => {
@@ -141,7 +234,7 @@ describe(`analytics schema - custom storefront customer tracking`, () => {
         const pageViewPayload = {
           ...BASE_PAYLOAD,
           pageType: 'product',
-          totalValue: 100,
+          totalValue: getProductsValue(BASE_PAYLOAD.products),
         };
         const events = pageView(pageViewPayload);
 
@@ -169,7 +262,7 @@ describe(`analytics schema - custom storefront customer tracking`, () => {
           ...BASE_PAYLOAD,
           pageType: 'product',
           products: [productPayload],
-          totalValue: 100,
+          totalValue: getProductValue(productPayload),
         };
         const events = pageView(pageViewPayload);
 
@@ -184,7 +277,6 @@ describe(`analytics schema - custom storefront customer tracking`, () => {
         expect(events[1]).toEqual(
           getExpectedPayload(pageViewPayload, {
             event_name: 'product_page_rendered',
-            total_value: pageViewPayload.totalValue,
             // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
             products: expect.anything(),
             canonical_url: pageViewPayload.url,
@@ -217,7 +309,7 @@ describe(`analytics schema - custom storefront customer tracking`, () => {
           ...BASE_PAYLOAD,
           pageType: 'product',
           products: [productPayload],
-          totalValue: 100,
+          totalValue: getProductValue(productPayload),
         };
         const events = pageView(pageViewPayload);
 
@@ -293,7 +385,7 @@ describe(`analytics schema - custom storefront customer tracking`, () => {
         ...BASE_PAYLOAD,
         cartId: 'gid://shopify/Cart/abc123',
         products: [productPayload],
-        totalValue: 100,
+        totalValue: getProductValue(productPayload),
       };
       const events = addToCart(addToCartPayload);
 
@@ -322,6 +414,45 @@ describe(`analytics schema - custom storefront customer tracking`, () => {
         price: parseFloat(productPayload.price),
       });
     });
+
+    it(`with base product payload quantity 1`, () => {
+      const productPayload = {
+        ...BASE_PRODUCT_PAYLOAD,
+        quantity: 1,
+      };
+      const addToCartPayload = {
+        ...BASE_PAYLOAD,
+        cartId: 'gid://shopify/Cart/abc123',
+        products: [productPayload],
+        totalValue: getProductValue(productPayload),
+      };
+      const events = addToCart(addToCartPayload);
+
+      expectType<ShopifyMonorailPayload[]>(events);
+      expect(events.length).toBe(1);
+      expect(events[0]).toEqual(
+        getExpectedPayload(addToCartPayload, {
+          event_name: 'product_added_to_cart',
+          cart_token: 'abc123',
+          total_value: addToCartPayload.totalValue,
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+          products: expect.anything(),
+        }),
+      );
+      const productEventPayload = events[0].payload;
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+      const product = JSON.parse(
+        (productEventPayload.products && productEventPayload.products[0]) ||
+          '{}',
+      );
+      expect(product).toEqual({
+        ...getForwardedProductPayload(productPayload),
+        variant: '',
+        quantity: 1,
+        product_id: 1,
+        price: parseFloat(productPayload.price),
+      });
+    });
   });
 });
 

packages/hydrogen-react/src/analytics-schema.test.helpers.ts

@@ -26,3 +26,18 @@ export const BASE_PRODUCT_PAYLOAD: ShopifyAnalyticsProduct = {
   brand: faker.string.sample(),
   price: faker.number.float().toString(),
 };
+
+export const randomNatural = () => faker.number.int({min: 1, max: 1000});
+
+/** Get singular product value  */
+export const getProductValue = (product: ShopifyAnalyticsProduct): number =>
+  parseFloat(product.price) * (product.quantity || 0);
+/** Reduce all products and get totalValue */
+export const getProductsValue = (
+  products?: ShopifyAnalyticsProduct[],
+): number | undefined =>
+  products?.reduce(
+    (previousValue, currentProduct) =>
+      previousValue + getProductValue(currentProduct),
+    0,
+  );