@thoughtspot/ts-chart-sdk 0.0.1-alpha.0 → 0.0.1-alpha.10

package/src/main/custom-chart-context.spec.ts

@@ -4,8 +4,9 @@
  *  @author Chetan Agrawal <chetan.agrawal@thoughtspot.com>
  */
 
+import _ from 'lodash';
 import { mockInitializeContextPayload } from '../test/test-utils';
-import { ErrorType } from '../types/chart-to-ts-event.types';
+import { ChartToTSEvent, ErrorType } from '../types/chart-to-ts-event.types';
 import { TSToChartEvent } from '../types/ts-to-chart-event.types';
 import { CustomChartContext, getChartContext } from './custom-chart-context';
 import * as PostMessageEventBridge from './post-message-event-bridge';
@@ -17,7 +18,7 @@ jest.spyOn(console, 'log').mockImplementation(() => {
 });
 
 describe('CustomChartContext', () => {
-    let eventProcesor: any;
+    let eventProcessor: any;
 
     let getDefaultChartConfig = jest.fn();
     let getQueriesFromChartConfig = jest.fn();
@@ -37,7 +38,11 @@ describe('CustomChartContext', () => {
         renderChart = jest.fn();
 
         mockInitMessage.mockImplementation((fn: any) => {
-            eventProcesor = fn;
+            eventProcessor = fn;
+        });
+
+        mockPostMessageToHost.mockImplementation(() => {
+            return global.Promise.resolve();
         });
     });
 
@@ -53,9 +58,9 @@ describe('CustomChartContext', () => {
 
         afterEach(() => {
             // Destroy the chart context after each test
-            customChartContext.destroy();
             jest.resetAllMocks();
-            eventProcesor = null;
+            customChartContext.destroy();
+            eventProcessor = null;
         });
 
         test('should wait till the parent calls initialize', async () => {
@@ -81,7 +86,7 @@ describe('CustomChartContext', () => {
 
             // Check that the hasInitializedPromise has resolved
             const mockPostMessage = jest.fn();
-            eventProcesor({
+            eventProcessor({
                 data: {
                     payload: mockInitializeContextPayload,
                     eventType: TSToChartEvent.Initialize,
@@ -90,8 +95,19 @@ describe('CustomChartContext', () => {
                 ports: [{ postMessage: mockPostMessage }],
             });
 
+            eventProcessor({
+                data: {
+                    payload: {},
+                    eventType: TSToChartEvent.InitializeComplete,
+                    source: 'ts-host-app',
+                },
+                ports: [{ postMessage: mockPostMessage }],
+            });
+
             await expect(promise).resolves.toBeUndefined();
-            expect(mockPostMessage).toHaveBeenCalledWith({
+            expect(mockPostMessage).toHaveBeenCalledTimes(2);
+
+            expect(mockPostMessage.mock.calls[0][0]).toEqual({
                 isConfigValid: false,
                 defaultChartConfig: undefined,
                 chartConfigEditorDefinition: undefined,
@@ -107,7 +123,7 @@ describe('CustomChartContext', () => {
 
             // Check that the hasInitializedPromise has resolved
             const mockPostMessage = jest.fn();
-            eventProcesor({
+            eventProcessor({
                 data: {
                     payload: mockInitializeContextPayload,
                     eventType: TSToChartEvent.Initialize,
@@ -116,6 +132,15 @@ describe('CustomChartContext', () => {
                 ports: [{ postMessage: mockPostMessage }],
             });
 
+            eventProcessor({
+                data: {
+                    payload: {},
+                    eventType: TSToChartEvent.InitializeComplete,
+                    source: 'ts-host-app',
+                },
+                ports: [{ postMessage: mockPostMessage }],
+            });
+
             await expect(promise).resolves.toBeUndefined();
 
             let error;
@@ -156,7 +181,7 @@ describe('CustomChartContext', () => {
             // Destroy the chart context after each test
             jest.resetAllMocks();
             customChartContext.destroy();
-            eventProcesor = null;
+            eventProcessor = null;
         });
 
         test('should not trigger post message if host is not accurate', () => {
@@ -164,7 +189,7 @@ describe('CustomChartContext', () => {
 
             // mock the event trigger for ChartConfigValidate
             const mockPostMessage = jest.fn();
-            eventProcesor({
+            eventProcessor({
                 data: {
                     payload: mockInitializeContextPayload,
                     eventType: TSToChartEvent.ChartConfigValidate,
@@ -182,7 +207,7 @@ describe('CustomChartContext', () => {
 
             // mock the event trigger for ChartConfigValidate
             const mockPostMessage = jest.fn();
-            eventProcesor({
+            eventProcessor({
                 data: {
                     payload: mockInitializeContextPayload,
                     eventType: TSToChartEvent.ChartConfigValidate,
@@ -197,7 +222,7 @@ describe('CustomChartContext', () => {
             mockPostMessage.mockReset();
 
             // mock the event trigger for VisualPropsValidate
-            eventProcesor({
+            eventProcessor({
                 data: {
                     payload: mockInitializeContextPayload,
                     eventType: TSToChartEvent.VisualPropsValidate,
@@ -213,7 +238,7 @@ describe('CustomChartContext', () => {
             mockPostMessage.mockReset();
 
             // mock the event trigger for TriggerRenderChart
-            eventProcesor({
+            eventProcessor({
                 data: {
                     payload: mockInitializeContextPayload,
                     eventType: TSToChartEvent.TriggerRenderChart,
@@ -228,7 +253,7 @@ describe('CustomChartContext', () => {
             mockPostMessage.mockReset();
 
             // mock the event trigger for getQueriesFromChartConfig
-            eventProcesor({
+            eventProcessor({
                 data: {
                     payload: mockInitializeContextPayload,
                     eventType: TSToChartEvent.GetDataQuery,
@@ -246,7 +271,7 @@ describe('CustomChartContext', () => {
 
             // mock the event trigger for DataUpdate
             const mockPostMessage = jest.fn();
-            eventProcesor({
+            eventProcessor({
                 data: {
                     payload: {
                         data: 'random data',
@@ -264,7 +289,7 @@ describe('CustomChartContext', () => {
             mockPostMessage.mockReset();
 
             // mock the event trigger for VisualPropsValidate
-            eventProcesor({
+            eventProcessor({
                 data: {
                     payload: {
                         chartModel: {
@@ -288,8 +313,8 @@ describe('CustomChartContext', () => {
 
             mockPostMessage.mockReset();
 
-            // mock the event trigger for TriggerRenderChart
-            eventProcesor({
+            // mock the event trigger for VisualPropsUpdate
+            eventProcessor({
                 data: {
                     payload: {
                         visualProps: 'random data',
@@ -306,6 +331,71 @@ describe('CustomChartContext', () => {
             expect(customChartContext.getChartModel().visualProps).toBe(
                 'random data',
             );
+            mockPostMessage.mockReset();
+
+            // mock the event trigger for AxisMenuActionClick
+            customChartContext.axisMenuCustomActionPreProcessor([
+                {
+                    customActions: [
+                        {
+                            icon: '',
+                            id: 'custom-action-1',
+                            label: 'Custom user action 1',
+                            onClick: () => _.noop(),
+                        },
+                    ],
+                },
+            ] as any);
+            eventProcessor({
+                data: {
+                    payload: {
+                        customAction: {
+                            id: 'custom-action-1',
+                            columnIds: ['9f96b5b0-f7e4-4a5e-aa11-4c77fdf42125'],
+                        },
+                    },
+                    eventType: TSToChartEvent.AxisMenuActionClick,
+                    source: 'ts-host-app',
+                },
+                ports: [{ postMessage: mockPostMessage }],
+            });
+            // Check that the response was valid which means action gets
+            // executed successfully
+            expect(mockPostMessage).toHaveBeenCalledWith({
+                isValid: true,
+            });
+
+            // mock the event trigger for ContextMenuActionClick
+            customChartContext.contextMenuCustomActionPreProcessor([
+                {
+                    customActions: [
+                        {
+                            icon: '',
+                            id: 'custom-action-1',
+                            label: 'Custom user action 1',
+                            onClick: () => _.noop(),
+                        },
+                    ],
+                },
+            ] as any);
+            eventProcessor({
+                data: {
+                    payload: {
+                        customAction: {
+                            id: 'custom-action-1',
+                            columnIds: ['9f96b5b0-f7e4-4a5e-aa11-4c77fdf42125'],
+                        },
+                    },
+                    eventType: TSToChartEvent.ContextMenuActionClick,
+                    source: 'ts-host-app',
+                },
+                ports: [{ postMessage: mockPostMessage }],
+            });
+            // Check that the response was valid which means action gets
+            // executed successfully
+            expect(mockPostMessage).toHaveBeenCalledWith({
+                isValid: true,
+            });
         });
 
         test('should add an event listener to the specified event type', () => {
@@ -319,7 +409,7 @@ describe('CustomChartContext', () => {
 
             // mock the event trigger
             const mockPostMessage = jest.fn();
-            eventProcesor({
+            eventProcessor({
                 data: {
                     payload: mockInitializeContextPayload,
                     eventType: TEST_EVENT_TYPE,
@@ -339,7 +429,7 @@ describe('CustomChartContext', () => {
 
             // mock the event trigger
             const mockPostMessage = jest.fn();
-            eventProcesor({
+            eventProcessor({
                 data: {
                     payload: mockInitializeContextPayload,
                     eventType: TEST_EVENT_TYPE,
@@ -356,8 +446,9 @@ describe('CustomChartContext', () => {
         });
     });
 
-    describe('emitEvent', () => {
+    describe('off', () => {
         let customChartContext: CustomChartContext;
+
         beforeEach(() => {
             customChartContext = new CustomChartContext({
                 getDefaultChartConfig,
@@ -365,11 +456,127 @@ describe('CustomChartContext', () => {
                 renderChart,
             });
         });
+
         afterEach(() => {
             // Destroy the chart context after each test
+            customChartContext.destroy();
+            eventProcessor = null;
             jest.resetAllMocks();
+        });
+
+        test('should remove the event listener for the specified event type', () => {
+            // Define a test event type and callback function
+            const TEST_EVENT_TYPE = 'testEventType' as any;
+            const testCallbackFn = jest.fn();
+            // Call the on function with the test event type and callback
+            // function to add the event listener
+            customChartContext.on(TEST_EVENT_TYPE, testCallbackFn);
+
+            // mock the event trigger for the test event type
+            const mockPostMessage = jest.fn();
+            eventProcessor({
+                data: {
+                    payload: mockInitializeContextPayload,
+                    eventType: TEST_EVENT_TYPE,
+                    source: 'ts-host-app',
+                },
+                ports: [{ postMessage: mockPostMessage }],
+            });
+
+            // Call the off function to remove the event listener
+            customChartContext.off(TEST_EVENT_TYPE);
+
+            // Check that the event listener was not called
+            expect(testCallbackFn).toHaveBeenCalled();
+            expect(
+                (customChartContext as any).eventListeners[TEST_EVENT_TYPE],
+            ).toHaveLength(0);
+        });
+
+        test('should remove a specific event listener without affecting others', () => {
+            // Define two test event types and callback functions
+            const TEST_EVENT_TYPE_1: any = 'testEventType1';
+            const TEST_EVENT_TYPE_2: any = 'testEventType2';
+            const testCallbackFn1 = jest.fn();
+            const testCallbackFn2 = jest.fn();
+
+            // Add event listeners with the test event types and callback
+            // functions
+            customChartContext.on(TEST_EVENT_TYPE_1, testCallbackFn1);
+            customChartContext.on(TEST_EVENT_TYPE_2, testCallbackFn2);
+
+            // Verify that both event listeners are in the eventListeners array
+            expect(
+                (customChartContext as any).eventListeners[TEST_EVENT_TYPE_1],
+            ).toHaveLength(1);
+            expect(
+                (customChartContext as any).eventListeners[TEST_EVENT_TYPE_2],
+            ).toHaveLength(1);
+
+            // Emit events for both event types
+            const mockPostMessage = jest.fn();
+            eventProcessor({
+                data: {
+                    payload: {},
+                    eventType: TEST_EVENT_TYPE_1,
+                    source: 'ts-host-app',
+                },
+                ports: [{ postMessage: mockPostMessage }],
+            });
+            eventProcessor({
+                data: {
+                    payload: {},
+                    eventType: TEST_EVENT_TYPE_2,
+                    source: 'ts-host-app',
+                },
+                ports: [{ postMessage: mockPostMessage }],
+            });
+
+            // Check that both callback functions were called
+            expect(testCallbackFn1).toHaveBeenCalled();
+            expect(testCallbackFn2).toHaveBeenCalled();
+
+            // Remove the first event listener (TEST_EVENT_TYPE_1)
+            customChartContext.off(TEST_EVENT_TYPE_1);
+
+            // Verify that the first event listener is removed while the second
+            // is still present
+            expect(
+                (customChartContext as any).eventListeners[TEST_EVENT_TYPE_1],
+            ).toHaveLength(0);
+            expect(
+                (customChartContext as any).eventListeners[TEST_EVENT_TYPE_2],
+            ).toHaveLength(1);
+        });
+
+        test('should make sure not to throw error when off is called before', () => {
+            // Define two test event types and callback functions
+            const TEST_EVENT_TYPE_1: any = 'testEventType1';
+            customChartContext.off(TEST_EVENT_TYPE_1);
+
+            // Verify that the first event listener is removed while the second
+            // is still present
+            expect(
+                (customChartContext as any).eventListeners[TEST_EVENT_TYPE_1],
+            ).toHaveLength(0);
+        });
+    });
+
+    describe('emitEvent', () => {
+        let customChartContext: CustomChartContext;
+
+        beforeEach(() => {
+            customChartContext = new CustomChartContext({
+                getDefaultChartConfig,
+                getQueriesFromChartConfig,
+                renderChart,
+            });
+        });
+        afterEach(() => {
+            // Destroy the chart context after each test
             customChartContext.destroy();
-            eventProcesor = null;
+            eventProcessor = null;
+            jest.resetAllMocks();
         });
 
         test('should reject the promise if the chart context is not initialized', async () => {
@@ -384,13 +591,13 @@ describe('CustomChartContext', () => {
 
             // Check that the result is defined
             expect(mockPostMessageToHost).not.toHaveBeenCalled();
-            await expect(result).rejects.not.toBeDefined();
+            await expect(result).rejects.toBeDefined();
         });
 
         test('should resolve the promise if the chart context is initialized', async () => {
             // Check that the hasInitializedPromise has resolved
             const mockPostMessage = jest.fn();
-            eventProcesor({
+            eventProcessor({
                 data: {
                     payload: mockInitializeContextPayload,
                     eventType: TSToChartEvent.Initialize,
@@ -399,6 +606,19 @@ describe('CustomChartContext', () => {
                 ports: [{ postMessage: mockPostMessage }],
             });
 
+            eventProcessor({
+                data: {
+                    payload: {},
+                    eventType: TSToChartEvent.InitializeComplete,
+                    source: 'ts-host-app',
+                },
+                ports: [{ postMessage: mockPostMessage }],
+            });
+
+            const promise = customChartContext.initialize();
+            await expect(promise).resolves.toBeUndefined();
+            expect(mockPostMessage).toHaveBeenCalledTimes(2);
+
             // define mock response for the postMessage response promise
             let resolve: any;
             mockPostMessageToHost.mockImplementation(
@@ -417,8 +637,9 @@ describe('CustomChartContext', () => {
                 TEST_EVENT_TYPE,
                 testPayload,
             );
-            global.setTimeout(() => resolve('helloworld'), 3000);
+            global.setTimeout(() => resolve('helloworld'), 1000);
 
+            await expect(result).resolves.toEqual('helloworld');
             // Check that the result is defined
             expect(mockPostMessageToHost).toHaveBeenCalledWith(
                 mockInitializeContextPayload.componentId,
@@ -426,7 +647,273 @@ describe('CustomChartContext', () => {
                 testPayload,
                 TEST_EVENT_TYPE,
             );
-            await expect(result).resolves.toBe('helloworld');
+
+            // test for null payload
+            // Call the emitEvent function and wait for it to resolve
+            mockPostMessageToHost.mockReset();
+            mockPostMessageToHost.mockImplementation(
+                () =>
+                    new global.Promise<any>((res) => {
+                        resolve = res;
+                    }),
+            );
+            const result2 = customChartContext.emitEvent(
+                ChartToTSEvent.RenderStart,
+            );
+            global.setTimeout(() => resolve('helloworld'), 1000);
+
+            await expect(result2).resolves.toEqual('helloworld');
+            // Check that the result is defined
+            expect(mockPostMessageToHost).toHaveBeenCalledWith(
+                mockInitializeContextPayload.componentId,
+                mockInitializeContextPayload.hostUrl,
+                null,
+                ChartToTSEvent.RenderStart,
+            );
+        });
+        test('should process the event payload for context menu custom actions', async () => {
+            const mockPostMessage = jest.fn();
+            const mockCustomAction = jest.fn();
+            let resolve: any;
+            eventProcessor({
+                data: {
+                    payload: mockInitializeContextPayload,
+                    eventType: TSToChartEvent.Initialize,
+                    source: 'ts-host-app',
+                },
+                ports: [{ postMessage: mockPostMessage }],
+            });
+            eventProcessor({
+                data: {
+                    payload: {},
+                    eventType: TSToChartEvent.InitializeComplete,
+                    source: 'ts-host-app',
+                },
+                ports: [{ postMessage: mockPostMessage }],
+            });
+            customChartContext.initialize();
+            mockPostMessageToHost.mockImplementation(
+                () =>
+                    new global.Promise<any>((res) => {
+                        resolve = res;
+                    }),
+            );
+
+            // Define a test event type and payload
+            const TEST_EVENT_TYPE = ChartToTSEvent.OpenContextMenu as any;
+            const testPayload = {
+                customActions: [
+                    {
+                        id: 'custom-action-1',
+                        label: 'Custom user action 1',
+                        icon: '',
+                        onClick: mockCustomAction,
+                    },
+                ],
+            };
+
+            // Call the emitEvent function and wait for it to resolve
+            customChartContext.emitEvent(TEST_EVENT_TYPE, testPayload);
+
+            // Check that the result is defined
+            expect(mockPostMessageToHost).toHaveBeenCalledWith(
+                mockInitializeContextPayload.componentId,
+                mockInitializeContextPayload.hostUrl,
+                {
+                    customActions: [
+                        {
+                            icon: '',
+                            id: 'custom-action-1',
+                            label: 'Custom user action 1',
+                        },
+                    ],
+                },
+                TEST_EVENT_TYPE,
+            );
+            eventProcessor({
+                data: {
+                    payload: {
+                        customAction: {
+                            id: 'custom-action-1',
+                            clickedPoint: {},
+                            event: {},
+                            selectedPoints: [{}],
+                        },
+                    },
+                    eventType: TSToChartEvent.ContextMenuActionClick,
+                    source: 'ts-host-app',
+                },
+                ports: [{ postMessage: mockPostMessage }],
+            });
+            expect(mockCustomAction).toHaveBeenCalled();
+            expect(mockCustomAction).toHaveBeenCalledWith({
+                clickedPoint: {},
+                event: {},
+                id: 'custom-action-1',
+                selectedPoints: [{}],
+            });
+        });
+        test('should process the event payload for axis menu custom actions', async () => {
+            const mockPostMessage = jest.fn();
+            const mockCustomAction = jest.fn();
+            let resolve: any;
+            eventProcessor({
+                data: {
+                    payload: mockInitializeContextPayload,
+                    eventType: TSToChartEvent.Initialize,
+                    source: 'ts-host-app',
+                },
+                ports: [{ postMessage: mockPostMessage }],
+            });
+            eventProcessor({
+                data: {
+                    payload: {},
+                    eventType: TSToChartEvent.InitializeComplete,
+                    source: 'ts-host-app',
+                },
+                ports: [{ postMessage: mockPostMessage }],
+            });
+            customChartContext.initialize();
+            mockPostMessageToHost.mockImplementation(
+                () =>
+                    new global.Promise<any>((res) => {
+                        resolve = res;
+                    }),
+            );
+
+            // Define a test event type and payload
+            const TEST_EVENT_TYPE = ChartToTSEvent.OpenAxisMenu as any;
+            const testPayload = {
+                customActions: [
+                    {
+                        id: 'custom-action-1',
+                        label: 'Custom user action 1',
+                        icon: '',
+                        onClick: mockCustomAction,
+                    },
+                ],
+            };
+
+            // Call the emitEvent function and wait for it to resolve
+            customChartContext.emitEvent(TEST_EVENT_TYPE, testPayload);
+            // Check that the result is defined
+            expect(mockPostMessageToHost).toHaveBeenCalledWith(
+                mockInitializeContextPayload.componentId,
+                mockInitializeContextPayload.hostUrl,
+                {
+                    customActions: [
+                        {
+                            icon: '',
+                            id: 'custom-action-1',
+                            label: 'Custom user action 1',
+                        },
+                    ],
+                },
+                TEST_EVENT_TYPE,
+            );
+
+            eventProcessor({
+                data: {
+                    payload: {
+                        customAction: {
+                            id: 'custom-action-1',
+                            columnIds: ['123'],
+                            event: {},
+                        },
+                    },
+                    eventType: TSToChartEvent.AxisMenuActionClick,
+                    source: 'ts-host-app',
+                },
+                ports: [{ postMessage: mockPostMessage }],
+            });
+            expect(mockCustomAction).toHaveBeenCalled();
+            expect(mockCustomAction).toHaveBeenCalledWith({
+                id: 'custom-action-1',
+                columnIds: ['123'],
+                event: {},
+            });
+        });
+
+        test('should process the event payload for axis menu when custom actions are not defined', async () => {
+            const mockPostMessage = jest.fn();
+            let resolve: any;
+            eventProcessor({
+                data: {
+                    payload: mockInitializeContextPayload,
+                    eventType: TSToChartEvent.Initialize,
+                    source: 'ts-host-app',
+                },
+                ports: [{ postMessage: mockPostMessage }],
+            });
+            eventProcessor({
+                data: {
+                    payload: {},
+                    eventType: TSToChartEvent.InitializeComplete,
+                    source: 'ts-host-app',
+                },
+                ports: [{ postMessage: mockPostMessage }],
+            });
+            customChartContext.initialize();
+            mockPostMessageToHost.mockImplementation(
+                () =>
+                    new global.Promise<any>((res) => {
+                        resolve = res;
+                    }),
+            );
+
+            // Define a test event type and payload
+            const TEST_EVENT_TYPE = ChartToTSEvent.OpenAxisMenu as any;
+            const testPayload = {};
+            // Call the emitEvent function and wait for it to resolve
+            customChartContext.emitEvent(TEST_EVENT_TYPE, testPayload);
+            // Check that the result is defined
+            expect(mockPostMessageToHost).toHaveBeenCalledWith(
+                mockInitializeContextPayload.componentId,
+                mockInitializeContextPayload.hostUrl,
+                {},
+                TEST_EVENT_TYPE,
+            );
+        });
+
+        test('should process the event payload for context menu when custom actions are not defined', async () => {
+            const mockPostMessage = jest.fn();
+            let resolve: any;
+            eventProcessor({
+                data: {
+                    payload: mockInitializeContextPayload,
+                    eventType: TSToChartEvent.Initialize,
+                    source: 'ts-host-app',
+                },
+                ports: [{ postMessage: mockPostMessage }],
+            });
+            eventProcessor({
+                data: {
+                    payload: {},
+                    eventType: TSToChartEvent.InitializeComplete,
+                    source: 'ts-host-app',
+                },
+                ports: [{ postMessage: mockPostMessage }],
+            });
+            customChartContext.initialize();
+            mockPostMessageToHost.mockImplementation(
+                () =>
+                    new global.Promise<any>((res) => {
+                        resolve = res;
+                    }),
+            );
+
+            // Define a test event type and payload
+            const TEST_EVENT_TYPE = ChartToTSEvent.OpenContextMenu as any;
+            const testPayload = {};
+            // Call the emitEvent function and wait for it to resolve
+            customChartContext.emitEvent(TEST_EVENT_TYPE, testPayload);
+            // Check that the result is defined
+            expect(mockPostMessageToHost).toHaveBeenCalledWith(
+                mockInitializeContextPayload.componentId,
+                mockInitializeContextPayload.hostUrl,
+                {},
+                TEST_EVENT_TYPE,
+            );
         });
     });
 });