From 7d8b667689f2d2952e069306b72931a22c1796c0 Mon Sep 17 00:00:00 2001
From: Ishara Chan tung
 <80039383+github-ishara-chan-tung@users.noreply.github.com>
Date: Fri, 7 Jul 2023 16:00:38 +0200
Subject: [PATCH] Add local test page and documentation (#95)

---
 README_TEADS.md             |  43 +++++++++++++-
 gulpfile.js                 |  10 ++++
 test/pages/bannerTeads.html | 114 ++++++++++++++++++++++++++++++++++++
 3 files changed, 166 insertions(+), 1 deletion(-)
 create mode 100644 test/pages/bannerTeads.html

diff --git a/README_TEADS.md b/README_TEADS.md
index a70c3227c1e..2ac4e998037 100644
--- a/README_TEADS.md
+++ b/README_TEADS.md
@@ -96,7 +96,7 @@ Once your branch is remotely on `ebuzzing/Prebid.js` you can open the PR directl
 
 To build only prebid.js file with Teads modules :
 
-    gulp build --modules=userId,consentManagement,teadsIdSystem,teadsBidAdapter
+    gulp build --modules=userId,consentManagement,consentManagementGpp,teadsIdSystem,teadsBidAdapter
 
 You can add any other modules at the end of the list
 
@@ -111,3 +111,44 @@ Example :
 
 To functionnal test new dev on teadsIdSystem or teadsBidAdapter, please follow this page [How to debug with Charles Proxy](https://teads.atlassian.net/wiki/spaces/SSP/pages/4413590206/Debug+with+Charles)
 
+## Testing Locally on Test Page
+
+### Fake endpoint
+To try the teadsBidAdapter with local changes on a test page you can use a custom local page with the commands :
+
+```
+gulp serve-teads --modules=userId,consentManagement,consentManagementGpp,teadsIdSystem,teadsBidAdapter
+```
+
+This will automatically build your prebid.js and start a local server on http://localhost:9999. \
+Then go to http://localhost:9999/test/pages/instreamTeads.html to see a page integrated with teadsBidAdapter. \
+On the page, open the console and go to the Network tab you should see the teads bid-request being requested. Refresh the page if you can't see the bid-request. \
+The request is an HTTP GET request on the endpoint `debug.com/hb/bid-request` which is a fake url not used for Teads production so it will not return a bid-response because the response is not mocked and the URL is not the production one.
+
+In the command we explicitly specify to only have Teads modules in the prebid.js script, if you want all modules (other bid adapter, consent modules etc ...) feel free to remove the `--modules` option.
+
+
+### Localhost endpoint
+If you want to connect a local SSP to the prebid test page you can use the following command :
+
+```
+serve-teads-local --modules=userId,consentManagement,consentManagementGpp,teadsIdSystem,teadsBidAdapter
+```
+
+This will do the same steps as the command before but the request endpoint will be localhost:8080/hb/bid-request, so if you have a SSP running locally the request should reach it.
+
+More information how to run locally the SSP : [service-rtb documentation](https://github.com/ebuzzing/service-rtb/blob/master/integration-tests/README.md)
+
+### Mock responses
+
+If you want to mock the bid request and the bid response, you can use the fakeserver : [fake-sever readme](test/fake-server/README.md) \
+You can use the following commands : 
+
+```
+serve-teads-with-fakeserver --modules=userId,consentManagement,consentManagementGpp,teadsIdSystem,teadsBidAdapter
+```
+```
+serve-teads-local-with-fakeserver --modules=userId,consentManagement,consentManagementGpp,teadsIdSystem,teadsBidAdapter
+```
+
+This will both start local server and fakeserver. You can use both the fake endpoint or the localhost url.
diff --git a/gulpfile.js b/gulpfile.js
index 531cfdc6bdf..7bb5efc0775 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -466,6 +466,13 @@ function buildTeadsPrebidBundle() {
     .pipe(gulp.dest('build/dist'))
 }
 
+function buildTeadsLocalDebugPrebidBundle() {
+  return gulp.src('build/dist/prebid.js')
+    .pipe(replace('SSP_PORT_8080_TCP_ADDR:SSP_PORT_8080_TCP_PORT', 'localhost:8080'))
+    .pipe(rename('prebid-debug.js'))
+    .pipe(gulp.dest('build/dist'))
+}
+
 function buildTeadsAdapater() {
   return gulp.src('modules/teadsBidAdapter.js')
     .pipe(replace('SSP_PORT_8080_TCP_ADDR:SSP_PORT_8080_TCP_PORT', 'a.teads.tv'))
@@ -596,6 +603,9 @@ gulp.task('build-distrib', gulp.series(buildTeadsPrebidBundle));
 gulp.task('build-teads-adapter-prod', gulp.series(buildTeadsAdapater));
 gulp.task('connect-server', gulp.series(exposeServer));
 
+gulp.task('serve-teads', gulp.series(clean, 'build-bundle-prod', buildTeadsLocalDebugPrebidBundle, startLocalServer));
+gulp.task('serve-teads-with-fakeserver', gulp.series(clean, 'build-bundle-prod', buildTeadsLocalDebugPrebidBundle, gulp.parallel(() => startIntegServer(), startLocalServer)));
+
 // build task for reviewers, runs test-coverage, serves, without watching
 gulp.task(viewReview);
 gulp.task('review-start', gulp.series(clean, lint, gulp.parallel('build-bundle-dev', watch, testCoverage), viewReview));
diff --git a/test/pages/bannerTeads.html b/test/pages/bannerTeads.html
new file mode 100644
index 00000000000..85bfcb5971c
--- /dev/null
+++ b/test/pages/bannerTeads.html
@@ -0,0 +1,114 @@
+<!-- This is a Test Page for a Banner End-to-End test  -->
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="UTF-8">
+	<title>Prebid.js Banner Example</title>
+
+	<!-- Prebid.js -->
+	<script src="../../build/dist/prebid-debug.js" async=true></script>
+
+	<!-- Google Publisher Tag -->
+	<script async src="https://www.googletagservices.com/tag/js/gpt.js"></script>
+
+	<script>
+		var pbjs = pbjs || {};
+		pbjs.que = pbjs.que || [];
+
+		// Prebid Banner Ad Unit
+		const adUnits = [{
+			code: 'div-gpt-ad-1460505748561-0',
+			mediaTypes: {
+				banner: {
+					sizes: [[300, 250], [300, 600]]
+				}
+			},
+			bids: [{
+				bidder: 'teads',
+				params: {
+					placementId: '1',
+					pageId: '1',
+					bidId: '30b31c1838de1e',
+					bidderRequestId: '465f72576ad9aaf',
+					timeout: 3000
+				}
+			}]
+		 }
+		,{
+			code: 'div-gpt-ad-1460505748561-1',
+			mediaTypes: {
+				banner: {
+					sizes: [[300, 250], [300, 600]],
+				}
+			},
+				bids: [{
+					bidder: 'teads',
+					params: {
+						placementId: '1',
+						pageId: '1',
+						bidId: '30b31c1838de1f',
+						bidderRequestId: '465f72576ad9aaf',
+						timeout: 3000
+					}
+				}]
+		}
+	];
+	</script>
+
+	<script>
+		var googletag = googletag || {};
+		googletag.cmd = googletag.cmd || [];
+
+		googletag.cmd.push(function() {
+			googletag.pubads().disableInitialLoad();
+		});
+
+		pbjs.bidderSettings = {
+			teads: {
+				storageAllowed : true
+			}
+		};
+
+		pbjs.que.push(function () {
+			pbjs.addAdUnits(adUnits);
+			pbjs.setConfig({
+				debug: true,
+				enableTIDs: true
+			});
+			pbjs.requestBids({ bidsBackHandler: sendAdServerRequest });
+		});
+
+		function sendAdServerRequest() {
+			googletag.cmd.push(function () {
+				pbjs.que.push(function () {
+					pbjs.setTargetingForGPTAsync('div-gpt-ad-1460505748561-0');
+					googletag.pubads().refresh();
+				});
+			});
+		}
+	</script>
+
+	<script>
+		googletag.cmd.push(function () {
+			googletag
+				.defineSlot('/19968336/header-bid-tag-0', [[300, 250], [300, 600]], 'div-gpt-ad-1460505748561-0')
+				.addService(googletag.pubads());
+
+			googletag.pubads().enableSingleRequest();
+			googletag.enableServices();
+		});
+	</script>
+</head>
+
+<body>
+	<h2>Prebid.js Banner Ad Unit Test</h2>
+	<div id='div-gpt-ad-1460505748561-0'>
+		<script>
+			googletag.cmd.push(function () { googletag.display('div-gpt-ad-1460505748561-0'); });
+		</script>
+	</div>
+	<div id="targeting-keys"></div>
+</body>
+
+</html>