@thoughtspot/visual-embed-sdk 1.52.1 → 1.52.2-beta.0

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();
@@ -2964,8 +3175,8 @@ describe('Unit test case for ts embed', () => {
 
                 // Reverts to the exact value the container had before.
                 expect(customContainer.style.position).toBe('static');
-                // The custom container reference is dropped (back to the default
-                // body) so a destroyed embed does not pin the (possibly
+                // The custom container reference is dropped (back to the
+                // default body) so a destroyed embed does not pin the (possibly
                 // detached) element in memory.
                 expect((libEmbed as any).preRenderContainerEl).toBe(document.body);
 
@@ -3019,8 +3230,8 @@ describe('Unit test case for ts embed', () => {
 
                 libEmbed.destroy();
 
-                // The body sentinel must never be treated as a custom container:
-                // no position override to apply and none to restore.
+                // The body sentinel must never be treated as a custom
+                // container: no position override to apply and none to restore.
                 expect(document.body.style.position).toBe(originalBodyPosition);
                 expect(document.body.dataset.tsEmbedOriginalPosition).toBeUndefined();
             });
@@ -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();
@@ -3155,10 +3361,11 @@ describe('Unit test case for ts embed', () => {
 
                 libEmbed.syncPreRenderStyle();
 
-                // applyPreRenderContainerPositioning() reads preRenderContainerEl
-                // instead of taking the container as an argument, so reconcile has
-                // to assign the field before calling it — otherwise the override
-                // lands on the detached node and the fresh one stays static.
+                // applyPreRenderContainerPositioning() reads
+                // preRenderContainerEl instead of taking the container as an
+                // argument, so reconcile has to assign the field before calling
+                // it — otherwise the override lands on the detached node and
+                // the fresh one stays static.
                 expect((libEmbed as any).preRenderContainerEl).toBe(newContainer);
                 expect(newContainer.style.position).toBe('relative');
                 expect(newContainer.dataset.tsEmbedOriginalPosition).toBe('static');
@@ -3289,7 +3496,8 @@ describe('Unit test case for ts embed', () => {
                     await firstEmbed.preRender();
                     await waitFor(() => !!getIFrameEl());
 
-                    // Reset position to static so the connecting embed also triggers the guard.
+                    // Reset position to static so the connecting embed also
+                    // triggers the guard.
                     customContainer.style.position = 'static';
                     delete customContainer.dataset['preRenderContainerOriginalPosition'];
 
@@ -3393,8 +3601,8 @@ describe('Unit test case for ts embed', () => {
                     await firstEmbed.preRender();
                     await waitFor(() => !!getIFrameEl());
 
-                    // Same config on both components — the value is redundant but
-                    // not wrong, so nagging about it would be noise.
+                    // Same config on both components — the value is redundant
+                    // but not wrong, so nagging about it would be noise.
                     const connectingEmbed = new LiveboardEmbed('#tsEmbedDiv', {
                         preRenderId: 'connect-same-element',
                         liveboardId: 'myLiveboardId',
@@ -3427,8 +3635,9 @@ describe('Unit test case for ts embed', () => {
                     await firstEmbed.preRender();
                     await waitFor(() => !!getIFrameEl());
 
-                    // A selector that resolves to the owner's element is the same
-                    // container, so the comparison must be by resolved node.
+                    // A selector that resolves to the owner's element is the
+                    // same container, so the comparison must be by resolved
+                    // node.
                     const connectingEmbed = new LiveboardEmbed('#tsEmbedDiv', {
                         preRenderId: 'connect-same-selector',
                         liveboardId: 'myLiveboardId',
@@ -3492,8 +3701,8 @@ describe('Unit test case for ts embed', () => {
                     await waitFor(() => !!getIFrameEl());
 
                     // Simulate a wrapper with no live embed behind it: the
-                    // __tsEmbed stamp used to locate the owner is gone, so there
-                    // is no container to inherit.
+                    // __tsEmbed stamp used to locate the owner is gone, so
+                    // there is no container to inherit.
                     const wrapper = document.getElementById(
                         firstEmbed.getPreRenderIds().wrapper,
                     );
@@ -5361,12 +5570,14 @@ describe('Trigger method edge cases', () => {
         const handleErrorSpy = jest.spyOn(searchEmbed as any, 'handleError').mockImplementation(() => {});
         await searchEmbed.render();
 
-        // First processTrigger call is getAvailableUIPassthroughKeys for DrillDown
+        // First processTrigger call is getAvailableUIPassthroughKeys for
+        // DrillDown
         mockProcessTrigger.mockResolvedValueOnce([
             { value: { keys: Object.values(UIPassthroughEvent) } },
         ]);
 
-        // DrillDown with no points → throwDrillDownValidationError → isValidationError=true
+        // DrillDown with no points → throwDrillDownValidationError →
+        // isValidationError=true
         await expect(
             searchEmbed.trigger(HostEvent.DrillDown, {} as any),
         ).rejects.toThrow('DrillDown requires a valid points object');
@@ -5541,7 +5752,8 @@ describe('Fullscreen change handler behavior', () => {
         init({
             thoughtSpotHost: 'tshost',
             authType: AuthType.None,
-            // disableFullscreenPresentation not set → defaults to true via ?? true
+            // disableFullscreenPresentation not set → defaults to true via ??
+            // true
         });
 
         const embed = new SearchEmbed(getRootEl(), defaultViewConfig);
@@ -5567,7 +5779,8 @@ describe('Fullscreen change handler behavior', () => {
 
         embed['setupFullscreenChangeHandler']();
 
-        // Capture the registered handler directly instead of dispatching to document
+        // Capture the registered handler directly instead of dispatching to
+        // document
         const fullscreenCall = addEventListenerSpy.mock.calls.find((c) => c[0] === 'fullscreenchange');
         expect(fullscreenCall).toBeTruthy();
         const handler = fullscreenCall[1] as EventListener;
@@ -6039,8 +6252,8 @@ describe('ShowPreRender with UpdateEmbedParams', () => {
                 undefined,
             );
 
-            // A parameter always carries a value, so the payload says everything
-            // there is to say — no follow-up event.
+            // A parameter always carries a value, so the payload says
+            // everything there is to say — no follow-up event.
             const parameterCalls = mockProcessTrigger.mock.calls.filter(
                 (call: any[]) => call[1] === HostEvent.UpdateParameters,
             );
@@ -6641,7 +6854,8 @@ describe('ShowPreRender with UpdateEmbedParams', () => {
             expect(hostElement.querySelector(`#${placeHolderId}`)).toBe(staleNestedPlaceholder);
             // Before the fix this threw NotFoundError.
             await expect(embed.showPreRender()).resolves.toBeDefined();
-            // The stale nested placeholder is gone; the fresh one is a direct child.
+            // The stale nested placeholder is gone; the fresh one is a direct
+            // child.
             expect(staleNestedPlaceholder.isConnected).toBe(false);
             const currentPlaceholder = (
                 embed as any
@@ -6673,7 +6887,8 @@ describe('ShowPreRender with UpdateEmbedParams', () => {
                 { numberOfTabs: number; orderedTabIds: string[] }
             > = true;
             const probeUnknownField = (r: TabsResponse) =>
-                // @ts-expect-error — field not on the GetTabs contract (was silent when `any`)
+                // @ts-expect-error — field not on the GetTabs contract (was
+                // silent when `any`)
                 r.tabCount;
             void probeUnknownField;