Skip to content

SCAL-335430-POC Send embed config over postMessage instead of the iframe URL #646

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
shivam-kumar-ts wants to merge 8 commits into
base: main
Choose a base branch
from
Open

SCAL-335430-POC Send embed config over postMessage instead of the iframe URL #646

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
28ee22e
SCAL-334772 Extract full-height support into a shared module
shivam-kumar-ts Aug 26, 2026
8723123
SCAL-334772 resolved comment
shivam-kumar-ts Aug 28, 2026
87e4b46
SCAL-334772 fixed gemini comment
shivam-kumar-ts Aug 31, 2026
09ea659
SCAL-334772 added test
shivam-kumar-ts Aug 31, 2026
5cd8bfd
SCAL-334772 fixed gemini comment
shivam-kumar-ts Aug 31, 2026
bea9726
SCAL-334772 transfer the flag change to app level
shivam-kumar-ts Sep 2, 2026
b64024c
SCAL-335430-POC Send embed config over postMessage instead of the ifr…
shivam-kumar-ts Aug 31, 2026
104bd3a
SCAL-335430-POC test
shivam-kumar-ts Sep 2, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
83 changes: 49 additions & 34 deletions src/embed/app.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ const testUrlParams = async (viewConfig: AppViewConfig, expectedUrl: string) =>
});
};

