@blaze-cms/react-page-builder 0.119.1 → 0.120.0-alpha.3

package/src/components/Banner/BannerRender.js

@@ -33,6 +33,7 @@ const BannerRender = ({
   action,
   actionKey,
   cardBannerIndex,
+  userPropsData,
   ...otherProps
 }) => {
   const { id } = otherProps;
@@ -63,7 +64,6 @@ const BannerRender = ({
   });
 
   const parsedTargetings = buildContextualTargeting(actionKey, entityRecordData, propsToDisplay);
-
   const { entityData } = bannerData;
   const { sizes: bannerSizes } = entityData || {};
 
@@ -81,7 +81,7 @@ const BannerRender = ({
 
   const customTargetings = setCustomTargetings(targetings, cardBannerIndex);
 
-  const targetingArguments = { ...parsedTargetings, ...customTargetings };
+  const targetingArguments = { ...parsedTargetings, ...customTargetings, ...userPropsData };
 
   return (
     <AdSlotRender
@@ -107,7 +107,8 @@ BannerRender.propTypes = {
   entity: PropTypes.string,
   targetings: PropTypes.string,
   sizes: PropTypes.string,
-  cardBannerIndex: PropTypes.number
+  cardBannerIndex: PropTypes.number,
+  userPropsData: PropTypes.object
 };
 
 BannerRender.defaultProps = {
@@ -118,7 +119,8 @@ BannerRender.defaultProps = {
   entity: '',
   targetings: '',
   sizes: '',
-  cardBannerIndex: null
+  cardBannerIndex: null,
+  userPropsData: {}
 };
 
 export default withTitle(BannerRender);

package/src/components/Banner/helpers.js

@@ -1,6 +1,4 @@
 import { parseUrl } from 'query-string';
-import flatten from 'lodash.flatten';
-import getPropValues from '../../helpers/get-prop-values';
 import { END_ADUNIT, MAX_BANNER_HEIGHT, MIN_BANNER_HEIGHT } from '../../constants';
 
 const getParsedSizes = (sizes = '') => {
@@ -82,12 +80,8 @@ const buildBannerSizes = (sizeId, bannerSizes, sizes) => {
 
 const buildContextualTargeting = (actionKey, props = {}, propsToDisplay = []) => {
   if (actionKey && props[actionKey] && props[actionKey][0]) {
-    return propsToDisplay.reduce((acc, { label, propertiesToDisplay }) => {
-      const propValue = getPropValues(propertiesToDisplay, props[actionKey][0]);
-      const parsedValue = Array.isArray(propValue) ? flatten(propValue) : propValue;
-      acc[label] = parsedValue;
-      return acc;
-    }, {});
+    const data = props[actionKey][0];
+    return buildPropsData(data, propsToDisplay);
   }
   return {};
 };
@@ -135,6 +129,59 @@ const getMinBannerHeight = bannerSizes => {
   return MIN_BANNER_HEIGHT;
 };
 
+const buildUserQuery = userProps => {
+  if (!userProps || !userProps.length) return '';
+  const basicProps = [];
+  const nestedProps = {};
+  userProps.forEach(({ propertiesToDisplay }) => {
+    const [propKey] = propertiesToDisplay;
+    if (!propKey || propKey === 'id') return;
+    if (propKey.indexOf('.') !== -1) {
+      const [baseProp, nestedProp] = propKey.split('.');
+      if (nestedProps[baseProp]) nestedProps[baseProp].push(nestedProp);
+      else nestedProps[baseProp] = [nestedProp];
+    } else basicProps.push(propKey);
+  });
+
+  Object.keys(nestedProps).forEach(nestedKey => {
+    const nested = nestedProps[nestedKey];
+    basicProps.push(nestedKey);
+    basicProps.push('{');
+    nested.forEach(prop => basicProps.push(prop));
+    basicProps.push('}');
+  });
+
+  return basicProps.join(' ');
+};
+
+const buildPropsData = (data, props) => {
+  if (!data || !props.length) return {};
+  const propsWithData = {};
+
+  props.forEach(({ propertiesToDisplay, label }) => {
+    const [key] = propertiesToDisplay;
+    const parsedKey = key.split('.');
+    const value = getNestedValue(parsedKey, data);
+    const labelToUse = label || key;
+
+    if (value) propsWithData[labelToUse] = value;
+  });
+  return propsWithData;
+};
+
+const parseArrayValues = (arr, key) =>
+  arr
+    .map(obj => obj[key])
+    .filter(Boolean)
+    .join(', ');
+
+const getNestedValue = (keys, object) => {
+  const key = keys.shift();
+  const nestedValue = Array.isArray(object) ? parseArrayValues(object, key) : object[key];
+  if (!nestedValue) return null;
+  return keys.length ? getNestedValue(keys, nestedValue) : nestedValue;
+};
+
 export {
   getParsedSizes,
   setCustomTargetings,
@@ -143,5 +190,7 @@ export {
   buildContextualTargeting,
   buildSizeMapping,
   getMaxBannerHeight,
-  getMinBannerHeight
+  getMinBannerHeight,
+  buildPropsData,
+  buildUserQuery
 };

package/src/components/BlazeLink.js

@@ -7,6 +7,7 @@ const BlazeLink = ({ children, className, name, href, as, shallow, scroll, gtmId
   const { hasGTM } = useContext(MainContext);
   const gtmProps = hasGTM && !!gtmId ? { gtmId } : {};
   const linkExtraProps = buildLinkExtraProps({ className, name, as, ...gtmProps });
+  if (!href) return children;
 
   return (
     <Link href={href} shallow={shallow} scroll={scroll} onClick={onClick} {...linkExtraProps}>

package/src/components/Card/Card.js

@@ -93,11 +93,9 @@ const Card = ({
               ))}
             {displayTitle && (
               <h2 className={getModifiers('card__title', modifiers)}>
-                {url && (
-                  <BlazeLink title={linkTitle} gtmId={gtmId} href={url} scroll>
-                    {headline}
-                  </BlazeLink>
-                )}
+                <BlazeLink title={linkTitle} gtmId={gtmId} href={url} scroll>
+                  {headline}
+                </BlazeLink>
               </h2>
             )}
             {!!propsToDisplay.length && (

package/src/components/Card/CardContainer.js

@@ -109,7 +109,9 @@ CardContainer.propTypes = {
   itemsPerRow: PropTypes.number,
   enableCarousel: PropTypes.bool,
   bannerModifier: PropTypes.string,
-  priorityLimit: PropTypes.number
+  priorityLimit: PropTypes.number,
+  enableAutoScroll: PropTypes.bool,
+  autoScrollTimer: PropTypes.number
 };
 
 CardContainer.defaultProps = {
@@ -127,7 +129,9 @@ CardContainer.defaultProps = {
   itemsPerRow: 1,
   enableCarousel: false,
   bannerModifier: '',
-  priorityLimit: 0
+  priorityLimit: 0,
+  enableAutoScroll: false,
+  autoScrollTimer: 0
 };
 
 export default withTitle(CardContainer);

package/src/components/Card/CardRender.js

@@ -22,6 +22,7 @@ import { filtersSetup, filterQuerySetup, shouldSkipSingleQuery, shouldReturn } f
 const CardContainer = dynamic(() => import('./CardContainer'));
 
 const CardRender = ({ entity, entityFields, itemsToDisplay, children, ...otherProps }) => {
+  const { isPreview } = useContext(MainContext);
   const {
     parent: { itemId, itemEntity },
     filterBy = [],
@@ -29,7 +30,8 @@ const CardRender = ({ entity, entityFields, itemsToDisplay, children, ...otherPr
     sortby,
     sort,
     sortProperties = [],
-    operator: filterOperator = AND
+    operator: filterOperator = AND,
+    useRandomSort
   } = otherProps;
 
   const updatedSortProperties = [...sortProperties];
@@ -55,14 +57,15 @@ const CardRender = ({ entity, entityFields, itemsToDisplay, children, ...otherPr
     entity
   ]);
 
-  const { isPreview } = useContext(MainContext);
-  const { entityType, docType } = getEntityData(entity);
+  const schemas = Object.values(mainSchemas);
+  const currentSchema = schemas.find(({ identifier }) => identifier === itemEntityUpdated) || {};
+  const filterEntitySchema = schemas.find(({ id }) => entity === id) || {};
+  const { entityType, docType } = getEntityData(entity, filterEntitySchema);
+
   const {
     getAction,
     queryProps,
     inheritedFilters,
-    currentSchema,
-    filterEntitySchema,
     entitySameAsCurrentItemEntity,
     action,
     filterEntityRelations
@@ -72,7 +75,8 @@ const CardRender = ({ entity, entityFields, itemsToDisplay, children, ...otherPr
     filterBy,
     filterByProperty,
     entity,
-    getEntitySchemas: Object.values(mainSchemas),
+    currentSchema,
+    filterEntitySchema,
     isPreview,
     itemEntityUpdated
   });
@@ -111,12 +115,15 @@ const CardRender = ({ entity, entityFields, itemsToDisplay, children, ...otherPr
     filterOperator,
     filterEntityRelations,
     itemsToDisplay,
-    entitySameAsCurrentItemEntity
+    entitySameAsCurrentItemEntity,
+    useRandomSort
   });
   const { data, error: cardsError, loading: cardsLoading } = useQuery(action, {
     variables,
+    fetchPolicy: useRandomSort ? 'cache-and-network' : 'cache-first',
     skip: shouldReturn(!updatedFilterBy, _loading, _load, schemaLoading, _error, _err, schemaError)
   });
+
   const imageIds = itemsToDisplay.map(({ imageId }) => imageId).filter(Boolean);
   const { data: imagesData, loading: imagesLoading } = useGetImages(imageIds, true);
   const isLoading = shouldReturn(_loading, _load, schemaLoading, cardsLoading, imagesLoading);
@@ -126,11 +133,10 @@ const CardRender = ({ entity, entityFields, itemsToDisplay, children, ...otherPr
   if (isLoading) return '';
   if (hasError) return null;
   if (cardsError) return cardsError.message;
-
   let { results: cardData } = data[SEARCH_PUBLISHED_CONTENT];
   if (!cardData || !cardData.length) return null;
   cardData = entitySameAsCurrentItemEntity ? removeExtraItems(cardData, limit, itemId) : cardData;
-  const orderedData = sortResponseData(cardData, itemsToDisplay);
+  const orderedData = useRandomSort ? cardData : sortResponseData(cardData, itemsToDisplay);
   const { regularChildren, gtmChildren } = splitChildren(children, cardData, entity, {
     name: variableProps.name
   });

package/src/components/Card/helpers/filter-query-setup.js

@@ -11,7 +11,9 @@ const filterQuerySetup = ({
   filterOperator,
   filterEntityRelations,
   itemsToDisplay,
-  entitySameAsCurrentItemEntity
+  entitySameAsCurrentItemEntity,
+  entitySchema,
+  useRandomSort
 }) => {
   const stringProps = getStringTypeProps(entity, filterEntityRelations, getEntitySchemas);
   const filterValues =
@@ -27,7 +29,9 @@ const filterQuerySetup = ({
       relations: filterEntityRelations,
       stringProps,
       itemsToDisplay,
-      addListFiltersToQuery: true
+      addListFiltersToQuery: true,
+      entity,
+      entitySchema
     })
   };
 
@@ -39,7 +43,9 @@ const filterQuerySetup = ({
     filterEntityRelations,
     { ...variableProps, limit: requestLimit },
     stringProps,
-    JSON.stringify(rawQuery)
+    rawQuery,
+    false,
+    useRandomSort
   );
 
   return { variables, limit };

package/src/components/Card/helpers/filters-setup.js

@@ -7,18 +7,15 @@ const filtersSetup = ({
   filterBy,
   filterByProperty,
   entity,
-  getEntitySchemas,
+  currentSchema,
+  filterEntitySchema,
   isPreview,
   itemEntityUpdated
 }) => {
   const fields = buildQueryFields(entityFields, entityType);
   const action = getSearchPublishedContent(fields);
   const inheritedFilters = getInheritedFilters(filterBy, filterByProperty);
-
   const entitySameAsCurrentItemEntity = itemEntityUpdated === entity;
-  const currentSchema =
-    getEntitySchemas.find(({ identifier }) => identifier === itemEntityUpdated) || {};
-  const filterEntitySchema = getEntitySchemas.find(({ id }) => entity === id) || {};
   const { relations: filterEntityRelations = [] } = filterEntitySchema;
   const queryProps = getQueryProps(inheritedFilters, currentSchema, filterEntitySchema);
   const { actions = {} } = currentSchema || {};

package/src/components/List/ListBuilder.js

@@ -62,7 +62,7 @@ const ListBuilder = props => {
   const shouldApplyDefaultSort = !sortProperties || !sortProperties.length;
   const itemsPerPageToUse = getItemsPerPageToUse(itemsPerPage, limitToUse);
   const initialOffset = getCurrentOffset(offset, itemsPerPageToUse, paginationIndex, limitToUse);
-  const { entityType, docType } = getEntityData(entity);
+  const { entityType, docType } = getEntityData(entity, requiredSchema);
   const fields = buildQueryFields(entityFields, entityType, !isCard);
   const action = getSearchPublishedContent(fields);
   const actionKey = SEARCH_PUBLISHED_CONTENT;
@@ -110,7 +110,7 @@ const ListBuilder = props => {
       sortProperties
     },
     stringProps,
-    JSON.stringify(azRawQuery),
+    azRawQuery,
     isTextSearchFilterApplied
   );
 
@@ -153,7 +153,7 @@ const ListBuilder = props => {
       sortProperties
     },
     stringProps,
-    JSON.stringify(rawQuery),
+    rawQuery,
     isTextSearchFilterApplied
   );
 

package/src/helpers/build-props-query.js

@@ -59,7 +59,7 @@ const getTypeBaseProps = (data, cardOptions, extraPropsHaveCategory) => {
   if (!isCard) return { typeBasedProps: [ID], shouldAddCategoryProps };
 
   const { getEntitySchema } = data;
-  const { interfaces, properties, dynamicProperties } = getEntitySchema;
+  const { interfaces, properties, dynamicProperties, relations } = getEntitySchema;
 
   const isContent = !!interfaces.includes('content/content');
   const hasCategory = checkProps(properties) || checkProps(dynamicProperties);
@@ -68,19 +68,16 @@ const getTypeBaseProps = (data, cardOptions, extraPropsHaveCategory) => {
   const typeBasedProps = [...defaultProps];
 
   typeBasedProps.push(...getCategoyProps(shouldAddCategoryProps, hasCategory, hasPreheader));
-  typeBasedProps.push(...getContentProps(isContent, displayThumbnail));
+  typeBasedProps.push(...getContentProps(isContent));
+
+  if (displayThumbnail && relations.find(({ localField }) => localField === 'image')) {
+    typeBasedProps.push('image.id', 'image.url', 'image.data');
+  }
 
   return { typeBasedProps, shouldAddCategoryProps };
 };
 
-const getContentProps = (isContent, displayThumbnail) => {
-  if (!isContent) return [];
-
-  const props = ['url', 'sponsored', 'featured'];
-  if (displayThumbnail) props.push('image.id', 'image.url', 'image.data');
-
-  return props;
-};
+const getContentProps = isContent => (isContent ? ['url', 'sponsored', 'featured'] : []);
 
 const getCategoyProps = (shouldAddCategoryProps, hasCategory, hasPreheader) => {
   if (!shouldAddCategoryProps) return [];

package/src/helpers/get-entity-data.js

@@ -1,11 +1,19 @@
 import upperFirst from 'lodash.upperfirst';
 import camelcase from 'lodash.camelcase';
 
-const getEntityData = entity => {
-  const docType = `published_${entity}`;
-  const entityType = `Published${upperFirst(camelcase(entity))}`;
+const getEntityData = (entity, schema) => {
+  const publishedDocType = `published_${entity}`;
+  const publishedEntityType = `Published${upperFirst(camelcase(entity))}`;
 
-  return { docType, entityType };
+  if (schema) {
+    const { interfaces, [entity]: { interfaces: nestedInterfaces } = {} } = schema || {};
+    const interfacesToCheck = interfaces || nestedInterfaces;
+    if (interfacesToCheck && !interfacesToCheck.includes('publish/publishable')) {
+      return { docType: entity, entityType: upperFirst(camelcase(entity)) };
+    }
+  }
+
+  return { docType: publishedDocType, entityType: publishedEntityType };
 };
 
 export default getEntityData;

package/src/helpers/get-generic-render-variables.js

@@ -3,6 +3,7 @@ import { DEFAULT_LIMIT, DEFAULT_OFFSET } from '../constants';
 
 const buildSortValues = (sortFilters, relations, stringProps) => {
   if (!sortFilters || !sortFilters.length) return { sort: [] };
+
   const sortValues = sortFilters
     .map(({ sort, propsToDisplay }) => {
       if (!sort) return null;
@@ -32,18 +33,41 @@ const getGenericRenderVariables = (
   relations,
   filterProps = {},
   stringProps = [],
-  rawQueryStringified = '',
-  isTextSearchFilterApplied = false
+  rawQuery = {},
+  isTextSearchFilterApplied = false,
+  useRandomSort = false
 ) => {
   const { limit = DEFAULT_LIMIT, offset } = filterProps;
+  const limitToUse = Number(limit || DEFAULT_LIMIT);
+  const offsetToUse = Number(offset || DEFAULT_OFFSET);
+
+  if (useRandomSort) {
+    const rawQueryStringified = JSON.stringify({
+      query: {
+        function_score: {
+          query: rawQuery,
+          random_score: {},
+          boost_mode: 'replace'
+        }
+      }
+    });
+
+    return {
+      limit: limitToUse,
+      offset: offsetToUse,
+      rawQueryStringified
+    };
+  }
+
   const sort = getCorrectSort(relations, filterProps, stringProps, isTextSearchFilterApplied);
-  const raw = rawQueryStringified ? { rawQueryStringified } : {};
 
   return {
-    limit: Number(limit || DEFAULT_LIMIT),
-    offset: Number(offset || DEFAULT_OFFSET),
+    limit: limitToUse,
+    offset: offsetToUse,
     ...sort,
-    ...raw
+    rawQueryStringified: JSON.stringify({
+      query: rawQuery
+    })
   };
 };
 

package/tests/unit/src/components/Banner/helpers.test.js

@@ -17,10 +17,6 @@ const tagsTargetingResult = { tags: ['destinations', 'models'] };
 
 describe('getParsedSizes helper', () => {
   const sizes = getParsedSizes(mockedSizes);
-  it('should be a function', () => {
-    expect(typeof getParsedSizes).toEqual('function');
-  });
-
   it('should match snapshot', () => {
     expect(getParsedSizes).toMatchSnapshot();
   });
@@ -46,10 +42,6 @@ describe('getParsedSizes helper', () => {
 describe('setCustomTargetings helper', () => {
   const targetingsEmpty = setCustomTargetings('');
 
-  it('should be a function', () => {
-    expect(typeof setCustomTargetings).toEqual('function');
-  });
-
   it('should always return an object', () => {
     expect(typeof targetingsEmpty).toBe('object');
   });
@@ -85,10 +77,6 @@ describe('buildParsedAdunit helper', () => {
   const parsedAdunit = buildParsedAdunit('/test-path/article', 0, '', '');
   const parsedAdunitEmpty = buildParsedAdunit('/test-path/article', undefined, '', '');
 
-  it('should be a function', () => {
-    expect(typeof buildParsedAdunit).toEqual('function');
-  });
-
   it('should always return a string', () => {
     expect(typeof parsedAdunit).toBe('string');
     expect(typeof parsedAdunitEmpty).toBe('string');
@@ -125,10 +113,6 @@ describe('buildParsedAdunit helper', () => {
 });
 
 describe('buildBannerSizes helper', () => {
-  it('should be a function', () => {
-    expect(typeof buildBannerSizes).toEqual('function');
-  });
-
   it('should return an array of sizes based on given sizeId', () => {
     const parsedSizes = buildBannerSizes(
       'sizeId',
@@ -145,10 +129,6 @@ describe('buildBannerSizes helper', () => {
 });
 
 describe('buildContextualTargeting helper', () => {
-  it('should be a function', () => {
-    expect(typeof buildContextualTargeting).toEqual('function');
-  });
-
   it('should return an empty object if no data received', () => {
     const contextualTargeting = buildContextualTargeting('getPages', {}, []);
     expect(contextualTargeting).toEqual({});
@@ -174,7 +154,7 @@ describe('buildContextualTargeting helper', () => {
       { getPages: [{ metaTitle: 'test' }] },
       [{ label: 'definedKey', propertiesToDisplay: ['metaTitle'] }]
     );
-    expect(contextualTargeting).toEqual({ definedKey: ['test'] });
+    expect(contextualTargeting).toEqual({ definedKey: 'test' });
   });
 
   it('should return an object with correct targeting when the selected prop value is array', () => {
@@ -183,15 +163,11 @@ describe('buildContextualTargeting helper', () => {
       { getPages: [{ tags: [{ name: 'tag1' }, { name: 'tag2' }] }] },
       [{ label: 'tagKey', propertiesToDisplay: ['tags.name'] }]
     );
-    expect(contextualTargeting).toEqual({ tagKey: ['tag1', 'tag2'] });
+    expect(contextualTargeting).toEqual({ tagKey: 'tag1, tag2' });
   });
 });
 
 describe('buildSizeMapping helper', () => {
-  it('should be a function', () => {
-    expect(typeof buildSizeMapping).toEqual('function');
-  });
-
   it('should always return an array', () => {
     const sizeMapping = buildSizeMapping('id', [
       { width: 1, height: 1, viewport: [{ width: 1024, height: 0 }] }

package/tests/unit/src/components/List/components/Cards/__snapshots__/CardsRender.test.js.snap

@@ -27,7 +27,9 @@ exports[`CardsRender component should render based on listData received 1`] = `
             >
               <h2
                 class="card__title card__title--portrait"
-              />
+              >
+                item 1
+              </h2>
             </div>
           </div>
         </div>
@@ -46,7 +48,9 @@ exports[`CardsRender component should render based on listData received 1`] = `
             >
               <h2
                 class="card__title card__title--portrait"
-              />
+              >
+                item 1
+              </h2>
             </div>
           </div>
         </div>
@@ -65,7 +69,9 @@ exports[`CardsRender component should render based on listData received 1`] = `
             >
               <h2
                 class="card__title card__title--portrait"
-              />
+              >
+                item 1
+              </h2>
             </div>
           </div>
         </div>
@@ -96,7 +102,9 @@ exports[`CardsRender component should render without wrapper, when requested 1`]
         >
           <h2
             class="card__title card__title--portrait"
-          />
+          >
+            item 1
+          </h2>
         </div>
       </div>
     </div>
@@ -115,7 +123,9 @@ exports[`CardsRender component should render without wrapper, when requested 1`]
         >
           <h2
             class="card__title card__title--portrait"
-          />
+          >
+            item 1
+          </h2>
         </div>
       </div>
     </div>
@@ -134,7 +144,9 @@ exports[`CardsRender component should render without wrapper, when requested 1`]
         >
           <h2
             class="card__title card__title--portrait"
-          />
+          >
+            item 1
+          </h2>
         </div>
       </div>
     </div>

package/tests/unit/src/helpers/build-props-query.test.js

@@ -6,6 +6,11 @@ import buildPropsQuery from '../../../../src/helpers/build-props-query';
 const CONTENT_INTERFACE = 'content/content';
 
 describe('get card render props', () => {
+  const relations = [
+    {
+      localField: 'image'
+    }
+  ];
   const data = {
     getEntitySchema: {
       interfaces: [CONTENT_INTERFACE],
@@ -13,6 +18,7 @@ describe('get card render props', () => {
         id: 'id',
         name: 'someName'
       },
+      relations,
       dynamicProperties: {}
     }
   };
@@ -23,6 +29,7 @@ describe('get card render props', () => {
         id: 'id',
         alternativePreHeader: { type: 'object ' }
       },
+      relations,
       dynamicProperties: {}
     }
   };
@@ -50,6 +57,7 @@ describe('get card render props', () => {
           id: 'id',
           categoryId: 'catId'
         },
+        relations,
         dynamicProperties: {}
       }
     };
@@ -78,6 +86,7 @@ describe('get card render props', () => {
           alternativePreHeader: { type: 'object ' },
           categoryId: { type: 'object ' }
         },
+        relations,
         dynamicProperties: {}
       }
     };
@@ -118,6 +127,7 @@ describe('get card render props', () => {
           id: 'id',
           categoryId: 'someName'
         },
+        relations: [],
         dynamicProperties: {}
       }
     };
@@ -131,4 +141,22 @@ describe('get card render props', () => {
     const query = buildPropsQuery(data, [], { displayCategory: false, displayThumbnail: false });
     expect(query).toEqual('id,name,url,sponsored,featured');
   });
+
+  it('should not fetch image if the schema does not have imageId property', () => {
+    const _data = {
+      getEntitySchema: {
+        interfaces: [CONTENT_INTERFACE],
+        properties: {
+          id: 'id',
+          categoryId: 'catId'
+        },
+        relations: [{ localField: 'noImage' }],
+        dynamicProperties: {}
+      }
+    };
+    const query = buildPropsQuery(_data, [], cardProps);
+    expect(query).toEqual(
+      'id,name,url,sponsored,featured,category{name,listingPageId,listingPageEntity, id publishedListingPage{id, url}}'
+    );
+  });
 });