From 997aa80b607ebb10ebbb0923cbebdcbb78531972 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20M=C3=BCller?= <info@sebastian-mueller.net>
Date: Sat, 11 Jun 2016 23:59:43 +0200
Subject: [PATCH] feat(LazyMapsAPILoader): provide shortcut

Now, you can use a shortcut to configure the LazyMapsAPILoader:

Before:
```typescript
bootstrap(AppComponent, [
  ANGULAR2_GOOGLE_MAPS_PROVIDERS,
  provide(LazyMapsAPILoaderConfig, {useFactory: () => {
    let config = new LazyMapsAPILoaderConfig();
    config.apiKey = 'mykey';
    return config;
  }})
])
```

After:
```typescript
import {provide} from 'angular2/core';
import {provideLazyMapsAPILoaderConfig} from
'angular2-google-maps/core';

bootstrap(AppComponent, [
  GOOGLE_MAPS_PROVIDERS,
  provideLazyMapsAPILoaderConfig({ apiKey: 'myKey' })
])
```

Closes #388
Closes #420
---
 src/core/index.ts                             |   7 +-
 src/core/services.ts                          |   2 +-
 .../maps-api-loader/lazy-maps-api-loader.ts   | 142 +++++++++++-------
 src/core/utils/browser-globals.ts             |   4 +
 .../lazy-maps-api-loader.spec.ts              |  41 +++++
 5 files changed, 142 insertions(+), 54 deletions(-)
 create mode 100644 src/core/utils/browser-globals.ts
 create mode 100644 test/services/maps-api-loader/lazy-maps-api-loader.spec.ts

diff --git a/src/core/index.ts b/src/core/index.ts
index d3e4f11dd..ab20929ce 100644
--- a/src/core/index.ts
+++ b/src/core/index.ts
@@ -1,13 +1,16 @@
-import {Provider} from '@angular/core';
+import {provide} from '@angular/core';
 
 import {LazyMapsAPILoader} from './services/maps-api-loader/lazy-maps-api-loader';
 import {MapsAPILoader} from './services/maps-api-loader/maps-api-loader';
 
+import {BROWSER_GLOBALS_PROVIDERS} from './utils/browser-globals';
+
 // main modules
 export * from './directives';
 export * from './services';
 export * from './events';
 
 export const GOOGLE_MAPS_PROVIDERS: any[] = [
-  new Provider(MapsAPILoader, {useClass: LazyMapsAPILoader}),
+  ...BROWSER_GLOBALS_PROVIDERS,
+  provide(MapsAPILoader, {useClass: LazyMapsAPILoader}),
 ];
diff --git a/src/core/services.ts b/src/core/services.ts
index 9bdb89f32..d66172b56 100644
--- a/src/core/services.ts
+++ b/src/core/services.ts
@@ -1,6 +1,6 @@
 export {GoogleMapsAPIWrapper} from './services/google-maps-api-wrapper';
 export {InfoWindowManager} from './services/info-window-manager';
-export {GoogleMapsScriptProtocol, LazyMapsAPILoader, LazyMapsAPILoaderConfig} from './services/maps-api-loader/lazy-maps-api-loader';
+export {GoogleMapsScriptProtocol, LazyMapsAPILoader, LazyMapsAPILoaderConfig, LazyMapsAPILoaderConfigLiteral, provideLazyMapsAPILoaderConfig} from './services/maps-api-loader/lazy-maps-api-loader';
 export {MapsAPILoader} from './services/maps-api-loader/maps-api-loader';
 export {NoOpMapsAPILoader} from './services/maps-api-loader/noop-maps-api-loader';
 export {MarkerManager} from './services/marker-manager';
