@thoughtspot/visual-embed-sdk 1.24.0-preRender.4 → 1.24.0-preRender.6

package/src/embed/ts-embed.spec.ts

@@ -26,6 +26,7 @@ import {
     defaultParamsForPinboardEmbed,
     waitFor,
     expectUrlMatchesWithParams,
+    mockMessageChannel,
 } from '../test/test-utils';
 import * as config from '../config';
 import * as tsEmbedInstance from './ts-embed';
@@ -1321,7 +1322,9 @@ describe('Unit test case for ts embed', () => {
             });
 
             // show preRender
+            const warnSpy = spyOn(console, 'warn');
             libEmbed.showPreRender();
+            expect(warnSpy).toHaveBeenCalledTimes(0);
 
             resizeObserverCb([{
                 target: tsEmbedDiv,
@@ -1384,5 +1387,34 @@ describe('Unit test case for ts embed', () => {
             libEmbed.hidePreRender();
             expect(libEmbed.preRender).toHaveBeenCalledTimes(0);
         });
+
+        it('it should connect with another object', async () => {
+            createRootEleForEmbed();
+            mockMessageChannel();
+            (window as any).ResizeObserver = window.ResizeObserver
+            || jest.fn().mockImplementation(() => ({
+                disconnect: jest.fn(),
+                observe: jest.fn(),
+                unobserve: jest.fn(),
+            }));
+            const libEmbed = new LiveboardEmbed('#tsEmbedDiv', {
+                preRenderId: 'i-am-preRendered',
+                liveboardId: 'myLiveboardId',
+            });
+
+            libEmbed.preRender();
+            await waitFor(() => !!getIFrameEl());
+            const warnSpy = jest.spyOn(console, 'warn');
+            const newEmbed = new LiveboardEmbed('#tsEmbedDiv', {
+                preRenderId: 'i-am-preRendered',
+                liveboardId: 'awdawda',
+                hiddenActions: [Action.AddFilter],
+                frameParams: { height: 90 },
+            });
+
+            newEmbed.showPreRender();
+
+            expect(warnSpy).toHaveBeenCalledTimes(2);
+        });
     });
 });

package/src/embed/ts-embed.ts

@@ -7,6 +7,7 @@
  * @author Ayon Ghosh <ayon.ghosh@thoughtspot.com>
  */
 
+import _ from 'lodash';
 import {
     getEncodedQueryParamsString,
     getCssDimension,
@@ -98,7 +99,7 @@ export class TsEmbed {
     /**
      * The key to store the embed instance in the DOM node
      */
-    protected embedNodeKey = '__tsEmbed'
+    protected embedNodeKey = '__tsEmbed';
 
     protected isAppInitialized = false;
 
@@ -1062,6 +1063,37 @@ export class TsEmbed {
         // Override in subclass
     }
 
+    private validatePreRenderViewConfig = (viewConfig: ViewConfig) => {
+        const preRenderAllowedKeys = [
+            'preRenderId',
+            'vizId',
+            'liveboardId',
+        ];
+        const preRenderedObject = this.insertedDomEl?.[this.embedNodeKey] as TsEmbed;
+        if (!preRenderedObject) return;
+        if (viewConfig.preRenderId) {
+            const allOtherKeys = Object.keys(viewConfig).filter(
+                (key) => !preRenderAllowedKeys.includes(key) && !key.startsWith('on'),
+            );
+
+            allOtherKeys.forEach((key) => {
+                if (
+                    !_.isUndefined(viewConfig[key])
+                    && !_.isEqual(viewConfig[key], preRenderedObject.viewConfig[key])
+                ) {
+                    console.warn(
+                        `${this.embedComponentType} was pre-rendered with `
+                        + `"${key}" as "${JSON.stringify(preRenderedObject.viewConfig[key])}" `
+                        + `but a different value "${JSON.stringify(viewConfig[key])}" `
+                        + 'was passed to the Embed component. '
+                        + 'The new value provided is ignored, the value provided during '
+                        + 'preRender is used.',
+                    );
+                }
+            });
+        }
+    };
+
     /**
      * Displays the PreRender component.
      * If the component is not preRendered, it attempts to create and render it.
@@ -1071,11 +1103,13 @@ export class TsEmbed {
     public showPreRender(): void {
         if (!this.isPreRenderAvailable()) {
             const isAvailable = this.connectPreRendered();
+
             if (!isAvailable) {
                 // if the Embed component is not preRendered , Render it now and
                 this.preRender(true);
                 return;
             }
+            this.validatePreRenderViewConfig(this.viewConfig);
         }
 
         if (this.el) {

package/src/utils.spec.ts

@@ -179,7 +179,6 @@ describe('unit test for utils', () => {
         it('should remove specified style properties from an HTML element', () => {
             const element = document.createElement('div');
 
-            // Set initial styles for testing
             element.style.backgroundColor = 'blue';
             element.style.fontSize = '14px';
 
@@ -187,8 +186,8 @@ describe('unit test for utils', () => {
 
             removeStyleProperties(element, propertiesToRemove);
 
-            expect(element.style.backgroundColor).toBe(''); // Check that the property is removed
-            expect(element.style.fontSize).toBe(''); // Check that the property is removed
+            expect(element.style.backgroundColor).toBe('');
+            expect(element.style.fontSize).toBe('');
         });
 
         it('should handle undefined param', () => {
@@ -200,18 +199,15 @@ describe('unit test for utils', () => {
         it('should handle removing non-existent style properties', () => {
             const element = document.createElement('div');
 
-            // Set initial styles for testing
             element.style.backgroundColor = 'blue';
             element.style.fontSize = '14px';
 
             const propertiesToRemove = ['color', 'border'];
 
-            // Removing non-existent properties should not throw an error and
-            // should not change existing styles
             removeStyleProperties(element, propertiesToRemove);
 
-            expect(element.style.backgroundColor).toBe('blue'); // Style should remain unchanged
-            expect(element.style.fontSize).toBe('14px'); // Style should remain unchanged
+            expect(element.style.backgroundColor).toBe('blue');
+            expect(element.style.fontSize).toBe('14px');
         });
     });