Fix bugs / tests with empty string default for missing assets

.circleci/config.yml

@@ -7,8 +7,8 @@ jobs:
   build:
     docker:
       # specify the version you desire here
-      - image: circleci/node:8.9.0
-      
+      - image: circleci/node:14.18.2-browsers
+
       # Specify service dependencies here if necessary
       # CircleCI maintains a library of pre-built images
       # documented at https://circleci.com/docs/2.0/circleci-images/
@@ -45,6 +45,6 @@ jobs:
             # Run the file with user's access key
             ./BrowserStackLocal ${BROWSERSTACK_ACCESS_KEY} &
       # run tests!
-      - run: 
+      - run:
           name: BrowserStack testing
           command: gulp test --browserstack

browsers.json

@@ -1,66 +1,50 @@
 {
-  "bs_edge_16_windows_10": {
+  "bs_edge_latest_windows_10": {
     "base": "BrowserStack",
     "os_version": "10",
     "browser": "edge",
-    "browser_version": "16.0",
+    "browser_version": "latest",
     "device": null,
     "os": "Windows"
   },
-  "bs_edge_17_windows_10": {
-    "base": "BrowserStack",
-    "os_version": "10",
-    "browser": "edge",
-    "browser_version": "17.0",
-    "device": null,
-    "os": "Windows"
-  },
-  "bs_ie_11_windows_10": {
-    "base": "BrowserStack",
-    "os_version": "10",
-    "browser": "ie",
-    "browser_version": "11.0",
-    "device": null,
-    "os": "Windows"
-  },
-  "bs_chrome_76_windows_10": {
+  "bs_chrome_latest_windows_10": {
     "base": "BrowserStack",
     "os_version": "10",
     "browser": "chrome",
-    "browser_version": "76.0",
+    "browser_version": "latest",
     "device": null,
     "os": "Windows"
   },
-  "bs_chrome_77_windows_10": {
+  "bs_chrome_87_windows_10": {
     "base": "BrowserStack",
     "os_version": "10",
     "browser": "chrome",
-    "browser_version": "77.0",
+    "browser_version": "87.0",
     "device": null,
     "os": "Windows"
   },
-  "bs_firefox_68_windows_10": {
+  "bs_firefox_latest_windows_10": {
     "base": "BrowserStack",
     "os_version": "10",
     "browser": "firefox",
-    "browser_version": "68.0",
+    "browser_version": "latest",
     "device": null,
     "os": "Windows"
   },
-  "bs_firefox_69_windows_10": {
+  "bs_safari_latest_mac_bigsur": {
     "base": "BrowserStack",
-    "os_version": "10",
-    "browser": "firefox",
-    "browser_version": "69.0",
+    "os_version": "Big Sur",
+    "browser": "safari",
+    "browser_version": "latest",
     "device": null,
-    "os": "Windows"
+    "os": "OS X"
   },
-  "bs_safari_12.1_mac_mojave": {
+  "bs_safari_15_catalina": {
     "base": "BrowserStack",
-    "os_version": "Mojave",
+    "os_version": "Catalina",
     "browser": "safari",
-    "browser_version": "12.1",
+    "browser_version": "13.1",
     "device": null,
     "os": "OS X"
   }
-}
+}

src/nativeAssetManager.js

@@ -161,14 +161,14 @@ export function newNativeAssetManager(win, pubUrl) {
   }
 
   function loadMobileAssets(tagData, cb) {
-    const placeholders = scanForPlaceholders();
+    const placeholders = scanDOMForPlaceHolders();
     if (placeholders.length > 0) {
       callback = cb;
       requestAssetsFromCache(tagData);
     }
   }
 
-  function pbNativeDataHasValidType() {
+  function hasPbNativeData() {
     return typeof win.pbNativeData !== 'undefined'
   }
 
@@ -180,16 +180,16 @@ export function newNativeAssetManager(win, pubUrl) {
    * to retrieve native assets that have a value on the corresponding bid
    */
   function loadAssets(adId, cb) {
-    const placeholders = scanForPlaceholders(adId);
+    const placeholders = scanDOMForPlaceHolders(adId);
 
-    if (pbNativeDataHasValidType() && win.pbNativeData.hasOwnProperty('assetsToReplace')) {
+    if (hasPbNativeData() && win.pbNativeData.hasOwnProperty('assetsToReplace')) {
         win.pbNativeData.assetsToReplace.forEach((asset) => {
           const key = (asset.match(/hb_native_/i)) ? asset : NATIVE_KEYS[asset];
           if (key) {placeholders.push(key);}
         });
     }
 
-    if (pbNativeDataHasValidType() && win.pbNativeData.hasOwnProperty('requestAllAssets') && win.pbNativeData.requestAllAssets) {
+    if (hasPbNativeData() && win.pbNativeData.hasOwnProperty('requestAllAssets') && win.pbNativeData.requestAllAssets) {
       callback = cb;
       cancelMessageListener = requestAllAssets(adId);
     } else if (placeholders.length > 0) {
@@ -198,24 +198,29 @@ export function newNativeAssetManager(win, pubUrl) {
     }
   }
 
+  function placeholderFor(key, adId) {
+    return (adId && !hasPbNativeData()) ? `${key}:${adId}` : ((hasPbNativeData()) ? `##${key}##` : key)
+  }
+
+  function scanForPlaceHolders(adId, ...markupFragments) {
+    return Object.values(NATIVE_KEYS)
+        .reduce((found, key) => {
+          const placeholder = placeholderFor(key, adId);
+          for (const mkup of markupFragments.filter(Boolean)) {
+            if (mkup.indexOf(placeholder) >= 0) {
+              found.push(key);
+              break;
+            }
+          }
+          return found;
+        }, []);
+  }
+
   /*
    * Searches the DOM for placeholder values sent in by Prebid Native
    */
-  function scanForPlaceholders(adId) {
-    let placeholders = [];
-    const doc = win.document;
-
-    Object.keys(NATIVE_KEYS).forEach(key => {
-      const placeholderKey = NATIVE_KEYS[key];
-      const placeholder = (adId && !pbNativeDataHasValidType()) ? `${placeholderKey}:${adId}` : `${placeholderKey}`;
-      const placeholderIndex = (~doc.body.innerHTML.indexOf(placeholder)) ? doc.body.innerHTML.indexOf(placeholder) : (doc.head.innerHTML && doc.head.innerHTML.indexOf(placeholder));
-
-      if (~placeholderIndex) {
-        placeholders.push(placeholderKey);
-      }
-    });
-
-    return placeholders;
+  function scanDOMForPlaceHolders(adId) {
+    return scanForPlaceHolders(adId, win.document.body.innerHTML, win.document.head.innerHTML);
   }
 
   /*
@@ -281,13 +286,12 @@ export function newNativeAssetManager(win, pubUrl) {
     if (data.message === 'assetResponse') {
       const body = win.document.body.innerHTML;
       const head = win.document.head.innerHTML;
-      const flag = pbNativeDataHasValidType();
 
-      if (flag && data.adId !== win.pbNativeData.adId) return;
+      if (hasPbNativeData() && data.adId !== win.pbNativeData.adId) return;
 
       if (head) win.document.head.innerHTML = replace(head, data);
 
-      if ((data.hasOwnProperty('rendererUrl') && data.rendererUrl) || (flag && win.pbNativeData.hasOwnProperty('rendererUrl'))) {
+      if ((data.hasOwnProperty('rendererUrl') && data.rendererUrl) || (hasPbNativeData() && win.pbNativeData.hasOwnProperty('rendererUrl'))) {
         if (win.renderAd) {
           const newHtml = (win.renderAd && win.renderAd(data.assets)) || '';
 
@@ -305,7 +309,7 @@ export function newNativeAssetManager(win, pubUrl) {
             requestHeightResize(data.adId, (document.body.clientHeight || document.body.offsetHeight));
           });
         } else {
-          loadScript(win, ((flag && win.pbNativeData.hasOwnProperty('rendererUrl') && win.pbNativeData.rendererUrl) || data.rendererUrl), function() {
+          loadScript(win, ((hasPbNativeData() && win.pbNativeData.hasOwnProperty('rendererUrl') && win.pbNativeData.rendererUrl) || data.rendererUrl), function() {
             const newHtml = (win.renderAd && win.renderAd(data.assets)) || '';
 
             win.document.body.innerHTML = body + newHtml;
@@ -314,8 +318,8 @@ export function newNativeAssetManager(win, pubUrl) {
             requestHeightResize(data.adId, (document.body.clientHeight || document.body.offsetHeight));
           })
         }
-      } else if ((data.hasOwnProperty('adTemplate') && data.adTemplate)||(flag && win.pbNativeData.hasOwnProperty('adTemplate'))) {
-        const template =  (flag && win.pbNativeData.hasOwnProperty('adTemplate') && win.pbNativeData.adTemplate) || data.adTemplate;
+      } else if ((data.hasOwnProperty('adTemplate') && data.adTemplate)||(hasPbNativeData() && win.pbNativeData.hasOwnProperty('adTemplate'))) {
+        const template =  (hasPbNativeData() && win.pbNativeData.hasOwnProperty('adTemplate') && win.pbNativeData.adTemplate) || data.adTemplate;
         const newHtml = replace(template, data);
         win.document.body.innerHTML = body + newHtml;
         callback && callback();
@@ -336,12 +340,11 @@ export function newNativeAssetManager(win, pubUrl) {
    * in the given document.
    * If there's no actual value, the placeholder gets replaced by an empty string.
    */
-  function replace(document, { assets, adId }) {
-    let html = document;
+  function replace(html, { assets, adId }) {
+    assets = assets || [];
 
-    scanForPlaceholders().forEach(placeholder => {
-      const flag = pbNativeDataHasValidType();
-      const searchString = (adId && !flag) ? `${placeholder}:${adId}` : ((flag) ? '##'+`${placeholder}`+'##' : `${placeholder}`);
+    scanForPlaceHolders(adId, html).forEach(placeholder => {
+      const searchString = placeholderFor(placeholder, adId);
       const searchStringRegex = new RegExp(searchString, 'g');
       const fittingAsset = assets.find(asset => placeholder === NATIVE_KEYS[asset.key]);
       html = html.replace(searchStringRegex, fittingAsset ? fittingAsset.value : '');

test/spec/nativeAssetManager_spec.js

@@ -437,8 +437,8 @@ describe('nativeAssetManager', () => {
     expect(win.document.body.innerHTML).to.include(`
       <a href="http://example.com">Click Here</a>
     `);
-    // cta was not a requested asset so this should stay as is
-    expect(win.document.body.innerHTML).to.include('<h1>hb_native_cta</h1>');
+    // cta was not in the response so it should default to an empty string
+    expect(win.document.body.innerHTML).to.include('<h1></h1>');
     utils.sendRequest.restore();
   })
 });