Fix undefined function if apiNotReady

ticketmaster · Aug 29, 2018 · 5ef19b1 · 5ef19b1
1 parent 60f6ce0
commit 5ef19b1
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 47 deletions.
diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-    "name": "react-gpt",
+    "name": "@ticketmaster/react-gpt",
     "version": "2.0.1",
     "description": "A react display ad component using Google Publisher Tag",
     "main": "lib/index.js",
@@ -12,7 +12,7 @@
     "license": "MIT",
     "repository": {
         "type": "git",
-        "url": "https://github.com/nfl/react-gpt"
+        "url": "https://github.com/Ticketmaster/react-gpt"
     },
     "keywords": [
         "react-gpt",

diff --git a/src/Bling.js b/src/Bling.js
@@ -1,13 +1,13 @@
 /* eslint-disable react/sort-comp */
-import React, { Component } from "react";
+import React, {Component} from "react";
 import PropTypes from "prop-types";
 import ReactDOM from "react-dom";
 import invariant from "invariant";
 import deepEqual from "deep-equal";
 import hoistStatics from "hoist-non-react-statics";
 import Events from "./Events";
 import filterPropsSimple from "./utils/filterProps";
-import { createManager, pubadsAPI } from "./createManager";
+import {createManager, pubadsAPI} from "./createManager";
 /**
  * An Ad Component using Google Publisher Tags.
  * This component should work standalone w/o context.
@@ -387,8 +387,8 @@ class Bling extends Component {
     }
 
     componentWillReceiveProps(nextProps) {
-        const { propsEqual } = Bling._config;
-        const { sizeMapping } = this.props;
+        const {propsEqual} = Bling._config;
+        const {sizeMapping} = this.props;
         if (
             (nextProps.sizeMapping || sizeMapping) &&
             !propsEqual(nextProps.sizeMapping, sizeMapping)
@@ -400,7 +400,7 @@ class Bling extends Component {
     shouldComponentUpdate(nextProps, nextState) {
         // if adUnitPath changes, need to create a new slot, re-render
         // otherwise, just refresh
-        const { scriptLoaded, inViewport } = nextState;
+        const {scriptLoaded, inViewport} = nextState;
         const notInViewport = this.notInViewport(nextProps, nextState);
         const inViewportChanged = this.state.inViewport !== inViewport;
         const isScriptLoaded = this.state.scriptLoaded !== scriptLoaded;
@@ -412,7 +412,7 @@ class Bling extends Component {
             return true;
         }
 
-        const { filterProps, propsEqual } = Bling._config;
+        const {filterProps, propsEqual} = Bling._config;
         const refreshableProps = filterProps(
             Bling.refreshableProps,
             this.props,
@@ -478,12 +478,12 @@ class Bling extends Component {
     }
 
     onScriptLoaded() {
-        const { onScriptLoaded } = this.props;
+        const {onScriptLoaded} = this.props;
 
         if (this.getRenderWhenViewable()) {
             this.foldCheck();
         }
-        this.setState({ scriptLoaded: true }, onScriptLoaded); // eslint-disable-line react/no-did-mount-set-state
+        this.setState({scriptLoaded: true}, onScriptLoaded); // eslint-disable-line react/no-did-mount-set-state
     }
 
     onScriptError(err) {
@@ -521,19 +521,21 @@ class Bling extends Component {
             this.viewableThreshold
         );
         if (inViewport) {
-            this.setState({ inViewport: true });
+            this.setState({inViewport: true});
         }
     }
 
     defineSizeMapping(adSlot, sizeMapping) {
         if (sizeMapping) {
-            Bling._adManager.addMQListener(this, this.props);
-            const sizeMappingArray = sizeMapping
-                .reduce((mapping, size) => {
-                    return mapping.addSize(size.viewport, size.slot);
-                }, Bling._adManager.googletag.sizeMapping())
-                .build();
-            adSlot.defineSizeMapping(sizeMappingArray);
+            Bling._adManager.googletag.cmd.push(() => {
+                Bling._adManager.addMQListener(this, this.props);
+                const sizeMappingArray = sizeMapping
+                    .reduce((mapping, size) => {
+                        return mapping.addSize(size.viewport, size.slot);
+                    }, Bling._adManager.googletag.sizeMapping())
+                    .build();
+                adSlot.defineSizeMapping(sizeMappingArray);
+            });
         }
     }
 
@@ -596,12 +598,12 @@ class Bling extends Component {
     }
 
     notInViewport(props = this.props, state = this.state) {
-        const { inViewport } = state;
+        const {inViewport} = state;
         return this.getRenderWhenViewable(props) && !inViewport;
     }
 
     defineSlot() {
-        const { adUnitPath, outOfPage } = this.props;
+        const {adUnitPath, outOfPage} = this.props;
         const divId = this._divId;
         const slotSize = this.getSlotSize();
 
@@ -692,7 +694,7 @@ class Bling extends Component {
     }
 
     display() {
-        const { content } = this.props;
+        const {content} = this.props;
         const divId = this._divId;
         const adSlot = this._adSlot;
 
@@ -737,8 +739,8 @@ class Bling extends Component {
     }
 
     render() {
-        const { scriptLoaded } = this.state;
-        const { id, outOfPage, style } = this.props;
+        const {scriptLoaded} = this.state;
+        const {id, outOfPage, style} = this.props;
         const shouldNotRender = this.notInViewport(this.props, this.state);
 
         if (!scriptLoaded || shouldNotRender) {
@@ -785,8 +787,7 @@ class Bling extends Component {
 export default hoistStatics(
     Bling,
     pubadsAPI.reduce((api, method) => {
-        api[method] = (...args) =>
-            Bling._adManager.pubadsProxy({ method, args });
+        api[method] = (...args) => Bling._adManager.pubadsProxy({method, args});
         return api;
     }, {})
 );
diff --git a/test/Bling.spec.js b/test/Bling.spec.js
@@ -1,20 +1,20 @@
 /* eslint-disable react/no-multi-comp */
-import React, { Component } from "react";
+import React, {Component} from "react";
 import PropTypes from "prop-types";
 import ReactTestUtils from "react-dom/test-utils";
 import ShallowRenderer from "react-test-renderer/shallow";
 import Bling from "../src/Bling";
 import Events from "../src/Events";
-import { pubadsAPI, APIToCallBeforeServiceEnabled } from "../src/createManager";
-import { gptVersion, pubadsVersion } from "../src/utils/apiList";
-import { createManagerTest } from "../src/utils/createManagerTest";
+import {pubadsAPI, APIToCallBeforeServiceEnabled} from "../src/createManager";
+import {gptVersion, pubadsVersion} from "../src/utils/apiList";
+import {createManagerTest} from "../src/utils/createManagerTest";
 
 describe("Bling", () => {
     let googletag;
     const stubs = [];
 
     beforeEach(() => {
-        Bling.configure({ renderWhenViewable: false });
+        Bling.configure({renderWhenViewable: false});
         Bling.testManager = createManagerTest();
         googletag = Bling._adManager.googletag;
     });
@@ -43,7 +43,7 @@ describe("Bling", () => {
         );
         const result = renderer.getRenderOutput();
         expect(result.type).to.equal("div");
-        expect(result.props.style).to.eql({ width: 728, height: 90 });
+        expect(result.props.style).to.eql({width: 728, height: 90});
     });
 
     it("renders fluid to auto width and height", () => {
@@ -53,7 +53,7 @@ describe("Bling", () => {
         );
         const result = renderer.getRenderOutput();
         expect(result.type).to.equal("div");
-        expect(result.props.style).to.eql({ width: "auto", height: "auto" });
+        expect(result.props.style).to.eql({width: "auto", height: "auto"});
     });
 
     it("renders ['fluid'] to auto width and height", () => {
@@ -63,7 +63,7 @@ describe("Bling", () => {
         );
         const result = renderer.getRenderOutput();
         expect(result.type).to.equal("div");
-        expect(result.props.style).to.eql({ width: "auto", height: "auto" });
+        expect(result.props.style).to.eql({width: "auto", height: "auto"});
     });
 
     it("returns gpt version", done => {
@@ -259,7 +259,7 @@ describe("Bling", () => {
 
     it("calls getServices on adSlot on clear", () => {
         const instance = new Bling();
-        const adSlot = sinon.mock({ getServices: () => {} });
+        const adSlot = sinon.mock({getServices: () => {}});
         adSlot.expects("getServices").once();
         instance._adSlot = adSlot;
         instance.clear();
@@ -316,16 +316,16 @@ describe("Bling", () => {
             <Bling
                 adUnitPath="/4595/nfl.test.open"
                 sizeMapping={[
-                    { viewport: [0, 0], slot: [320, 50] },
-                    { viewport: [750, 200], slot: [728, 90] },
-                    { viewport: [1050, 200], slot: [1024, 120] }
+                    {viewport: [0, 0], slot: [320, 50]},
+                    {viewport: [750, 200], slot: [728, 90]},
+                    {viewport: [1050, 200], slot: [1024, 120]}
                 ]}
             />
         );
     });
 
     it("reflects targeting props to adSlot", done => {
-        const targeting = { t1: "v1", t2: [1, 2, 3] };
+        const targeting = {t1: "v1", t2: [1, 2, 3]};
 
         Bling.once(Events.RENDER, () => {
             const adSlot = instance.adSlot;
@@ -392,7 +392,7 @@ describe("Bling", () => {
         const instance = ReactTestUtils.renderIntoDocument(
             <Bling
                 adUnitPath="/4595/nfl.test.open"
-                attributes={{ attr1: "val1", attr2: "val2" }}
+                attributes={{attr1: "val1", attr2: "val2"}}
                 slotSize={[300, 250]}
             />
         );
@@ -602,7 +602,7 @@ describe("Bling", () => {
         );
         const result = renderer.getRenderOutput();
         expect(result.type).to.equal("div");
-        expect(result.props.style).to.eql({ width: 300, height: 250 });
+        expect(result.props.style).to.eql({width: 300, height: 250});
     });
 
     it("sets slotSize to 0,0 on foldCheck of 'fluid' or ['fluid']", done => {
@@ -635,13 +635,13 @@ describe("Bling", () => {
 
         class Wrapper extends Component {
             state = {
-                targeting: { prop: "val" }
+                targeting: {prop: "val"}
             };
             onSlotRenderEnded = event => {
                 if (count === 0) {
                     expect(event.slot.getTargeting("prop")).to.equal("val");
                     this.setState({
-                        targeting: { prop: "val2" }
+                        targeting: {prop: "val2"}
                     });
                     count++;
                 } else {
@@ -650,7 +650,7 @@ describe("Bling", () => {
                 }
             };
             render() {
-                const { targeting } = this.state;
+                const {targeting} = this.state;
                 return (
                     <Bling
                         adUnitPath="/4595/nfl.test.open"
@@ -672,13 +672,13 @@ describe("Bling", () => {
 
         class Wrapper extends Component {
             state = {
-                targeting: { prop: "val" }
+                targeting: {prop: "val"}
             };
             onSlotRenderEnded = event => {
                 if (count === 0) {
                     expect(event.slot.getTargeting("prop")).to.equal("val");
                     this.setState({
-                        targeting: { prop: "val2" }
+                        targeting: {prop: "val2"}
                     });
                     count++;
                 } else {
@@ -687,7 +687,7 @@ describe("Bling", () => {
                 }
             };
             render() {
-                const { targeting } = this.state;
+                const {targeting} = this.state;
                 return (
                     <Bling
                         adUnitPath="/4595/nfl.test.open"
@@ -728,7 +728,7 @@ describe("Bling", () => {
                 }
             };
             render() {
-                const { adUnitPath } = this.state;
+                const {adUnitPath} = this.state;
                 return (
                     <Bling
                         adUnitPath={adUnitPath}