Add reset method to core service which checks for associated component and if found removes it from internal list, removes component, and removes iframe.

src/core.ts

@@ -12,7 +12,7 @@ export interface IPowerBiConfiguration {
     onError?: (error: any) => any;
 }
 
-export default class PowerBi {
+export class PowerBi {
     /**
      * List of components this service can embed.
      */
@@ -157,10 +157,24 @@ export default class PowerBi {
     }
 
     /**
-     * Remove component from the list of embedded components.
+     * Given an html element which has component embedded within it, remove the component from list of embeds, remove association with component, and remove the iframe.
      */
-    remove(component: Embed): void {
-        Utils.remove(x => x === component, this.embeds);
+    reset(element: HTMLElement) {
+        const powerBiElement = <IPowerBiElement>element;
+
+        if (!powerBiElement.powerBiEmbed) {
+            throw new Error(`You attempted to get an instance of powerbi component associated with element: ${element.outerHTML} but there was no associated instance.`);
+        }
+
+        /** Remove component from internal list */
+        Utils.remove(x => x === powerBiElement.powerBiEmbed, this.embeds);
+        /** Delete property from html element */
+        delete powerBiElement.powerBiEmbed;
+        /** Remove iframe from element */
+        const iframe = element.querySelector('iframe');
+        if(iframe) {
+            iframe.remove();
+        }
     }
 
     /**
@@ -194,4 +208,4 @@ export default class PowerBi {
     }
 }
 
-
+export default PowerBi;

test/core.spec.ts

@@ -1,6 +1,6 @@
-import PowerBi from '../src/core';
+import * as pbi from '../src/core';
 
-declare var powerbi: PowerBi;
+declare var powerbi: pbi.PowerBi;
 
 describe('powerbi', function () {
     beforeAll(function () {
@@ -238,6 +238,56 @@ describe('powerbi', function () {
         });
     });
 
+    describe('reset', function () {
+        it('throws an error if the element being reset does not have embedded component associated with it', function () {
+            // Arrange
+            const $element = $('<div></div>');
+
+            // Act
+            const attemptToReset = () => {
+                powerbi.reset($element.get(0));
+            };
+
+            // Assert
+            expect(attemptToReset).toThrowError();
+        });
+
+        it('deletes the powerBiEmbed property on the element', function () {
+            // Arrange
+            const $element = $('<div></div>');
+            powerbi.embed($element.get(0), {
+                type: 'report',
+                embedUrl: 'fakeUrl',
+                accessToken: 'fakeToken'
+            });
+
+            // Act
+            expect((<pbi.IPowerBiElement>$element.get(0)).powerBiEmbed).toBeDefined();
+            powerbi.reset($element.get(0));
+
+            // Assert
+            expect((<pbi.IPowerBiElement>$element.get(0)).powerBiEmbed).toBeUndefined();
+        });
+
+        it('clears the innerHTML of the element', function () {
+            // Arrange
+            const $element = $('<div></div>');
+            powerbi.embed($element.get(0), {
+                type: 'report',
+                embedUrl: 'fakeUrl',
+                accessToken: 'fakeToken'
+            });
+
+            // Act
+            var iframe = $element.find('iframe');
+            expect(iframe.length).toEqual(1);
+            powerbi.reset($element.get(0));
+
+            // Assert
+            expect($element.html()).toEqual('');
+        });
+    });
+
     // TODO: Either find a way to fix the test or remove it.
     // 1. onReceiveMessage is private so it's not supposed to be accessable for testing
     // 2. the window.addEventListener('message', this.onReceiveMessage.bind(this)) prevents the method from being spied on.