CURB-978 Fix tests and featuredImageBaseUrl

libraries/engage/cart/components/CartItem/CartItemProductLayout.jsx

@@ -6,7 +6,7 @@ import {
 } from '@shopgate/engage/components';
 import { CART_ITEM_IMAGE } from '@shopgate/pwa-common-commerce/cart';
 import { showTaxDisclaimer } from '@shopgate/engage/market';
-import { bin2hex } from '@shopgate/engage/core';
+import { bin2hex, getThemeSettings } from '@shopgate/engage/core';
 import { ProductImage, PriceInfo, ITEM_PATH } from '@shopgate/engage/product';
 import {
   CartItemProductChangeLocation,
@@ -25,6 +25,8 @@ import styles from './CartItemProductLayout.style';
  * @returns {JSX}
  */
 export function CartItemProductLayout() {
+  const { ListImage: gridResolutions } = getThemeSettings('AppImages') || {};
+
   const { registerFulfillmentAction, isOrderDetails, isCheckoutConfirmation } = useCartItem();
   const context = useCartItemProduct();
   const {
@@ -114,7 +116,7 @@ export function CartItemProductLayout() {
               }
             >
               <SurroundPortals portalName={CART_ITEM_IMAGE} portalProps={context}>
-                <ProductImage src={product.featuredImageUrl} />
+                <ProductImage src={product.featuredImageBaseUrl} resolutions={gridResolutions} />
               </SurroundPortals>
             </ConditionalWrapper>
           </div>

libraries/engage/cart/components/CartItem/CartItemProductLayoutWide.jsx

@@ -74,7 +74,7 @@ const CartItemProductLayoutWide = () => {
       })}
       >
         <div className={imageColumn}>
-          <ProductImage src={product.featuredImageUrl} />
+          <ProductImage src={product.featuredImageBaseUrl} />
         </div>
         <div className={detailsColumn}>
           <ConditionalWrapper

libraries/engage/components/__mocks__/index.js

@@ -67,7 +67,7 @@ export const MessageBar = () => null;
 export const Link = ({ children }) => children;
 export const Ellipsis = ({ children }) => children;
 export const SurroundPortals = ({ children }) => children;
-export const Portal = ({ children }) => children;
+export const Portal = ({ children }) => children || null; // null for portals like before, after
 export const Accordion = ({ children }) => children;
 export const ResponsiveContainer = ({ children }) => children;
 export const Grid = ({ children }) => children;

libraries/engage/core/__mocks__/index.js

@@ -9,4 +9,6 @@ export const useScrollContainer = () => true;
 export const withForwardedRef = jest.fn(Component => Component);
 export const hasWebBridge = () => false;
 export const isBeta = () => false;
+export const getThemeSettings = () => {};
+export const grantCameraPermissions = jest.fn().mockResolvedValue(true);
 /* eslint-enable require-jsdoc */

libraries/engage/favorites/components/Item/Item.jsx

@@ -17,6 +17,7 @@ import {
   bin2hex,
   showModal as showModalAction,
   historyPush as historyPushAction,
+  getThemeSettings,
 } from '@shopgate/engage/core';
 import { ResponsiveContainer, Link, SurroundPortals } from '@shopgate/engage/components';
 import { makeIsRopeProductOrderable, getPreferredLocation } from '@shopgate/engage/locations';
@@ -157,6 +158,7 @@ const FavoriteItem = ({
   showModal,
   historyPush,
 }) => {
+  const { ListImage: gridResolutions } = getThemeSettings('AppImages') || {};
   const [isDisabled, setIsDisabled] = useState(!isOrderable && !hasVariants);
   const currency = product.price?.currency || 'EUR';
   const defaultPrice = product.price?.unitPrice || 0;
@@ -242,7 +244,7 @@ const FavoriteItem = ({
         href={productLink}
       >
         <div className={styles.imageContainer}>
-          <ProductImage src={product.featuredImageUrl} />
+          <ProductImage src={product.featuredImageBaseUrl} resolutions={gridResolutions} />
         </div>
         <div className={styles.infoContainer}>
           <SurroundPortals portalName={FAVORITES_PRODUCT_NAME} portalProps={commonPortalProps}>

libraries/engage/locations/components/StoreList/StoreListProduct.jsx

@@ -26,7 +26,7 @@ function StoreListProduct() {
       <div className={styles.productContainer}>
         <div className={styles.productContainerInner}>
           <div className={styles.productImage}>
-            <ProductImage src={product.featuredImageUrl} />
+            <ProductImage src={product.featuredImageBaseUrl} />
           </div>
           <div className={styles.productContent}>
             <StoreListProductName />

libraries/engage/product/__mocks__/index.js

@@ -10,4 +10,10 @@ export { ProductContext, VariantContext } from '../components/context';
 // SELECTORS
 export const getProductDataById = jest.fn().mockReturnValue(mockedProducts.products[0]);
 
+export const productImageFormats = new Map();
+export const enableRedirectHandler = jest.fn();
+export const setDefaultProductFetchParams = jest.fn();
+export const getProductImageSettings = jest.fn().mockReturnValue({});
+export const ITEM_PATH = 'ITEM_PATH';
+
 /* eslint-enable require-jsdoc */

libraries/engage/product/components/ProductImage/__snapshots__/spec.jsx.snap

@@ -15,6 +15,7 @@ exports[`<ProductImage /> should apply an inner shadow to the image if turned of
       aria-hidden={null}
       backgroundColor="#fff"
       className="css-3hjqnz"
+      classNameImg=""
       forcePlaceholder={false}
       highestResolutionLoaded={[Function]}
       noBackground={false}
@@ -38,6 +39,7 @@ exports[`<ProductImage /> should apply an inner shadow to the image if turned of
       src="http://placehold.it/300x300"
       srcmap={null}
       transition={null}
+      unwrapped={false}
       widgetSettings={
         Object {
           "showInnerShadow": true,
@@ -84,6 +86,7 @@ exports[`<ProductImage /> should not apply an inner shadow to the image if turne
       aria-hidden={null}
       backgroundColor="#fff"
       className=""
+      classNameImg=""
       forcePlaceholder={false}
       highestResolutionLoaded={[Function]}
       noBackground={false}
@@ -107,6 +110,7 @@ exports[`<ProductImage /> should not apply an inner shadow to the image if turne
       src="http://placehold.it/300x300"
       srcmap={null}
       transition={null}
+      unwrapped={false}
       widgetSettings={
         Object {
           "mocked": "widgetSetting",
@@ -229,6 +233,7 @@ exports[`<ProductImage /> should render the image without a placeholder 1`] = `
       aria-hidden={null}
       backgroundColor="#fff"
       className=""
+      classNameImg=""
       forcePlaceholder={false}
       highestResolutionLoaded={[Function]}
       noBackground={false}
@@ -252,6 +257,7 @@ exports[`<ProductImage /> should render the image without a placeholder 1`] = `
       src="http://placehold.it/300x300"
       srcmap={null}
       transition={null}
+      unwrapped={false}
       widgetSettings={
         Object {
           "mocked": "widgetSetting",

libraries/tracking/streams/category.spec.js

@@ -104,7 +104,7 @@ describe('Category streams', () => {
      */
     const dispatchReceiveProducts = (products, categoryId) => {
       const sort = getSortOrder({});
-      const hash = generateResultHash({ categoryId, sort }, false);
+      const hash = generateResultHash({ categoryId, sort });
 
       dispatch(requestProducts({ hash }));
       dispatch(receiveProducts({

themes/theme-gmd/components/ProductGrid/components/Item/index.jsx

@@ -32,7 +32,7 @@ const Item = ({ product, display }) => (
         : <ItemImage
           productId={product.id}
           name={product.name}
-          imageUrl={product.featuredImageUrl}
+          imageUrl={product.featuredImageBaseUrl}
         />
       }
     </Link>

themes/theme-gmd/pages/subscriptions.spec.js

@@ -16,21 +16,8 @@ import subscriptions from './subscriptions';
 
 jest.unmock('@shopgate/pwa-core');
 jest.mock('@shopgate/pwa-core/classes/AppCommand');
-jest.mock('@shopgate/engage/core', () => ({
-  hasWebBridge: () => false,
-  useScrollContainer: () => false,
-  isIOSTheme: () => false,
-  isBeta: () => false,
-  withCurrentProduct: component => component,
-  withForwardedRef: jest.fn(),
-  grantCameraPermissions: jest.fn().mockResolvedValue(true),
-}));
-jest.mock('@shopgate/engage/product', () => ({
-  productImageFormats: new Map(),
-  enableRedirectHandler: jest.fn(),
-  setDefaultProductFetchParams: jest.fn(),
-  ITEM_PATH: 'ITEM_PATH',
-}));
+jest.mock('@shopgate/engage/core');
+jest.mock('@shopgate/engage/product');
 
 const currentPath = '/some/path';