Named slot sizes (#9)

* make props optional; fixes unittests; * support for named sizes * update docs!
jaanauati · Nov 29, 2016 · 80b95aa · 80b95aa
1 parent d57f80c
commit 80b95aa
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 27 deletions.
diff --git a/Readme.md b/Readme.md
@@ -109,7 +109,7 @@ DFPManager.load();
 | ------------------ | ------------- | ----------- | -------     |
 | dfpNetworkId       | string (required)  |  ``` "1122" ```      | DFP Account id. |
 | adUnit             | string (required)  |  ``` "homepage" ```   | The adunit you want to target to this box. |
-| sizes              | array (required)   |  ```[ [300, 250], [300, 600] ] ``` | list of sizes that this box support ([width, height]). You can configure 1 or more sizes.|
+| sizes              | array (required)   |  ```[ [300, 250], [300, 600], 'fluid' ] ``` | list of sizes that this box support. Sizes can be specified by eigther and array like [width, height] or with strings ("dfp named sizes") like 'fluid'. You can configure 1 or more sizes.|
 | sizeMapping        | array of objects.    | ```{ [ {viewport: [1024, 768], sizes:[[728, 90], [300, 250]]}, {viewport: [900, 768], sizes:[[300, 250]] }] } | Set the size mappings to be applied to the adSlot. |
 | targetingArguments | object (optional) | ``` { "keywords": "family", "content": "test" } ``` | Object with attributes you want to add to this box (you can use for custom targeting) |
 | onSlotRender       | fcn. (optional) | ``` function(eventData) { console.log(eventData.size); } ``` | This callback is executed after the adSlot is rendered. The first argument passes the gpt event data (googletag.events.SlotRenderEndedEvent). |

diff --git a/js/adslot.js b/js/adslot.js
@@ -7,10 +7,13 @@ export const AdSlot = React.createClass({
   displayName: 'AdSlot',
 
   propTypes: {
-    dfpNetworkId: React.PropTypes.string.isRequired,
-    adUnit: React.PropTypes.string.isRequired,
+    dfpNetworkId: React.PropTypes.string,
+    adUnit: React.PropTypes.string,
     sizes: React.PropTypes.arrayOf(
-      React.PropTypes.arrayOf(React.PropTypes.number)
+      React.PropTypes.oneOfType([
+        React.PropTypes.arrayOf(React.PropTypes.number),
+        React.PropTypes.string,
+      ])
     ),
     renderOutOfThePage: React.PropTypes.bool,
     sizeMapping: React.PropTypes.arrayOf(React.PropTypes.object),
@@ -51,7 +54,6 @@ export const AdSlot = React.createClass({
       this.registerSlot();
     }
   },
-
   componentWillUnmount() {
     this.unregisterSlot();
   },

diff --git a/lib/adslot.js b/lib/adslot.js
@@ -21,9 +21,9 @@ var AdSlot = exports.AdSlot = _react2.default.createClass({
   displayName: 'AdSlot',
 
   propTypes: {
-    dfpNetworkId: _react2.default.PropTypes.string.isRequired,
-    adUnit: _react2.default.PropTypes.string.isRequired,
-    sizes: _react2.default.PropTypes.arrayOf(_react2.default.PropTypes.arrayOf(_react2.default.PropTypes.number)),
+    dfpNetworkId: _react2.default.PropTypes.string,
+    adUnit: _react2.default.PropTypes.string,
+    sizes: _react2.default.PropTypes.arrayOf(_react2.default.PropTypes.oneOfType([_react2.default.PropTypes.arrayOf(_react2.default.PropTypes.number), _react2.default.PropTypes.string])),
     renderOutOfThePage: _react2.default.PropTypes.bool,
     sizeMapping: _react2.default.PropTypes.arrayOf(_react2.default.PropTypes.object),
     fetchNow: _react2.default.PropTypes.bool,

diff --git a/spec/test-adslot.js b/spec/test-adslot.js
@@ -10,16 +10,16 @@ import { AdSlot, DFPManager } from '../lib';
 
 describe('AdSlot', () => {
   describe('Component markup', () => {
+    const compProps = {
+      dfpNetworkId: '1000',
+      adUnit: 'foo/bar/baz',
+      slotId: 'testElement',
+      sizes: [[728, 90], 'fluid'],
+    };
+
     let component;
     beforeEach(() => {
-      component = TestUtils.renderIntoDocument(
-        <AdSlot
-          dfpNetworkId={1000}
-          adUnit={'foo/bar/baz'}
-          slotId={'testElement'}
-          sizes={[[728, 90]]}
-        />
-      );
+      component = TestUtils.renderIntoDocument(<AdSlot { ...compProps } />);
     });
 
     it('renders an adBox with the given elementId', () => {
@@ -37,7 +37,7 @@ describe('AdSlot', () => {
 
     it('Registers an AdSlot', () => {
       const compProps = {
-        dfpNetworkId: 1000,
+        dfpNetworkId: '1000',
         adUnit: 'foo/bar/baz',
         slotId: 'testElement1',
         sizes: [[728, 90]],
@@ -53,7 +53,7 @@ describe('AdSlot', () => {
 
     it('Registers a refreshable AdSlot', () => {
       const compProps = {
-        dfpNetworkId: 1000,
+        dfpNetworkId: '1000',
         adUnit: 'foo/bar/baz',
         slotId: 'testElement2',
         sizes: [[728, 90]],
@@ -69,7 +69,7 @@ describe('AdSlot', () => {
 
     it('Registers a non refreshable AdSlot', () => {
       const compProps = {
-        dfpNetworkId: 1000,
+        dfpNetworkId: '1000',
         adUnit: 'foo/bar/baz',
         slotId: 'testElement3',
         sizes: [[728, 90]],
@@ -84,7 +84,7 @@ describe('AdSlot', () => {
 
     it('Registers an AdSlot with custom targeting arguments', () => {
       const compProps = {
-        dfpNetworkId: 1000,
+        dfpNetworkId: '1000',
         adUnit: 'foo/bar/baz',
         slotId: 'testElement4',
         sizes: [[728, 90]],
@@ -100,7 +100,7 @@ describe('AdSlot', () => {
 
     it('Registers an AdSlot without custom targeting arguments', () => {
       const compProps = {
-        dfpNetworkId: 1000,
+        dfpNetworkId: '1000',
         adUnit: 'foo/bar/baz',
         slotId: 'testElement5',
         sizes: [[728, 90]],
@@ -115,7 +115,7 @@ describe('AdSlot', () => {
 
     it('Unregisters an AdSlot', () => {
       const compProps = {
-        dfpNetworkId: 1000,
+        dfpNetworkId: '1000',
         adUnit: 'foo/bar/baz',
         slotId: 'testElement6',
         sizes: [[728, 90]],

diff --git a/spec/test-dfpslotsprovider.js b/spec/test-dfpslotsprovider.js
@@ -60,7 +60,7 @@ describe('DFPSlotsProvider', () => {
 
     it('Registers a refreshable AdSlot', () => {
       const providerProps = {
-        dfpNetworkId: 1000,
+        dfpNetworkId: '1000',
         adUnit: 'foo/bar/baz',
       };
 
@@ -83,7 +83,7 @@ describe('DFPSlotsProvider', () => {
 
     it('Registers a non refreshable AdSlot', () => {
       const providerProps = {
-        dfpNetworkId: 1000,
+        dfpNetworkId: '1000',
         adUnit: 'foo/bar/baz',
       };
 
@@ -103,7 +103,7 @@ describe('DFPSlotsProvider', () => {
 
     it('Registers an AdSlot with custom targeting arguments', () => {
       const providerProps = {
-        dfpNetworkId: 1000,
+        dfpNetworkId: '1000',
         adUnit: 'foo/bar/baz',
         targetingArguments: { team: 'river plate', player: 'pisculichi' },
       };
@@ -122,7 +122,7 @@ describe('DFPSlotsProvider', () => {
 
     it('Registers an AdSlot without custom targeting arguments', () => {
       const providerProps = {
-        dfpNetworkId: 1000,
+        dfpNetworkId: '1000',
         adUnit: 'foo/bar/baz',
       };
       const compProps = {
@@ -141,7 +141,7 @@ describe('DFPSlotsProvider', () => {
 
     it('Unregisters an AdSlot', () => {
       const providerProps = {
-        dfpNetworkId: 1000,
+        dfpNetworkId: '1000',
         adUnit: 'foo/bar/baz',
       };
       const compProps = {