@thoughtspot/ts-chart-sdk 0.0.2-alpha.2 → 0.0.2-alpha.21

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

@@ -6,17 +6,25 @@
 
 import _ from 'lodash';
 import { mockInitializeContextPayload } from '../test/test-utils';
+import { ColumnType } from '../types/answer-column.types';
 import { ChartToTSEvent, ErrorType } from '../types/chart-to-ts-event.types';
 import { TSToChartEvent } from '../types/ts-to-chart-event.types';
+import { PropElement } from '../types/visual-prop.types';
 import { CustomChartContext, getChartContext } from './custom-chart-context';
 import * as PostMessageEventBridge from './post-message-event-bridge';
 
-// jest.mock('./post-message-event-bridge');
-
 jest.spyOn(console, 'log').mockImplementation(() => {
     // do nothing.
 });
 
+const mockFormElements: PropElement = {
+    key: 'color',
+    type: 'radio',
+    defaultValue: 'red',
+    values: ['red', 'green', 'yellow'],
+    label: 'Colors',
+};
+
 describe('CustomChartContext', () => {
     let eventProcessor: any;
 
@@ -107,28 +115,105 @@ describe('CustomChartContext', () => {
                 allowedConfigurations: {
                     allowColumnNumberFormatting: false,
                     allowColumnConditionalFormatting: false,
+                    allowMeasureNamesAndValues: false,
+                },
+                chartConfigParameters: {
+                    measureNameValueColumns: {
+                        enableMeasureNameColumn: false,
+                        enableMeasureValueColumn: false,
+                        measureNameColumnAlias: 'Measure Name',
+                        measureValueColumnAlias: 'Measure Values',
+                    },
+                    batchSizeLimit: 20000,
                 },
             });
-            expect(mockPostMessageToHost).not.toHaveBeenCalled();
         });
 
