Configuration page, work in progress; adjusted prop type for advertis…

…ing slot config to include size mapping name

Change-Id: Icf911c8975231406b5b9ebc2b875d93f9d6de5af

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 1.0.2 / 13 Jun 2018
+
+* bug fix: GPT sizes are now added correctly 
+
 ## 1.0.1 / 12 Jun 2018
 
 * adjusted advertising config prop type to allow specifying Prebid price granularity as object

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-prebid",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Library for ad placements with Prebid header bidding in React applications",
   "main": "index.js",
   "esnext": "index-esnext.js",

src/Advertising.js

@@ -139,21 +139,21 @@ export default class Advertising {
         if (!this.config.sizeMappings) {
             return;
         }
-        Object.keys(this.config.sizeMappings).forEach(key => {
+        for (const [key, value] of Object.entries(this.config.sizeMappings)) {
             const sizeMapping = window.googletag.sizeMapping();
-            this.config.sizeMappings[key].forEach(({ viewPortSize, sizes }) =>
-                sizeMapping.addSize(viewPortSize, sizes)
-            );
+            for (const { viewPortSize, sizes } of value) {
+                sizeMapping.addSize(viewPortSize, ...sizes);
+            }
             this.gptSizeMappings[key] = sizeMapping.build();
-        });
+        }
     }
 
     [getGptSizeMapping](sizeMappingName) {
         return sizeMappingName && this.gptSizeMappings[sizeMappingName] ? this.gptSizeMappings[sizeMappingName] : null;
     }
 
     [defineSlots]() {
-        this.config.slots.forEach(({ id, targeting = {}, sizes, sizeMappingName, path, collapseEmptyDiv }) => {
+        this.config.slots.forEach(({ id, path, collapseEmptyDiv, targeting = {}, sizes, sizeMappingName }) => {
             const slot = window.googletag.defineSlot(path || this.config.path, sizes, id);
 
             const sizeMapping = this[getGptSizeMapping](sizeMappingName);

src/__snapshots__/Advertising.test.js.snap

@@ -128,30 +128,26 @@ Array [
       0,
       0,
     ],
-    Array [],
   ],
   Array [
     Array [
       320,
       700,
     ],
     Array [
-      Array [
-        300,
-        250,
-      ],
-      Array [
-        320,
-        50,
-      ],
+      300,
+      250,
+    ],
+    Array [
+      320,
+      50,
     ],
   ],
   Array [
     Array [
       1050,
       200,
     ],
-    Array [],
   ],
 ]
 `;

src/components/utils/AdvertisingSlotConfigPropType.js

@@ -6,6 +6,7 @@ export default PropTypes.shape({
     collapseEmptyDiv: PropTypes.arrayOf(PropTypes.bool),
     targeting: PropTypes.object,
     sizes: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.number)])).isRequired,
+    sizeMappingName: PropTypes.string,
     prebid: PropTypes.arrayOf(
         PropTypes.shape({
             mediaTypes: PropTypes.objectOf(

src/components/utils/AdvertisingSlotConfigPropType.test.js

@@ -17,8 +17,11 @@ describe('When I check the prop types for a valid slot config', () => {
             (result = checkPropTypes(MyComponent.propTypes, {
                 config: {
                     id: 'my-precious-div-id',
+                    path: '/my/nice/path666',
+                    collapseEmptyDiv: [true, true],
                     targeting: { a: 666 },
                     sizes: ['fluid', [320, 240]],
+                    sizeMappingName: 'fredbazgrault',
                     prebid: [
                         {
                             mediaTypes: {