Merged PR 88804: Removed html element comparison based on id

HTML elements are now compared by their JS object instance **instead of** their id.
Issue with comparing elements by their id: HTML elements with no id attribute will be compared as equal since id is empty string when id attribute's value is not defined.

**How to repro this bug:**
1. Create 2 div elements without id attribute `<div></div>  <div/></div>`
2. Get JS reference for them using `let divs = document.querySelectorAll('div');`
Note that, `id` of both div elements is same, i.e. `divs[0].id` is "" (empty string) and `divs[1].id` is also "" (empty string)
3. Embed 2 powerbi entities, E.g.:
```javascript
let report = powerbi.embed(divs[0], reportConfig);
report.on('loaded', () => {console.log('report loaded')});

let dashboard = powerbi.embed(divs[1], dashboardConfig);
dashboard.on('loaded', () => {console.log('dashboard loaded')});
```
4. Check console, only 'dashboard loaded' string should be logged

Author: anant-k-singh

dist/powerbi-client.d.ts

@@ -1711,6 +1711,13 @@ declare module "service" {
          * @returns {(Report | Tile)}
          */
         find(uniqueId: string): embed.Embed;
+        /**
+         * Removes embed components whose container element is same as the given element
+         *
+         * @param {Embed} component
+         * @param {HTMLElement} element
+         * @returns {void}
+         */
         addOrOverwriteEmbed(component: embed.Embed, element: HTMLElement): void;
         /**
          * Given an HTML element that has a component embedded within it, removes the component from the list of embedded components, removes the association between the element and the component, and removes the iframe.

dist/powerbi.js

@@ -453,10 +453,17 @@ export class Service implements IService {
     return utils.find(x => x.config.uniqueId === uniqueId, this.embeds);
   }
 
+  /**
+   * Removes embed components whose container element is same as the given element
+   * 
+   * @param {Embed} component 
+   * @param {HTMLElement} element
+   * @returns {void}
+   */
   addOrOverwriteEmbed(component: embed.Embed, element: HTMLElement): void {
     // remove embeds over the same div element.
     this.embeds = this.embeds.filter(function(embed) {
-      return embed.element.id !== element.id;
+      return embed.element !== element;
     });
 
     this.embeds.push(component);

dist/powerbi.min.js

@@ -97,6 +97,46 @@ describe('service', function () {
       const iframes = document.querySelectorAll('[powerbi-embed-url] iframe');
       expect(iframes.length).toEqual(2);
     });
+
+    it('embeds all components found in the DOM without id attribute', function () {
+      // Arrange
+      const elements = [
+        '<div powerbi-embed-url="https://embedded.powerbi.com/appTokenReportEmbed?reportId=ABC123" powerbi-type="report"></div>',
+        '<div powerbi-embed-url="https://embedded.powerbi.com/appTokenReportEmbed?reportId=XYZ456" powerbi-type="report"></div>',
+      ];
+
+      elements.forEach(element => {
+        $(element).appendTo('#powerbi-fixture');
+      });
+
+      // Act
+      powerbi.init();
+
+      // Assert
+      // If embed element has iframe inside it, assume embed action occurred
+      const iframes = document.querySelectorAll('[powerbi-embed-url] iframe');
+      expect(iframes.length).toEqual(2);
+    });
+
+    it('embeds all components found in the DOM with duplicate id attribute', function () {
+      // Arrange
+      const elements = [
+        '<div id="reportContainer1" powerbi-embed-url="https://embedded.powerbi.com/appTokenReportEmbed?reportId=ABC123" powerbi-type="report"></div>',
+        '<div id="reportContainer1" powerbi-embed-url="https://embedded.powerbi.com/appTokenReportEmbed?reportId=XYZ456" powerbi-type="report"></div>',
+      ];
+
+      elements.forEach(element => {
+        $(element).appendTo('#powerbi-fixture');
+      });
+
+      // Act
+      powerbi.init();
+
+      // Assert
+      // If embed element has iframe inside it, assume embed action occurred
+      const iframes = document.querySelectorAll('[powerbi-embed-url] iframe');
+      expect(iframes.length).toEqual(2);
+    });
   });
 
   describe('get', function () {