');
expect(getRootEl().innerHTML).toContain('
test
');
});
libEmbed.test__executeCallbacks(EmbedEvent.Data, {});
await executeAfterWait(() => {
expect(getRootEl().innerHTML).not.toContain('ts-viz-preview-loader');
});
});
test('it should navigateToLiveboard with liveboard id is not passed with EmbedListenerReady event', async () => {
mockMessageChannel();
const consoleSpy = jest.spyOn(console, 'error');
const testPreRenderId = 'testPreRender';
const libEmbed = new LiveboardEmbed(getRootEl(), {
preRenderId: testPreRenderId,
});
let resizeObserverCb: any;
(window as any).ResizeObserver =
window.ResizeObserver ||
jest.fn().mockImplementation((resizeObserverCbParam: any) => {
resizeObserverCb = resizeObserverCbParam;
return {
disconnect: jest.fn(),
observe: jest.fn(),
unobserve: jest.fn(),
};
});
await libEmbed.preRender();
await waitFor(() => !!getIFrameEl());
const ts = '__tsEmbed';
expect((document.getElementById(libEmbed.getPreRenderIds().wrapper) as any)[ts]).toEqual(
libEmbed,
);
await executeAfterWait(() => {
const iframe = getIFrameEl();
postMessageToParent(iframe.contentWindow, {
type: EmbedEvent.EmbedListenerReady,
});
});
const testLiveboardId = 'testLiveboardId';
const newLibEmbed = new LiveboardEmbed(getRootEl(), {
preRenderId: testPreRenderId,
liveboardId: testLiveboardId,
vizId: 'testVizId',
activeTabId: 'testActiveTabId',
});
const navigateToLiveboardSpy = jest.spyOn(newLibEmbed, 'navigateToLiveboard');
await newLibEmbed.showPreRender();
await executeAfterWait(() => {
const iFrame = document.getElementById(
libEmbed.getPreRenderIds().child,
) as HTMLIFrameElement;
// should render the generic link
expect(navigateToLiveboardSpy).toHaveBeenCalledWith(
testLiveboardId,
'testVizId',
'testActiveTabId',
undefined,
);
expect(iFrame.src).toMatch(/http:\/\/tshost\/.*&isLiveboardEmbed=true.*#$/);
expect(consoleSpy).toHaveBeenCalledTimes(0);
});
});
test('it should navigateToLiveboard with liveboard id is not passed with AuthInit event', async () => {
mockMessageChannel();
const consoleSpy = jest.spyOn(console, 'error');
const testPreRenderId = 'testPreRender';
const libEmbed = new LiveboardEmbed(getRootEl(), {
preRenderId: testPreRenderId,
});
mockGetSessionInfo();
let resizeObserverCb: any;
(window as any).ResizeObserver =
window.ResizeObserver ||
jest.fn().mockImplementation((resizeObserverCbParam: any) => {
resizeObserverCb = resizeObserverCbParam;
return {
disconnect: jest.fn(),
observe: jest.fn(),
unobserve: jest.fn(),
};
});
await libEmbed.preRender();
await waitFor(() => !!getIFrameEl());
const ts = '__tsEmbed';
expect((document.getElementById(libEmbed.getPreRenderIds().wrapper) as any)[ts]).toEqual(
libEmbed,
);
const testLiveboardId = 'testLiveboardId';
const newLibEmbed = new LiveboardEmbed(getRootEl(), {
preRenderId: testPreRenderId,
liveboardId: testLiveboardId,
vizId: 'testVizId',
activeTabId: 'testActiveTabId',
});
const navigateToLiveboardSpy = jest.spyOn(newLibEmbed, 'navigateToLiveboard');
await newLibEmbed.showPreRender();
await executeAfterWait(() => {
const iFrame = document.getElementById(
newLibEmbed.getPreRenderIds().child,
) as HTMLIFrameElement;
postMessageToParent(iFrame.contentWindow, {
type: EmbedEvent.AuthInit,
});
});
await executeAfterWait(() => {
const iFrame = document.getElementById(
libEmbed.getPreRenderIds().child,
) as HTMLIFrameElement;
// should render the generic link
expect(navigateToLiveboardSpy).toHaveBeenCalledWith(
testLiveboardId,
'testVizId',
'testActiveTabId',
undefined,
);
expect(iFrame.src).toMatch(/http:\/\/tshost\/.*&isLiveboardEmbed=true.*#$/);
expect(consoleSpy).toHaveBeenCalledTimes(0);
}, 1005);
});
test('should replace existing preRender when replaceExistingPreRender is true', async () => {
const testPreRenderId = 'testReplacePreRender';
// Stub ResizeObserver for JSDOM
(window as any).ResizeObserver = (window as any).ResizeObserver
|| jest.fn().mockImplementation(() => ({
disconnect: jest.fn(),
observe: jest.fn(),
unobserve: jest.fn(),
}));
// Create initial embed and show preRender (this will create the
// preRender wrapper/child)
const embedA = new LiveboardEmbed(getRootEl(), {
preRenderId: testPreRenderId,
});
await embedA.showPreRender();
await waitFor(() => !!getIFrameEl());
const ids = embedA.getPreRenderIds();
const oldWrapper = document.getElementById(ids.wrapper);
const oldChild = document.getElementById(ids.child);
const tsKey = '__tsEmbed';
expect((oldWrapper as any)[tsKey]).toBe(embedA);
// Create a new embed instance and preRender with
// replaceExistingPreRender = true
const embedB = new LiveboardEmbed(getRootEl(), {
preRenderId: testPreRenderId,
});
const prerenderGenericSpy = jest.spyOn(embedB, 'prerenderGeneric');
await embedB.preRender(false, true);
await waitFor(() => (document.getElementById(ids.wrapper) as any)?.[tsKey] === embedB);
const newWrapper = document.getElementById(ids.wrapper);
const newChild = document.getElementById(ids.child);
// Should have called prerenderGeneric for the new embed instance
expect(prerenderGenericSpy).toHaveBeenCalledTimes(1);
// Wrapper should be replaced (new wrapper element), child iframe
// may be reused
expect(newWrapper).not.toBe(oldWrapper);
// __tsEmbed on wrapper should now point to the new embed instance
expect((newWrapper as any)[tsKey]).toBe(embedB);
});
});
describe('LazyLoadingForFullHeight functionality', () => {
let mockIFrame: HTMLIFrameElement;
beforeEach(() => {
mockIFrame = document.createElement('iframe');
mockIFrame.getBoundingClientRect = jest.fn().mockReturnValue({
top: 100,
left: 150,
bottom: 600,
right: 800,
width: 650,
height: 500,
});
jest.spyOn(document, 'createElement').mockImplementation((tagName) => {
if (tagName === 'iframe') {
return mockIFrame;
}
return document.createElement(tagName);
});
});
afterEach(() => {
jest.restoreAllMocks();
});
test('should set lazyLoadingMargin parameter when provided', async () => {
const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
...defaultViewConfig,
liveboardId,
fullHeight: true,
lazyLoadingForFullHeight: true,
lazyLoadingMargin: '100px 0px',
} as LiveboardViewConfig);
await liveboardEmbed.render();
await executeAfterWait(() => {
const iframeSrc = getIFrameSrc();
expect(iframeSrc).toContain('isLazyLoadingForEmbedEnabled=true');
expect(iframeSrc).toContain('isFullHeightPinboard=true');
expect(iframeSrc).toContain('rootMarginForLazyLoad=100px%200px');
}, 100);
});
test('should set isLazyLoadingForEmbedEnabled=true when both fullHeight and lazyLoadingForFullHeight are enabled', async () => {
const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
...defaultViewConfig,
liveboardId,
fullHeight: true,
lazyLoadingForFullHeight: true,
lazyLoadingMargin: '10px',
} as LiveboardViewConfig);
await liveboardEmbed.render();
await executeAfterWait(() => {
const iframeSrc = getIFrameSrc();
expect(iframeSrc).toContain('isLazyLoadingForEmbedEnabled=true');
expect(iframeSrc).toContain('isFullHeightPinboard=true');
}, 100);
});
test('should not set lazyLoadingForEmbed when lazyLoadingForFullHeight is enabled but fullHeight is false', async () => {
const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
...defaultViewConfig,
liveboardId,
fullHeight: false,
lazyLoadingForFullHeight: true,
} as LiveboardViewConfig);
await liveboardEmbed.render();
await executeAfterWait(() => {
const iframeSrc = getIFrameSrc();
expect(iframeSrc).not.toContain('isLazyLoadingForEmbedEnabled=true');
expect(iframeSrc).not.toContain('isFullHeightPinboard=true');
}, 100);
});
test('should not set isLazyLoadingForEmbedEnabled when fullHeight is true but lazyLoadingForFullHeight is false', async () => {
const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
...defaultViewConfig,
liveboardId,
fullHeight: true,
lazyLoadingForFullHeight: false,
} as LiveboardViewConfig);
await liveboardEmbed.render();
await executeAfterWait(() => {
const iframeSrc = getIFrameSrc();
expect(iframeSrc).not.toContain('isLazyLoadingForEmbedEnabled=true');
expect(iframeSrc).toContain('isFullHeightPinboard=true');
}, 100);
});
test('should register event handlers to adjust iframe height', async () => {
const onSpy = jest.spyOn(LiveboardEmbed.prototype, 'on');
const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
...defaultViewConfig,
liveboardId,
fullHeight: true,
lazyLoadingForFullHeight: true,
lazyLoadingMargin: '10px',
} as LiveboardViewConfig);
await liveboardEmbed.render();
await executeAfterWait(() => {
expect(onSpy).toHaveBeenCalledWith(EmbedEvent.EmbedHeight, expect.anything());
expect(onSpy).toHaveBeenCalledWith(EmbedEvent.RouteChange, expect.anything());
expect(onSpy).toHaveBeenCalledWith(EmbedEvent.EmbedIframeCenter, expect.anything());
expect(onSpy).toHaveBeenCalledWith(EmbedEvent.RequestVisibleEmbedCoordinates, expect.anything());
}, 100);
});
test('should send correct visible data when RequestVisibleEmbedCoordinates is triggered', async () => {
const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
...defaultViewConfig,
liveboardId,
fullHeight: true,
lazyLoadingForFullHeight: true,
lazyLoadingMargin: '10px',
} as LiveboardViewConfig);
const mockTrigger = jest.spyOn(liveboardEmbed, 'trigger');
await liveboardEmbed.render();
// Trigger the lazy load data calculation
(liveboardEmbed as any).sendFullHeightLazyLoadData();
expect(mockTrigger).toHaveBeenCalledWith(HostEvent.VisibleEmbedCoordinates, {
top: 0,
height: 500,
left: 0,
width: 650,
});
});
test('should send correct visible data when RequestVisibleEmbedCoordinates is triggered', async () => {
const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
...defaultViewConfig,
liveboardId,
fullHeight: true,
lazyLoadingMargin: '10px',
} as LiveboardViewConfig);
const mockTrigger = jest.spyOn(liveboardEmbed, 'trigger');
await liveboardEmbed.render();
// Trigger the lazy load data calculation
(liveboardEmbed as any).sendFullHeightLazyLoadData();
expect(mockTrigger).not.toHaveBeenCalledWith(HostEvent.VisibleEmbedCoordinates, {
top: 0,
height: 500,
left: 0,
width: 650,
});
});
test('should calculate correct visible data for partially visible full height element', async () => {
mockIFrame.getBoundingClientRect = jest.fn().mockReturnValue({
top: -50,
left: -30,
bottom: 700,
right: 1024,
width: 1054,
height: 750,
});
const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
...defaultViewConfig,
liveboardId,
fullHeight: true,
lazyLoadingForFullHeight: true,
lazyLoadingMargin: '10px',
} as LiveboardViewConfig);
const mockTrigger = jest.spyOn(liveboardEmbed, 'trigger');
await liveboardEmbed.render();
// Trigger the lazy load data calculation
(liveboardEmbed as any).sendFullHeightLazyLoadData();
expect(mockTrigger).toHaveBeenCalledWith(HostEvent.VisibleEmbedCoordinates, {
top: 50,
height: 700,
left: 30,
width: 1024,
});
});
test('should add window event listeners for resize and scroll when fullHeight and lazyLoadingForFullHeight are enabled', async () => {
const addEventListenerSpy = jest.spyOn(window, 'addEventListener');
const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
...defaultViewConfig,
liveboardId,
fullHeight: true,
lazyLoadingForFullHeight: true,
lazyLoadingMargin: '10px',
} as LiveboardViewConfig);
await liveboardEmbed.render();
// Wait for the post-render events to be registered
await executeAfterWait(() => {
expect(addEventListenerSpy).toHaveBeenCalledWith('resize', expect.anything());
expect(addEventListenerSpy).toHaveBeenCalledWith('scroll', expect.anything(), true);
}, 100);
addEventListenerSpy.mockRestore();
});
test('should remove window event listeners on destroy when fullHeight and lazyLoadingForFullHeight are enabled', async () => {
const removeEventListenerSpy = jest.spyOn(window, 'removeEventListener');
const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
...defaultViewConfig,
liveboardId,
fullHeight: true,
lazyLoadingForFullHeight: true,
lazyLoadingMargin: '10px',
} as LiveboardViewConfig);
await liveboardEmbed.render();
liveboardEmbed.destroy();
expect(removeEventListenerSpy).toHaveBeenCalledWith('resize', expect.anything());
expect(removeEventListenerSpy).toHaveBeenCalledWith('scroll', expect.anything());
removeEventListenerSpy.mockRestore();
});
test('should handle RequestVisibleEmbedCoordinates event and respond with correct data', async () => {
// Mock the iframe element
mockIFrame.getBoundingClientRect = jest.fn().mockReturnValue({
top: 100,
left: 150,
bottom: 600,
right: 800,
width: 650,
height: 500,
});
Object.defineProperty(mockIFrame, 'scrollHeight', { value: 500 });
const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
...defaultViewConfig,
liveboardId,
fullHeight: true,
lazyLoadingForFullHeight: true,
lazyLoadingMargin: '10px',
} as LiveboardViewConfig);
// Set the iframe before render
(liveboardEmbed as any).iFrame = mockIFrame;
await liveboardEmbed.render();
// Create a mock responder function
const mockResponder = jest.fn();
// Trigger the handler directly
(liveboardEmbed as any).requestVisibleEmbedCoordinatesHandler({}, mockResponder);
// Verify the responder was called with the correct data
expect(mockResponder).toHaveBeenCalledWith({
type: EmbedEvent.RequestVisibleEmbedCoordinates,
data: {
top: 0,
height: 500,
left: 0,
width: 650,
},
});
});
});
describe('Host events for liveborad', () => {
test('Host event with empty param', async () => {
const mockProcessTrigger = jest.spyOn(tsEmbed.TsEmbed.prototype, 'trigger');
const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
liveboardId: '123',
...defaultViewConfig,
vizId: 'testViz',
});
await liveboardEmbed.render();
mockProcessTrigger.mockResolvedValue({ session: 'test' });
await executeAfterWait(async () => {
await liveboardEmbed.trigger(HostEvent.Save);
expect(mockProcessTrigger).toHaveBeenCalledWith(
HostEvent.Save,
{
vizId: 'testViz',
},
undefined,
);
});
});
});
describe('Liveboard Embed Container Loading and PreRender', () => {
beforeEach(() => {
document.body.innerHTML = getDocumentBody();
});
test('should call navigateToLiveboard after embed container is loaded in beforePrerenderVisible', async () => {
const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
liveboardId,
vizId,
activeTabId,
...defaultViewConfig,
});
const navigateToLiveboardSpy = jest.spyOn(liveboardEmbed, 'navigateToLiveboard').mockImplementation(() => Promise.resolve(undefined));
// Mock embed container as not loaded initially
liveboardEmbed.isEmbedContainerLoaded = false;
// Call beforePrerenderVisible
liveboardEmbed['beforePrerenderVisible']();
// navigateToLiveboard should not be called immediately
expect(navigateToLiveboardSpy).not.toHaveBeenCalled();
// Simulate embed container becoming ready
liveboardEmbed.isEmbedContainerLoaded = true;
liveboardEmbed['executeEmbedContainerReadyCallbacks']();
// Now navigateToLiveboard should be called
expect(navigateToLiveboardSpy).toHaveBeenCalledWith(
liveboardId,
vizId,
activeTabId,
undefined,
);
});
test('should update currentLiveboardState for prerender object when embed container loads', async () => {
const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
liveboardId,
vizId,
activeTabId,
...defaultViewConfig,
});
const mockPreRenderObj = {
currentLiveboardState: {},
};
jest.spyOn(liveboardEmbed as any, 'getPreRenderObj').mockReturnValue(mockPreRenderObj as any);
jest.spyOn(liveboardEmbed, 'navigateToLiveboard').mockImplementation(() => Promise.resolve(undefined));
// Mock embed container as not loaded initially
liveboardEmbed.isEmbedContainerLoaded = false;
// Call beforePrerenderVisible
liveboardEmbed['beforePrerenderVisible']();
// Simulate embed container becoming ready
liveboardEmbed.isEmbedContainerLoaded = true;
liveboardEmbed['executeEmbedContainerReadyCallbacks']();
// Check that currentLiveboardState was updated
expect(mockPreRenderObj.currentLiveboardState).toEqual({
liveboardId,
vizId,
activeTabId,
});
});
test('should handle beforePrerenderVisible when embed container is already loaded', async () => {
const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
liveboardId,
vizId,
activeTabId,
...defaultViewConfig,
});
const navigateToLiveboardSpy = jest.spyOn(liveboardEmbed, 'navigateToLiveboard').mockImplementation(() => Promise.resolve(undefined));
// Mock embed container as already loaded
liveboardEmbed.isEmbedContainerLoaded = true;
// Call beforePrerenderVisible
liveboardEmbed['beforePrerenderVisible']();
// navigateToLiveboard should be called immediately
expect(navigateToLiveboardSpy).toHaveBeenCalledWith(
liveboardId,
vizId,
activeTabId,
undefined,
);
});
test('should handle beforePrerenderVisible without prerender object', async () => {
const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
liveboardId,
vizId,
activeTabId,
...defaultViewConfig,
});
jest.spyOn(liveboardEmbed as any, 'getPreRenderObj').mockReturnValue(null);
const navigateToLiveboardSpy = jest.spyOn(liveboardEmbed, 'navigateToLiveboard').mockImplementation(() => Promise.resolve(undefined));
// Mock embed container as not loaded initially
liveboardEmbed.isEmbedContainerLoaded = false;
// Call beforePrerenderVisible
liveboardEmbed['beforePrerenderVisible']();
// Simulate embed container becoming ready
liveboardEmbed.isEmbedContainerLoaded = true;
liveboardEmbed['executeEmbedContainerReadyCallbacks']();
// navigateToLiveboard should still be called
expect(navigateToLiveboardSpy).toHaveBeenCalledWith(
liveboardId,
vizId,
activeTabId,
undefined,
);
});
test('should work with all liveboard parameters', async () => {
const customLiveboardId = 'custom-liveboard-id';
const customVizId = 'custom-viz-id';
const customActiveTabId = 'custom-active-tab-id';
const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
liveboardId: customLiveboardId,
vizId: customVizId,
activeTabId: customActiveTabId,
...defaultViewConfig,
});
const navigateToLiveboardSpy = jest.spyOn(liveboardEmbed, 'navigateToLiveboard').mockImplementation(() => Promise.resolve(undefined));
// Mock embed container as already loaded
liveboardEmbed.isEmbedContainerLoaded = true;
// Call beforePrerenderVisible
liveboardEmbed['beforePrerenderVisible']();
// Check that all parameters are passed correctly
expect(navigateToLiveboardSpy).toHaveBeenCalledWith(
customLiveboardId,
customVizId,
customActiveTabId,
undefined,
);
});
test('should work with minimal liveboard parameters', async () => {
const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
liveboardId,
...defaultViewConfig,
});
const navigateToLiveboardSpy = jest.spyOn(liveboardEmbed, 'navigateToLiveboard').mockImplementation(() => Promise.resolve(undefined));
// Mock embed container as already loaded
liveboardEmbed.isEmbedContainerLoaded = true;
// Call beforePrerenderVisible
liveboardEmbed['beforePrerenderVisible']();
// Check that undefined parameters are passed correctly
expect(navigateToLiveboardSpy).toHaveBeenCalledWith(
liveboardId,
undefined,
undefined,
undefined,
);
});
});
describe('Liveboard Embed Default Height and Minimum Height Handling', () => {
test('should set default height to 800 when minimum height is provided', async () => {
const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
liveboardId,
...defaultViewConfig,
fullHeight: true,
defaultHeight: 700,
minimumHeight: 800,
});
await liveboardEmbed.render();
expect(liveboardEmbed['defaultHeight']).toBe(800);
});
test('should set default height to 700 when default height is provided', async () => {
const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
liveboardId,
...defaultViewConfig,
fullHeight: true,
defaultHeight: 700,
});
await liveboardEmbed.render();
expect(liveboardEmbed['defaultHeight']).toBe(700);
});
test('should set default height to 800 when minimum height is provided but default height is not', async () => {
const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
liveboardId,
...defaultViewConfig,
fullHeight: true,
minimumHeight: 800,
});
await liveboardEmbed.render();
expect(liveboardEmbed['defaultHeight']).toBe(800);
});
test('should set default height to 500 when neither default height nor minimum height is provided', async () => {
const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
liveboardId,
...defaultViewConfig,
fullHeight: true,
});
await liveboardEmbed.render();
expect(liveboardEmbed['defaultHeight']).toBe(500);
});
});
});