@thoughtspot/visual-embed-sdk 1.51.0 → 1.51.2

package/src/embed/liveboard.spec.ts

@@ -28,6 +28,7 @@ import * as auth from '../auth';
 import * as previewService from '../utils/graphql/preview-service';
 import * as SessionInfoService from '../utils/sessionInfoService';
 import { logger } from '../utils/logger';
+import { DEFAULT_LAZY_LOADING_MARGIN } from '../config';
 
 const defaultViewConfig = {
     frameParams: {
@@ -156,6 +157,23 @@ describe('Liveboard/viz embed tests', () => {
         });
     });
 
+    test('should hide and disable the Spotter button on the Liveboard header', async () => {
+        expect(Action.SpotterOnLiveboard).toBe('spotterOnLiveboard');
+        const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
+            hiddenActions: [Action.SpotterOnLiveboard],
+            disabledActions: [Action.SpotterOnLiveboard],
+            ...defaultViewConfig,
+            liveboardId,
+        } as LiveboardViewConfig);
+        liveboardEmbed.render();
+        await executeAfterWait(() => {
+            expectUrlToHaveParamsWithValues(getIFrameSrc(), {
+                hideAction: JSON.stringify([Action.ReportError, Action.SpotterOnLiveboard]),
+                disableAction: JSON.stringify([Action.SpotterOnLiveboard]),
+            });
+        });
+    });
+
     test('should set visible actions', async () => {
         const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
             visibleActions: [Action.DownloadAsCsv, Action.DownloadAsPdf, Action.DownloadAsXlsx],
@@ -200,6 +218,21 @@ describe('Liveboard/viz embed tests', () => {
         });
     });
 
+    test('should set isLiveboardAlwaysOn12ColLayout to true in url', async () => {
+        const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
+            isLiveboardAlwaysOn12ColLayout: true,
+            ...defaultViewConfig,
+            liveboardId,
+        } as LiveboardViewConfig);
+        liveboardEmbed.render();
+        await executeAfterWait(() => {
+            expectUrlMatchesWithParams(
+                getIFrameSrc(),
+                `http://${thoughtSpotHost}/?embedApp=true${defaultParams}&isLiveboardAlwaysOn12ColLayout=true${prefixParams}#/embed/viz/${liveboardId}`,
+            );
+        });
+    });
+
     test('should set isLiveboardStylingAndGroupingEnabled to true in url (deprecated, use isLiveboardMasterpiecesEnabled)', async () => {
         const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
             isLiveboardStylingAndGroupingEnabled: true,
@@ -215,6 +248,36 @@ describe('Liveboard/viz embed tests', () => {
         });
     });
 
+    test('should set liveboardGutter in url', async () => {
+        const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
+            ...defaultViewConfig,
+            liveboardId,
+            liveboardGutter: 8,
+        } as LiveboardViewConfig);
+        liveboardEmbed.render();
+        await executeAfterWait(() => {
+            expectUrlMatchesWithParams(
+                getIFrameSrc(),
+                `http://${thoughtSpotHost}/?embedApp=true${defaultParams}&liveboardGutter=8${prefixParams}#/embed/viz/${liveboardId}`,
+            );
+        });
+    });
+
+    test('should set liveboardGutter to 0 in url', async () => {
+        const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
+            ...defaultViewConfig,
+            liveboardId,
+            liveboardGutter: 0,
+        } as LiveboardViewConfig);
+        liveboardEmbed.render();
+        await executeAfterWait(() => {
+            expectUrlMatchesWithParams(
+                getIFrameSrc(),
+                `http://${thoughtSpotHost}/?embedApp=true${defaultParams}&liveboardGutter=0${prefixParams}#/embed/viz/${liveboardId}`,
+            );
+        });
+    });
+
     test('should set isThisPeriodInDateFiltersEnabled to true in url', async () => {
         const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
             ...defaultViewConfig,
@@ -1271,6 +1334,44 @@ describe('Liveboard/viz embed tests', () => {
             expect(onSpy).toHaveBeenCalledWith(HostEvent.Navigate, 'embed/viz/lb1/viz1');
         }, 1002);
     });