diff --git a/src/core/services/maps-api-loader/lazy-maps-api-loader.ts b/src/core/services/maps-api-loader/lazy-maps-api-loader.ts
index 21c01bdf3..cf5b6beba 100644
--- a/src/core/services/maps-api-loader/lazy-maps-api-loader.ts
+++ b/src/core/services/maps-api-loader/lazy-maps-api-loader.ts
@@ -1,4 +1,5 @@
-import {Injectable, Optional} from '@angular/core';
+import {Injectable, Optional, Provider, provide} from '@angular/core';
+
 import {MapsAPILoader} from './maps-api-loader';
 
 export enum GoogleMapsScriptProtocol {
@@ -7,12 +8,15 @@ export enum GoogleMapsScriptProtocol {
   AUTO
 }
 
-export class LazyMapsAPILoaderConfig {
+/**
+ * Config literal used to create an instance of LazyMapsAPILoaderConfig.
+ */
+export interface LazyMapsAPILoaderConfigLiteral {
   /**
    * The Google Maps API Key (see:
    * https://developers.google.com/maps/documentation/javascript/get-api-key)
    */
-  apiKey: string = null;
+  apiKey?: string;
 
   /**
    * The Google Maps client ID (for premium plans).
@@ -20,34 +24,34 @@ export class LazyMapsAPILoaderConfig {
    * your application with either an API key or a client ID.
    * The Google Maps API will fail to load if both a client ID and an API key are included.
    */
-  clientId: string = null;
+  clientId?: string;
 
   /**
    * The Google Maps channel name (for premium plans).
    * A channel parameter is an optional parameter that allows you to track usage under your client
    * ID by assigning a distinct channel to each of your applications.
    */
-  channel: string = null;
+  channel?: string;
 
   /**
    * Google Maps API version.
    */
-  apiVersion: string = '3';
+  apiVersion?: string;
 
   /**
    * Host and Path used for the `<script>` tag.
    */
-  hostAndPath: string = 'maps.googleapis.com/maps/api/js';
+  hostAndPath?: string;
 
   /**
    * Protocol used for the `<script>` tag.
    */
-  protocol: GoogleMapsScriptProtocol = GoogleMapsScriptProtocol.HTTPS;
+  protocol?: GoogleMapsScriptProtocol;
 
   /**
    * Defines which Google Maps libraries should get loaded.
    */
-  libraries: string[] = [];
+  libraries?: string[];
 
   /**
    * The default bias for the map behavior is US.
@@ -55,7 +59,7 @@ export class LazyMapsAPILoaderConfig {
    * application, you can overwrite the default behavior (US) by defining a `region`.
    * See https://developers.google.com/maps/documentation/javascript/basics#Region
    */
-  region: string = null;
+  region?: string;
 
   /**
    * The Google Maps API uses the browser's preferred language when displaying
@@ -63,6 +67,22 @@ export class LazyMapsAPILoaderConfig {
    * to use a given language, you can use this setting.
    * See https://developers.google.com/maps/documentation/javascript/basics#Language
    */
+  language?: string;
+}
+
+/**
+ * Configuration for {@link LazyMapsAPILoader}.
+ * See {@link LazyMapsAPILoaderConfig} for instance attribute descriptions.
+ */
+export class LazyMapsAPILoaderConfig implements LazyMapsAPILoaderConfigLiteral {
+  apiKey: string = null;
+  clientId: string = null;
+  channel: string = null;
+  apiVersion: string = '3';
+  hostAndPath: string = 'maps.googleapis.com/maps/api/js';
+  protocol: GoogleMapsScriptProtocol = GoogleMapsScriptProtocol.HTTPS;
+  libraries: string[] = [];
+  region: string = null;
   language: string = null;
 }
 
@@ -71,12 +91,15 @@ const DEFAULT_CONFIGURATION = new LazyMapsAPILoaderConfig();
 @Injectable()
 export class LazyMapsAPILoader extends MapsAPILoader {
   private _scriptLoadingPromise: Promise<void>;
+  private _config: LazyMapsAPILoaderConfig;
+  private _window: Window;
+  private _document: Document;
 
-  constructor(@Optional() private _config: LazyMapsAPILoaderConfig) {
+  constructor(@Optional() config: LazyMapsAPILoaderConfig, w: Window, d: Document) {
     super();
-    if (this._config === null || this._config === undefined) {
-      this._config = DEFAULT_CONFIGURATION;
-    }
+    this._config = config || DEFAULT_CONFIGURATION;
+    this._window = w;
+    this._document = d;
   }
 
   load(): Promise<void> {
@@ -84,20 +107,20 @@ export class LazyMapsAPILoader extends MapsAPILoader {
       return this._scriptLoadingPromise;
     }
 
-    const script = document.createElement('script');
+    const script = this._document.createElement('script');
     script.type = 'text/javascript';
     script.async = true;
     script.defer = true;
-    const callbackName: string = `angular2googlemaps${new Date().getMilliseconds() }`;
+    const callbackName: string = `angular2GoogleMapsLazyMapsAPILoader`;
     script.src = this._getScriptSrc(callbackName);
 
     this._scriptLoadingPromise = new Promise<void>((resolve: Function, reject: Function) => {
-      (<any>window)[callbackName] = () => { resolve(); };
+      (<any>this._window)[callbackName] = () => { resolve(); };
 
       script.onerror = (error: Event) => { reject(error); };
     });
 
-    document.body.appendChild(script);
+    this._document.body.appendChild(script);
     return this._scriptLoadingPromise;
   }
 
@@ -119,40 +142,57 @@ export class LazyMapsAPILoader extends MapsAPILoader {
     }
 
     const hostAndPath: string = this._config.hostAndPath || DEFAULT_CONFIGURATION.hostAndPath;
-    const apiKey: string = this._config.apiKey || DEFAULT_CONFIGURATION.apiKey;
-    const clientId: string = this._config.clientId || DEFAULT_CONFIGURATION.clientId;
-    const channel: string = this._config.channel || DEFAULT_CONFIGURATION.channel;
-    const libraries: string[] = this._config.libraries || DEFAULT_CONFIGURATION.libraries;
-    const region: string = this._config.region || DEFAULT_CONFIGURATION.region;
-    const language: string = this._config.language || DEFAULT_CONFIGURATION.language;
-    const queryParams: {[key: string]: string} = {
+    const queryParams: {[key: string]: string | Array<string>} = {
       v: this._config.apiVersion || DEFAULT_CONFIGURATION.apiVersion,
-      callback: callbackName
+      callback: callbackName,
+      key: this._config.apiKey,
+      client: this._config.clientId,
+      channel: this._config.channel,
+      libraries: this._config.libraries,
+      region: this._config.region,
+      language: this._config.language
     };
-    if (apiKey) {
-      queryParams['key'] = apiKey;
-    }
-    if (clientId) {
-      queryParams['client'] = clientId;
-    }
-    if (channel) {
-      queryParams['channel'] = channel;
-    }
-    if (libraries != null && libraries.length > 0) {
-      queryParams['libraries'] = libraries.join(',');
-    }
-    if (region != null && region.length > 0) {
-      queryParams['region'] = region;
-    }
-    if (language != null && language.length > 0) {
-      queryParams['language'] = language;
-    }
-    const params: string = Object.keys(queryParams)
-                               .map((k: string, i: number) => {
-                                 let param = (i === 0) ? '?' : '&';
-                                 return param += `${k}=${queryParams[k]}`;
-                               })
-                               .join('');
-    return `${protocol}//${hostAndPath}${params}`;
+    const params: string =
+        Object.keys(queryParams)
+            .filter((k: string) => queryParams[k] != null)
+            .filter((k: string) => {
+              // remove empty arrays
+              return !Array.isArray(queryParams[k]) ||
+                  (Array.isArray(queryParams[k]) && queryParams[k].length > 0);
+            })
+            .map((k: string) => {
+              // join arrays as comma seperated strings
+              let i = queryParams[k];
+              if (Array.isArray(i)) {
+                return {key: k, value: i.join(',')};
+              }
+              return {key: k, value: queryParams[k]};
+            })
+            .map((entry: {key: string, value: string}) => { return `${entry.key}=${entry.value}`; })
+            .join('&');
+    return `${protocol}//${hostAndPath}?${params}`;
   }
 }
+
+/**
+ * Creates a provider for a {@link LazyMapsAPILoaderConfig})
+ */
+export function provideLazyMapsAPILoaderConfig(confLiteral: LazyMapsAPILoaderConfigLiteral):
+    Provider {
+  return provide(LazyMapsAPILoaderConfig, {
+    useFactory: () => {
+      const config = new LazyMapsAPILoaderConfig();
+      // todo(sebastian): deprecate LazyMapsAPILoader class
+      config.apiKey = confLiteral.apiKey || DEFAULT_CONFIGURATION.apiKey;
+      config.apiVersion = confLiteral.apiVersion || DEFAULT_CONFIGURATION.apiVersion;
+      config.channel = confLiteral.channel || DEFAULT_CONFIGURATION.channel;
+      config.clientId = confLiteral.clientId || DEFAULT_CONFIGURATION.clientId;
+      config.hostAndPath = confLiteral.hostAndPath || DEFAULT_CONFIGURATION.hostAndPath;
+      config.language = confLiteral.language || DEFAULT_CONFIGURATION.language;
+      config.libraries = confLiteral.libraries || DEFAULT_CONFIGURATION.libraries;
+      config.protocol = config.protocol || DEFAULT_CONFIGURATION.protocol;
+      config.region = config.region || DEFAULT_CONFIGURATION.region;
+      return config;
+    }
+  });
+}
diff --git a/src/core/utils/browser-globals.ts b/src/core/utils/browser-globals.ts
new file mode 100644
index 000000000..611cc0f65
--- /dev/null
+++ b/src/core/utils/browser-globals.ts
@@ -0,0 +1,4 @@
+import {Provider, provide} from '@angular/core';
+
+export const BROWSER_GLOBALS_PROVIDERS: Provider[] =
+    [provide(Window, {useValue: window}), provide(Document, {useValue: document})];
diff --git a/test/services/maps-api-loader/lazy-maps-api-loader.spec.ts b/test/services/maps-api-loader/lazy-maps-api-loader.spec.ts
new file mode 100644
index 000000000..609372ce7
--- /dev/null
+++ b/test/services/maps-api-loader/lazy-maps-api-loader.spec.ts
@@ -0,0 +1,41 @@
+import {provide} from '@angular/core';
+import {beforeEachProviders, describe, expect, inject, it} from '@angular/core/testing';
+
+import {LazyMapsAPILoader} from '../../../src/core/services/maps-api-loader/lazy-maps-api-loader';
+import {MapsAPILoader} from '../../../src/core/services/maps-api-loader/maps-api-loader';
+
+export function main() {
+  describe('Service: LazyMapsAPILoader', () => {
+    beforeEachProviders(() => {
+      return [
+        provide(MapsAPILoader, {useClass: LazyMapsAPILoader}), provide(Window, {useValue: {}}),
+        provide(
+            Document, {useValue: jasmine.createSpyObj<Document>('Document', ['createElement'])})
+      ];
+    });
+
+    it('should create the default script URL',
+       inject([MapsAPILoader, Document, Window], (loader: LazyMapsAPILoader, doc: Document) => {
+         interface Script {
+           src?: string;
+           async?: boolean;
+           defer?: boolean;
+           type?: string;
+         }
+         const scriptElem: Script = {};
+         (<jasmine.Spy>doc.createElement).and.returnValue(scriptElem);
+         doc.body = jasmine.createSpyObj('body', ['appendChild']);
+
+         loader.load();
+         expect(doc.createElement).toHaveBeenCalled();
+         expect(scriptElem.type).toEqual('text/javascript');
+         expect(scriptElem.async).toEqual(true);
+         expect(scriptElem.defer).toEqual(true);
+         expect(scriptElem.src).toBeDefined();
+         expect(scriptElem.src).toContain('https://maps.googleapis.com/maps/api/js');
+         expect(scriptElem.src).toContain('v=3');
+         expect(scriptElem.src).toContain('callback=angular2GoogleMapsLazyMapsAPILoader');
+         expect(doc.body.appendChild).toHaveBeenCalledWith(scriptElem);
+       }));
+  });
+}