prebid-universal-creative 1.16.0 → 1.17.0

package/gulpfile.js

@@ -17,6 +17,7 @@ const KarmaServer = require('karma').Server;
 const karmaConfMaker = require('./karma.conf.maker');
 const execa = require('execa');
 const path = require('path');
+const {execSync} = require('child_process');
 
 const dateString = 'Updated : ' + (new Date()).toISOString().substring(0, 10);
 const banner = '/* <%= creative.name %> v<%= creative.version %>\n' + dateString + ' */\n';
@@ -141,16 +142,12 @@ function includeStaticVastXmlFile() {
 function buildProd({ inputFile, outputFile }) {
   let cloned = _.cloneDeep(webpackConfig);
   delete cloned.devtool;
-
+  cloned.output.filename = outputFile;
   return gulp.src([inputFile])
     .pipe(webpackStream(cloned))
     .pipe(gulp.dest('dist'))
     .pipe(uglify())
     .pipe(header(banner, { creative: creative }))
-    .pipe(rename({
-      basename: outputFile.split('.')[0],
-      extname: `.${outputFile.split('.')[1]}`
-    }))
     .pipe(gulp.dest('dist'));
 }
 
@@ -205,20 +202,10 @@ function includeStaticVastXmlFile() {
 //
 // If --watch is given, the task will open the karma debug window
 // If --browserstack is given, it will run the full suite of currently supported browsers.
-// If --e2e is given, it will run test defined in ./test/e2e/specs in browserstack
 
 function test(done) {
-  if (argv.e2e) {
-    let wdioCmd = path.join(__dirname, 'node_modules/.bin/wdio');
-    let wdioConf = path.join(__dirname, 'wdio.conf.js');
-    let wdioOpts = [
-      wdioConf
-    ];
-    return execa(wdioCmd, wdioOpts, { stdio: 'inherit' });
-  } else {
-    let karmaConf = karmaConfMaker(false, argv.browserstack, argv.watch);
-    new KarmaServer(karmaConf, newKarmaCallback(done)).start();
-  }
+  let karmaConf = karmaConfMaker(false, argv.browserstack, argv.watch);
+  new KarmaServer(karmaConf, newKarmaCallback(done)).start();
 }
 
 function newKarmaCallback(done) {
@@ -237,17 +224,10 @@ function newKarmaCallback(done) {
   }
 }
 
-function setupE2E(done) {
-  argv.e2e = true;
-  done();
-}
-
 gulp.task('test', gulp.series(clean, test));
 
 const buildDevFunctions = [buildLegacyDev, buildBannerDev, buildVideoDev, buildAmpDev, buildMobileDev, buildNativeRenderLegacyDev, buildNativeDev, buildNativeRenderDev, buildCookieSync, buildCookieSyncWithConsent, buildUidDev, includeStaticVastXmlFile];
 
-gulp.task('e2e-test', gulp.series(clean, setupE2E, gulp.parallel(...buildDevFunctions, watch), test));
-
 function watch(done) {
   const mainWatcher = gulp.watch([
     'src/**/*.js',
@@ -275,6 +255,14 @@ gulp.task('test-coverage', (done) => {
   new KarmaServer(karmaConfMaker(true, false, false), newKarmaCallback(done)).start();
 });
 
+function integTests(done) {
+  execSync('npx playwright test', {stdio: 'inherit'});
+  done();
+}
+
+gulp.task('integ-tests', gulp.series(clean, 'build', integTests));
+
+
 gulp.task('view-coverage', (done) => {
   const coveragePort = 1999;
   const localhost = (argv.host) ? argv.host : 'localhost';

package/integ-test/fixtures/test.js

@@ -0,0 +1,79 @@
+import {test as baseTest} from '@playwright/test';
+import path from 'path';
+import {expect} from '@playwright/test';
+export {expect} from '@playwright/test';
+import process from 'process'
+export const BASE_URL = 'https://www.prebid.org/puc-test/';
+export const PUC_URL = 'https://cdn.jsdelivr.net/npm/prebid-universal-creative@latest/dist/';
+export const PBJS_URL = 'https://cdn.jsdelivr.net/npm/prebid.js@latest/dist/not-for-prod/prebid.js'
+
+const LOCAL_PBJS_URL = 'http://localhost:9999/build/dev/prebid.js';
+
+const REDIRECTS = {
+    [BASE_URL]: '../pages',
+    [PUC_URL]: '../../dist'
+};
+
+export const test = baseTest.extend({
+    /**
+     * Replace requests for "https://www.prebid.org" with the contents of files under "pages",
+     * and requests for the PUC CDN with contents of files under "dist".
+     */
+    async context({context}, use) {
+        await Promise.all(
+            Object.entries(REDIRECTS).map(([url, localDir]) => {
+                context.route((u) => u.href.startsWith(url), (route, request) => {
+                    const fpath = request.url().substring(url.length).split('?')[0];
+                    route.fulfill({
+                        path: path.resolve(__dirname, localDir, fpath)
+                    });
+                });
+            })
+        );
+        if (process.env.LOCAL_PBJS) {
+            const localUrl = process.env.LOCAL_PBJS.startsWith('http') ? process.env.LOCAL_PBJS : LOCAL_PBJS_URL;
+            await context.route((u) => u.href.startsWith(PBJS_URL), (route) => route.fulfill({status: 302, headers: {Location: localUrl}}))
+        }
+        await use(context);
+    },
+    /**
+     * await crossLocator(selector): returns a locator for the first element matching 'selector' that appears on the
+     * page, across all frames.
+     */
+    async crossLocator({page}, use) {
+        await use(function (selector) {
+            let n = 0;
+            return new Promise((resolve, reject) => {
+                async function frameLocator(frame) {
+                    if (!frame.isDetached()) {
+                        n++;
+                        try {
+                            await frame.waitForSelector(selector);
+                            resolve(frame.locator(selector));
+                        } catch (e) {
+                            n--;
+                            if (n === 0) {
+                                reject(e);
+                            }
+                        }
+                    }
+                }
+                page.on('frameattached', frameLocator);
+                function walkFrames(frame) {
+                    frameLocator(frame);
+                    frame.childFrames().forEach(walkFrames)
+                }
+                walkFrames(page.mainFrame());
+            })
+        })
+    },
+    async expectEvent({page}, use) {
+        await use(async function (predicate, numMatches = 1) {
+            await expect.poll(async () =>
+                ((await page.evaluate(() => window.pbjs?.getEvents && window.pbjs.getEvents())) || [])
+                    .filter(predicate)
+                    .length === numMatches
+            ).toBeTruthy();
+        });
+    }
+});

package/integ-test/pages/amp.html

@@ -0,0 +1,80 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+    <link rel="canonical" href="https://www.prebid-org/puc-test/amp.html">
+    <style amp-boilerplate>body {
+        -webkit-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
+        -moz-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
+        -ms-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
+        animation: -amp-start 8s steps(1, end) 0s 1 normal both
+    }
+
+    @-webkit-keyframes -amp-start {
+        from {
+            visibility: hidden
+        }
+        to {
+            visibility: visible
+        }
+    }
+
+    @-moz-keyframes -amp-start {
+        from {
+            visibility: hidden
+        }
+        to {
+            visibility: visible
+        }
+    }
+
+    @-ms-keyframes -amp-start {
+        from {
+            visibility: hidden
+        }
+        to {
+            visibility: visible
+        }
+    }
+
+    @-o-keyframes -amp-start {
+        from {
+            visibility: hidden
+        }
+        to {
+            visibility: visible
+        }
+    }
+
+    @keyframes -amp-start {
+        from {
+            visibility: hidden
+        }
+        to {
+            visibility: visible
+        }
+    }</style>
+    <noscript>
+        <style amp-boilerplate>body {
+            -webkit-animation: none;
+            -moz-animation: none;
+            -ms-animation: none;
+            animation: none
+        }</style>
+    </noscript>
+    <script async src="https://cdn.ampproject.org/v0.js"></script>
+    <script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
+    <title>AMP-RTC RP Test</title>
+</head>
+<body>
+<h2>AMP-RTC RP Test</h2>
+
+<amp-ad width="300" height="250"
+        type="doubleclick"
+        data-slot="/41758329/integ-test"
+        data-multi-size-validation="false"
+        rtc-config='{"vendors": {"prebidrubicon": {"REQUEST_ID": "14062-amp-300x50"}}}'
+</amp-ad>
+</body>
+</html>

package/integ-test/pages/banner.html

@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Prebid.js Banner Test</title>
+
+    <!-- Prebid.js -->
+    <script async src="https://cdn.jsdelivr.net/npm/prebid.js@latest/dist/not-for-prod/prebid.js"></script>
+
+    <!-- Google Publisher Tag -->
+    <script async src="https://www.googletagservices.com/tag/js/gpt.js"></script>
+
+    <script>
+        var pbjs = pbjs || {};
+        pbjs.que = pbjs.que || [];
+        window.params = new URLSearchParams(window.location.search);
+    </script>
+
+    <script>
+        var googletag = googletag || {};
+        googletag.cmd = googletag.cmd || [];
+
+        googletag.cmd.push(function () {
+            googletag.pubads().disableInitialLoad();
+        });
+
+        pbjs.que.push(function () {
+            pbjs.setConfig({
+                debug: true,
+                debugging: {
+                    enabled: true,
+                    intercept: [
+                        {
+                            when: {},
+                            then: JSON.parse(params.get('bidResponse'))
+                        }
+                    ]
+                }
+            });
+
+            pbjs.requestBids({
+                bidsBackHandler: sendAdServerRequest,
+                adUnits: [
+                    {
+                        code: 'slot',
+                        mediaTypes: {
+                            banner: {
+                                sizes: [[300, 250]],
+                            }
+                        },
+                        bids: [{
+                            bidder: 'appnexus',
+                            params: {
+                                placementId: 123
+                            }
+                        }]
+                    }
+                ]
+            });
+        });
+
+        function sendAdServerRequest() {
+            googletag.cmd.push(function () {
+                pbjs.que.push(function () {
+                    pbjs.setTargetingForGPTAsync('slot');
+                    googletag.pubads().refresh();
+                });
+            });
+        }
+    </script>
+
+    <script>
+        googletag.cmd.push(function () {
+            googletag
+                .defineSlot('/41758329/integ-test', [[300, 250]], 'slot')
+                .setTargeting('creative', params.get('creative'))
+                .addService(googletag.pubads());
+
+            googletag.pubads().enableSingleRequest();
+            googletag.enableServices();
+        });
+    </script>
+</head>
+
+<body>
+<h2>Prebid.js Banner Ad Unit Test</h2>
+<div id='slot'>
+    <script>
+        googletag.cmd.push(function () {
+            googletag.display('slot');
+        });
+    </script>
+</div>
+</body>
+</html>

package/integ-test/pages/native_legacy.html

@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Prebid.js Legacy Native Test</title>
+
+    <!-- Prebid.js -->
+    <script async src="https://cdn.jsdelivr.net/npm/prebid.js@latest/dist/not-for-prod/prebid.js"></script>
+
+    <!-- Google Publisher Tag -->
+    <script async src="https://www.googletagservices.com/tag/js/gpt.js"></script>
+
+    <script>
+        var pbjs = pbjs || {};
+        pbjs.que = pbjs.que || [];
+        window.params = new URLSearchParams(window.location.search);
+    </script>
+
+    <script>
+        var googletag = googletag || {};
+        googletag.cmd = googletag.cmd || [];
+
+        googletag.cmd.push(function () {
+            googletag.pubads().disableInitialLoad();
+        });
+
+        pbjs.que.push(function () {
+            pbjs.setConfig({
+                debug: true,
+                debugging: {
+                    enabled: true,
+                    intercept: [
+                        {
+                            when: {},
+                            then: JSON.parse(params.get('bidResponse'))
+                        }
+                    ]
+                }
+            });
+
+            pbjs.requestBids({
+                bidsBackHandler: sendAdServerRequest,
+                adUnits: [
+                    {
+                        code: 'slot',
+                        mediaTypes: {
+                            native: {
+                                image: {
+                                    required: false,
+                                },
+                                title: {
+                                    required: true
+                                },
+                                body: {
+                                    required: true
+                                },
+                                clickUrl: {
+                                    required: true
+                                }
+                            }
+                        },
+                        bids: [{
+                            bidder: 'appnexus',
+                            params: {
+                                placementId: 123
+                            }
+                        }]
+                    }
+                ]
+            });
+        });
+
+        function sendAdServerRequest() {
+            googletag.cmd.push(function () {
+                pbjs.que.push(function () {
+                    pbjs.setTargetingForGPTAsync('slot');
+                    googletag.pubads().refresh();
+                });
+            });
+        }
+    </script>
+
+    <script>
+        googletag.cmd.push(function () {
+            googletag
+                .defineSlot('/41758329/integ-test', params.get('banner') === 'true' ? [[640, 480]] : 'fluid', 'slot')
+                .setTargeting('creative', params.get('creative'))
+                .addService(googletag.pubads());
+
+            googletag.pubads().enableSingleRequest();
+            googletag.enableServices();
+        });
+    </script>
+</head>
+
+<body>
+<h2>Prebid.js Legacy Native Ad Unit Test</h2>
+<div id='slot'>
+    <script>
+        googletag.cmd.push(function () {
+            googletag.display('slot');
+        });
+    </script>
+</div>
+</body>
+</html>

package/integ-test/spec/amp_spec.js

@@ -0,0 +1,111 @@
+import {test, expect} from '../fixtures/test.js';
+
+test.describe('AMP', () => {
+    const PBS_AMP_URL = 'https://prebid-server.rubiconproject.com/openrtb2/amp';
+    const CACHE_HOST = 'cache-host.prebid-server.com';
+    const CACHE_PATH = '/cache';
+    const CACHE_ID = 'test-cache-id'
+    const TRIGGERED_URL_BASE = 'https://url-triggers.com/';
+    const URLS = Object.fromEntries(['burl', 'nurl', 'wurl'].map((t) => [t, `${TRIGGERED_URL_BASE}${t}`]))
+
+    let creative, imp, nurlResponse, triggers;
+
+    test.beforeEach(async ({page}) => {
+        creative = null;
+        imp = {};
+        nurlResponse = null;
+        triggers = {};
+        await page.route((u) => u.href.startsWith(PBS_AMP_URL), (route) => {
+            route.fulfill({
+                contentType: 'application/json',
+                body: JSON.stringify({
+                    targeting: {
+                        hb_cache_id: CACHE_ID,
+                        hb_pb: "1.00",
+                        hb_pb_rubicon: "1.00",
+                        hb_cache_path: CACHE_PATH,
+                        hb_size: "300x50",
+                        hb_bidder: "rubicon",
+                        hb_cache_host: CACHE_HOST,
+                        creative
+                    }
+                })
+            })
+        });
+        await page.route((u) => u.host.startsWith(CACHE_HOST) && u.pathname === CACHE_PATH, (route) => {
+            route.fulfill({
+                contentType: 'application/json',
+                body: JSON.stringify(imp)
+            })
+        })
+        await page.route((u) => u.href.startsWith(TRIGGERED_URL_BASE), (route, req)=> {
+            const trigger = req.url().substring(TRIGGERED_URL_BASE.length);
+            triggers[trigger] = true;
+            route.fulfill({
+                contentType: 'text/html',
+                body: trigger === 'nurl' && nurlResponse || ''
+            })
+        })
+    });
+
+    test.describe('Banner', () => {
+        Object.entries({
+            'safeframe': 'banner-safeframe',
+            'non safeframe': 'banner-noframe',
+        }).forEach(([t, cr]) => {
+            test.describe(t, () => {
+                const AD = `
+                 <p id="the-ad">
+                     This is the ad
+                     <span id="ad-price">\${AUCTION_PRICE}</span>
+                 </p>                
+                `
+
+                test.beforeEach(() => {
+                    creative = cr;
+                });
+
+                Object.entries({
+                    'imp.adm': {
+                        adm: AD,
+                        setup() {}
+                    },
+                    'imp.nurl': {
+                        setup() {
+                            nurlResponse = AD;
+                        }
+                    }
+                }).forEach(([t, {adm, setup}]) => {
+                    test.describe(t, () => {
+                        test.beforeEach(async ({page}) => {
+                            imp = {
+                                price: 1.23,
+                                adm,
+                                ...URLS
+                            };
+                            setup();
+                            await page.goto('amp.html');
+                        });
+
+
+                        test('should display ad', async ({crossLocator}) => {
+                            await expect(await crossLocator('#the-ad')).toBeVisible();
+                        })
+
+                        if (adm != null) { // TODO: should AUCTION_PRICE work in the nurl case? see https://github.com/prebid/prebid-universal-creative/issues/183
+                            test('should replace auction price', async ({crossLocator}) => {
+                                await expect(await crossLocator('#the-ad #ad-price')).toHaveText('1.23');
+                            })
+                        }
+
+                        Object.keys(URLS).forEach((trigger) => {
+                            test(`should trigger ${trigger}`, () => {
+                                expect.poll(() => triggers[trigger]).toBeTruthy();
+                            });
+                        });
+                    });
+                });
+            });
+        });
+    });
+});

package/integ-test/spec/banner_spec.js

@@ -0,0 +1,85 @@
+import {test, expect} from '../fixtures/test.js';
+
+test.describe('Banner', () => {
+    Object.entries({
+        'safeframe': 'banner-safeframe',
+        'non safeframe': 'banner-noframe'
+    }).forEach(([t, creative]) => {
+        test.describe(t, () => {
+            [
+                {
+                    t: 'bidResponse.ad',
+                    bidResponse: {
+                        adId: 'mock-ad',
+                        cpm: 1.23,
+                        ad: `
+                         <p id="the-ad">
+                             This is the ad
+                             <span id="ad-price">\${AUCTION_PRICE}</span>
+                         </p>'
+                        `
+                    },
+                    setup: async () => null
+                },
+                (() => {
+                    const mockAdUrl = 'https://mock-ad.com/'
+                    return {
+                        t: 'bidResponse.adUrl',
+                        bidResponse: {
+                            adId: 'mock-ad',
+                            cpm: 1.23,
+                            adUrl: mockAdUrl + '${AUCTION_PRICE}',
+                            mediaType: 'banner',
+                        },
+                        setup: async (page) => {
+                            await page.route((u) => u.href.startsWith(mockAdUrl), (route, request) => {
+                                const price = request.url().substring(mockAdUrl.length);
+                                route.fulfill({
+                                    contentType: 'text/html',
+                                    body: `
+                                     <p id="the-ad">
+                                         This is the ad
+                                         <span id="ad-price">${price}</span>
+                                     </p>'
+                                    `
+                                })
+                            });
+                        }
+                    };
+
+                })()
+            ].forEach(({t, bidResponse, setup}) => {
+                test.describe(t, () => {
+                    test.beforeEach(async ({page}) => {
+                        await setup(page);
+                        await page.goto(`banner.html?creative=${creative}&bidResponse=${encodeURIComponent(JSON.stringify(bidResponse))}`)
+                    });
+                    test('should display ad', async ({crossLocator}) => {
+                        await expect(await crossLocator('#the-ad')).toBeVisible();
+                    });
+                    ['adRenderSucceeded', 'bidWon'].forEach(ev => {
+                        test(`should emit '${ev}'`, async ({expectEvent}) => {
+                            await expectEvent((event) => event.eventType === ev && event.args.adId === 'mock-ad')
+                        })
+                    });
+                    test('should replace AUCTION_PRICE macro', async ({crossLocator}) => {
+                        await expect(await crossLocator('#the-ad #ad-price')).toHaveText('1.23');
+                    });
+
+                })
+            });
+            test.describe('Missing ad', () => {
+                const bidResponse = {
+                    adId: 'mock-ad',
+                    ad: null,
+                }
+                test.beforeEach(async ({page}) => {
+                    await page.goto(`banner.html?creative=${creative}&bidResponse=${encodeURIComponent(JSON.stringify(bidResponse))}`);
+                });
+                test('should emit \'adRenderFailed\'', async ({expectEvent}) => {
+                    await expectEvent((ev) => ev.eventType === 'adRenderFailed')
+                })
+            });
+        });
+    })
+});