+
+    test('navigateToLiveboard should call preRender when preRenderConfig.preRenderId is set', () => {
+        const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
+            ...defaultViewConfig,
+            liveboardId,
+            preRenderConfig: {
+                preRenderId: 'config-pre-render-id',
+            },
+        } as LiveboardViewConfig);
+
+        const preRenderSpy = jest
+            .spyOn(liveboardEmbed, 'preRender')
+            .mockResolvedValue(liveboardEmbed);
+        liveboardEmbed.navigateToLiveboard('lb1');
+
+        expect(preRenderSpy).toHaveBeenCalledTimes(1);
+        expect(preRenderSpy).toHaveBeenCalledWith(true);
+    });
+
+    test('navigateToLiveboard should prefer preRenderConfig.preRenderId over top-level preRenderId', () => {
+        const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
+            ...defaultViewConfig,
+            liveboardId,
+            preRenderId: 'top-level-id',
+            preRenderConfig: {
+                preRenderId: 'config-level-id',
+            },
+        } as LiveboardViewConfig);
+
+        const preRenderSpy = jest
+            .spyOn(liveboardEmbed, 'preRender')
+            .mockResolvedValue(liveboardEmbed);
+        liveboardEmbed.navigateToLiveboard('lb1');
+
+        expect(preRenderSpy).toHaveBeenCalledTimes(1);
+        expect(preRenderSpy).toHaveBeenCalledWith(true);
+    });
+
     test('should set runtime parametere values in url params', async () => {
         const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
             ...defaultViewConfig,
@@ -1337,6 +1438,46 @@ describe('Liveboard/viz embed tests', () => {
         });
     });
 
+    test('should set openSpotterOnLiveboardByDefault parameter in url params', async () => {
+        const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
+            ...defaultViewConfig,
+            liveboardId,
+            spotterChatConfig: { openSpotterOnLiveboardByDefault: true },
+        } as LiveboardViewConfig);
+        await liveboardEmbed.render();
+        await executeAfterWait(() => {
+            expectUrlToHaveParamsWithValues(getIFrameSrc(), {
+                openSpotterOnLiveboardByDefault: 'true',
+            });
+        });
+    });
+
+    test('should set openSpotterOnLiveboardByDefault to false when explicitly disabled', async () => {
+        const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
+            ...defaultViewConfig,
+            liveboardId,
+            spotterChatConfig: { openSpotterOnLiveboardByDefault: false },
+        } as LiveboardViewConfig);
+        await liveboardEmbed.render();
+        await executeAfterWait(() => {
+            expectUrlToHaveParamsWithValues(getIFrameSrc(), {
+                openSpotterOnLiveboardByDefault: 'false',
+            });
+        });
+    });
+
+    test('should not set openSpotterOnLiveboardByDefault when it is not configured', async () => {
+        const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
+            ...defaultViewConfig,
+            liveboardId,
+            spotterChatConfig: { enableStarterPrompts: true },
+        } as LiveboardViewConfig);
+        await liveboardEmbed.render();
+        await executeAfterWait(() => {
+            expect(getIFrameSrc()).not.toContain('openSpotterOnLiveboardByDefault');
+        });
+    });
+
     test('should set spotterFileUploadFileTypes parameter in url params', async () => {
         const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
             ...defaultViewConfig,
@@ -1480,6 +1621,37 @@ describe('Liveboard/viz embed tests', () => {
         });
     });
 
+    test('should include starterPrompts in APP_INIT embedParams', async () => {
+        const starterPrompts = {
+            enable: true,
+            quick: {
+                label: 'Quick',
+                questions: [
+                    { label: 'Q1', prompt: 'P1' },
+                    { label: 'Q2', prompt: 'P2' },
+                ],
+            },
+            research: { label: 'Research' },
+        };
+        const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
+            ...defaultViewConfig,
+            liveboardId,
+            spotterChatConfig: { starterPrompts },
+        } as LiveboardViewConfig);
+
+        mockMessageChannel();
+        await liveboardEmbed.render();
+
+        const mockPort: any = { postMessage: jest.fn() };
+        await executeAfterWait(() => {
+            postMessageToParent(getIFrameEl().contentWindow, { type: EmbedEvent.APP_INIT, data: {} }, mockPort);
+        });
+        await executeAfterWait(() => {
+            expect(mockPort.postMessage.mock.calls[0][0].data.embedParams.starterPrompts)
+                .toEqual(starterPrompts);
+        });
+    });
+
     test('should pass brandHeadline through spotterVizConfig in APP_INIT', async () => {
         const spotterViz = { brandName: 'MyBrand', brandHeadline: "Hi, there! I'm" };
         const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
@@ -1880,6 +2052,255 @@ describe('Liveboard/viz embed tests', () => {
             }, 100);
         });
 