// Helper function to test setIframeHeightForNonEmbedLiveboard behavior
// Helper function to test the full-height route-change behavior
const testSetIframeHeightBehavior = (
currentPath: string,
shouldBeCalled: boolean
Expand All @@ -70,7 +70,7 @@ const testSetIframeHeightBehavior = (
: jest.spyOn(appEmbed, 'setIFrameHeight');

appEmbed.render();
appEmbed.setIframeHeightForNonEmbedLiveboard({
appEmbed.fullHeightController.handleRouteChange({
data: { currentPath },
type: 'Route',
});
Expand Down Expand Up @@ -1851,6 +1851,7 @@ describe('App embed tests', () => {

test('should register event handlers to adjust iframe height', async () => {
let embedHeightCallback: any = () => { };
let embedIframeCenterCallback: any = () => { };
const onSpy = jest.spyOn(AppEmbed.prototype, 'on').mockImplementation((event, callback) => {
if (event === EmbedEvent.RouteChange) {
callback({ type: EmbedEvent.RouteChange, data: { currentPath: '/answers' } } as any, jest.fn());
Expand All @@ -1859,11 +1860,10 @@ describe('App embed tests', () => {
embedHeightCallback = callback;
}
if (event === EmbedEvent.EmbedIframeCenter) {
callback({ type: EmbedEvent.EmbedIframeCenter, data: {} } as any, jest.fn());
embedIframeCenterCallback = callback;
}
return null;
});
jest.spyOn(TsEmbed.prototype as any, 'getIframeCenter').mockReturnValue({});
jest.spyOn(TsEmbed.prototype as any, 'setIFrameHeight').mockReturnValue({});
const appEmbed = new AppEmbed(getRootEl(), {
...defaultViewConfig,
Expand All @@ -1879,13 +1879,27 @@ describe('App embed tests', () => {
await appEmbed.render();
embedHeightCallback({ data: '100%' });

// The app only asks for the iframe center once the iframe exists.
const centerResponder = jest.fn();
embedIframeCenterCallback(
{ type: EmbedEvent.EmbedIframeCenter, data: {} } as any,
centerResponder,
);

// Verify event handlers were registered
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());
expect(centerResponder).toHaveBeenCalledWith(
expect.objectContaining({ type: EmbedEvent.EmbedIframeCenter }),
);
}, 100);

// This test replaces AppEmbed.prototype.on; restore it so the mock does
// not leak into the tests that follow.
jest.restoreAllMocks();
});

describe('Navigate to Page API', () => {
Expand Down Expand Up @@ -2130,7 +2144,6 @@ describe('App embed tests', () => {
const onSpy = jest.spyOn(AppEmbed.prototype, 'on').mockImplementation((event, callback) => {
return null;
});
jest.spyOn(TsEmbed.prototype as any, 'getIframeCenter').mockReturnValue({});
jest.spyOn(TsEmbed.prototype as any, 'setIFrameHeight').mockReturnValue({});

// Create the AppEmbed instance
Expand Down Expand Up @@ -2165,10 +2178,6 @@ describe('App embed tests', () => {
fullHeight: true,
} as AppViewConfig);

expect((appEmbed as any).viewConfig.lazyLoadingForFullHeight).toBe(true);
expect((appEmbed as any).viewConfig.enableScrollableContainerLazyLoading).toBe(true);
expect((appEmbed as any).viewConfig.lazyLoadingMargin).toBe('500px 0px');

await appEmbed.render();

await executeAfterWait(() => {
Expand All @@ -2184,11 +2193,14 @@ describe('App embed tests', () => {
...defaultViewConfig,
} as AppViewConfig);

expect((appEmbed as any).viewConfig.lazyLoadingForFullHeight).toBeUndefined();
expect(
(appEmbed as any).viewConfig.enableScrollableContainerLazyLoading,
).toBeUndefined();
expect((appEmbed as any).viewConfig.lazyLoadingMargin).toBeUndefined();
await appEmbed.render();

await executeAfterWait(() => {
const iframeSrc = getIFrameSrc();
expect(iframeSrc).not.toContain('isFullHeightPinboard');
expect(iframeSrc).not.toContain('isLazyLoadingForEmbedEnabled');
expect(iframeSrc).not.toContain('rootMarginForLazyLoad');
}, 100);
});

test('should not write the defaults back onto the caller view config', async () => {
Expand All @@ -2210,11 +2222,14 @@ describe('App embed tests', () => {
fullHeight: false,
} as AppViewConfig);

expect((appEmbed as any).viewConfig.lazyLoadingForFullHeight).toBeUndefined();
expect(
(appEmbed as any).viewConfig.enableScrollableContainerLazyLoading,
).toBeUndefined();
expect((appEmbed as any).viewConfig.lazyLoadingMargin).toBeUndefined();
await appEmbed.render();

await executeAfterWait(() => {
const iframeSrc = getIFrameSrc();
expect(iframeSrc).not.toContain('isFullHeightPinboard');
expect(iframeSrc).not.toContain('isLazyLoadingForEmbedEnabled');
expect(iframeSrc).not.toContain('rootMarginForLazyLoad');
}, 100);
});

test('should default lazyLoadingMargin when lazyLoadingForFullHeight is set explicitly', async () => {
Expand All @@ -2224,14 +2239,14 @@ describe('App embed tests', () => {
lazyLoadingForFullHeight: true,
} as AppViewConfig);

expect((appEmbed as any).viewConfig.lazyLoadingMargin).toBe(
config.DEFAULT_LAZY_LOADING_MARGIN,
);

await appEmbed.render();

await executeAfterWait(() => {
expect(getIFrameSrc()).toContain('rootMarginForLazyLoad=500px%200px');
expect(getIFrameSrc()).toContain(
`rootMarginForLazyLoad=${encodeURIComponent(
config.DEFAULT_LAZY_LOADING_MARGIN,
)}`,
);
}, 100);
});

Expand Down Expand Up @@ -2455,7 +2470,7 @@ describe('App embed tests', () => {
await appEmbed.render();

// Trigger the lazy load data calculation
(appEmbed as any).sendFullHeightLazyLoadData();
(appEmbed as any).fullHeightController.sendVisibleCoordinates();

expect(mockTrigger).toHaveBeenCalledWith(HostEvent.VisibleEmbedCoordinates, {
top: 0,
Expand All @@ -2477,7 +2492,7 @@ describe('App embed tests', () => {
await appEmbed.render();

// Trigger the lazy load data calculation
(appEmbed as any).sendFullHeightLazyLoadData();
(appEmbed as any).fullHeightController.sendVisibleCoordinates();

expect(mockTrigger).not.toHaveBeenCalledWith(HostEvent.VisibleEmbedCoordinates, {
top: 0,
Expand Down Expand Up @@ -2510,7 +2525,7 @@ describe('App embed tests', () => {
await appEmbed.render();

// Trigger the lazy load data calculation
(appEmbed as any).sendFullHeightLazyLoadData();
(appEmbed as any).fullHeightController.sendVisibleCoordinates();

expect(mockTrigger).toHaveBeenCalledWith(HostEvent.VisibleEmbedCoordinates, {
top: 50, // 50px clipped from top
Expand Down Expand Up @@ -2618,7 +2633,7 @@ describe('App embed tests', () => {
const mockResponder = jest.fn();

// Trigger the handler directly
(appEmbed as any).requestVisibleEmbedCoordinatesHandler({}, mockResponder);
(appEmbed as any).fullHeightController.handleRequestVisibleCoordinates({}, mockResponder);

// Verify the responder was called with the correct data
expect(mockResponder).toHaveBeenCalledWith({
Expand Down Expand Up @@ -2676,7 +2691,7 @@ describe('App embed tests', () => {
data: 600,
type: EmbedEvent.EmbedHeight,
};
appEmbed.updateIFrameHeight(mockEvent);
appEmbed.fullHeightController.handleEmbedHeight(mockEvent);

// Check if the iframe style was updated
expect(mockIFrame.style.height).toBe('600px');
Expand All @@ -2697,7 +2712,7 @@ describe('App embed tests', () => {
data: 0, // This will make it use the default height
type: EmbedEvent.EmbedHeight,
};
appEmbed.updateIFrameHeight(mockEvent);
appEmbed.fullHeightController.handleEmbedHeight(mockEvent);

// Should use the default height
expect(mockIFrame.style.height).toBe('500px');
Expand All @@ -2712,7 +2727,7 @@ describe('App Embed Default Height and Minimum Height Handling', () => {
fullHeight: true,
} as AppViewConfig);
await appEmbed.render();
expect(appEmbed['defaultHeight']).toBe(500);
expect(appEmbed['fullHeightController'].minimumHeight).toBe(500);
});
test('should set default height to 700 when default height is provided', async () => {
const appEmbed = new AppEmbed(getRootEl(), {
Expand All @@ -2721,7 +2736,7 @@ describe('App Embed Default Height and Minimum Height Handling', () => {
minimumHeight: 700,
} as AppViewConfig);
await appEmbed.render();
expect(appEmbed['defaultHeight']).toBe(700);
expect(appEmbed['fullHeightController'].minimumHeight).toBe(700);
});
});

Expand Down Expand Up @@ -2807,15 +2822,15 @@ describe('AppEmbed uncovered branch tests', () => {
});
});

test('registerLazyLoadEvents should return early when iFrame is not set', () => {
test('lazy load registration should return early when iFrame is not set', () => {
const appEmbed = new AppEmbed(getRootEl(), {
...defaultViewConfig,
fullHeight: true,
lazyLoadingForFullHeight: true,
} as AppViewConfig);
// iFrame is not set (render not called), should not throw
expect(() => {
(appEmbed as any).registerLazyLoadEvents();
(appEmbed as any).fullHeightController.onRender();
}).not.toThrow();
});
});
Expand Down
Loading
Loading