Ads - specifying ad loading viewport margins for different screensize…

…s/page types (#1094) * wip 🐿 v2.5.16 * Ads - Setting viewport margin for specific pagetype/screensizes 🐿 v2.5.16 * Ads - Setting viewport margin for specific pagetype/screensizes 🐿 v2.5.16 * Ads - Setting viewport margin for specific pagetype/screensizes 🐿 v2.5.16 * Ads - Setting viewport margin for specific pagetype/screensizes 🐿 v2.5.16 * Ads - Setting viewport margin for specific pagetype/screensizes 🐿 v2.5.16 * Ads - Setting viewport margin for specific pagetype/screensizes 🐿 v2.5.16
Financial-Times · Sep 27, 2017 · 4bf1442 · 4bf1442
1 parent bede42d
commit 4bf1442
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 72 deletions.
diff --git a/components/n-ui/ads/js/oAdsConfig.js b/components/n-ui/ads/js/oAdsConfig.js
@@ -55,31 +55,19 @@ module.exports = function (flags, appName, adOptions) {
 		return zone.join('/');
 	}
 
-	function setViewportMarginBy (variant) {
-		switch (variant) {
-			case '5':
-				return'5%';
-				break;
-			case '10':
-				return '10%';
-				break;
-			case '15':
-				return '15%';
-				break;
-			default:
-				return '0%';
-		}
-	}
-
-	function isTargetSize () {
-		return utils.getScreenSize() < 980;
-	}
-
 	function getViewportMargin () {
 		let viewportMargin = '0%';
-		if (flags.get('adOptimizeLazyLoad') && isTargetSize() ) {
-			const variant = flags.get('adOptimizeLazyLoad');
-			viewportMargin = setViewportMarginBy(variant);
+		let pt = appName;
+		let scrnSize = utils.getScreenSize();
+		if (scrnSize < 980 && pt !=='article' ) {
+			if (pt === 'front') {
+				if (scrnSize < 760) {viewportMargin = '15%';}
+				else {viewportMargin ='5%';}
+			}
+			if (pt === 'stream'){
+				if (scrnSize < 760) {viewportMargin ='5%';}
+				else {viewportMargin = '15%';}
+			}
 		}
 		return viewportMargin;
 	}

diff --git a/components/n-ui/ads/test/oAdsConfig.spec.js b/components/n-ui/ads/test/oAdsConfig.spec.js
@@ -111,66 +111,47 @@ describe('Config', () => {
 	describe('lazyLoad viewportMargin', () => {
 
 	// tests for adOptimizeLazyLoad flag
-		it('Should pass 0% when screen size is wider than 980px and adOptimizeLazyLoad flag is defined', () => {
+		it('Should pass 0% when screen size is wider than 980px', () => {
 			sandbox.stub(utils, 'getScreenSize', () => { return 980; });
-			const flags = { get: (flagName) => {
-				switch (flagName) {
-					case 'adOptimizeLazyLoad':
-					return '50';
-					break;
-					default:
-					return true;
-				}
-			}};
+			const flags = { get: () => true };
 			const config = oAdsConfig(flags, 'article');
 			expect(config.lazyLoad.viewportMargin).to.equal('0%');
 		});
 
-		it('Should pass 0% when screen size is less than 980px and adOptimizeLazyLoad flag is undefined', () => {
-			sandbox.stub(utils, 'getScreenSize', () => { return 979; });
-			const flags = { get: (flagName) => {
-				switch (flagName) {
-					case 'adOptimizeLazyLoad':
-					return undefined;
-					break;
-					default:
-					return true;
-				}
-			}};
-			const config = oAdsConfig(flags, 'article');
-			expect(config.lazyLoad.viewportMargin).to.equal('0%');
+		it('Should pass 15% when screen size is narrower than 760px and appName is fro', () => {
+			sandbox.stub(utils, 'getScreenSize', () => { return 750; });
+			const flags = { get: () => true };
+			const config = oAdsConfig(flags, 'front');
+			expect(config.lazyLoad.viewportMargin).to.equal('15%');
 		});
 
-		context('when screen size is less than 980px and adOptimizeLazyLoad flag is defined', () => {
-
-			beforeEach(() => {
-				sandbox.stub(utils, 'getScreenSize', () => { return 979; });
-			});
-
-			afterEach(() => {
-				sandbox.restore();
-			});
-
-			['5', '10', '15'].forEach( margin => {
-
-				it(`Should pass ${margin}% when the flag\'s value is ${margin}`, () => {
-					const flags = { get: (flagName) => {
-						switch (flagName) {
-							case 'adOptimizeLazyLoad':
-							return margin;
-							break;
-							default:
-							return true;
-						}
-					}};
-					const config = oAdsConfig(flags, 'article');
-					expect(config.lazyLoad.viewportMargin).to.equal(`${margin}%`);
-				});
+		it('Should pass 5% when screen size is narrower than 980px and wider than 759px and appName is fro', () => {
+			sandbox.stub(utils, 'getScreenSize', () => { return 970; });
+			const flags = { get: () => true };
+			const config = oAdsConfig(flags, 'front');
+			expect(config.lazyLoad.viewportMargin).to.equal('5%');
+		});
 
-			});
+		it('Should pass 5% when screen size is narrower than 760px and appName is stream', () => {
+			sandbox.stub(utils, 'getScreenSize', () => { return 750; });
+			const flags = { get: () => true };
+			const config = oAdsConfig(flags, 'stream');
+			expect(config.lazyLoad.viewportMargin).to.equal('5%');
+		});
 
+		it('Should pass 15% when screen size is narrower than 980px and wider than 759px and appName is stream', () => {
+			sandbox.stub(utils, 'getScreenSize', () => { return 970; });
+			const flags = { get: () => true };
+			const config = oAdsConfig(flags, 'stream');
+			expect(config.lazyLoad.viewportMargin).to.equal('15%');
 		});
 
+		it('Should pass 0% when appName is article', () => {
+			sandbox.stub(utils, 'getScreenSize', () => { return 970; });
+			const flags = { get: () => true };
+			const config = oAdsConfig(flags, 'article');
+			expect(config.lazyLoad.viewportMargin).to.equal('0%');
+		});
 	});
 
 	describe('o-ads', () => {