+        test('should default lazy loading flags to true when fullHeight is enabled', async () => {
+            const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
+                ...defaultViewConfig,
+                liveboardId,
+                fullHeight: true,
+            } as LiveboardViewConfig);
+
+            expect((liveboardEmbed as any).viewConfig.lazyLoadingForFullHeight).toBe(true);
+            expect(
+                (liveboardEmbed as any).viewConfig.enableScrollableContainerLazyLoading,
+            ).toBe(true);
+            expect((liveboardEmbed as any).viewConfig.lazyLoadingMargin).toBe('500px 0px');
+
+            await liveboardEmbed.render();
+
+            await executeAfterWait(() => {
+                const iframeSrc = getIFrameSrc();
+                expect(iframeSrc).toContain('isLazyLoadingForEmbedEnabled=true');
+                expect(iframeSrc).toContain('isFullHeightPinboard=true');
+                expect(iframeSrc).toContain('rootMarginForLazyLoad=500px%200px');
+            }, 100);
+        });
+
+        test('should not default lazy loading flags when fullHeight is not enabled', async () => {
+            const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
+                ...defaultViewConfig,
+                liveboardId,
+            } as LiveboardViewConfig);
+
+            expect((liveboardEmbed as any).viewConfig.lazyLoadingForFullHeight).toBeUndefined();
+            expect(
+                (liveboardEmbed as any).viewConfig.enableScrollableContainerLazyLoading,
+            ).toBeUndefined();
+            expect((liveboardEmbed as any).viewConfig.lazyLoadingMargin).toBeUndefined();
+        });
+
+        test('should not write the defaults back onto the caller view config', async () => {
+            const callerViewConfig = {
+                ...defaultViewConfig,
+                liveboardId,
+                fullHeight: true,
+            } as LiveboardViewConfig;
+
+            new LiveboardEmbed(getRootEl(), callerViewConfig);
+
+            expect(callerViewConfig.lazyLoadingForFullHeight).toBeUndefined();
+            expect(callerViewConfig.enableScrollableContainerLazyLoading).toBeUndefined();
+            expect(callerViewConfig.lazyLoadingMargin).toBeUndefined();
+        });
+
+        test('should not default lazy loading flags when fullHeight is explicitly false', async () => {
+            const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
+                ...defaultViewConfig,
+                liveboardId,
+                fullHeight: false,
+            } as LiveboardViewConfig);
+
+            expect((liveboardEmbed as any).viewConfig.lazyLoadingForFullHeight).toBeUndefined();
+            expect(
+                (liveboardEmbed as any).viewConfig.enableScrollableContainerLazyLoading,
+            ).toBeUndefined();
+            expect((liveboardEmbed as any).viewConfig.lazyLoadingMargin).toBeUndefined();
+        });
+
+        test('should default lazyLoadingMargin when lazyLoadingForFullHeight is set explicitly', async () => {
+            const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
+                ...defaultViewConfig,
+                liveboardId,
+                fullHeight: true,
+                lazyLoadingForFullHeight: true,
+            } as LiveboardViewConfig);
+
+            expect((liveboardEmbed as any).viewConfig.lazyLoadingMargin).toBe(
+                DEFAULT_LAZY_LOADING_MARGIN,
+            );
+
+            await liveboardEmbed.render();
+
+            await executeAfterWait(() => {
+                expect(getIFrameSrc()).toContain('rootMarginForLazyLoad=500px%200px');
+            }, 100);
+        });
+
+        test('should let an explicit lazyLoadingMargin win over the default', async () => {
+            const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
+                ...defaultViewConfig,
+                liveboardId,
+                fullHeight: true,
+                lazyLoadingMargin: '250px',
+            } as LiveboardViewConfig);
+
+            await liveboardEmbed.render();
+
+            await executeAfterWait(() => {
+                const iframeSrc = getIFrameSrc();
+                expect(iframeSrc).toContain('rootMarginForLazyLoad=250px');
+                expect(iframeSrc).not.toContain('rootMarginForLazyLoad=500px%200px');
+            }, 100);
+        });
+
+        test('should drop an invalid lazyLoadingMargin and log an error', async () => {
+            const loggerErrorSpy = jest.spyOn(logger, 'error').mockImplementation(() => undefined);
+
+            const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
+                ...defaultViewConfig,
+                liveboardId,
+                fullHeight: true,
+                lazyLoadingMargin: 'not-a-margin',
+            } as LiveboardViewConfig);
+
+            await liveboardEmbed.render();
+
+            await executeAfterWait(() => {
+                const iframeSrc = getIFrameSrc();
+                expect(iframeSrc).toContain('isLazyLoadingForEmbedEnabled=true');
+                expect(iframeSrc).not.toContain('rootMarginForLazyLoad');
+                expect(loggerErrorSpy).toHaveBeenCalledWith(
+                    'Please provide a valid lazyLoadingMargin value (e.g., "10px")',
+                );
+            }, 100);
+        });
+
+        test('should track scrollable ancestors by default when only fullHeight is set', async () => {
+            const scrollContainer = getRootEl();
+            scrollContainer.style.overflow = 'auto';
+
+            const scrollContainerSpy = jest.spyOn(scrollContainer, 'addEventListener');
+            const resizeObserveSpy = jest.fn();
+            const resizeDisconnectSpy = jest.fn();
+            const originalResizeObserver = (window as any).ResizeObserver;
+            (window as any).ResizeObserver = jest.fn().mockImplementation(() => ({
+                observe: resizeObserveSpy,
+                disconnect: resizeDisconnectSpy,
+            }));
+
+            const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
+                ...defaultViewConfig,
+                liveboardId,
+                fullHeight: true,
+            } as LiveboardViewConfig);
+
+            await liveboardEmbed.render();
+
+            await executeAfterWait(() => {
+                expect(scrollContainerSpy).toHaveBeenCalledWith('scroll', expect.any(Function));
+                expect(resizeObserveSpy).toHaveBeenCalledWith(scrollContainer);
+            }, 100);
+
+            liveboardEmbed.destroy();
+            expect(resizeDisconnectSpy).toHaveBeenCalled();
+
+            scrollContainer.style.overflow = '';
+            (window as any).ResizeObserver = originalResizeObserver;
+        });
+
+        test('should skip ancestor tracking when enableScrollableContainerLazyLoading is false', async () => {
+            const scrollContainer = getRootEl();
+            scrollContainer.style.overflow = 'auto';
+
+            const scrollContainerSpy = jest.spyOn(scrollContainer, 'addEventListener');
+            const windowSpy = jest.spyOn(window, 'addEventListener');
+
+            const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
+                ...defaultViewConfig,
+                liveboardId,
+                fullHeight: true,
+                enableScrollableContainerLazyLoading: false,
+            } as LiveboardViewConfig);
+
+            await liveboardEmbed.render();
+
+            await executeAfterWait(() => {
+                expect(windowSpy).toHaveBeenCalledWith('scroll', expect.anything(), true);
+                expect(scrollContainerSpy).not.toHaveBeenCalledWith('scroll', expect.any(Function));
+            }, 100);
+
+            liveboardEmbed.destroy();
+            scrollContainer.style.overflow = '';
+        });
+
+        test('should wire the window scroll listener to the coordinates sender by default', async () => {
+            const addEventListenerSpy = jest.spyOn(window, 'addEventListener');
+
+            const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
+                ...defaultViewConfig,
+                liveboardId,
+                fullHeight: true,
+            } as LiveboardViewConfig);
+
+            const mockTrigger = jest
+                .spyOn(liveboardEmbed, 'trigger')
+                .mockImplementation(() => Promise.resolve(undefined as any));
+
+            await liveboardEmbed.render();
+
+            await executeAfterWait(() => {
+                const scrollCall = addEventListenerSpy.mock.calls.find(
+                    ([eventName, , capture]) => eventName === 'scroll' && capture === true,
+                );
+                expect(scrollCall).toBeDefined();
+
+                // Call the handler the way a real scroll event would.
+                (scrollCall as any)[1]();
+
+                expect(mockTrigger).toHaveBeenCalledWith(
+                    HostEvent.VisibleEmbedCoordinates,
+                    expect.objectContaining({ top: expect.any(Number) }),
+                );
+            }, 100);
+
+            liveboardEmbed.destroy();
+            addEventListenerSpy.mockRestore();
+        });
+
+        test('should remove listeners on destroy when the flags come from defaults', async () => {
+            const removeEventListenerSpy = jest.spyOn(window, 'removeEventListener');
+
+            const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
+                ...defaultViewConfig,
+                liveboardId,
+                fullHeight: true,
+            } as LiveboardViewConfig);
+
+            await liveboardEmbed.render();
+            liveboardEmbed.destroy();
+
+            expect(removeEventListenerSpy).toHaveBeenCalledWith('resize', expect.anything());
+            expect(removeEventListenerSpy).toHaveBeenCalledWith('scroll', expect.anything(), true);
+
+            removeEventListenerSpy.mockRestore();
+        });
+
+        test('should keep an explicit false for the lazy loading flags', async () => {
+            const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
+                ...defaultViewConfig,
+                liveboardId,
+                fullHeight: true,
+                lazyLoadingForFullHeight: false,
+                enableScrollableContainerLazyLoading: false,
+                lazyLoadingMargin: '0px',
+            } as LiveboardViewConfig);
+
+            expect((liveboardEmbed as any).viewConfig.lazyLoadingForFullHeight).toBe(false);
+            expect(
+                (liveboardEmbed as any).viewConfig.enableScrollableContainerLazyLoading,
+            ).toBe(false);
+            expect((liveboardEmbed as any).viewConfig.lazyLoadingMargin).toBe('0px');
+        });
+
         test('should not set lazyLoadingForEmbed when lazyLoadingForFullHeight is enabled but fullHeight is false', async () => {
             const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
                 ...defaultViewConfig,
@@ -1959,7 +2380,7 @@ describe('Liveboard/viz embed tests', () => {
             });
         });
 
