@thoughtspot/ts-chart-sdk 0.0.1-alpha.1 → 0.0.1-alpha.11

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

@@ -4,6 +4,7 @@
  *  @author Chetan Agrawal <chetan.agrawal@thoughtspot.com>
  */
 
+import _ from 'lodash';
 import { mockInitializeContextPayload } from '../test/test-utils';
 import { ChartToTSEvent, ErrorType } from '../types/chart-to-ts-event.types';
 import { TSToChartEvent } from '../types/ts-to-chart-event.types';
@@ -330,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', () => {
@@ -380,6 +446,122 @@ describe('CustomChartContext', () => {
         });
     });
 
+    describe('off', () => {
+        let customChartContext: CustomChartContext;
+
+        beforeEach(() => {
+            customChartContext = new CustomChartContext({
+                getDefaultChartConfig,
+                getQueriesFromChartConfig,
+                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;
 
@@ -489,5 +671,249 @@ describe('CustomChartContext', () => {
                 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,
+            );
+        });
     });
 });