@thoughtspot/visual-embed-sdk 1.52.0 → 1.52.1

package/src/full-height.spec.ts

@@ -0,0 +1,1008 @@
+import {
+    FullHeightController,
+    FullHeightControllerViewConfig as ControllerConfig,
+    FullHeightEmbedHost,
+} from './full-height';
+import {
+    EmbedEvent, HostEvent, MessageCallback, Param,
+} from './types';
+import { logger } from './utils/logger';
+import { DEFAULT_LAZY_LOADING_MARGIN } from './config';
+
+describe('FullHeightController', () => {
+    let iFrame: HTMLIFrameElement;
+    let host: FullHeightEmbedHost;
+    let handlers: Map<EmbedEvent, MessageCallback>;
+
+    const originalResizeObserver = (window as any).ResizeObserver;
+    const originalScrollY = window.scrollY;
+    const originalInnerHeight = window.innerHeight;
+    const originalInnerWidth = window.innerWidth;
+
+    /**
+     * A rect that only carries the edges the visibility math reads.
+     */
+    const rectOf = (top: number, bottom: number, left = 0, right = 500) => ({
+        top,
+        bottom,
+        left,
+        right,
+        width: right - left,
+        height: bottom - top,
+    } as DOMRect);
+
+    const setViewport = (scrollY: number, innerHeight: number, innerWidth = 1024) => {
+        Object.defineProperty(window, 'scrollY', { value: scrollY, configurable: true });
+        Object.defineProperty(window, 'innerHeight', { value: innerHeight, configurable: true });
+        Object.defineProperty(window, 'innerWidth', { value: innerWidth, configurable: true });
+    };
+
+    const createControllerFor = (viewConfig: ControllerConfig) => createController(viewConfig);
+
+    const createController = (
+        viewConfig: ControllerConfig,
+        options: { iframe?: HTMLIFrameElement } = {},
+    ) => {
+        handlers = new Map();
+        iFrame = document.createElement('iframe');
+        document.body.appendChild(iFrame);
+        const hostIframe = 'iframe' in options ? options.iframe : iFrame;
+        host = {
+            getIframe: () => hostIframe,
+            setFrameHeight: jest.fn(),
+            on: (eventType, callback) => {
+                handlers.set(eventType, callback);
+            },
+            trigger: jest.fn(),
+        };
+        // The controller resolves the defaults and registers its handlers in
+        // its own constructor, so nothing else is needed here.
+        return new FullHeightController(viewConfig, host);
+    };
+
+    /**
+     * The query params a freshly built controller contributes. The defaults are
+     * applied to the controller's private copy of the view config, so the
+     * params are how the host app observes them.
+     */
+    const queryParamsFor = (viewConfig: ControllerConfig) => {
+        const params: any = {};
+        createController(viewConfig).addQueryParams(params);
+        return params;
+    };
+
+    /**
+     * Puts the embed inside a scrollable container and hands back the spies the
+     * container assertions need. The caller drives `onRender`, so tests can
+     * assert what happens before it too.
+     */
+    const mountInScrollContainer = (
+        viewConfig: ControllerConfig,
+        options: { withResizeObserver?: boolean } = {},
+    ) => {
+        const observe = jest.fn();
+        const disconnect = jest.fn();
+        let resizeCallback: () => void;
+        const resizeObserverCtor = jest.fn((callback: () => void) => {
+            resizeCallback = callback;
+            return { observe, disconnect };
+        });
+        if (options.withResizeObserver === false) {
+            delete (window as any).ResizeObserver;
+        } else {
+            (window as any).ResizeObserver = resizeObserverCtor;
+        }
+
+        const scrollContainer = document.createElement('div');
+        scrollContainer.style.overflow = 'auto';
+        const addContainerListener = jest.spyOn(scrollContainer, 'addEventListener');
+        const removeContainerListener = jest.spyOn(scrollContainer, 'removeEventListener');
+
+        const controller = createController(viewConfig);
+        scrollContainer.appendChild(iFrame);
+        document.body.appendChild(scrollContainer);
+
+        return {
+            controller,
+            scrollContainer,
+            addContainerListener,
+            removeContainerListener,
+            observe,
+            disconnect,
+            resizeObserverCtor,
+            fireResizeObserver: () => resizeCallback(),
+        };
+    };
+
+    const visibleCoordinates = () => {
+        const responder = jest.fn();
+        handlers.get(EmbedEvent.RequestVisibleEmbedCoordinates)({} as any, responder);
+        return responder.mock.calls[0][0].data;
+    };
+
+    afterEach(() => {
+        document.body.innerHTML = '';
+        (window as any).ResizeObserver = originalResizeObserver;
+        setViewport(originalScrollY, originalInnerHeight, originalInnerWidth);
+        jest.restoreAllMocks();
+    });
+
+    describe('registerEventHandlers', () => {
+        it('registers every full-height handler when fullHeight is enabled', () => {
+            createController({ fullHeight: true });
+            expect([...handlers.keys()]).toEqual([
+                EmbedEvent.RouteChange,
+                EmbedEvent.EmbedHeight,
+                EmbedEvent.EmbedIframeCenter,
+                EmbedEvent.RequestVisibleEmbedCoordinates,
+            ]);
+        });
+
+        it('registers nothing when fullHeight is not enabled', () => {
+            createController({});
+            expect(handlers.size).toBe(0);
+        });
+
+        it('registers nothing when fullHeight is explicitly false', () => {
+            // Lazy loading on its own must not switch the feature on.
+            createController({ fullHeight: false, lazyLoadingForFullHeight: true });
+            expect(handlers.size).toBe(0);
+        });
+    });
+
+    describe('viewConfig', () => {
+        it('reads back the lazy-loading settings defaulted for the host app', () => {
+            const controller = createController({ fullHeight: true });
+            expect(controller.viewConfig).toEqual({
+                fullHeight: true,
+                lazyLoadingForFullHeight: true,
+                enableScrollableContainerLazyLoading: true,
+                lazyLoadingMargin: DEFAULT_LAZY_LOADING_MARGIN,
+            });
+        });
+
+        it('preserves an explicit opt-out', () => {
+            const controller = createController({
+                fullHeight: true,
+                lazyLoadingForFullHeight: false,
+                enableScrollableContainerLazyLoading: false,
+                lazyLoadingMargin: '0px',
+            });
+            expect(controller.viewConfig).toEqual({
+                fullHeight: true,
+                lazyLoadingForFullHeight: false,
+                enableScrollableContainerLazyLoading: false,
+                lazyLoadingMargin: '0px',
+            });
+        });
+
+        it('defaults only what the host app left unset', () => {
+            const controller = createController({ fullHeight: true, lazyLoadingMargin: '50px' });
+            expect(controller.viewConfig).toEqual({
+                fullHeight: true,
+                lazyLoadingForFullHeight: true,
+                enableScrollableContainerLazyLoading: true,
+                lazyLoadingMargin: '50px',
+            });
+        });
+
+        it('re-resolves the defaults when the config is replaced', () => {
+            const controller = createController({ fullHeight: true, minimumHeight: 400 });
+            expect(controller.minimumHeight).toBe(400);
+
+            const next: ControllerConfig = { fullHeight: true, minimumHeight: 900 };
+            controller.viewConfig = next;
+
+            expect(controller.minimumHeight).toBe(900);
+            expect(controller.viewConfig.lazyLoadingMargin).toBe(DEFAULT_LAZY_LOADING_MARGIN);
+            // The replacement is copied, not adopted, so the caller's object
+            // does not grow the resolved flags either.
+            expect(next).toEqual({ fullHeight: true, minimumHeight: 900 });
+        });
+
+        it('feeds the query params from the replaced config', () => {
+            const controller = createController({ fullHeight: true });
+            controller.viewConfig = { fullHeight: true, lazyLoadingForFullHeight: false };
+            const params: any = {};
+            controller.addQueryParams(params);
+            expect(params).toEqual({ [Param.fullHeight]: true });
+        });
+    });
+
+    describe('lazy loading defaults', () => {
+        it('turns lazy loading on for a full-height embed', () => {
+            expect(queryParamsFor({ fullHeight: true })).toEqual({
+                [Param.fullHeight]: true,
+                [Param.IsLazyLoadingForEmbedEnabled]: true,
+                [Param.RootMarginForLazyLoad]: DEFAULT_LAZY_LOADING_MARGIN,
+            });
+        });
+
+        it('tracks the scrollable containers without the host app opting in', () => {
+            const { controller, addContainerListener, observe } = mountInScrollContainer({
+                fullHeight: true,
+            });
+            controller.onRender();
+            expect(addContainerListener).toHaveBeenCalledWith('scroll', expect.any(Function));
+            expect(observe).toHaveBeenCalled();
+            controller.destroy();
+        });
+
+        it('leaves the view config the host app passed in untouched', () => {
+            // The controller defaults into a copy of its own, so the caller's
+            // object never grows the resolved flags.
+            const viewConfig: ControllerConfig = { fullHeight: true };
+            const controller = new FullHeightController(viewConfig, {
+                getIframe: () => iFrame,
+                setFrameHeight: jest.fn(),
+                on: jest.fn(),
+                trigger: jest.fn(),
+            });
+            controller.addQueryParams({});
+            controller.onRender();
+            controller.destroy();
+            expect(viewConfig).toEqual({ fullHeight: true });
+        });
+
+        it('leaves an explicit opt-out alone', () => {
+            expect(queryParamsFor({
+                fullHeight: true,
+                lazyLoadingForFullHeight: false,
+                lazyLoadingMargin: '0px',
+            })).toEqual({ [Param.fullHeight]: true });
+        });
+
+        it('honours an explicit container opt-out', () => {
+            const { controller, addContainerListener, resizeObserverCtor } = mountInScrollContainer(
+                { fullHeight: true, enableScrollableContainerLazyLoading: false },
+            );
+            controller.onRender();
+            expect(addContainerListener).not.toHaveBeenCalled();
+            expect(resizeObserverCtor).not.toHaveBeenCalled();
+        });
+
+        it('defaults only the values the host app left unset', () => {
+            // Lazy loading defaults on, while the supplied margin survives.
+            const { controller, addContainerListener } = mountInScrollContainer({
+                fullHeight: true,
+                enableScrollableContainerLazyLoading: false,
+                lazyLoadingMargin: '50px',
+            });
+            const params: any = {};
+            controller.addQueryParams(params);
+            expect(params).toEqual({
+                [Param.fullHeight]: true,
+                [Param.IsLazyLoadingForEmbedEnabled]: true,
+                [Param.RootMarginForLazyLoad]: '50px',
+            });
+
+            controller.onRender();
+            expect(addContainerListener).not.toHaveBeenCalled();
+        });
+
+        it('defaults nothing when fullHeight is not enabled', () => {
+            const viewConfig: ControllerConfig = {};
+            const controller = createControllerFor(viewConfig);
+            expect(viewConfig).toEqual({});
+
+            const add = jest.spyOn(window, 'addEventListener');
+            controller.onRender();
+            expect(add).not.toHaveBeenCalled();
+        });
+    });
+
+    describe('minimumHeight', () => {
+        it('falls back to 500 when neither height is configured', () => {
+            expect(createController({ fullHeight: true }).minimumHeight).toBe(500);
+        });
+
+        it('prefers minimumHeight over the deprecated defaultHeight', () => {
+            const controller = createController({
+                fullHeight: true,
+                defaultHeight: 700,
+                minimumHeight: 800,
+            });
+            expect(controller.minimumHeight).toBe(800);
+        });
+
+        it('honours the deprecated defaultHeight when minimumHeight is absent', () => {
+            const controller = createController({ fullHeight: true, defaultHeight: 700 });
+            expect(controller.minimumHeight).toBe(700);
+        });
+
+        it('treats a zero minimumHeight as unset and honours defaultHeight', () => {
+            const controller = createController({
+                fullHeight: true,
+                minimumHeight: 0,
+                defaultHeight: 700,
+            });
+            expect(controller.minimumHeight).toBe(700);
+        });
+
+        it('falls back to 500 when both heights are zero', () => {
+            const controller = createController({
+                fullHeight: true,
+                minimumHeight: 0,
+                defaultHeight: 0,
+            });
+            expect(controller.minimumHeight).toBe(500);
+        });
+
+        it('is available even when fullHeight is off', () => {
+            expect(createController({ minimumHeight: 800 }).minimumHeight).toBe(800);
+        });
+    });
+
+    describe('addQueryParams', () => {
+        it('adds no params when fullHeight is not enabled', () => {
+            expect(queryParamsFor({ lazyLoadingForFullHeight: true })).toEqual({});
+        });
+
+        it('adds only the full height param when lazy loading is off', () => {
+            expect(queryParamsFor({
+                fullHeight: true,
+                lazyLoadingForFullHeight: false,
+            })).toEqual({ [Param.fullHeight]: true });
+        });
+
+        it('adds the lazy loading params, including a valid margin', () => {
+            expect(queryParamsFor({
+                fullHeight: true,
+                lazyLoadingForFullHeight: true,
+                lazyLoadingMargin: '100px 0px',
+            })).toEqual({
+                [Param.fullHeight]: true,
+                [Param.IsLazyLoadingForEmbedEnabled]: true,
+                [Param.RootMarginForLazyLoad]: '100px 0px',
+            });
+        });
+
+        it('accepts a four sided margin', () => {
+            expect(queryParamsFor({
+                fullHeight: true,
+                lazyLoadingMargin: '10px 20px 30px 40px',
+            })[Param.RootMarginForLazyLoad]).toBe('10px 20px 30px 40px');
+        });
+
+        it('accepts a unitless zero margin', () => {
+            expect(queryParamsFor({
+                fullHeight: true,
+                lazyLoadingMargin: '0',
+            })[Param.RootMarginForLazyLoad]).toBe('0');
+        });
+
+        it('keeps the params the embed has already collected', () => {
+            const params: any = { existing: 'value' };
+            createController({ fullHeight: true }).addQueryParams(params);
+            expect(params.existing).toBe('value');
+        });
+
+        it('produces the same params when called for a second render', () => {
+            const controller = createController({ fullHeight: true });
+            const first: any = {};
+            const second: any = {};
+            controller.addQueryParams(first);
+            controller.addQueryParams(second);
+            expect(second).toEqual(first);
+        });
+
+        it('drops an invalid lazy loading margin', () => {
+            // An invalid margin is reported to the developer, not sent on.
+            const loggerError = jest.spyOn(logger, 'error').mockImplementation(jest.fn());
+            const params = queryParamsFor({
+                fullHeight: true,
+                lazyLoadingForFullHeight: true,
+                lazyLoadingMargin: 'not-a-margin',
+            });
+            expect(params[Param.RootMarginForLazyLoad]).toBeUndefined();
+            expect(loggerError).toHaveBeenCalled();
+        });
+
+        it('drops a margin with more than four sides', () => {
+            const loggerError = jest.spyOn(logger, 'error').mockImplementation(jest.fn());
+            const params = queryParamsFor({
+                fullHeight: true,
+                lazyLoadingMargin: '1px 2px 3px 4px 5px',
+            });
+            expect(params[Param.RootMarginForLazyLoad]).toBeUndefined();
+            expect(loggerError).toHaveBeenCalled();
+        });
+
+        it('drops a margin that is not a string', () => {
+            const loggerError = jest.spyOn(logger, 'error').mockImplementation(jest.fn());
+            const params = queryParamsFor({
+                fullHeight: true,
+                lazyLoadingMargin: 100 as any,
+            });
+            expect(params[Param.RootMarginForLazyLoad]).toBeUndefined();
+            expect(loggerError).toHaveBeenCalled();
+        });
+
+        it('drops an empty lazy loading margin but keeps the other params', () => {
+            const loggerError = jest.spyOn(logger, 'error').mockImplementation(jest.fn());
+            const params = queryParamsFor({
+                fullHeight: true,
+                lazyLoadingForFullHeight: true,
+                lazyLoadingMargin: '',
+            });
+            expect(params).toEqual({
+                [Param.fullHeight]: true,
+                [Param.IsLazyLoadingForEmbedEnabled]: true,
+            });
+            expect(loggerError).toHaveBeenCalled();
+        });
+    });
+
+    describe('EmbedHeight', () => {
+        const embedHeight = (data: unknown) => ({ data } as any);
+
+        it('never sizes the frame below the configured minimum', () => {
+            createController({ fullHeight: true, minimumHeight: 800 });
+            handlers.get(EmbedEvent.EmbedHeight)(embedHeight(300));
+            expect(host.setFrameHeight).toHaveBeenCalledWith(800);
+        });
+
+        it('uses the height reported by the app when it clears the minimum', () => {
+            createController({ fullHeight: true, minimumHeight: 800 });
+            handlers.get(EmbedEvent.EmbedHeight)(embedHeight(1200));
+            expect(host.setFrameHeight).toHaveBeenCalledWith(1200);
+        });
+
+        it('never sizes the frame below the 500 default floor', () => {
+            createController({ fullHeight: true });
+            handlers.get(EmbedEvent.EmbedHeight)(embedHeight(100));
+            expect(host.setFrameHeight).toHaveBeenCalledWith(500);
+        });
+
+        it('clamps a negative height to the minimum', () => {
+            createController({ fullHeight: true, minimumHeight: 800 });
+            handlers.get(EmbedEvent.EmbedHeight)(embedHeight(-50));
+            expect(host.setFrameHeight).toHaveBeenCalledWith(800);
+        });
+
+        it('clamps a zero height to the minimum', () => {
+            // Zero is a height the app really reported, not a missing one.
+            createController({ fullHeight: true, minimumHeight: 800 });
+            handlers.get(EmbedEvent.EmbedHeight)(embedHeight(0));
+            expect(host.setFrameHeight).toHaveBeenCalledWith(800);
+        });
+
+        it('keeps a fractional height that clears the minimum', () => {
+            createController({ fullHeight: true, minimumHeight: 800 });
+            handlers.get(EmbedEvent.EmbedHeight)(embedHeight(1200.5));
+            expect(host.setFrameHeight).toHaveBeenCalledWith(1200.5);
+        });
+
+        it('accepts a numeric height sent as a string', () => {
+            createController({ fullHeight: true });
+            handlers.get(EmbedEvent.EmbedHeight)(embedHeight('1200'));
+            expect(host.setFrameHeight).toHaveBeenCalledWith(1200);
+        });
+
+        it('leaves the height alone when the app reports a non-numeric height', () => {
+            createController({ fullHeight: true });
+            handlers.get(EmbedEvent.EmbedHeight)(embedHeight('tall'));
+            expect(host.setFrameHeight).not.toHaveBeenCalled();
+        });
+
+        it('leaves the height alone when the payload carries no height', () => {
+            createController({ fullHeight: true });
+            handlers.get(EmbedEvent.EmbedHeight)({} as any);
+            expect(host.setFrameHeight).not.toHaveBeenCalled();
+        });
+
+        it('survives a missing payload', () => {
+            createController({ fullHeight: true });
+            expect(() => handlers.get(EmbedEvent.EmbedHeight)(undefined as any)).not.toThrow();
+            expect(host.setFrameHeight).not.toHaveBeenCalled();
+        });
+
+        it('still pushes the visible coordinates for an unusable height', () => {
+            createController({ fullHeight: true, lazyLoadingForFullHeight: true });
+            handlers.get(EmbedEvent.EmbedHeight)(embedHeight('tall'));
+            expect(host.trigger).toHaveBeenCalledWith(
+                HostEvent.VisibleEmbedCoordinates,
+                expect.objectContaining({ top: expect.any(Number) }),
+            );
+        });
+
+        it('pushes the visible coordinates only when lazy loading is on', () => {
+            createController({ fullHeight: true, lazyLoadingForFullHeight: false });
+            handlers.get(EmbedEvent.EmbedHeight)(embedHeight(1200));
+            expect(host.trigger).not.toHaveBeenCalled();
+
+            createController({ fullHeight: true, lazyLoadingForFullHeight: true });
+            handlers.get(EmbedEvent.EmbedHeight)(embedHeight(1200));
+            expect(host.trigger).toHaveBeenCalledWith(
+                HostEvent.VisibleEmbedCoordinates,
+                expect.objectContaining({ top: expect.any(Number) }),
+            );
+        });
+
+        it('pushes no coordinates when the iframe is not there yet', () => {
+            // There is nothing to measure, so the app is left alone.
+            createController({ fullHeight: true }, { iframe: null });
+            handlers.get(EmbedEvent.EmbedHeight)(embedHeight(1200));
+            expect(host.setFrameHeight).toHaveBeenCalledWith(1200);
+            expect(host.trigger).not.toHaveBeenCalled();
+        });
+    });
+
+    describe('RouteChange', () => {
+        const routeChange = (currentPath: string) => ({ data: { currentPath } } as any);
+
+        it('leaves the height alone while navigating within a Liveboard', () => {
+            createController({ fullHeight: true });
+            handlers.get(EmbedEvent.RouteChange)(routeChange('/embed/viz/abc'));
+            expect(host.setFrameHeight).not.toHaveBeenCalled();
+        });
+
+        it.each([
+            '/pinboard/abc',
+            '/insights/pinboard/abc',
+            '/schedules/abc',
+            '/embed/viz/abc',
+            '/embed/insights/viz/abc',
+            '/liveboard/abc',
+            '/insights/liveboard/abc',
+            '/tsl-editor/PINBOARD_ANSWER_BOOK/abc',
+            '/import-tsl/PINBOARD_ANSWER_BOOK/abc',
+        ])('leaves the height alone on the Liveboard route %s', (currentPath) => {
+            createController({ fullHeight: true });
+            handlers.get(EmbedEvent.RouteChange)(routeChange(currentPath));
+            expect(host.setFrameHeight).not.toHaveBeenCalled();
+        });
+
+        it('leaves the height alone on a bare Liveboard route', () => {
+            createController({ fullHeight: true });
+            handlers.get(EmbedEvent.RouteChange)(routeChange('/liveboard/'));
+            expect(host.setFrameHeight).not.toHaveBeenCalled();
+        });
+
+        it('resets to frameParams.height when leaving the Liveboard routes', () => {
+            createController({ fullHeight: true, frameParams: { height: 640 } });
+            handlers.get(EmbedEvent.RouteChange)(routeChange('/some/other/path/'));
+            expect(host.setFrameHeight).toHaveBeenCalledWith(640);
+        });
+
+        it('passes a non-numeric frameParams.height through unchanged', () => {
+            createController({ fullHeight: true, frameParams: { height: '100%' } });
+            handlers.get(EmbedEvent.RouteChange)(routeChange('/some/other/path/'));
+            expect(host.setFrameHeight).toHaveBeenCalledWith('100%');
+        });
+
+        it('resets to the minimum height when frameParams has no height', () => {
+            createController({ fullHeight: true, minimumHeight: 800 });
+            handlers.get(EmbedEvent.RouteChange)(routeChange('/some/other/path/'));
+            expect(host.setFrameHeight).toHaveBeenCalledWith(800);
+        });
+
+        it('resets when a Liveboard route only appears part way into the path', () => {
+            // The routes are matched as prefixes, not as substrings.
+            createController({ fullHeight: true, minimumHeight: 800 });
+            handlers.get(EmbedEvent.RouteChange)(routeChange('/app/embed/viz/abc'));
+            expect(host.setFrameHeight).toHaveBeenCalledWith(800);
+        });
+
+        it('resets on a Liveboard route missing its trailing slash', () => {
+            createController({ fullHeight: true, minimumHeight: 800 });
+            handlers.get(EmbedEvent.RouteChange)(routeChange('/liveboard'));
+            expect(host.setFrameHeight).toHaveBeenCalledWith(800);
+        });
+
+        it('leaves the height alone when the payload carries no path', () => {
+            createController({ fullHeight: true });
+            handlers.get(EmbedEvent.RouteChange)({ data: {} } as any);
+            expect(host.setFrameHeight).not.toHaveBeenCalled();
+        });
+
+        it('survives a missing payload', () => {
+            createController({ fullHeight: true });
+            expect(() => handlers.get(EmbedEvent.RouteChange)(undefined as any)).not.toThrow();
+            expect(host.setFrameHeight).not.toHaveBeenCalled();
+        });
+
+        it('does not push coordinates on a route change', () => {
+            // Only a height report and the viewport listeners do that.
+            createController({ fullHeight: true });
+            handlers.get(EmbedEvent.RouteChange)(routeChange('/some/other/path/'));
+            expect(host.trigger).not.toHaveBeenCalled();
+        });
+    });
+
+    describe('coordinate requests', () => {
+        it('responds to RequestVisibleEmbedCoordinates with the visible region', () => {
+            createController({ fullHeight: true });
+            const responder = jest.fn();
+            handlers.get(EmbedEvent.RequestVisibleEmbedCoordinates)({} as any, responder);
+            expect(responder).toHaveBeenCalledWith({
+                type: EmbedEvent.RequestVisibleEmbedCoordinates,
+                data: expect.objectContaining({ top: expect.any(Number) }),
+            });
+        });
+
+        it('responds to EmbedIframeCenter with the center of the visible region', () => {
+            createController({ fullHeight: true });
+            const responder = jest.fn();
+            handlers.get(EmbedEvent.EmbedIframeCenter)({} as any, responder);
+            expect(responder).toHaveBeenCalledWith({
+                type: EmbedEvent.EmbedIframeCenter,
+                data: expect.objectContaining({ iframeCenter: expect.any(Number) }),
+            });
+        });
+
+        it('measures the center against the viewport for an unscrolled page', () => {
+            setViewport(0, 768);
+            createController({ fullHeight: true });
+            Object.defineProperty(iFrame, 'offsetHeight', { value: 1000, configurable: true });
+            jest.spyOn(iFrame, 'getBoundingClientRect').mockReturnValue(rectOf(100, 1100));
+
+            const responder = jest.fn();
+            handlers.get(EmbedEvent.EmbedIframeCenter)({} as any, responder);
+            expect(responder.mock.calls[0][0].data).toEqual({
+                iframeCenter: 334,
+                iframeScrolled: -100,
+                iframeHeight: 1000,
+                viewPortHeight: 768,
+                iframeVisibleViewPort: 668,
+            });
+        });
+
+        it('measures the center against the viewport for a scrolled page', () => {
+            setViewport(500, 600);
+            createController({ fullHeight: true });
+            Object.defineProperty(iFrame, 'offsetHeight', { value: 2000, configurable: true });
+            // The element starts at the page top, so it is 500px scrolled.
+            jest.spyOn(iFrame, 'getBoundingClientRect').mockReturnValue(rectOf(-500, 1500));
+
+            const responder = jest.fn();
+            handlers.get(EmbedEvent.EmbedIframeCenter)({} as any, responder);
+            expect(responder.mock.calls[0][0].data).toEqual({
+                iframeCenter: 800,
+                iframeScrolled: 500,
+                iframeHeight: 2000,
+                viewPortHeight: 600,
+                iframeVisibleViewPort: 600,
+            });
+        });
+
+        it('logs the RequestVisibleEmbedCoordinates request', () => {
+            const loggerInfo = jest.spyOn(logger, 'info').mockImplementation(jest.fn());
+            createController({ fullHeight: true });
+            const payload = { type: EmbedEvent.RequestVisibleEmbedCoordinates } as any;
+            handlers.get(EmbedEvent.RequestVisibleEmbedCoordinates)(payload, jest.fn());
+            expect(loggerInfo).toHaveBeenCalledWith(
+                'Sending RequestVisibleEmbedCoordinates',
+                payload,
+            );
+        });
+
+        it('responds with null coordinates when the iframe is not there yet', () => {
+            createController({ fullHeight: true }, { iframe: null });
+            const responder = jest.fn();
+            handlers.get(EmbedEvent.RequestVisibleEmbedCoordinates)({} as any, responder);
+            expect(responder).toHaveBeenCalledWith({
+                type: EmbedEvent.RequestVisibleEmbedCoordinates,
+                data: null,
+            });
+        });
+
+        it('stays silent on EmbedIframeCenter when the iframe is not there yet', () => {
+            createController({ fullHeight: true }, { iframe: null });
+            const responder = jest.fn();
+            handlers.get(EmbedEvent.EmbedIframeCenter)({} as any, responder);
+            expect(responder).not.toHaveBeenCalled();
+        });
+
+        it('survives an app that asks for coordinates without a responder', () => {
+            createController({ fullHeight: true });
+            expect(() => {
+                handlers.get(EmbedEvent.RequestVisibleEmbedCoordinates)({} as any);
+                handlers.get(EmbedEvent.EmbedIframeCenter)({} as any);
+            }).not.toThrow();
+        });
+
+        it('reports the region left uncovered when the embed is off screen', () => {
+            setViewport(0, 768);
+            createController({ fullHeight: true });
+            jest.spyOn(iFrame, 'getBoundingClientRect').mockReturnValue(rectOf(900, 1400));
+            expect(visibleCoordinates()).toEqual({
+                top: 0, height: 0, left: 0, width: 500,
+            });
+        });
+
+        it('clips the visible region to the containers when container lazy loading is on', () => {
+            setViewport(0, 768);
+            const clippingContainer = document.createElement('div');
+            clippingContainer.style.overflow = 'hidden';
+            createController({
+                fullHeight: true,
+                enableScrollableContainerLazyLoading: true,
+            });
+            clippingContainer.appendChild(iFrame);
+            document.body.appendChild(clippingContainer);
+            jest.spyOn(iFrame, 'getBoundingClientRect').mockReturnValue(rectOf(-100, 400));
+            jest.spyOn(clippingContainer, 'getBoundingClientRect')
+                .mockReturnValue(rectOf(50, 300));
+
+            expect(visibleCoordinates()).toEqual({
+                top: 150, height: 250, left: 0, width: 500,
+            });
+        });
+
+        it('ignores the containers when container lazy loading is off', () => {
+            setViewport(0, 768);
+            const clippingContainer = document.createElement('div');
+            clippingContainer.style.overflow = 'hidden';
+            createController({
+                fullHeight: true,
+                enableScrollableContainerLazyLoading: false,
+            });
+            clippingContainer.appendChild(iFrame);
+            document.body.appendChild(clippingContainer);
+            jest.spyOn(iFrame, 'getBoundingClientRect').mockReturnValue(rectOf(-100, 400));
+            jest.spyOn(clippingContainer, 'getBoundingClientRect')
+                .mockReturnValue(rectOf(50, 300));
+
+            expect(visibleCoordinates()).toEqual({
+                top: 100, height: 400, left: 0, width: 500,
+            });
+        });
+
+        it('clips the visible region horizontally too', () => {
+            setViewport(0, 768, 1024);
+            const clippingContainer = document.createElement('div');
+            clippingContainer.style.overflow = 'hidden';
+            createController({ fullHeight: true });
+            clippingContainer.appendChild(iFrame);
+            document.body.appendChild(clippingContainer);
+            jest.spyOn(iFrame, 'getBoundingClientRect').mockReturnValue(rectOf(0, 400, -60, 600));
+            jest.spyOn(clippingContainer, 'getBoundingClientRect')
+                .mockReturnValue(rectOf(0, 400, 40, 500));
+
+            expect(visibleCoordinates()).toEqual({
+                top: 0, height: 400, left: 100, width: 460,
+            });
+        });
+    });
+
+    describe('lazy load listeners', () => {
+        it('attaches window listeners on render and removes them on destroy', () => {
+            const add = jest.spyOn(window, 'addEventListener');
+            const remove = jest.spyOn(window, 'removeEventListener');
+            const controller = createController({
+                fullHeight: true,
+                lazyLoadingForFullHeight: true,
+            });
+
+            controller.onRender();
+            expect(add).toHaveBeenCalledWith('resize', expect.any(Function));
+            expect(add).toHaveBeenCalledWith('scroll', expect.any(Function), true);
+
+            controller.destroy();
+            expect(remove).toHaveBeenCalledWith('resize', expect.any(Function));
+            expect(remove).toHaveBeenCalledWith('scroll', expect.any(Function), true);
+        });
+
+        it('attaches nothing when lazy loading is off', () => {
+            const add = jest.spyOn(window, 'addEventListener');
+            createController({
+                fullHeight: true,
+                lazyLoadingForFullHeight: false,
+            }).onRender();
+            expect(add).not.toHaveBeenCalled();
+        });
+
+        it('attaches nothing when fullHeight is off', () => {
+            const add = jest.spyOn(window, 'addEventListener');
+            createController({ lazyLoadingForFullHeight: true }).onRender();
+            expect(add).not.toHaveBeenCalled();
+        });
+
+        it('attaches nothing when the iframe has not rendered yet', () => {
+            const add = jest.spyOn(window, 'addEventListener');
+            createController({ fullHeight: true }, { iframe: null }).onRender();
+            expect(add).not.toHaveBeenCalled();
+        });
+
+        it('removes nothing on destroy when lazy loading is off', () => {
+            const remove = jest.spyOn(window, 'removeEventListener');
+            createController({
+                fullHeight: true,
+                lazyLoadingForFullHeight: false,
+            }).destroy();
+            expect(remove).not.toHaveBeenCalled();
+        });
+
+        it('pushes the visible coordinates on a window scroll and resize', () => {
+            const controller = createController({ fullHeight: true });
+            controller.onRender();
+
+            window.dispatchEvent(new Event('scroll'));
+            expect(host.trigger).toHaveBeenCalledWith(
+                HostEvent.VisibleEmbedCoordinates,
+                expect.objectContaining({ top: expect.any(Number) }),
+            );
+
+            (host.trigger as jest.Mock).mockClear();
+            window.dispatchEvent(new Event('resize'));
+            expect(host.trigger).toHaveBeenCalledTimes(1);
+
+            controller.destroy();
+            (host.trigger as jest.Mock).mockClear();
+            window.dispatchEvent(new Event('scroll'));
+            window.dispatchEvent(new Event('resize'));
+            expect(host.trigger).not.toHaveBeenCalled();
+        });
+
+        it('pushes the visible coordinates for a scroll inside a nested element', () => {
+            // The window scroll listener is registered in the capture phase, so
+            // a scroll on an inner element reaches it too.
+            const controller = createController({ fullHeight: true });
+            controller.onRender();
+            iFrame.dispatchEvent(new Event('scroll', { bubbles: false }));
+            expect(host.trigger).toHaveBeenCalledWith(
+                HostEvent.VisibleEmbedCoordinates,
+                expect.objectContaining({ top: expect.any(Number) }),
+            );
+            controller.destroy();
+        });
+
+        it('picks the listeners back up when the embed re-renders after destroy', () => {
+            const controller = createController({ fullHeight: true });
+            controller.onRender();
+            controller.destroy();
+
+            controller.onRender();
+            window.dispatchEvent(new Event('scroll'));
+            expect(host.trigger).toHaveBeenCalledWith(
+                HostEvent.VisibleEmbedCoordinates,
+                expect.objectContaining({ top: expect.any(Number) }),
+            );
+            controller.destroy();
+        });
+
+        it('does not stack duplicate window listeners across renders', () => {
+            const add = jest.spyOn(window, 'addEventListener');
+            const controller = createController({ fullHeight: true });
+
+            controller.onRender();
+            controller.onRender();
+            const scrollHandlers = add.mock.calls
+                .filter(([eventType]) => eventType === 'scroll')
+                .map(([, handler]) => handler);
+            // The same reference is re-added, so the browser keeps a
+            // single listener.
+            expect(scrollHandlers).toHaveLength(2);
+            expect(scrollHandlers[0]).toBe(scrollHandlers[1]);
+
+            controller.destroy();
+            (host.trigger as jest.Mock).mockClear();
+            window.dispatchEvent(new Event('scroll'));
+            expect(host.trigger).not.toHaveBeenCalled();
+        });
+
+        it('observes the scrollable ancestors when container lazy loading is on', () => {
+            const {
+                controller, addContainerListener, removeContainerListener, observe, disconnect,
+            } = mountInScrollContainer({
+                fullHeight: true,
+                lazyLoadingForFullHeight: true,
+                enableScrollableContainerLazyLoading: true,
+            });
+
+            controller.onRender();
+            expect(addContainerListener).toHaveBeenCalledWith('scroll', expect.any(Function));
+            expect(observe).toHaveBeenCalled();
+
+            controller.destroy();
+            expect(removeContainerListener).toHaveBeenCalledWith('scroll', expect.any(Function));
+            expect(disconnect).toHaveBeenCalled();
+        });
+
+        it('pushes the visible coordinates on a container scroll', () => {
+            const { controller, scrollContainer } = mountInScrollContainer({ fullHeight: true });
+            controller.onRender();
+
+            scrollContainer.dispatchEvent(new Event('scroll'));
+            expect(host.trigger).toHaveBeenCalledWith(
+                HostEvent.VisibleEmbedCoordinates,
+                expect.objectContaining({ top: expect.any(Number) }),
+            );
+
+            controller.destroy();
+            (host.trigger as jest.Mock).mockClear();
+            scrollContainer.dispatchEvent(new Event('scroll'));
+            expect(host.trigger).not.toHaveBeenCalled();
+        });
+
+        it('pushes the visible coordinates when an observed container resizes', () => {
+            const { controller, fireResizeObserver } = mountInScrollContainer({ fullHeight: true });
+            controller.onRender();
+
+            fireResizeObserver();
+            expect(host.trigger).toHaveBeenCalledWith(
+                HostEvent.VisibleEmbedCoordinates,
+                expect.objectContaining({ top: expect.any(Number) }),
+            );
+            controller.destroy();
+        });
+
+        it('observes the iframe parent even without a scrollable ancestor', () => {
+            const observe = jest.fn();
+            (window as any).ResizeObserver = jest.fn(() => ({
+                observe,
+                disconnect: jest.fn(),
+            }));
+
+            const controller = createController({ fullHeight: true });
+            controller.onRender();
+            expect(observe).toHaveBeenCalledWith(iFrame.parentElement);
+            controller.destroy();
+        });
+
+        it('observes each resize target only once', () => {
+            const { controller, scrollContainer, observe } = mountInScrollContainer({
+                fullHeight: true,
+            });
+            // The parent is also the clipping ancestor, so it must not
+            // be observed twice.
+            jest.spyOn(iFrame, 'getBoundingClientRect').mockReturnValue(rectOf(-100, 400));
+            jest.spyOn(scrollContainer, 'getBoundingClientRect').mockReturnValue(rectOf(50, 300));
+
+            controller.onRender();
+            expect(observe).toHaveBeenCalledTimes(1);
+            expect(observe).toHaveBeenCalledWith(scrollContainer);
+            controller.destroy();
+        });
+
+        it('does not touch the containers when container lazy loading is off', () => {
+            const { controller, addContainerListener, resizeObserverCtor } = mountInScrollContainer(
+                {
+                    fullHeight: true,
+                    lazyLoadingForFullHeight: true,
+                    enableScrollableContainerLazyLoading: false,
+                },
+            );
+
+            controller.onRender();
+            expect(addContainerListener).not.toHaveBeenCalled();
+            expect(resizeObserverCtor).not.toHaveBeenCalled();
+        });
+
+        it('still tracks the containers in an environment without ResizeObserver', () => {
+            const { controller, addContainerListener } = mountInScrollContainer(
+                { fullHeight: true },
+                { withResizeObserver: false },
+            );
+
+            expect(() => controller.onRender()).not.toThrow();
+            expect(addContainerListener).toHaveBeenCalledWith('scroll', expect.any(Function));
+            expect(() => controller.destroy()).not.toThrow();
+        });
+
+        it('drops the previous containers when the embed re-renders', () => {
+            const {
+                controller, removeContainerListener, disconnect,
+            } = mountInScrollContainer({ fullHeight: true });
+
+            controller.onRender();
+            controller.onRender();
+            expect(removeContainerListener).toHaveBeenCalledWith('scroll', expect.any(Function));
+            expect(disconnect).toHaveBeenCalledTimes(1);
+            controller.destroy();
+        });
+
+        it('is safe to destroy more than once', () => {
+            const { controller } = mountInScrollContainer({ fullHeight: true });
+            controller.onRender();
+            controller.destroy();
+            expect(() => controller.destroy()).not.toThrow();
+        });
+
+        it('is safe to destroy before the embed has rendered', () => {
+            const controller = createController({ fullHeight: true });
+            expect(() => controller.destroy()).not.toThrow();
+        });
+    });
+});