-        test('should send correct visible data when RequestVisibleEmbedCoordinates is triggered', async () => {
+        test('should send visible data when fullHeight is enabled and lazyLoadingForFullHeight is omitted', async () => {
             const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
                 ...defaultViewConfig,
                 liveboardId,
@@ -1974,7 +2395,7 @@ describe('Liveboard/viz embed tests', () => {
             // Trigger the lazy load data calculation
             (liveboardEmbed as any).sendFullHeightLazyLoadData();
 
-            expect(mockTrigger).not.toHaveBeenCalledWith(HostEvent.VisibleEmbedCoordinates, {
+            expect(mockTrigger).toHaveBeenCalledWith(HostEvent.VisibleEmbedCoordinates, {
                 top: 0,
                 height: 500,
                 left: 0,
@@ -2411,4 +2832,38 @@ describe('LiveboardEmbed updatedSpotterExperience tests', () => {
             );
         });
     });
+
+    describe('trigger typing contracts (compile-time)', () => {
+        // Enforced by ts-jest at compile time. LiveboardEmbed OVERRIDES
+        // TsEmbed.trigger, so its generic defaults must be asserted separately —
+        // a bare `PayloadT` on the override silently collapses no-payload
+        // responses back to `any` for every LiveboardEmbed consumer.
+        type IsAny<T> = 0 extends 1 & T ? true : false;
+        type Extends<A, B> = A extends B ? true : false;
+
+        it('infers typed response for no-payload calls through the LiveboardEmbed override', () => {
+            const embed = new LiveboardEmbed(getRootEl(), {
+                liveboardId: 'test-liveboard-id',
+            } as LiveboardViewConfig);
+
+            const getTabs = () => embed.trigger(HostEvent.GetTabs);
+            type TabsResponse = Awaited<ReturnType<typeof getTabs>>;
+            const tabsIsTyped: IsAny<TabsResponse> = false;
+            const tabsHasContractFields: Extends<
+                TabsResponse,
+                { numberOfTabs: number; orderedTabIds: string[] }
+            > = true;
+            const probeUnknownField = (r: TabsResponse) =>
+                // @ts-expect-error — field not on the GetTabs contract (was silent when `any`)
+                r.tabCount;
+            void probeUnknownField;
+
+            const reload = () => embed.trigger(HostEvent.Reload);
+            type ReloadResponse = Awaited<ReturnType<typeof reload>>;
+            const reloadStaysAny: IsAny<ReloadResponse> = true;
+
+            expect([tabsIsTyped, tabsHasContractFields, reloadStaysAny])
+                .toEqual([false, true, true]);
+        });
+    });
 });