@thoughtspot/visual-embed-sdk 1.52.2-beta → 1.52.2-beta.1

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

@@ -71,6 +71,10 @@ import * as processData from '../utils/processData';
 jest.mock('../utils/processTrigger');
 
 const mockProcessTrigger = processTrigger as jest.Mock;
+
+const flushAnimationFrame = () => new Promise<void>((resolve) => {
+    requestAnimationFrame(() => resolve());
+});
 const mockHandleInterceptEvent = jest.spyOn(apiIntercept, 'handleInterceptEvent');
 const defaultViewConfig = {
     frameParams: {
@@ -2620,12 +2624,14 @@ describe('Unit test case for ts embed', () => {
                     contentRect: { height: 297, width: 987 },
                 },
             ]);
+            // Syncs are coalesced to one per frame.
+            await flushAnimationFrame();
 
             expect(preRenderWrapper.style.height).toEqual(`${297}px`);
             expect(preRenderWrapper.style.width).toEqual(`${987}px`);
 
             expect(preRenderWrapper.style.opacity).toBe('');
-            expect(preRenderWrapper.style.pointerEvents).toBe('');
+            expect(preRenderWrapper.style.pointerEvents).toBe('auto');
             expect(preRenderWrapper.style.zIndex).toBe('');
 
             libEmbed.hidePreRender();
@@ -2662,7 +2668,7 @@ describe('Unit test case for ts embed', () => {
             const preRenderWrapper = document.getElementById(preRenderIds.wrapper);
 
             expect(preRenderWrapper.style.opacity).toBe('');
-            expect(preRenderWrapper.style.pointerEvents).toBe('');
+            expect(preRenderWrapper.style.pointerEvents).toBe('auto');
             expect(preRenderWrapper.style.zIndex).toBe('');
         });
 
@@ -2835,6 +2841,211 @@ describe('Unit test case for ts embed', () => {
             (logger.debug as any).mockRestore();
         });
 
+        describe('position tracking (SCAL-338563)', () => {
+            /**
+             * A host app whose page scrolls in an inner element rather than the
+             * document — the shape both reported cases have. The placeholder's
+             * rect is driven off that element's scrollTop, the way a real
+             * layout would move it.
+             */
+            const mountInNestedScroller = () => {
+                createRootEleForEmbed();
+                const scroller = document.createElement('div');
+                scroller.id = 'inner-scroller';
+                document.body.appendChild(scroller);
+                scroller.appendChild(document.getElementById('tsEmbedDiv'));
+
+                let scrollTop = 0;
+                Object.defineProperty(scroller, 'scrollTop', {
+                    configurable: true,
+                    get: () => scrollTop,
+                    set: (value) => {
+                        scrollTop = value;
+                    },
+                });
+                scroller.getBoundingClientRect = () =>
+                    ({
+                        x: 0, y: 0, width: 800, height: 600,
+                        top: 0, left: 0, bottom: 600, right: 800,
+                    } as DOMRect);
+
+                const placeholderTopAtRest = 400;
+                const readPlaceholderTop = () => placeholderTopAtRest - scroller.scrollTop;
+
+                return { scroller, readPlaceholderTop };
+            };
+
+            const stubPlaceholderRect = (embed: any, readTop: () => number) => {
+                const placeholder = embed.getPreRenderPlaceHolderElement() as HTMLElement;
+                placeholder.getBoundingClientRect = () => {
+                    const top = readTop();
+                    return {
+                        x: 0, y: top, width: 800, height: 300,
+                        top, left: 0, bottom: top + 300, right: 800,
+                    } as DOMRect;
+                };
+                return placeholder;
+            };
+
+            it('should stop tracking once the frame is hidden', async () => {
+                const { scroller, readPlaceholderTop } = mountInNestedScroller();
+
+                const libEmbed = new LiveboardEmbed('#tsEmbedDiv', {
+                    preRenderId: 'scroll-stops-on-hide',
+                    liveboardId: 'myLiveboardId',
+                });
+                libEmbed.preRender();
+                await waitFor(() => !!getIFrameEl());
+                await libEmbed.showPreRender();
+
+                stubPlaceholderRect(libEmbed, readPlaceholderTop);
+                libEmbed.hidePreRender();
+
+                const syncSpy = jest.spyOn(libEmbed, 'syncPreRenderStyle');
+                scroller.scrollTop = 250;
+                scroller.dispatchEvent(new Event('scroll'));
+                await flushAnimationFrame();
+
+                expect(syncSpy).not.toHaveBeenCalled();
+
+                syncSpy.mockRestore();
+                libEmbed.destroy();
+                scroller.remove();
+            });
+
+            it('should default the container to the host scrolling ancestor', async () => {
+                const { scroller } = mountInNestedScroller();
+                scroller.style.overflowY = 'auto';
+
+                const libEmbed = new LiveboardEmbed('#tsEmbedDiv', {
+                    preRenderId: 'auto-scroll-container',
+                    liveboardId: 'myLiveboardId',
+                });
+                libEmbed.preRender();
+                await waitFor(() => !!getIFrameEl());
+                await libEmbed.showPreRender();
+
+                const wrapper = document.getElementById(libEmbed.getPreRenderIds().wrapper);
+                // In the scroller, so the browser moves it — no repositioning.
+                expect(wrapper.parentElement).toBe(scroller);
+                expect((libEmbed as any).preRenderContainerEl).toBe(scroller);
+
+                libEmbed.destroy();
+                scroller.remove();
+            });
+
+            it('should still use document.body when nothing scrolls', async () => {
+                createRootEleForEmbed();
+
+                const libEmbed = new LiveboardEmbed('#tsEmbedDiv', {
+                    preRenderId: 'no-scroller-body',
+                    liveboardId: 'myLiveboardId',
+                });
+                libEmbed.preRender();
+                await waitFor(() => !!getIFrameEl());
+                await libEmbed.showPreRender();
+
+                const wrapper = document.getElementById(libEmbed.getPreRenderIds().wrapper);
+                expect(wrapper.parentElement).toBe(document.body);
+
+                libEmbed.destroy();
+            });
+
+            it('should set pointer-events on show rather than dropping the property', async () => {
+                createRootEleForEmbed();
+                const container = document.createElement('div');
+                container.id = 'parking-root';
+                // Usual styling for a parking root: no swallowed clicks.
+                container.style.pointerEvents = 'none';
+                document.body.appendChild(container);
+
+                const libEmbed = new LiveboardEmbed('#tsEmbedDiv', {
+                    preRenderId: 'pointer-events-restored',
+                    liveboardId: 'myLiveboardId',
+                    preRenderContainer: '#parking-root',
+                });
+                libEmbed.preRender();
+                await waitFor(() => !!getIFrameEl());
+                await libEmbed.showPreRender();
+
+                const wrapper = document.getElementById(libEmbed.getPreRenderIds().wrapper);
+                // Merely removing the property would leave the container's
+                // inherited `none` in force, and the frame dead to input.
+                expect(wrapper.style.pointerEvents).toBe('auto');
+
+                libEmbed.destroy();
+                container.remove();
+            });
+
+            it('should park a hidden wrapper out of the scrollable area', async () => {
+                createRootEleForEmbed();
+
+                const libEmbed = new LiveboardEmbed('#tsEmbedDiv', {
+                    preRenderId: 'hidden-parked',
+                    liveboardId: 'myLiveboardId',
+                });
+                libEmbed.preRender();
+                await waitFor(() => !!getIFrameEl());
+                await libEmbed.showPreRender();
+
+                const wrapper = document.getElementById(libEmbed.getPreRenderIds().wrapper);
+                expect(wrapper.style.transform).toBe('');
+
+                libEmbed.hidePreRender();
+                expect(wrapper.style.transform).toBe('translateY(-100%)');
+
+                await libEmbed.showPreRender();
+                expect(wrapper.style.transform).toBe('');
+
+                libEmbed.destroy();
+            });
+
+            it('should not seed the placeholder with the unmeasured wrapper height', async () => {
+                createRootEleForEmbed();
+
+                const libEmbed = new LiveboardEmbed('#tsEmbedDiv', {
+                    preRenderId: 'unmeasured-height',
+                    liveboardId: 'myLiveboardId',
+                    fullHeight: true,
+                    frameParams: { height: 420 },
+                });
+                libEmbed.preRender();
+                await waitFor(() => !!getIFrameEl());
+
+                const wrapper = document.getElementById(libEmbed.getPreRenderIds().wrapper);
+                // createPreRenderWrapper() seeds 100vh, not a measurement.
+                expect(wrapper.style.height).toBe('100vh');
+
+                await libEmbed.showPreRender();
+
+                const placeholder = (libEmbed as any).getPreRenderPlaceHolderElement() as HTMLElement;
+                expect(placeholder.style.height).toBe('420px');
+
+                libEmbed.destroy();
+            });
+
+            it('should seed the placeholder with a height fullHeight has measured', async () => {
+                createRootEleForEmbed();
+
+                const libEmbed = new LiveboardEmbed('#tsEmbedDiv', {
+                    preRenderId: 'measured-height',
+                    liveboardId: 'myLiveboardId',
+                    fullHeight: true,
+                    frameParams: { height: 420 },
+                });
+                libEmbed.preRender();
+                await waitFor(() => !!getIFrameEl());
+
+                (libEmbed as any).setIFrameHeight(1180);
+                await libEmbed.showPreRender();
+
+                const placeholder = (libEmbed as any).getPreRenderPlaceHolderElement() as HTMLElement;
+                expect(placeholder.style.height).toBe('1180px');
+
+                libEmbed.destroy();
+            });
+        });
+
         describe('preRenderContainer', () => {
             it('should append preRenderWrapper to document.body when preRenderContainer is not set', async () => {
                 createRootEleForEmbed();
@@ -3108,21 +3319,16 @@ describe('Unit test case for ts embed', () => {
 
                 // Simulate React remounting the container: the old node (with
                 // our wrapper) is detached and a fresh node takes its place.
-                const removeSpy = jest.spyOn(oldContainer, 'removeEventListener');
                 oldContainer.remove();
                 const newContainer = document.createElement('div');
                 newContainer.id = 'remount-container';
                 document.body.appendChild(newContainer);
-                const addSpy = jest.spyOn(newContainer, 'addEventListener');
 
                 // A reposition (scroll/resize/re-show) heals the stale ref.
                 libEmbed.syncPreRenderStyle();
 
                 expect(newContainer.contains(wrapper)).toBe(true);
                 expect(oldContainer.contains(wrapper)).toBe(false);
-                // The scroll listener is migrated to the live container.
-                expect(removeSpy).toHaveBeenCalledWith('scroll', expect.any(Function));
-                expect(addSpy).toHaveBeenCalledWith('scroll', expect.any(Function));
 
                 libEmbed.destroy();
                 newContainer.remove();
@@ -6695,175 +6901,3 @@ describe('ShowPreRender with UpdateEmbedParams', () => {
         });
     });
 });
-
-describe('excludeConfigFromURL', () => {
-    const lbConfig = {
-        liveboardId,
-        hiddenActions: [Action.Download],
-        additionalFlags: { internalBlinkFlag: true },
-        liveboardV2: true,
-    };
-
-    const withPostMessage = (viewConfig: any) => ({
-        ...viewConfig,
-        additionalFlags: { ...viewConfig.additionalFlags, excludeConfigFromURL: true },
-    });
-
-    const renderAndGetSrc = async (viewConfig: any) => {
-        const embed = new LiveboardEmbed(getRootEl(), { ...defaultViewConfig, ...viewConfig });
-        await embed.render();
-        await waitFor(() => !!getIFrameEl());
-        return { embed, src: getIFrameSrc() };
-    };
-
-    const signalFrameReady = () => {
-        postMessageToParent(getIFrameEl().contentWindow, {
-            type: EmbedEvent.EmbedListenerReady,
-        });
-    };
-
-    beforeEach(() => {
-        document.body.innerHTML = getDocumentBody();
-        mockProcessTrigger.mockReset();
-        mockProcessTrigger.mockResolvedValue({});
-        init({
-            thoughtSpotHost,
-            authType: AuthType.None,
-        });
-    });
-
-    test('leaves the URL untouched when the flag is not set', async () => {
-        const { src } = await renderAndGetSrc(lbConfig);
-
-        expect(src).toContain('hideAction=');
-        expect(src).toContain('internalBlinkFlag=true');
-        expect(src).toContain('isPinboardV2Enabled=true');
-    });
-
-    test('keeps only the bootstrap params on the URL when the flag is set', async () => {
-        const { src } = await renderAndGetSrc(withPostMessage(lbConfig));
-
-        // Boot and auth handshake stays on the URL.
-        expect(src).toContain('hostAppUrl=');
-        expect(src).toContain(`authType=${AuthType.None}`);
-        expect(src).toContain(`sdkVersion=${version}`);
-        expect(src).toContain('blockNonEmbedFullAppAccess=true');
-        expect(src).toContain('viewPortHeight=');
-
-        // View configuration and internal flags do not.
-        expect(src).not.toContain('hideAction=');
-        expect(src).not.toContain('internalBlinkFlag');
-        expect(src).not.toContain('isPinboardV2Enabled');
-        expect(src).not.toContain('enableDataPanelV2');
-    });
-
-    test('strips a non-bootstrap additionalFlag from the URL when the flag is set', async () => {
-        const { src } = await renderAndGetSrc({
-            ...lbConfig,
-            additionalFlags: {
-                internalBlinkFlag: true,
-                someCustomFlag: 'abc',
-                excludeConfigFromURL: true,
-            },
-        });
-
-        expect(src).not.toContain('internalBlinkFlag');
-        expect(src).not.toContain('someCustomFlag');
-    });
-
-    test('keeps an additionalFlag that overrides a bootstrap param on the URL', async () => {
-        const { src } = await renderAndGetSrc({
-            ...lbConfig,
-            additionalFlags: { [Param.OverrideOrgId]: 42, excludeConfigFromURL: true },
-        });
-
-        expect(src).toContain(`${Param.OverrideOrgId}=42`);
-    });
-
-    test('keeps the deep-link route on the URL when the flag is set', async () => {
-        const { src } = await renderAndGetSrc(withPostMessage(lbConfig));
-
-        expect(src).toContain(`/embed/viz/${liveboardId}`);
-    });
-
-    test('sends the full config over UpdateEmbedParams once the frame is ready', async () => {
-        await renderAndGetSrc(withPostMessage(lbConfig));
-
-        signalFrameReady();
-
-        await executeAfterWait(() => {
-            expect(mockProcessTrigger).toHaveBeenCalledWith(
-                expect.any(Object),
-                HostEvent.UpdateEmbedParams,
-                expect.any(String),
-                expect.objectContaining({
-                    liveboardId,
-                    hiddenActions: [Action.Download],
-                    internalBlinkFlag: true,
-                    [Param.HideActions]: expect.arrayContaining([Action.Download]),
-                }),
-                undefined,
-            );
-        });
-    });
-
-    test('sends UpdateEmbedParams again every time the frame signals ready', async () => {
-        await renderAndGetSrc(withPostMessage(lbConfig));
-        signalFrameReady();
-        signalFrameReady();
-
-        await executeAfterWait(() => {
-            const updateCalls = mockProcessTrigger.mock.calls.filter(
-                (call) => call[1] === HostEvent.UpdateEmbedParams,
-            );
-            expect(updateCalls).toHaveLength(2);
-        });
-    });
-
-    test('does not send UpdateEmbedParams when the flag is not set', async () => {
-        await renderAndGetSrc(lbConfig);
-
-        signalFrameReady();
-
-        await executeAfterWait(() => {
-            const updateCalls = mockProcessTrigger.mock.calls.filter(
-                (call) => call[1] === HostEvent.UpdateEmbedParams,
-            );
-            expect(updateCalls).toHaveLength(0);
-        });
-    });
-
-    test('does not double-send for a pre-rendered embed that is shown', async () => {
-        mockMessageChannel();
-        (window as any).ResizeObserver =
-            window.ResizeObserver ||
-            jest.fn().mockImplementation(() => ({
-                disconnect: jest.fn(),
-                observe: jest.fn(),
-                unobserve: jest.fn(),
-            }));
-
-        const embed = new LiveboardEmbed(getRootEl(), {
-            ...defaultViewConfig,
-            ...withPostMessage(lbConfig),
-            preRenderId: 'send-config-post-message',
-        });
-        await embed.preRender();
-        await waitFor(() => !!getIFrameEl());
-
-        signalFrameReady();
-        await executeAfterWait(() => {
-            expect(embed.isEmbedContainerLoaded).toBe(true);
-        });
-
-        mockProcessTrigger.mockClear();
-        await embed.showPreRender();
-
-        await executeAfterWait(() => {
-            const updateCalls = mockProcessTrigger.mock.calls.filter(
-                (call) => call[1] === HostEvent.UpdateEmbedParams,
-            );
-            expect(updateCalls).toHaveLength(1);
-        });
-    });
-});