-        test('multiple intializations should throw an error', async () => {
+        test('should return responseMessage as empty instead of undefine', async () => {
+            expect(mockInitMessage).toHaveBeenCalled();
+
+            const initResp = await eventProcessor({
+                payload: {},
+                eventType: TSToChartEvent.InitializeComplete,
+            });
+            expect(initResp).toEqual({});
+        });
+
+        test('type check string for visualProps on initialize payload should not throw an error.', async () => {
+            expect(mockInitMessage).toHaveBeenCalled();
+
             // Call the initialize function and wait for it to resolve
             const promise = customChartContext.initialize();
 
             // Check that the hasInitializedPromise has resolved
-            eventProcessor({
-                payload: mockInitializeContextPayload,
+
+            const mockInitializeContextPayloadWithVisualProps = {
+                ...mockInitializeContextPayload,
+                chartModel: {
+                    ...mockInitializeContextPayload.chartModel,
+                    visualProps: 'visualPropStringPayload',
+                },
+            };
+
+            await eventProcessor({
+                payload: mockInitializeContextPayloadWithVisualProps,
                 eventType: TSToChartEvent.Initialize,
             });
-
             eventProcessor({
                 payload: {},
                 eventType: TSToChartEvent.InitializeComplete,
             });
+            await expect(promise).resolves.toBeUndefined();
+            const chartModel = customChartContext.getChartModel();
+            expect(typeof chartModel.visualProps).toEqual('string');
+            expect(chartModel.visualProps).toEqual('visualPropStringPayload');
+        });
+
+        test('type check object for visualProps on initialize payload should not throw an error.', async () => {
+            expect(mockInitMessage).toHaveBeenCalled();
 
+            // Call the initialize function and wait for it to resolve
+            const promise = customChartContext.initialize();
+
+            // Check that the hasInitializedPromise has resolved
+
+            const mockInitializeContextPayloadWithVisualProps = {
+                ...mockInitializeContextPayload,
+                chartModel: {
+                    ...mockInitializeContextPayload.chartModel,
+                    visualProps: {
+                        data: 'sample data',
+                    },
+                },
+            };
+
+            await eventProcessor({
+                payload: mockInitializeContextPayloadWithVisualProps,
+                eventType: TSToChartEvent.Initialize,
+            });
+            eventProcessor({
+                payload: {},
+                eventType: TSToChartEvent.InitializeComplete,
+            });
             await expect(promise).resolves.toBeUndefined();
+            const chartModel = customChartContext.getChartModel();
+            expect(typeof chartModel.visualProps).toEqual('object');
+            expect(chartModel.visualProps).toEqual({
+                data: 'sample data',
+            });
+        });
 
+        test('multiple intializations should throw an error', async () => {
+            // Call the initialize function and wait for it to resolve
+            getChartContext({
+                getDefaultChartConfig,
+                getQueriesFromChartConfig,
+                renderChart,
+            });
+            eventProcessor({
+                payload: {},
+                eventType: TSToChartEvent.InitializeComplete,
+            });
             let error;
             try {
                 customChartContext = new CustomChartContext({
@@ -152,6 +237,45 @@ describe('CustomChartContext', () => {
             }
             expect(error).toBe(ErrorType.MultipleContextsNotSupported);
         });
+        test('correct app options config should be set on initialize', async () => {
+            const mockAppConfigOptions = {
+                appOptions: {
+                    isMobile: false,
+                    isPrintMode: false,
+                    isLiveboardContext: false,
+                    isDebugMode: true,
+                },
+            };
+            expect(mockInitMessage).toHaveBeenCalled();
+
+            // Call the initialize function and wait for it to resolve
+            const promise = customChartContext.initialize();
+
+            // Check that the hasInitializedPromise has resolved
+
+            const mockInitializeContextPayloadWithVisualProps = {
+                ...mockInitializeContextPayload,
+                appConfig: mockAppConfigOptions,
+                chartModel: {
+                    ...mockInitializeContextPayload.chartModel,
+                    visualProps: {
+                        data: 'sample data',
+                    },
+                },
+            };
+
+            await eventProcessor({
+                payload: mockInitializeContextPayloadWithVisualProps,
+                eventType: TSToChartEvent.Initialize,
+            });
+            eventProcessor({
+                payload: {},
+                eventType: TSToChartEvent.InitializeComplete,
+            });
+            await expect(promise).resolves.toBeUndefined();
+            const appConfig = customChartContext.getAppConfig();
+            expect(appConfig).toStrictEqual(mockAppConfigOptions);
+        });
     });
 
     describe('on', () => {
@@ -170,7 +294,349 @@ describe('CustomChartContext', () => {
             eventProcessor = null;
         });
 
-        test('default internal function testing', async () => {
+        test('TSToChartEvent.ChartConfigValidate validation response testing', async () => {
+            // Define initial context with object definitions
+            customChartContext = new CustomChartContext({
+                getDefaultChartConfig,
+                getQueriesFromChartConfig,
+                renderChart,
+                visualPropEditorDefinition: { elements: [] },
+                chartConfigEditorDefinition: [],
+            });
+
+            // Trigger event processor with initial context
+            const responseWithInitialContext = await eventProcessor({
+                payload: mockInitializeContextPayload,
+                eventType: TSToChartEvent.ChartConfigValidate,
+                source: 'ts-host-app',
+            });
+            // Verify response with object definitions
+            expect(responseWithInitialContext).toStrictEqual({
+                isValid: true,
+                visualPropEditorDefinition: { elements: [] },
+                chartConfigEditorDefinition: [],
+            });
+
+            // Redefine context with function-returned definitions
+            customChartContext = new CustomChartContext({
+                getDefaultChartConfig,
+                getQueriesFromChartConfig,
+                renderChart,
+                visualPropEditorDefinition: () => {
+                    return { elements: [] };
+                },
+                chartConfigEditorDefinition: () => {
+                    return [
+                        {
+                            key: 'x',
+                            columnSections: [{ label: 'x-axis', key: 'x' }],
+                        },
+                    ];
+                },
+            });
+            // Trigger event processor with updated context
+            const responseWithUpdatedContext = await eventProcessor({
+                payload: mockInitializeContextPayload,
+                eventType: TSToChartEvent.ChartConfigValidate,
+                source: 'ts-host-app',
+            });
+            // Verify response with function-returned definitions
+            expect(responseWithUpdatedContext).toStrictEqual({
+                isValid: true,
+                visualPropEditorDefinition: { elements: [] },
+                chartConfigEditorDefinition: [
+                    {
+                        key: 'x',
+                        columnSections: [{ label: 'x-axis', key: 'x' }],
+                    },
+                ],
+            });
+        });
+        test('TSToChartEvent.ChartConfigValidate validation response for invalid config', async () => {
+            // Define initial context with object definitions
+            const mockChartConfigValidate = jest
+                .fn()
+                .mockReturnValue({ isValid: false });
+            customChartContext = new CustomChartContext({
+                getDefaultChartConfig,
+                getQueriesFromChartConfig,
+                renderChart,
+                visualPropEditorDefinition: { elements: [] },
+                chartConfigEditorDefinition: [],
+                validateConfig: mockChartConfigValidate,
+            });
+
+            // Trigger event processor with initial context
+            const responseWithInitialContext = await eventProcessor({
+                payload: mockInitializeContextPayload,
+                eventType: TSToChartEvent.ChartConfigValidate,
+                source: 'ts-host-app',
+            });
+            // Verify response with object definitions
+            expect(responseWithInitialContext).toStrictEqual({
+                isValid: false,
+            });
+        });
+        test('TSToChartEvent.ChartConfigValidate validation response return invalid without validate function', async () => {
+            // Define initial context with object definitions
+            customChartContext = new CustomChartContext({
+                getDefaultChartConfig,
+                getQueriesFromChartConfig,
+                renderChart,
+                visualPropEditorDefinition: { elements: [] },
+                chartConfigEditorDefinition: [],
+                validateConfig: undefined,
+            });
+
+            // Trigger event processor with initial context
+            const responseWithInitialContext = await eventProcessor({
+                payload: mockInitializeContextPayload,
+                eventType: TSToChartEvent.ChartConfigValidate,
+                source: 'ts-host-app',
+            });
+            // Verify response with object definitions
+            expect(responseWithInitialContext).toStrictEqual({
+                isValid: false,
+            });
+        });
+
+        test('TSToChartEvent.validateVisualProps validation response testing', () => {
+            // Define initial context with object definitions
+            customChartContext = new CustomChartContext({
+                getDefaultChartConfig,
+                getQueriesFromChartConfig,
+                renderChart,
+                visualPropEditorDefinition: { elements: [] },
+                chartConfigEditorDefinition: [],
+            });
+
+            // Trigger event processor with initial context
+            const responseWithInitialContext = eventProcessor({
+                payload: mockInitializeContextPayload,
+                eventType: TSToChartEvent.VisualPropsValidate,
+                source: 'ts-host-app',
+            });
+            // Verify response with object definitions
+            expect(responseWithInitialContext).toStrictEqual({
+                isValid: true,
+                visualPropEditorDefinition: { elements: [] },
+                chartConfigEditorDefinition: [],
+            });
+            // Redefine context with function-returned definitions
+            customChartContext = new CustomChartContext({
+                getDefaultChartConfig,
+                getQueriesFromChartConfig,
+                renderChart,
+                visualPropEditorDefinition: () => {
+                    return { elements: [] };
+                },
+                chartConfigEditorDefinition: () => {
+                    return [
+                        {
+                            key: 'x',
+                            columnSections: [{ label: 'x-axis', key: 'x' }],
+                        },
+                    ];
+                },
+            });
+            // Trigger event processor with updated context
+            const responseWithFunctionReturnedValues = eventProcessor({
+                payload: mockInitializeContextPayload,
+                eventType: TSToChartEvent.VisualPropsValidate,
+                source: 'ts-host-app',
+            });
+            // Verify response with function-returned definitions
+            expect(responseWithFunctionReturnedValues).toStrictEqual({
+                isValid: true,
+                visualPropEditorDefinition: { elements: [] },
+                chartConfigEditorDefinition: [
+                    {
+                        key: 'x',
+                        columnSections: [{ label: 'x-axis', key: 'x' }],
+                    },
+                ],
+            });
+        });
+
+        test('TSToChartEvent.validateVisualProps should work with activeColumnId', () => {
+            // Define initial context with object definitions
+            customChartContext = new CustomChartContext({
+                getDefaultChartConfig,
+                getQueriesFromChartConfig,
+                renderChart,
+                visualPropEditorDefinition: {
+                    elements: [mockFormElements],
+                    columnsVizPropDefinition: [
+                        {
+                            type: ColumnType.MEASURE,
+                            columnSettingsDefinition: {
+                                'column-id': { elements: [mockFormElements] },
+                            },
+                        },
+                    ],
+                },
+                chartConfigEditorDefinition: [],
+            });
+
+            // Trigger event processor with initial context
+            const responseWithInitialContext = eventProcessor({
+                payload: {
+                    ...mockInitializeContextPayload,
+                    activeColumnId: 'column-id',
+                },
+                eventType: TSToChartEvent.VisualPropsValidate,
+                source: 'ts-host-app',
+            });
+            // Verify response with object definitions
+            expect(responseWithInitialContext).toStrictEqual({
+                isValid: true,
+                visualPropEditorDefinition: {
+                    elements: [mockFormElements],
+                    columnsVizPropDefinition: [
+                        {
+                            type: ColumnType.MEASURE,
+                            columnSettingsDefinition: {
+                                'column-id': { elements: [mockFormElements] },
+                            },
+                        },
+                    ],
+                },
+                chartConfigEditorDefinition: [],
+            });
+        });
+
+        test('TSToChartEvent.validateVisualProps should be called with correct activeColumnId', () => {
+            // Define initial context with object definitions
+            const mockValidateVisualProps = jest
+                .fn()
+                .mockImplementation(
+                    (_visualProps, _chartModel, activeColumnId) => {
+                        if (activeColumnId === 'column-id')
+                            return { isValid: true };
+                        return { isValid: false };
+                    },
+                );
+            customChartContext = new CustomChartContext({
+                getDefaultChartConfig,
+                getQueriesFromChartConfig,
+                renderChart,
+                visualPropEditorDefinition: {
+                    elements: [mockFormElements],
+                    columnsVizPropDefinition: [
+                        {
+                            type: ColumnType.MEASURE,
+                            columnSettingsDefinition: {
+                                'column-id': { elements: [mockFormElements] },
+                            },
+                        },
+                    ],
+                },
+                chartConfigEditorDefinition: [],
+                validateVisualProps: mockValidateVisualProps,
+            });
+
+            // Trigger event processor with initial context
+            const responseWithInitialContext = eventProcessor({
+                payload: {
+                    ...mockInitializeContextPayload,
+                    activeColumnId: 'column-id',
+                },
+                eventType: TSToChartEvent.VisualPropsValidate,
+                source: 'ts-host-app',
+            });
+            // we only want the correct active columnId to be passed
+            expect(mockValidateVisualProps).toHaveBeenCalledWith(
+                undefined,
+                {},
+                'column-id',
+            );
+            const validationResponse = eventProcessor({
+                payload: {
+                    ...mockInitializeContextPayload,
+                    activeColumnId: 'column-id-1',
+                },
+                eventType: TSToChartEvent.VisualPropsValidate,
+                source: 'ts-host-app',
+            });
+            expect(validationResponse).toStrictEqual({ isValid: false });
+        });
+        test('TSToChartEvent.validateVisualProps returns invalid if no function is provided.', () => {
+            // Define initial context with object definitions
+            customChartContext = new CustomChartContext({
+                getDefaultChartConfig,
+                getQueriesFromChartConfig,
+                renderChart,
+                visualPropEditorDefinition: {
+                    elements: [mockFormElements],
+                    columnsVizPropDefinition: [
+                        {
+                            type: ColumnType.MEASURE,
+                            columnSettingsDefinition: {
+                                'column-id': { elements: [mockFormElements] },
+                            },
+                        },
+                    ],
+                },
+                chartConfigEditorDefinition: [],
+                validateVisualProps: undefined, // mocking undefined value
+            });
+
+            const validationResponse = eventProcessor({
+                payload: {
+                    ...mockInitializeContextPayload,
+                },
+                eventType: TSToChartEvent.VisualPropsValidate,
+                source: 'ts-host-app',
+            });
+            expect(validationResponse).toStrictEqual({ isValid: false });
+        });
+        test('VisualPropEditorDefintion function should recieve columnId', () => {
+            // Define initial context with object definitions
+            const mockValidateVisualProps = jest
+                .fn()
+                .mockImplementation(
+                    (_visualProps, _chartModel, activeColumnId) => {
+                        if (activeColumnId === 'column-id')
+                            return { isValid: true };
+                        return { isValid: false };
+                    },
+                );
+            const mockVisualPropEditorDefintion = jest.fn().mockReturnValue({
+                elements: [mockFormElements],
+                columnsVizPropDefinition: [
+                    {
+                        type: ColumnType.MEASURE,
+                        columnSettingsDefinition: {
+                            'column-id': { elements: [mockFormElements] },
+                        },
+                    },
+                ],
+            });
+            customChartContext = new CustomChartContext({
+                getDefaultChartConfig,
+                getQueriesFromChartConfig,
+                renderChart,
+                visualPropEditorDefinition: mockVisualPropEditorDefintion,
+                chartConfigEditorDefinition: [],
+                validateVisualProps: mockValidateVisualProps,
+            });
+
+            // Trigger event processor with initial context
+            const responseWithInitialContext = eventProcessor({
+                payload: {
+                    ...mockInitializeContextPayload,
+                    activeColumnId: 'column-id',
+                },
+                eventType: TSToChartEvent.VisualPropsValidate,
+                source: 'ts-host-app',
+            });
+            // we only want the correct active columnId to be passed
+            expect(mockVisualPropEditorDefintion.mock.calls[0][2]).toBe(
+                'column-id',
+            );
+        });
+
+        test('should not trigger post message if host is not accurate', async () => {
             expect(mockInitMessage).toHaveBeenCalled();
 
             // mock the event trigger for ChartConfigValidate
@@ -490,7 +956,6 @@ describe('CustomChartContext', () => {
             );
 
             // Check that the result is defined
-            expect(mockPostMessageToHost).not.toHaveBeenCalled();
             await expect(result).rejects.toBeDefined();
         });