title: google maps unit testing
body: <p>Have the following directive.</p>
  
  <pre class="lang-js prettyprint-override"><code>import { Directive, ElementRef, EventEmitter, Output } from '@angular/core';
  import { NgModel } from '@angular/forms';
  import {} from 'googlemaps';
  @Directive({
    selector: '[gmap]'
  })
  export class GmapDirective {
  
    @Output() addressFromGoogle: EventEmitter&lt;any&gt; = new EventEmitter();
    autocomplete: any;
  
    constructor(el: ElementRef) {
      this.autocomplete = new google.maps.places.Autocomplete(el.nativeElement, { componentRestrictions: { country: "us" } });
      google.maps.event.addListener(this.autocomplete, 'place_changed', () =&gt; {
        this.addressFromGoogle.emit(this.autocomplete.getPlace());
      });
    }
  }
  </code></pre>
  
  <p>Trying to unit test and get <code>google is not defined</code> How do i provide a global variable to the TestBed ?</p>
  
  <pre class="lang-js prettyprint-override"><code>describe('GmapDirective', () =&gt; {
    let directive: GmapDirective;
    beforeEach(async(() =&gt; {
      TestBed.configureTestingModule({
        imports: [],
        providers: [
          GmapDirective,
          { provide: ElementRef, useClass: MockElementRef },
          {
            provide: google, useValue: {
              google: {
                maps: {
                  Animation: {},
                  BicyclingLayer: function () { },
                  Circle: function () { },
                  ControlPosition: {},
                  Data: function () { },
                  DirectionsRenderer: function () { },
                  DirectionsService: function () { },
                  DirectionsStatus: {},
                  DirectionsTravelMode: {},
                  DirectionsUnitSystem: {},
                  DistanceMatrixElementStatus: {},
                  DistanceMatrixService: function () { },
                  DistanceMatrixStatus: {},
                  ElevationService: function () { },
                  ElevationStatus: {},
                  FusionTablesLayer: function () { },
                  Geocoder: function () { },
                  GeocoderLocationType: {},
                  GeocoderStatus: {},
                  GroundOverlay: function () { },
                  ImageMapType: function () { },
                  InfoWindow: function () { },
                  KmlLayer: function () { },
                  KmlLayerStatus: {},
                  LatLng: function () { },
                  LatLngBounds: function () { },
                  MVCArray: function () { },
                  MVCObject: function () { },
                  Map: function () {
                    return {
                      setTilt: function () { },
                      mapTypes: {
                        set: function () { }
                      },
                      overlayMapTypes: {
                        insertAt: function () { },
                        removeAt: function () { }
                      }
                    };
                  },
                  MapTypeControlStyle: {},
                  MapTypeId: {
                    HYBRID: '',
                    ROADMAP: '',
                    SATELLITE: '',
                    TERRAIN: ''
                  },
                  MapTypeRegistry: function () { },
                  Marker: function () { },
                  MarkerImage: function () { },
                  MaxZoomService: function () {
                    return {
                      getMaxZoomAtLatLng: function () { }
                    };
                  },
                  MaxZoomStatus: {},
                  NavigationControlStyle: {},
                  OverlayView: function () { },
                  Point: function () { },
                  Polygon: function () { },
                  Polyline: function () { },
                  Rectangle: function () { },
                  SaveWidget: function () { },
                  ScaleControlStyle: {},
                  Size: function () { },
                  StreetViewCoverageLayer: function () { },
                  StreetViewPanorama: function () { },
                  StreetViewService: function () { },
                  StreetViewStatus: {},
                  StrokePosition: {},
                  StyledMapType: function () { },
                  SymbolPath: {},
                  TrafficLayer: function () { },
                  TransitLayer: function () { },
                  TransitMode: {},
                  TransitRoutePreference: {},
                  TravelMode: {},
                  UnitSystem: {},
                  ZoomControlStyle: {},
                  __gjsload__: function () { },
                  event: {
                    addListener: function () { }
                  },
                  places: {
                    AutocompleteService: function () {
                      return {
                        getPlacePredictions: function () { }
                      };
                    }
                  }
                }
              }
            }
          }
        ],
        declarations: []
      }).compileComponents();
      directive = TestBed.get(GmapDirective);
    }));
    it('should create an instance', () =&gt; {
      expect(directive).toBeTruthy();
    });
  });
  </code></pre>
  
  <p>Tried the above and it doesn't work since google is not injected (expected to be in the global namespace)</p>