Merge pull request #2 from jaanauati/improve-testing-suite

Improve testing suite

.eslintrc.json

@@ -4,7 +4,12 @@
       "react"
     ],
     "globals": {
-      "googletag": true
+      "googletag": true,
+      "describe": true,
+      "expect": true,
+      "it": true,
+      "beforeEach": true,
+      "afterEach": true
     },
     "ecmaFeatures": {
       "experimentalObjectRestSpread": true

Readme.md

@@ -87,6 +87,10 @@ DFPManager.load();
 | init               | ```fcn() => Promise ```| ```DFPManager.init(); ```| Initializes the dfp manager (fetches the gpt scripts from network). Returns a promise that resolves when the gpt api is ready for usage. |
 | attachSlotRenderEnded  | ``` fcn( fcn({slotId, event}) ) ``` | ``` DFPManager.attachSlotRenderEnded((id, event) => {console.log(event.size); }) ``` | Attaches a callback that will be called when an ad slot is rendered (or refreshed). slotId is the id of slot. event is the gpt event data. |
 | detachSlotRenderEnded | ``` fcn(callback) ``` | ``` DFPManager.detachSlotRenderEnded(myCallback) ``` | Detaches the callback. |
+| getRegisteredSlots | ``` fcn() => {} ``` | ``` Object.keys(DFPManager.getRegisteredSlots()) ``` | Returns an object whose attributes are the registered slots. Example: ``` { slotId: { data }, .... }```|
+| getRefreshableSlots | ``` fcn() => { slotId:{ slot }, ... } ``` | ``` console.log(DFPManager.getRegisteredSlots().length); ``` | Returns an object whose properties are slots that can be refreshed (see property ```shouldRefresh``` ). |
+| getTargetingArguments | ``` fcn() => {} ``` | ``` Object.keys(DFPManager.getTargetingArguments()) ``` | Returns an object that contains the targeting arguments (configured through ```DFPManager.setTargetingArguments()```) |
+| getSlotTargetingArguments | ``` fcn(slotId) => {} ``` | ``` console.log(DFPManager.getSlotTargetingArguments('slot-five')['the-key']); ``` | Returns an object that contains the custom targeting arguments that were set for the given slot (slotId). |  
 
 ## Wanna help?
 I certainly know that testcases need to be improved, but, as long as your syntax is clean, submit testscases and, of course, all the interfaces are kept working, all kind of contribution is welcome.

grunt/eslint.js

@@ -2,5 +2,5 @@ module.exports = {
     options: {
         config: '.eslintrc.json'
     },
-    all: [ './js/*.js' ]
+    all: [ './js/*.js', './spec/*.js' ]
 };

js/adslot.js

@@ -68,7 +68,7 @@ export const AdSlot = React.createClass({
     );
   },
 
-  componentWillUmount() {
+  componentWillUnmount() {
     this.unregisterSlot();
   },
 

js/manager.js

@@ -13,20 +13,33 @@ export const DFPManager = Object.assign(new EventEmitter(), {
     Object.assign(globalTargetingArguments, data);
   },
 
+  getTargetingArguments() {
+    return { ...globalTargetingArguments };
+  },
+
+  getSlotTargetingArguments(slotId) {
+    const slot = this.getRegisteredSlots()[slotId];
+    let ret = null;
+    if (slot !== undefined && slot.targetingArguments !== undefined) {
+      ret = { ...slot.targetingArguments };
+    }
+    return ret;
+  },
+
   init() {
     if (managerAlreadyInitialized === false) {
       managerAlreadyInitialized = true;
-      this.getGoogletag().then(() => {
+      this.getGoogletag().then((googletag) => {
         googletag.cmd.push(() => {
           pubadsService = googletag.pubads();
           pubadsService.addEventListener('slotRenderEnded', (event) => {
             const slotId = event.slot.getSlotElementId();
             this.emit('slotRenderEnded', { slotId, event });
           });
-
-          Object.keys(globalTargetingArguments).forEach((varName) => {
-            if (globalTargetingArguments.hasOwnProperty(varName)) {
-              pubadsService.setTargeting(varName, globalTargetingArguments[varName]);
+          const targetingArguments = this.getTargetingArguments();
+          Object.keys(targetingArguments).forEach((varName) => {
+            if (targetingArguments.hasOwnProperty(varName)) {
+              pubadsService.setTargeting(varName, targetingArguments[varName]);
             }
           });
         });
@@ -52,58 +65,74 @@ export const DFPManager = Object.assign(new EventEmitter(), {
     } else {
       availableSlots = registeredSlots;
     }
-
-    Object.keys(availableSlots).forEach((currentSlotId) => {
-      availableSlots[currentSlotId].loaded = true;
-      googletag.cmd.push(() => {
-        const slot = availableSlots[currentSlotId];
-        let gptSlot;
-        const adUnit = `${slot.dfpNetworkId}/${slot.adUnit}`;
-        if (slot.renderOutOfThePage === true) {
-          gptSlot = googletag.defineOutOfPageSlot(adUnit, currentSlotId);
-        } else {
-          gptSlot = googletag.defineSlot(adUnit, slot.sizes, currentSlotId);
-        }
-        slot.gptSlot = gptSlot;
-        if (slot.targetingArguments) {
-          Object.keys(slot.targetingArguments).forEach((varName) => {
-            if (slot.targetingArguments.hasOwnProperty(varName)) {
-              slot.gptSlot.setTargeting(varName, slot.targetingArguments[varName]);
-            }
-          });
-        }
-        slot.gptSlot.addService(googletag.pubads());
-        if (slot.sizeMapping) {
-          let smbuilder = googletag.sizeMapping();
-          slot.sizeMapping.forEach((mapping) => {
-            smbuilder = smbuilder.addSize(mapping.viewport, mapping.sizes);
-          });
-          slot.gptSlot.defineSizeMapping(smbuilder.build());
-        }
+    this.getGoogletag().then((googletag) => {
+      Object.keys(availableSlots).forEach((currentSlotId) => {
+        availableSlots[currentSlotId].loaded = true;
+        googletag.cmd.push(() => {
+          const slot = availableSlots[currentSlotId];
+          let gptSlot;
+          const adUnit = `${slot.dfpNetworkId}/${slot.adUnit}`;
+          if (slot.renderOutOfThePage === true) {
+            gptSlot = googletag.defineOutOfPageSlot(adUnit, currentSlotId);
+          } else {
+            gptSlot = googletag.defineSlot(adUnit, slot.sizes, currentSlotId);
+          }
+          slot.gptSlot = gptSlot;
+          const slotTargetingArguments = this.getSlotTargetingArguments(currentSlotId);
+          if (slotTargetingArguments !== null) {
+            Object.keys(slotTargetingArguments).forEach((varName) => {
+              if (slotTargetingArguments.hasOwnProperty(varName)) {
+                slot.gptSlot.setTargeting(varName, slotTargetingArguments[varName]);
+              }
+            });
+          }
+          slot.gptSlot.addService(googletag.pubads());
+          if (slot.sizeMapping) {
+            let smbuilder = googletag.sizeMapping();
+            slot.sizeMapping.forEach((mapping) => {
+              smbuilder = smbuilder.addSize(mapping.viewport, mapping.sizes);
+            });
+            slot.gptSlot.defineSizeMapping(smbuilder.build());
+          }
+        });
       });
-    });
 
-    googletag.cmd.push(() => {
-      googletag.pubads().enableSingleRequest();
-      googletag.enableServices();
-      Object.keys(availableSlots).forEach((_slotId) => {
-        if (availableSlots.hasOwnProperty(_slotId)) {
-          googletag.display(_slotId);
-        }
+      googletag.cmd.push(() => {
+        googletag.pubads().enableSingleRequest();
+        googletag.enableServices();
+        Object.keys(availableSlots).forEach((_slotId) => {
+          if (availableSlots.hasOwnProperty(_slotId)) {
+            googletag.display(_slotId);
+          }
+        });
       });
     });
     loadAlreadyCalled = true;
   },
 
+  getRefreshableSlots() {
+    const slotsToRefresh = Object.keys(registeredSlots).map(
+      (k) => registeredSlots[k]
+    );
+    return slotsToRefresh.reduce( (val, slot) => { 
+      if (slot.slotShouldRefresh() === true) {
+        val[slot.slotId] = slot; 
+      }
+      return val; 
+    }, {});
+  },
+
   refresh() {
     if (loadAlreadyCalled === false) {
       this.load();
     } else {
-      googletag.cmd.push(() => {
-        let slotsToRefresh = Object.keys(registeredSlots).map((k) => registeredSlots[k]);
-        slotsToRefresh = slotsToRefresh.filter((slotData) => slotData.slotShouldRefresh());
-        slotsToRefresh = slotsToRefresh.map((slotData) => slotData.gptSlot);
-        googletag.pubads().refresh(slotsToRefresh);
+      this.getGoogletag().then((googletag) => {
+        const slotsToRefresh = this.getRefreshableSlots();
+        googletag.cmd.push(() => {
+          googletag.pubads().refresh(
+            Object.keys(slotsToRefresh).map(slotId => slotsToRefresh[slotId].gptSlot)
+          );
+        });
       });
     }
   },
@@ -124,13 +153,17 @@ export const DFPManager = Object.assign(new EventEmitter(), {
   unregisterSlot({ slotId }) {
     delete registeredSlots[slotId];
   },
-
+
+  getRegisteredSlots() {
+    return registeredSlots;
+  },
+
   attachSlotRenderEnded(cb) {
     this.on('slotRenderEnded', cb);
   },
 
   detachSlotRenderEnded(cb) {
-    this.off('slotRenderEnded', cb);
+    this.removeListener('slotRenderEnded', cb);
   },
 
 });

karma.conf.js

@@ -1,16 +1,17 @@
 module.exports = function(config) {
   config.set({
     basePath: '',
-    frameworks: ['browserify', 'jasmine'],
+    frameworks: ['jasmine', 'browserify'],
     files: [
-      'spec/*.js',
       'lib/*.js',
+      'spec/*.js'
     ],
     preprocessors: {
-      'spec/*.js': [ 'browserify'],
-      'lib/*.js': [ 'browserify'],
+      'lib/*.js': [ 'browserify' ],
+      'spec/*.js': [ 'browserify' ],
     },
     browserify: {
+      debug: true,
       configure: function browserify(bundle) {
         bundle.once('prebundle', function prebundle() {
           bundle.transform('babelify', { presets: ['es2015', 'react'] });
@@ -20,12 +21,12 @@ module.exports = function(config) {
     client: {
       captureConsole: true,
     },
-    reporters: ['progress'],
-    port: 9876,
+    reporters: ['mocha'],
+    port: 9877,
     colors: true,
-    logLevel: config.LOG_INFO,
     autoWatch: false,
-    browsers: ['PhantomJS'],
+    browsers: ['jsdom'],
     singleRun: true,
+    browserNoActivityTimeout: 2000
   });
 };

lib/adslot.js

@@ -74,7 +74,7 @@ var AdSlot = exports.AdSlot = _react2.default.createClass({
       className: 'adBox'
     }), ' ');
   },
-  componentWillUmount: function componentWillUmount() {
+  componentWillUnmount: function componentWillUnmount() {
     this.unregisterSlot();
   },