@thoughtspot/visual-embed-sdk 1.5.1 → 1.6.0

package/lib/src/visual-embed-sdk.d.ts

@@ -12,10 +12,10 @@ declare module '@thoughtspot/visual-embed-sdk' {
       */
     import { AppEmbed, Page, AppViewConfig } from '@thoughtspot/visual-embed-sdk/embed/app';
     import { init, prefetch } from '@thoughtspot/visual-embed-sdk/embed/base';
-    import { PinboardEmbed, PinboardViewConfig } from '@thoughtspot/visual-embed-sdk/embed/pinboard';
+    import { PinboardEmbed, LiveboardViewConfig, LiveboardEmbed } from '@thoughtspot/visual-embed-sdk/embed/liveboard';
     import { SearchEmbed, SearchViewConfig } from '@thoughtspot/visual-embed-sdk/embed/search';
     import { AuthType, RuntimeFilter, RuntimeFilterOp, EmbedEvent, HostEvent, DataSourceVisualMode, Action, EmbedConfig } from '@thoughtspot/visual-embed-sdk/types';
-    export { init, prefetch, SearchEmbed, PinboardEmbed, AppEmbed, Page, AuthType, RuntimeFilter, RuntimeFilterOp, EmbedEvent, HostEvent, DataSourceVisualMode, Action, EmbedConfig, SearchViewConfig, PinboardViewConfig, AppViewConfig, };
+    export { init, prefetch, SearchEmbed, PinboardEmbed, LiveboardEmbed, AppEmbed, Page, AuthType, RuntimeFilter, RuntimeFilterOp, EmbedEvent, HostEvent, DataSourceVisualMode, Action, EmbedConfig, SearchViewConfig, LiveboardViewConfig, AppViewConfig, };
 }
 
 declare module '@thoughtspot/visual-embed-sdk/embed/app' {
@@ -48,7 +48,11 @@ declare module '@thoughtspot/visual-embed-sdk/embed/app' {
                 */
             Answers = "answers",
             /**
-                * Pinboards listing page
+                * Liveboards listing page
+                */
+            Liveboards = "liveboards",
+            /**
+                * @hidden
                 */
             Pinboards = "pinboards",
             /**
@@ -84,7 +88,7 @@ declare module '@thoughtspot/visual-embed-sdk/embed/app' {
             pageId?: Page;
             /**
                 * This puts a filter tag on the application. All metadata lists in the application, such as
-                * pinboards and answers, would be filtered by this tag.
+                * Liveboards and answers, would be filtered by this tag.
                 */
             tag?: string;
             /**
@@ -99,6 +103,13 @@ declare module '@thoughtspot/visual-embed-sdk/embed/app' {
     export class AppEmbed extends V1Embed {
             protected viewConfig: AppViewConfig;
             constructor(domSelector: DOMSelector, viewConfig: AppViewConfig);
+            /**
+                * Navigate to particular page for app embed. eg:answers/pinboards/home
+                * This is used for embedding answers, pinboards, visualizations and full application only.
+                * @param path The string, set to iframe src and navigate to new page
+                * eg: appEmbed.navigateToPage('pinboards')
+                */
+            navigateToPage(path: string): void;
             /**
                 * Renders the embedded application pages in the ThoughtSpot app.
                 * @param renderOptions An object containing the page ID
@@ -136,35 +147,35 @@ declare module '@thoughtspot/visual-embed-sdk/embed/base' {
     export const renderInQueue: (fn: (next?: (val?: any) => void) => void) => void;
 }
 
-declare module '@thoughtspot/visual-embed-sdk/embed/pinboard' {
+declare module '@thoughtspot/visual-embed-sdk/embed/liveboard' {
     /**
         * Copyright (c) 2021
         *
-        * Embed a ThoughtSpot pinboard or visualization
+        * Embed a ThoughtSpot Liveboard or visualization
         * https://developers.thoughtspot.com/docs/?pageid=embed-pinboard
         * https://developers.thoughtspot.com/docs/?pageid=embed-a-viz
         *
-        * @summary Pinboard & visualization embed
+        * @summary Liveboard & visualization embed
         * @author Ayon Ghosh <ayon.ghosh@thoughtspot.com>
         */
     import { DOMSelector } from '@thoughtspot/visual-embed-sdk/types';
     import { V1Embed, ViewConfig } from '@thoughtspot/visual-embed-sdk/embed/ts-embed';
     /**
-        * The configuration for the embedded pinboard or visualization page view.
-        * @Category Pinboards and Charts
+        * The configuration for the embedded Liveboard or visualization page view.
+        * @Category Liveboards and Charts
         */
-    export interface PinboardViewConfig extends ViewConfig {
+    export interface LiveboardViewConfig extends ViewConfig {
             /**
                 * If set to true, the embedded object container dynamically resizes
-                * according to the height of the pinboard.
+                * according to the height of the Liveboard.
                 */
             fullHeight?: boolean;
             /**
-                * This is the minimum height(in pixels) for a full height pinboard.
-                * Setting this height helps resolves issues with empty pinboards and
-                * other screens navigable from a pinboard.
+                * This is the minimum height(in pixels) for a full height Liveboard.
+                * Setting this height helps resolves issues with empty Liveboards and
+                * other screens navigable from a Liveboard.
+                * *_since 1.5.0_
                 * @default 500
-                * * _since 1.5.0_
                 */
             defaultHeight?: number;
             /**
@@ -172,38 +183,48 @@ declare module '@thoughtspot/visual-embed-sdk/embed/pinboard' {
                 */
             enableVizTransformations?: boolean;
             /**
-                * The pinboard to display in the embedded view.
+                * The Liveboard to display in the embedded view.
+                * Use either of liveboardId or pinboardId to reference the Liveboard to embed.
                 */
-            pinboardId: string;
+            liveboardId?: string;
             /**
-                * The visualization within the pinboard to display.
+                * To support backward compatibilty
+                * @hidden
+                */
+            pinboardId?: string;
+            /**
+                * The visualization within the Liveboard to display.
                 */
             vizId?: string;
             /**
                 * If set to true, all filter chips from a
-                * pinboard page will be read-only (no X buttons)
+                * Liveboard page will be read-only (no X buttons)
                 */
-            preventPinboardFilterRemoval?: boolean;
+            preventLiveboardFilterRemoval?: boolean;
             /**
-                * An array of vizids which should be visible when this pinboard loads.
-                * The ids not in this array are hidden from the pinboard.
-                * _since: 1.6.0_
+                * To support backward compatibilty
+                * @hidden
                 */
-            pinboardVisibleVizs?: string[];
+            preventPinboardFilterRemoval?: boolean;
     }
     /**
-        * Embed a ThoughtSpot pinboard or visualization
-        * @Category Pinboards and Charts
+        * Embed a ThoughtSpot Liveboard or visualization
+        * @Category Liveboards and Charts
         */
-    export class PinboardEmbed extends V1Embed {
-            protected viewConfig: PinboardViewConfig;
-            constructor(domSelector: DOMSelector, viewConfig: PinboardViewConfig);
+    export class LiveboardEmbed extends V1Embed {
+            protected viewConfig: LiveboardViewConfig;
+            constructor(domSelector: DOMSelector, viewConfig: LiveboardViewConfig);
             /**
-                * Render an embedded ThoughtSpot pinboard or visualization
-                * @param renderOptions An object specifying the pinboard ID,
+                * Render an embedded ThoughtSpot Liveboard or visualization
+                * @param renderOptions An object specifying the Liveboard ID,
                 * visualization ID and the runtime filters.
                 */
-            render(): PinboardEmbed;
+            render(): LiveboardEmbed;
+    }
+    /**
+        * @hidden
+        */
+    export class PinboardEmbed extends LiveboardEmbed {
     }
 }
 
@@ -411,12 +432,13 @@ declare module '@thoughtspot/visual-embed-sdk/types' {
                 * When there are multiple embeds, queue the render of embed to start
                 *  after the previous embed's render is complete. This helps in the load performance
                 *  by decreasing the load on the browser.
+                * @version 1.5.0 or later
                 * @default false
                 */
             queueMultiRenders?: boolean;
             /**
                 * Dynamic CSS Url to be injected in the loaded application.
-                * _Since: 1.6.0_
+                * @version 1.6.0 or later
                 * @default ''
                 */
             customCssUrl?: string;
@@ -492,7 +514,7 @@ declare module '@thoughtspot/visual-embed-sdk/types' {
             IN = "IN"
     }
     /**
-        * A filter that can be applied to ThoughtSpot answers, pinboards, or
+        * A filter that can be applied to ThoughtSpot answers, Liveboards, or
         * visualizations at runtime.
         */
     export interface RuntimeFilter {
@@ -530,12 +552,12 @@ declare module '@thoughtspot/visual-embed-sdk/types' {
                 */
             Load = "load",
             /**
-                * Data pertaining to answer or pinboard is received
-                * @return data - The answer or pinboard data
+                * Data pertaining to answer or Liveboard is received
+                * @return data - The answer or Liveboard data
                 */
             Data = "data",
             /**
-                * Search/answer/pinboard filters have been applied/updated
+                * Search/answer/Liveboard filters have been applied/updated
                 * @hidden
                 */
             FiltersChanged = "filtersChanged",
@@ -558,13 +580,13 @@ declare module '@thoughtspot/visual-embed-sdk/types' {
             /**
                 * A custom action has been triggered
                 * @return actionId - The id of the custom action
-                * @return data - The answer or pinboard data
+                * @return data - The answer or Liveboard data
                 */
             CustomAction = "customAction",
             /**
                 * A double click has been triggered on table/chart
                 * @return ContextMenuInputPoints - data point that is double clicked
-                * * _since: 1.5.0_
+                * @version 1.5.0 or later
                 */
             VizPointDoubleClick = "vizPointDoubleClick",
             /**
@@ -582,8 +604,8 @@ declare module '@thoughtspot/visual-embed-sdk/types' {
                 */
             AuthExpire = "ThoughtspotAuthExpired",
             /**
-                * The height of the embedded pinboard or visualization has been computed.
-                * @return data - The height of the embedded pinboard or visualization
+                * The height of the embedded Liveboard or visualization has been computed.
+                * @return data - The height of the embedded Liveboard or visualization
                 * @hidden
                 */
             EmbedHeight = "EMBED_HEIGHT",
@@ -595,7 +617,6 @@ declare module '@thoughtspot/visual-embed-sdk/types' {
             EmbedIframeCenter = "EmbedIframeCenter",
             /**
                 * Detects the route change.
-                * @hidden
                 */
             RouteChange = "ROUTE_CHANGE",
             /**
@@ -607,7 +628,7 @@ declare module '@thoughtspot/visual-embed-sdk/types' {
                 * Emitted when the embed does not have cookie access. This
                 * happens on Safari where third-party cookies are blocked by default.
                 *
-                * @version 1.1.0
+                * @version 1.1.0 or later
                 */
             NoCookieAccess = "noCookieAccess",
             /**
@@ -618,12 +639,12 @@ declare module '@thoughtspot/visual-embed-sdk/types' {
             SAMLComplete = "samlComplete",
             /**
                 * Emitted when any modal is opened in the app
-                * * _since: 1.6.0_
+                * @version 1.6.0 or later
                 */
             DialogOpen = "dialog-open",
             /**
                 * Emitted when any modal is closed in the app
-                * * _since: 1.6.0_
+                * @version 1.6.0 or later
                 */
             DialogClose = "dialog-close"
     }
@@ -644,7 +665,7 @@ declare module '@thoughtspot/visual-embed-sdk/types' {
                 *              eg. { selectedPoints: []}
                 * @param columnGuid - a string guid of the column to drill by. This is optional,
                 *                     if not provided it will auto drill by the configured column. \
-                * * _since: 1.5.0_
+                * @version 1.5.0 or later
                 */
             DrillDown = "triggerDrillDown",
             /**
@@ -658,10 +679,10 @@ declare module '@thoughtspot/visual-embed-sdk/types' {
                 */
             Reload = "reload",
             /**
-                * Set the visible Vizs on a pinboard/liveboard.
-                * @param - an array of ids of vizs to show, the ids not passed
+                * Set the visible visualizations on a Liveboard.
+                * @param - an array of ids of visualizations to show, the ids not passed
                 *          will be hidden.
-                * _since: 1.5.0_
+                * @version 1.6.0 or later
                 */
             SetVisibleVizs = "SetPinboardVisibleVizs"
     }
@@ -694,7 +715,7 @@ declare module '@thoughtspot/visual-embed-sdk/types' {
             DisableActions = "disableAction",
             DisableActionReason = "disableHint",
             ForceTable = "forceTable",
-            preventPinboardFilterRemoval = "preventPinboardFilterRemoval",
+            preventLiveboardFilterRemoval = "preventPinboardFilterRemoval",
             SearchQuery = "searchQuery",
             HideActions = "hideAction",
             HideObjects = "hideObjects",
@@ -712,12 +733,11 @@ declare module '@thoughtspot/visual-embed-sdk/types' {
             ViewPortHeight = "viewPortHeight",
             ViewPortWidth = "viewPortWidth",
             VisibleActions = "visibleAction",
-            CustomCSSUrl = "customCssUrl",
-            PinboardVisibleVizs = "pinboardVisibleVizs"
+            CustomCSSUrl = "customCssUrl"
     }
     /**
         * The list of actions that can be performed on visual ThoughtSpot
-        * entities, such as answers and pinboards.
+        * entities, such as answers and Liveboards.
         */
     export enum Action {
             Save = "save",
@@ -727,7 +747,6 @@ declare module '@thoughtspot/visual-embed-sdk/types' {
             MakeACopy = "makeACopy",
             EditACopy = "editACopy",
             CopyLink = "embedDocument",
-            PinboardSnapshot = "pinboardSnapshot",
             ResetLayout = "resetLayout",
             Schedule = "schedule",
             SchedulesList = "schedule-list",
@@ -760,7 +779,11 @@ declare module '@thoughtspot/visual-embed-sdk/types' {
             Describe = "describe",
             Relate = "relate",
             CustomizeHeadlines = "customizeHeadlines",
+            /**
+                * @hidden
+                */
             PinboardInfo = "pinboardInfo",
+            LiveboardInfo = "pinboardInfo",
             SendAnswerFeedback = "sendFeedback",
             /**
                 * @deprecated Will be removed in next version
@@ -865,7 +888,7 @@ declare module '@thoughtspot/visual-embed-sdk/embed/ts-embed' {
             visibleActions?: Action[];
             /**
                 * The list of runtime filters to apply to a search answer,
-                * visualization, or pinboard.
+                * visualization, or Liveboard.
                 */
             runtimeFilters?: RuntimeFilter[];
     }
@@ -904,7 +927,7 @@ declare module '@thoughtspot/visual-embed-sdk/embed/ts-embed' {
             protected getBaseQueryParams(): {};
             /**
                 * Constructs the base URL string to load v1 of the ThoughtSpot app.
-                * This is used for embedding pinboards, visualizations, and full application.
+                * This is used for embedding Liveboards, visualizations, and full application.
                 * @param queryString The query string to append to the URL.
                 * @param isAppEmbed A Boolean parameter to specify if you are embedding
                 * the full application.
@@ -963,15 +986,6 @@ declare module '@thoughtspot/visual-embed-sdk/embed/ts-embed' {
                 * @param callback A callback function
                 */
             on(messageType: EmbedEvent, callback: MessageCallback): typeof TsEmbed.prototype;
-            /**
-                * Navigates users to the specified application page.
-                * Use this method to navigate users from the embedded
-                * ThoughtSpot context to a specific page in your app.
-                * @param path The page path string.
-                * For example, to navigate users to a pinboard page,
-                * define the method as navigateToPage('pinboard/&lt;pinboardId&gt;').
-                */
-            navigateToPage(path: string): void;
             /**
                 * Triggers an event to the embedded app
                 * @param messageType The event type

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@thoughtspot/visual-embed-sdk",
-    "version": "1.5.1",
+    "version": "1.6.0",
     "description": "ThoughtSpot Embed SDK",
     "module": "lib/src/index.js",
     "main": "dist/tsembed.js",
@@ -127,6 +127,9 @@
         "type": "git",
         "url": "git+https://github.com/thoughtspot/visual-embed-sdk.git"
     },
+    "publishConfig": {
+        "registry": "https://registry.npmjs.org"
+    },
     "keywords": [
         "thoughtspot",
         "everywhere",

package/src/embed/app.spec.ts

@@ -8,6 +8,7 @@ import {
     getRootEl,
 } from '../test/test-utils';
 import { version } from '../../package.json';
+import * as config from '../config';
 
 const defaultViewConfig = {
     frameParams: {
@@ -17,6 +18,7 @@ const defaultViewConfig = {
 };
 const thoughtSpotHost = 'tshost';
 const defaultParams = `&hostAppUrl=local-host&viewPortHeight=768&viewPortWidth=1024&sdkVersion=${version}`;
+const defaultParamsForPinboardEmbed = `hostAppUrl=local-host&viewPortHeight=768&viewPortWidth=1024&sdkVersion=${version}`;
 
 beforeAll(() => {
     init({
@@ -76,6 +78,7 @@ describe('App embed tests', () => {
             [Page.Search]: 'answer',
             [Page.Answers]: 'answers',
             [Page.Pinboards]: 'pinboards',
+            [Page.Liveboards]: 'pinboards',
             [Page.Data]: 'data/tables',
             [Page.Home]: 'home',
         };
@@ -167,4 +170,42 @@ describe('App embed tests', () => {
             );
         });
     });
+
+    describe('Naviage to Page API', () => {
+        const path = 'pinboard/e0836cad-4fdf-42d4-bd97-567a6b2a6058';
+        beforeEach(() => {
+            jest.spyOn(config, 'getThoughtSpotHost').mockImplementation(
+                () => 'http://tshost',
+            );
+        });
+
+        test('when app is AppEmbed after navigateToPage function call, new path should be set to iframe', async () => {
+            const appEmbed = new AppEmbed(getRootEl(), {
+                frameParams: {
+                    width: '100%',
+                    height: '100%',
+                },
+            });
+            await appEmbed.render();
+            appEmbed.navigateToPage(path);
+            expect(getIFrameSrc()).toBe(
+                `http://${thoughtSpotHost}/?embedApp=true&primaryNavHidden=true&profileAndHelpInNavBarHidden=false&${defaultParamsForPinboardEmbed}#/${path}`,
+            );
+        });
+
+        test('navigateToPage function use before render', async () => {
+            spyOn(console, 'log');
+            const appEmbed = new AppEmbed(getRootEl(), {
+                frameParams: {
+                    width: '100%',
+                    height: '100%',
+                },
+            });
+            appEmbed.navigateToPage(path);
+            await appEmbed.render();
+            expect(console.log).toHaveBeenCalledWith(
+                'Please call render before invoking this method',
+            );
+        });
+    });
 });

package/src/embed/app.ts

@@ -31,7 +31,11 @@ export enum Page {
      */
     Answers = 'answers',
     /**
-     * Pinboards listing page
+     * Liveboards listing page
+     */
+    Liveboards = 'liveboards',
+    /**
+     * @hidden
      */
     Pinboards = 'pinboards',
     /**
@@ -68,7 +72,7 @@ export interface AppViewConfig extends ViewConfig {
     pageId?: Page;
     /**
      * This puts a filter tag on the application. All metadata lists in the application, such as
-     * pinboards and answers, would be filtered by this tag.
+     * Liveboards and answers, would be filtered by this tag.
      */
     tag?: string;
     /**
@@ -91,7 +95,7 @@ export class AppEmbed extends V1Embed {
 
     /**
      * Constructs a map of parameters to be passed on to the
-     * embedded pinboard or visualization.
+     * embedded Liveboard or visualization.
      */
     private getEmbedParams() {
         const params = this.getBaseQueryParams();
@@ -139,6 +143,8 @@ export class AppEmbed extends V1Embed {
                 return 'answer';
             case Page.Answers:
                 return 'answers';
+            case Page.Liveboards:
+                return 'pinboards';
             case Page.Pinboards:
                 return 'pinboards';
             case Page.Data:
@@ -167,6 +173,25 @@ export class AppEmbed extends V1Embed {
         return path;
     }
 
+    /**
+     * Navigate to particular page for app embed. eg:answers/pinboards/home
+     * This is used for embedding answers, pinboards, visualizations and full application only.
+     * @param path The string, set to iframe src and navigate to new page
+     * eg: appEmbed.navigateToPage('pinboards')
+     */
+    public navigateToPage(path: string): void {
+        if (this.iFrame) {
+            const iframeSrc = this.iFrame.src;
+            const embedPath = '#/embed';
+            const currentPath = iframeSrc.includes(embedPath) ? embedPath : '#';
+            this.iFrame.src = `${
+                iframeSrc.split(currentPath)[0]
+            }${currentPath}/${path.replace(/^\/?#?\//, '')}`;
+        } else {
+            console.log('Please call render before invoking this method');
+        }
+    }
+
     /**
      * Renders the embedded application pages in the ThoughtSpot app.
      * @param renderOptions An object containing the page ID

package/src/embed/events.spec.ts

@@ -4,6 +4,7 @@ import {
     EmbedEvent,
     SearchEmbed,
     PinboardEmbed,
+    LiveboardEmbed,
     HostEvent,
 } from '../index';
 import {
@@ -15,7 +16,7 @@ import {
     getRootEl2,
     postMessageToParent,
 } from '../test/test-utils';
-import { PinboardViewConfig } from './pinboard';
+import { LiveboardViewConfig } from './liveboard';
 
 const thoughtSpotHost = 'tshost';
 const defaultViewConfig = {
@@ -119,8 +120,14 @@ describe('test communication between host app and ThoughtSpot', () => {
         const embedTwo = new PinboardEmbed(getRootEl2(), {
             ...defaultViewConfig,
             pinboardId: 'eca215d4-0d2c-4a55-90e3-d81ef6848ae0',
-        } as PinboardViewConfig);
+        } as LiveboardViewConfig);
+        const spyThree = jest.fn();
+        const embedThree = new LiveboardEmbed(getRootEl2(), {
+            ...defaultViewConfig,
+            liveboardId: 'eca215d4-0d2c-4a55-90e3-d81ef6848ae0',
+        } as LiveboardViewConfig);
         embedTwo.on(EmbedEvent.CustomAction, spyTwo).render();
+        embedThree.on(EmbedEvent.CustomAction, spyThree).render();
 
         await executeAfterWait(() => {
             const iframeOne = getIFrameEl();
@@ -133,15 +140,34 @@ describe('test communication between host app and ThoughtSpot', () => {
         await executeAfterWait(() => {
             expect(spyOne).toHaveBeenCalled();
             expect(spyTwo).not.toHaveBeenCalled();
+            expect(spyThree).not.toHaveBeenCalled();
         }, EVENT_WAIT_TIME);
     });
 
     test('send getIframeCenter Event without eventPort', async () => {
+        const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
+            ...defaultViewConfig,
+            fullHeight: true,
+            pinboardId: 'eca215d4-0d2c-4a55-90e3-d81ef6848ae0',
+        } as LiveboardViewConfig);
+        liveboardEmbed.render();
+        const spy1 = jest.spyOn(global.console, 'log');
+
+        await executeAfterWait(() => {
+            const iframe = getIFrameEl();
+            postMessageToParent(iframe.contentWindow, {
+                type: EmbedEvent.EmbedIframeCenter,
+                data: PAYLOAD,
+            });
+        });
+        expect(spy1).toHaveBeenCalledWith('Event Port is not defined');
+    });
+    test('send getIframeCenter Event without eventPort - pinboard', async () => {
         const pinboardEmbed = new PinboardEmbed(getRootEl(), {
             ...defaultViewConfig,
             fullHeight: true,
             pinboardId: 'eca215d4-0d2c-4a55-90e3-d81ef6848ae0',
-        } as PinboardViewConfig);
+        } as LiveboardViewConfig);
         pinboardEmbed.render();
         const spy1 = jest.spyOn(global.console, 'log');
 
@@ -155,12 +181,12 @@ describe('test communication between host app and ThoughtSpot', () => {
         expect(spy1).toHaveBeenCalledWith('Event Port is not defined');
     });
 
-    test('send getIframeCenter Event with eventPort', async () => {
+    test('send getIframeCenter Event with eventPort - pinboard', async () => {
         const pinboardEmbed = new PinboardEmbed(getRootEl(), {
             ...defaultViewConfig,
             fullHeight: true,
             pinboardId: 'eca215d4-0d2c-4a55-90e3-d81ef6848ae0',
-        } as PinboardViewConfig);
+        } as LiveboardViewConfig);
         pinboardEmbed.render();
         const mockPort: any = {
             postMessage: jest.fn(),
@@ -188,4 +214,37 @@ describe('test communication between host app and ThoughtSpot', () => {
         };
         expect(mockPort.postMessage).toHaveBeenCalledWith(heightObj);
     });
+    test('send getIframeCenter Event with eventPort', async () => {
+        const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
+            ...defaultViewConfig,
+            fullHeight: true,
+            pinboardId: 'eca215d4-0d2c-4a55-90e3-d81ef6848ae0',
+        } as LiveboardViewConfig);
+        liveboardEmbed.render();
+        const mockPort: any = {
+            postMessage: jest.fn(),
+        };
+        await executeAfterWait(() => {
+            const iframe = getIFrameEl();
+            postMessageToParent(
+                iframe.contentWindow,
+                {
+                    type: EmbedEvent.EmbedIframeCenter,
+                    data: PAYLOAD,
+                },
+                mockPort,
+            );
+        });
+        const heightObj = {
+            data: {
+                iframeCenter: 0,
+                iframeHeight: 0,
+                iframeScrolled: 0,
+                iframeVisibleViewPort: 0,
+                viewPortHeight: 768,
+            },
+            type: EmbedEvent.EmbedIframeCenter,
+        };
+        expect(mockPort.postMessage).toHaveBeenCalledWith(heightObj);
+    });
 });