@thoughtspot/ts-chart-sdk 0.0.1-alpha.2 → 0.0.1-alpha.5

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

@@ -380,6 +380,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;
 

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

@@ -232,6 +232,21 @@ export class CustomChartContext {
         this.eventListeners[eventType].push(callbackFn);
     }
 
+    /**
+     * Removes specific event listeners on the chart context.
+     *
+     * @param  {T} eventType
+     * @returns void
+     */
+    public off<T extends keyof TSToChartEventsPayloadMap>(eventType: T): void {
+        if (_.isNil(this.eventListeners[eventType])) {
+            console.log('No event listener found to remove');
+            this.eventListeners[eventType] = [];
+            return;
+        }
+        this.eventListeners[eventType].splice(0, 1);
+    }
+
     /**
      * Add internal event listeners on the chart context with the required callback.
      *

package/src/react/mocks/custom-chart-context-mock.ts

@@ -0,0 +1,114 @@
+import _ from 'lodash';
+import { CustomChartContextProps } from '../../main/custom-chart-context';
+import { ColumnType } from '../../types/answer-column.types';
+import { ChartConfig, ChartModel } from '../../types/common.types';
+import { Query } from '../../types/ts-to-chart-event.types';
+
+export const contextChartProps: CustomChartContextProps = {
+    getDefaultChartConfig: (chartModel: ChartModel): ChartConfig[] => {
+        const cols = chartModel.columns;
+
+        const measureColumns = _.filter(
+            cols,
+            (col) => col.type === ColumnType.MEASURE,
+        );
+
+        const attributeColumns = _.filter(
+            cols,
+            (col) => col.type === ColumnType.ATTRIBUTE,
+        );
+
+        const axisConfig: ChartConfig = {
+            key: 'column',
+            dimensions: [
+                {
+                    key: 'x',
+                    columns: [attributeColumns[0]],
+                },
+                {
+                    key: 'y',
+                    columns: measureColumns.slice(0, 2),
+                },
+            ],
+        };
+        return [axisConfig];
+    },
+    getQueriesFromChartConfig: (chartConfig: ChartConfig[]): Array<Query> => {
+        const queries = chartConfig.map(
+            (config: ChartConfig): Query =>
+                _.reduce(
+                    config.dimensions,
+                    (acc: Query, dimension) => ({
+                        queryColumns: [
+                            ...acc.queryColumns,
+                            ...dimension.columns,
+                        ],
+                    }),
+                    {
+                        queryColumns: [],
+                    } as Query,
+                ),
+        );
+        return queries;
+    },
+    chartConfigEditorDefinition: [
+        {
+            key: 'column',
+            label: 'Custom Column',
+            descriptionText:
+                'X Axis can only have attributes, Y Axis can only have measures, Color can only have attributes. ' +
+                'Should have just 1 column in Y axis with colors columns.',
+            columnSections: [
+                {
+                    key: 'x',
+                    label: 'Custom X Axis',
+                    allowAttributeColumns: true,
+                    allowMeasureColumns: false,
+                    allowTimeSeriesColumns: true,
+                    maxColumnCount: 1,
+                },
+                {
+                    key: 'y',
+                    label: 'Custom Y Axis',
+                    allowAttributeColumns: false,
+                    allowMeasureColumns: true,
+                    allowTimeSeriesColumns: false,
+                },
+            ],
+        },
+    ],
+    visualPropEditorDefinition: {
+        elements: [
+            {
+                key: 'color',
+                type: 'radio',
+                defaultValue: 'red',
+                values: ['red', 'green', 'yellow'],
+                label: 'Colors',
+            },
+            {
+                type: 'section',
+                key: 'accordion',
+                label: 'Accordion',
+                children: [
+                    {
+                        key: 'Color2',
+                        type: 'radio',
+                        defaultValue: 'blue',
+                        values: ['blue', 'white', 'red'],
+                        label: 'Color2',
+                    },
+                    {
+                        key: 'datalabels',
+                        type: 'toggle',
+                        defaultValue: false,
+                        label: 'Data Labels',
+                    },
+                ],
+            },
+        ],
+    },
+    renderChart: (cx) => {
+        return Promise.resolve();
+    },
+};