Refactor to use single instance of HPM in service instead of instance for each embed. This means calls to hpm can be provided target window

Matt Mazzola · Matt Mazzola · commit e609a397e61a · 2016-07-05T10:48:10.000-07:00
diff --git a/src/embed.ts b/src/embed.ts
@@ -55,7 +55,6 @@ export abstract class Embed {
 
     allowedEvents = [];
     eventHandlers: IInternalEventHandler<any>[];
-    hpm: hpm.HttpPostMessage;
     service: service.Service;
     element: HTMLElement;
     iframe: HTMLIFrameElement;
@@ -65,7 +64,7 @@ export abstract class Embed {
      * Note: there is circular reference between embeds and service
      * The service has list of all embeds on the host page, and each embed has reference to the service that created it.
      */
-    constructor(service: service.Service, hpmFactory: service.IHpmFactory, element: HTMLElement, config: IEmbedConfiguration) {
+    constructor(service: service.Service, element: HTMLElement, config: IEmbedConfiguration) {
         Array.prototype.push.apply(this.allowedEvents, Embed.allowedEvents);
         this.eventHandlers = [];
         this.service = service;
@@ -84,8 +83,6 @@ export abstract class Embed {
         this.element.innerHTML = iframeHtml;
         this.iframe = <HTMLIFrameElement>this.element.childNodes[0];
         this.iframe.addEventListener('load', () => this.load(this.config), false);
-
-        this.hpm = hpmFactory(this.iframe.contentWindow, this.service.wpmp);
     }
 
     /**
@@ -111,7 +108,7 @@ export abstract class Embed {
             throw errors;
         }
 
-        return this.hpm.post<void>('/report/load', config, { uid: this.config.uniqueId })
+        return this.service.hpm.post<void>('/report/load', config, { uid: this.config.uniqueId }, this.iframe.contentWindow)
             .catch(response => {
                 throw response.body;
             });
diff --git a/src/factories.ts b/src/factories.ts
@@ -15,12 +15,12 @@ export {
 /**
  * TODO: Need to get sdk version and settings from package.json, Generate config file via gulp task?
  */
-export const hpmFactory: IHpmFactory = (targetWindow, wpmp, sdkVersion = '2.0.0', sdkType = 'js', origin = 'sdk') => {
-    return new hpm.HttpPostMessage(targetWindow, wpmp, {
+export const hpmFactory: IHpmFactory = (wpmp, defaultTargetWindow, sdkVersion = '2.0.0', sdkType = 'js', origin = 'sdk') => {
+    return new hpm.HttpPostMessage(wpmp, {
         'origin': origin,
         'x-sdk-type': sdkType,
         'x-sdk-version': sdkVersion
-    });
+    }, defaultTargetWindow);
 };
 
 export const wpmpFactory: IWpmpFactory = (name?: string, logMessages?: boolean, eventSourceOverrideWindow?: Window) => {
diff --git a/src/report.ts b/src/report.ts
@@ -9,8 +9,8 @@ export class Report extends embed.Embed {
     static reportIdAttribute = 'powerbi-report-id';
     static type = "Report";
 
-    constructor(service: service.Service, hpmFactory: service.IHpmFactory, element: HTMLElement, config: embed.IEmbedConfiguration) {
-        super(service, hpmFactory, element, config);
+    constructor(service: service.Service, element: HTMLElement, config: embed.IEmbedConfiguration) {
+        super(service, element, config);
         Array.prototype.push.apply(this.allowedEvents, Report.allowedEvents);
     }
 
@@ -49,7 +49,7 @@ export class Report extends embed.Embed {
      */
     addFilter(filter: models.IFilter, target?: models.IPageTarget | models.IVisualTarget): Promise<void> {
         const targetUrl = this.getTargetUrl(target);
-        return this.hpm.post<void>(`${targetUrl}/filters`, filter, { uid: this.config.uniqueId })
+        return this.service.hpm.post<void>(`${targetUrl}/filters`, filter, { uid: this.config.uniqueId }, this.iframe.contentWindow)
             .catch(response => {
                 throw response.body;
             });
@@ -79,7 +79,7 @@ export class Report extends embed.Embed {
      */
     getFilters(target?: models.IPageTarget | models.IVisualTarget): Promise<models.IFilter[]> {
         const targetUrl = this.getTargetUrl(target);
-        return this.hpm.get<models.IFilter[]>(`${targetUrl}/filters`, { uid: this.config.uniqueId })
+        return this.service.hpm.get<models.IFilter[]>(`${targetUrl}/filters`, { uid: this.config.uniqueId }, this.iframe.contentWindow)
             .then(response => response.body,
                 response => {
                     throw response.body;
@@ -110,7 +110,7 @@ export class Report extends embed.Embed {
      * ```
      */
     getPages(): Promise<models.IPage[]> {
-        return this.hpm.get<models.IPage[]>('/report/pages', { uid: this.config.uniqueId })
+        return this.service.hpm.get<models.IPage[]>('/report/pages', { uid: this.config.uniqueId }, this.iframe.contentWindow)
             .then(response => response.body,
                 response => {
                     throw response.body;
@@ -131,7 +131,7 @@ export class Report extends embed.Embed {
             displayName: null
         };
 
-        return this.hpm.put<models.IError[]>('/report/pages/active', page, { uid: this.config.uniqueId })
+        return this.service.hpm.put<models.IError[]>('/report/pages/active', page, { uid: this.config.uniqueId }, this.iframe.contentWindow)
             .catch(response => {
                 throw response.body;
             });
@@ -149,7 +149,7 @@ export class Report extends embed.Embed {
      */
     removeFilter(filter: models.IFilter, target?: models.IPageTarget | models.IVisualTarget): Promise<void> {
         const targetUrl = this.getTargetUrl(target);
-        return this.hpm.delete<models.IError[]>(`${targetUrl}/filters`, filter, { uid: this.config.uniqueId })
+        return this.service.hpm.delete<models.IError[]>(`${targetUrl}/filters`, filter, { uid: this.config.uniqueId }, this.iframe.contentWindow)
             .catch(response => {
                 throw response.body;
             });
@@ -163,7 +163,7 @@ export class Report extends embed.Embed {
      * ```
      */
     removeAllFilters(): Promise<void> {
-        return this.hpm.delete<models.IError[]>('/report/allfilters', null, { uid: this.config.uniqueId })
+        return this.service.hpm.delete<models.IError[]>('/report/allfilters', null, { uid: this.config.uniqueId }, this.iframe.contentWindow)
             .catch(response => {
                 throw response.body;
             });
@@ -186,7 +186,7 @@ export class Report extends embed.Embed {
      */
     updateFilter(filter: models.IFilter, target?: models.IPageTarget | models.IVisualTarget): Promise<void> {
         const targetUrl = this.getTargetUrl(target);
-        return this.hpm.put<models.IError[]>(`${targetUrl}/filters`, filter, { uid: this.config.uniqueId })
+        return this.service.hpm.put<models.IError[]>(`${targetUrl}/filters`, filter, { uid: this.config.uniqueId }, this.iframe.contentWindow)
             .catch(response => {
                 throw response.body;
             });
@@ -206,7 +206,7 @@ export class Report extends embed.Embed {
      * ```
      */
     updateSettings(settings: models.ISettings): Promise<void> {
-        return this.hpm.patch<models.IError[]>('/report/settings', settings, { uid: this.config.uniqueId })
+        return this.service.hpm.patch<models.IError[]>('/report/settings', settings, { uid: this.config.uniqueId }, this.iframe.contentWindow)
             .catch(response => {
                 throw response.body;
             });
diff --git a/src/service.ts b/src/service.ts
@@ -19,7 +19,7 @@ export interface IEventHandler<T> {
 }
 
 export interface IHpmFactory {
-    (targetWindow: Window, wpmp: wpmp.WindowPostMessageProxy, version?: string, type?: string, origin?: string): hpm.HttpPostMessage;
+    (wpmp: wpmp.WindowPostMessageProxy, targetWindow?: Window, version?: string, type?: string, origin?: string): hpm.HttpPostMessage;
 }
 
 export interface IWpmpFactory {
@@ -42,6 +42,8 @@ export interface IDebugOptions {
 export interface IServiceConfiguration extends IDebugOptions {
     autoEmbedOnContentLoaded?: boolean;
     onError?: (error: any) => any;
+    version?: string;
+    type?: string;
 }
 
 export class Service {
@@ -70,14 +72,14 @@ export class Service {
     
     /** List of components (Reports/Tiles) that have been embedded using this service instance. */
     private embeds: embed.Embed[];
-    private hpmFactory: IHpmFactory;
-    /** TODO: Look for way to make this private. This should be private but in embed constructor needs to pass the wpmp instance to the hpm factory. */
+    /** TODO: Look for way to make this private without sacraficing ease of maitenance. This should be private but in embed needs to call methods. */
+    public hpm: hpm.HttpPostMessage;
     public wpmp: wpmp.WindowPostMessageProxy;
     private router: router.Router;
 
     constructor(hpmFactory: IHpmFactory, wpmpFactory: IWpmpFactory, routerFactory: IRouterFactory, config: IServiceConfiguration = {}) {
-        this.hpmFactory = hpmFactory;
         this.wpmp = wpmpFactory(config.wpmpName, config.logMessages);
+        this.hpm = hpmFactory(this.wpmp, null, config.version, config.type);
         this.router = routerFactory(this.wpmp);
 
         /**
@@ -174,7 +176,7 @@ export class Service {
             throw new Error(`Attempted to embed component of type: ${componentType} but did not find any matching component.  Please verify the type you specified is intended.`);
         }
 
-        const component = new Component(this, this.hpmFactory, element, config);
+        const component = new Component(this, element, config);
         element.powerBiEmbed = component;
         this.embeds.push(component);
         
diff --git a/test/test.spec.ts b/test/test.spec.ts
diff --git a/test/utility/mockReportEmbed.ts b/test/utility/mockReportEmbed.ts
