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

package/package.json

@@ -0,0 +1,88 @@
+{
+    "name": "@thoughtspot/ts-chart-sdk",
+    "private": false,
+    "version": "0.0.1-alpha.0",
+    "module": "lib/index",
+    "main": "lib/index",
+    "types": "lib/index",
+    "files": [
+        "dist/**",
+        "lib/**",
+        "src/**"
+    ],
+    "scripts": {
+        "build": "tsc -p .; tsc -p . --module commonjs --outDir cjs",
+        "tsc": "tsc -p .; tsc -p . --module commonjs --outDir cjs",
+        "test-sdk": "npx jest -c jest.config.sdk.js --runInBand",
+        "test": "npm run test-sdk",
+        "lint": "eslint 'src/**'",
+        "lint:fix": "eslint 'src/**' --fix",
+        "ci": "npm-run-all lint test",
+        "docgen": "typedoc --tsconfig tsconfig.json",
+        "dev": "npm run dev:bar",
+        "dev:bar": "vite serve example/custom-bar-chart --port 3000",
+        "about:bundle-dts": "echo '===== add ts types bundle in dist ====='",
+        "bundle-dts": "npx dts-bundle --name ../dist/ts-chart-sdk --main lib/index.d.ts --outputAsModuleFolder=true",
+        "prePublish": "npm run ci; npm run build; npm run bundle-dts;",
+        "about:publish-dev": "echo '===== patch dev workflow ====='",
+        "patch-dev": "npm version prerelease --no-git-tag-version",
+        "publish-dev": "npm publish --tag dev --access public",
+        "about:publish-prod": "echo '===== patch prod workflow ====='",
+        "patch-prod": "npm version prepatch --no-git-tag-version",
+        "publish-prod": "npm publish --access public"
+    },
+    "devDependencies": {
+        "@types/jest": "^27.0.3",
+        "@types/lodash": "4.14.175",
+        "@types/node": "18.16.3",
+        "@typescript-eslint/eslint-plugin": "^5.59.5",
+        "@typescript-eslint/parser": "^5.59.5",
+        "dts-bundle": "^0.7.3",
+        "eslint": "7.32.0",
+        "eslint-config-airbnb-base": "15.0.0",
+        "eslint-config-prettier": "^6.9.0",
+        "eslint-import-resolver-typescript": "^2.0.0",
+        "eslint-plugin-anti-trojan-source": "^1.1.1",
+        "eslint-plugin-ban": "^1.6.0",
+        "eslint-plugin-comment-length": "0.9.2",
+        "eslint-plugin-compat": "^4.1.4",
+        "eslint-plugin-import": "^2.20.0",
+        "eslint-plugin-jest": "^27.2.1",
+        "eslint-plugin-jest-dom": "^4.0.3",
+        "eslint-plugin-jsdoc": "41.1.1",
+        "eslint-plugin-no-unsanitized": "^4.0.2",
+        "eslint-plugin-prettier": "^3.1.2",
+        "eslint-plugin-promise": "^6.1.1",
+        "eslint-plugin-prototype-pollution-security-rules": "^1.0.6",
+        "eslint-plugin-react": "^7.32.2",
+        "eslint-plugin-security": "^1.7.1",
+        "eslint-plugin-simple-import-sort": "^10.0.0",
+        "eslint-plugin-testing-library": "^5.11.0",
+        "jest": "^27.4.6",
+        "jsdom": "^19.0.0",
+        "npm-run-all": "^4.1.5",
+        "prettier": "^2.8.8",
+        "ts-jest": "^27.1.1",
+        "typedoc": "^0.24.4",
+        "typescript": "^4.9.5",
+        "vite": "4.2.1"
+    },
+    "dependencies": {
+        "chart.js": "4.2.1",
+        "lodash": "^4.17.21"
+    },
+    "prettier": "./prettier-config",
+    "browserslist": [
+        "chrome >=77, edge >= 81, firefox >=69, safari > 13"
+    ],
+    "author": "ThoughtSpot",
+    "email": "support@thoughtspot.com",
+    "license": "ThoughtSpot Development Tools End User License Agreement",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/thoughtspot/ts-chart-sdk.git"
+    },
+    "publishConfig": {
+        "registry": "https://registry.npmjs.org"
+    }
+}

package/src/index.ts

@@ -0,0 +1,7 @@
+export * from './types/common.types';
+export * from './types/configurator.types';
+export * from './types/visual-prop.types';
+export * from './types/answer-column.types';
+export * from './types/chart-to-ts-event.types';
+export * from './types/ts-to-chart-event.types';
+export * from './main/custom-chart-context';

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

@@ -0,0 +1,432 @@
+/**
+ *  Custom chart context spec file
+ *
+ *  @author Chetan Agrawal <chetan.agrawal@thoughtspot.com>
+ */
+
+import { mockInitializeContextPayload } from '../test/test-utils';
+import { 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';
+
+jest.mock('./post-message-event-bridge');
+
+jest.spyOn(console, 'log').mockImplementation(() => {
+    // do nothing.
+});
+
+describe('CustomChartContext', () => {
+    let eventProcesor: any;
+
+    let getDefaultChartConfig = jest.fn();
+    let getQueriesFromChartConfig = jest.fn();
+    let renderChart = jest.fn();
+    const mockInitMessage = jest.spyOn(
+        PostMessageEventBridge,
+        'initMessageListener',
+    );
+    const mockPostMessageToHost: any = jest.spyOn(
+        PostMessageEventBridge,
+        'postMessageToHostApp',
+    );
+
+    beforeEach(() => {
+        getDefaultChartConfig = jest.fn();
+        getQueriesFromChartConfig = jest.fn();
+        renderChart = jest.fn();
+
+        mockInitMessage.mockImplementation((fn: any) => {
+            eventProcesor = fn;
+        });
+    });
+
+    describe('initialize', () => {
+        let customChartContext: CustomChartContext;
+        beforeEach(() => {
+            customChartContext = new CustomChartContext({
+                getDefaultChartConfig,
+                getQueriesFromChartConfig,
+                renderChart,
+            });
+        });
+
+        afterEach(() => {
+            // Destroy the chart context after each test
+            customChartContext.destroy();
+            jest.resetAllMocks();
+            eventProcesor = null;
+        });
+
+        test('should wait till the parent calls initialize', async () => {
+            expect(mockInitMessage).toHaveBeenCalled();
+            // initialize function should not resolve
+            const promise = customChartContext.initialize();
+            const rej = jest.fn();
+            const res = jest.fn();
+            promise.then(() => rej()).catch(() => res());
+            await new global.Promise((resolve) => {
+                setTimeout(() => resolve(null), 3000);
+            });
+
+            expect(rej).not.toHaveBeenCalled();
+            expect(res).not.toHaveBeenCalled();
+        });
+
+        test('should return a promise that resolves when the chart context is initialized', 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 mockPostMessage = jest.fn();
+            eventProcesor({
+                data: {
+                    payload: mockInitializeContextPayload,
+                    eventType: TSToChartEvent.Initialize,
+                    source: 'ts-host-app',
+                },
+                ports: [{ postMessage: mockPostMessage }],
+            });
+
+            await expect(promise).resolves.toBeUndefined();
+            expect(mockPostMessage).toHaveBeenCalledWith({
+                isConfigValid: false,
+                defaultChartConfig: undefined,
+                chartConfigEditorDefinition: undefined,
+                visualPropEditorDefinition: undefined,
+            });
+            expect(mockPostMessage).toHaveBeenCalled();
+            expect(mockPostMessageToHost).not.toHaveBeenCalled();
+        });
+
+        test('multiple intializations should throw an error', async () => {
+            // Call the initialize function and wait for it to resolve
+            const promise = customChartContext.initialize();
+
+            // Check that the hasInitializedPromise has resolved
+            const mockPostMessage = jest.fn();
+            eventProcesor({
+                data: {
+                    payload: mockInitializeContextPayload,
+                    eventType: TSToChartEvent.Initialize,
+                    source: 'ts-host-app',
+                },
+                ports: [{ postMessage: mockPostMessage }],
+            });
+
+            await expect(promise).resolves.toBeUndefined();
+
+            let error;
+            try {
+                customChartContext = new CustomChartContext({
+                    getDefaultChartConfig,
+                    getQueriesFromChartConfig,
+                    renderChart,
+                });
+            } catch (err: any) {
+                error = err.message;
+            }
+            expect(error).toBe(ErrorType.MultipleContextsNotSupported);
+
+            try {
+                await getChartContext({
+                    getDefaultChartConfig,
+                    getQueriesFromChartConfig,
+                    renderChart,
+                });
+            } catch (err: any) {
+                error = err.message;
+            }
+            expect(error).toBe(ErrorType.MultipleContextsNotSupported);
+        });
+    });
+
+    describe('on', () => {
+        let customChartContext: CustomChartContext;
+        beforeEach(() => {
+            customChartContext = new CustomChartContext({
+                getDefaultChartConfig,
+                getQueriesFromChartConfig,
+                renderChart,
+            });
+        });
+        afterEach(() => {
+            // Destroy the chart context after each test
+            jest.resetAllMocks();
+            customChartContext.destroy();
+            eventProcesor = null;
+        });
+
+        test('should not trigger post message if host is not accurate', () => {
+            expect(mockInitMessage).toHaveBeenCalled();
+
+            // mock the event trigger for ChartConfigValidate
+            const mockPostMessage = jest.fn();
+            eventProcesor({
+                data: {
+                    payload: mockInitializeContextPayload,
+                    eventType: TSToChartEvent.ChartConfigValidate,
+                    source: 'incorrect-source',
+                },
+                ports: [{ postMessage: mockPostMessage }],
+            });
+            // Check that the event listener was added to the eventListeners
+            // object
+            expect(mockPostMessage).not.toHaveBeenCalled();
+        });
+
+        test('default internal function testing', () => {
+            expect(mockInitMessage).toHaveBeenCalled();
+
+            // mock the event trigger for ChartConfigValidate
+            const mockPostMessage = jest.fn();
+            eventProcesor({
+                data: {
+                    payload: mockInitializeContextPayload,
+                    eventType: TSToChartEvent.ChartConfigValidate,
+                    source: 'ts-host-app',
+                },
+                ports: [{ postMessage: mockPostMessage }],
+            });
+            // Check that the response was received
+            expect(mockPostMessage).toHaveBeenCalledWith({
+                isValid: true,
+            });
+            mockPostMessage.mockReset();
+
+            // mock the event trigger for VisualPropsValidate
+            eventProcesor({
+                data: {
+                    payload: mockInitializeContextPayload,
+                    eventType: TSToChartEvent.VisualPropsValidate,
+                    source: 'ts-host-app',
+                },
+                ports: [{ postMessage: mockPostMessage }],
+            });
+            // Check that the response was received
+            expect(mockPostMessage).toHaveBeenCalledWith({
+                isValid: true,
+            });
+
+            mockPostMessage.mockReset();
+
+            // mock the event trigger for TriggerRenderChart
+            eventProcesor({
+                data: {
+                    payload: mockInitializeContextPayload,
+                    eventType: TSToChartEvent.TriggerRenderChart,
+                    source: 'ts-host-app',
+                },
+                ports: [{ postMessage: mockPostMessage }],
+            });
+            // Check that the response was received
+            expect(mockPostMessage).toHaveBeenCalledWith({});
+            expect(renderChart).toHaveBeenCalled();
+
+            mockPostMessage.mockReset();
+
+            // mock the event trigger for getQueriesFromChartConfig
+            eventProcesor({
+                data: {
+                    payload: mockInitializeContextPayload,
+                    eventType: TSToChartEvent.GetDataQuery,
+                    source: 'ts-host-app',
+                },
+                ports: [{ postMessage: mockPostMessage }],
+            });
+            // Check that the response was received
+            expect(mockPostMessage).toHaveBeenCalledWith({});
+            expect(getQueriesFromChartConfig).toHaveBeenCalled();
+        });
+
+        test('default external function testing', () => {
+            expect(mockInitMessage).toHaveBeenCalled();
+
+            // mock the event trigger for DataUpdate
+            const mockPostMessage = jest.fn();
+            eventProcesor({
+                data: {
+                    payload: {
+                        data: 'random data',
+                    },
+                    eventType: TSToChartEvent.DataUpdate,
+                    source: 'ts-host-app',
+                },
+                ports: [{ postMessage: mockPostMessage }],
+            });
+            // Check that the response was received
+            expect(mockPostMessage).toHaveBeenCalledWith({
+                triggerRenderChart: true,
+            });
+            expect(customChartContext.getChartModel().data).toBe('random data');
+            mockPostMessage.mockReset();
+
+            // mock the event trigger for VisualPropsValidate
+            eventProcesor({
+                data: {
+                    payload: {
+                        chartModel: {
+                            data: 'random data2',
+                            visualProps: null,
+                        },
+                    },
+                    eventType: TSToChartEvent.ChartModelUpdate,
+                    source: 'ts-host-app',
+                },
+                ports: [{ postMessage: mockPostMessage }],
+            });
+            // Check that the response was received
+            expect(mockPostMessage).toHaveBeenCalledWith({
+                triggerRenderChart: true,
+            });
+            expect(customChartContext.getChartModel().data).toBe(
+                'random data2',
+            );
+            expect(customChartContext.getChartModel().visualProps).toBe(null);
+
+            mockPostMessage.mockReset();
+
+            // mock the event trigger for TriggerRenderChart
+            eventProcesor({
+                data: {
+                    payload: {
+                        visualProps: 'random data',
+                    },
+                    eventType: TSToChartEvent.VisualPropsUpdate,
+                    source: 'ts-host-app',
+                },
+                ports: [{ postMessage: mockPostMessage }],
+            });
+            // Check that the response was received
+            expect(mockPostMessage).toHaveBeenCalledWith({
+                triggerRenderChart: true,
+            });
+            expect(customChartContext.getChartModel().visualProps).toBe(
+                'random data',
+            );
+        });
+
+        test('should add an event listener to the specified event type', () => {
+            expect(mockInitMessage).toHaveBeenCalled();
+            // 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
+            customChartContext.on(TEST_EVENT_TYPE, testCallbackFn);
+
+            // mock the event trigger
+            const mockPostMessage = jest.fn();
+            eventProcesor({
+                data: {
+                    payload: mockInitializeContextPayload,
+                    eventType: TEST_EVENT_TYPE,
+                    source: 'ts-host-app',
+                },
+                ports: [{ postMessage: mockPostMessage }],
+            });
+            // Check that the event listener was added to the eventListeners
+            // object
+            expect(testCallbackFn).toHaveBeenCalled();
+        });
+
+        test('should respond with an error to an unspecified event type', () => {
+            expect(mockInitMessage).toHaveBeenCalled();
+            // Define a test event type and callback function
+            const TEST_EVENT_TYPE = 'testEventType' as any;
+
+            // mock the event trigger
+            const mockPostMessage = jest.fn();
+            eventProcesor({
+                data: {
+                    payload: mockInitializeContextPayload,
+                    eventType: TEST_EVENT_TYPE,
+                    source: 'ts-host-app',
+                },
+                ports: [{ postMessage: mockPostMessage }],
+            });
+            // Check that the event listener was added to the eventListeners
+            // object
+            expect(mockPostMessage).toHaveBeenCalledWith({
+                hasError: true,
+                error: `Event type not recognised or processed: ${TEST_EVENT_TYPE}`,
+            });
+        });
+    });
+
+    describe('emitEvent', () => {
+        let customChartContext: CustomChartContext;
+        beforeEach(() => {
+            customChartContext = new CustomChartContext({
+                getDefaultChartConfig,
+                getQueriesFromChartConfig,
+                renderChart,
+            });
+        });
+        afterEach(() => {
+            // Destroy the chart context after each test
+            jest.resetAllMocks();
+            customChartContext.destroy();
+            eventProcesor = null;
+        });
+
+        test('should reject the promise if the chart context is not initialized', async () => {
+            // Define a test event type and payload
+            const TEST_EVENT_TYPE = 'testEventType' as any;
+            const testPayload = { value: 'testPayload' };
+            // Call the emitEvent function and wait for it to resolve
+            const result = customChartContext.emitEvent(
+                TEST_EVENT_TYPE,
+                testPayload,
+            );
+
+            // Check that the result is defined
+            expect(mockPostMessageToHost).not.toHaveBeenCalled();
+            await expect(result).rejects.not.toBeDefined();
+        });
+
+        test('should resolve the promise if the chart context is initialized', async () => {
+            // Check that the hasInitializedPromise has resolved
+            const mockPostMessage = jest.fn();
+            eventProcesor({
+                data: {
+                    payload: mockInitializeContextPayload,
+                    eventType: TSToChartEvent.Initialize,
+                    source: 'ts-host-app',
+                },
+                ports: [{ postMessage: mockPostMessage }],
+            });
+
+            // define mock response for the postMessage response promise
+            let resolve: any;
+            mockPostMessageToHost.mockImplementation(
+                () =>
+                    new global.Promise<any>((res) => {
+                        resolve = res;
+                    }),
+            );
+
+            // Define a test event type and payload
+            const TEST_EVENT_TYPE = 'testEventType' as any;
+            const testPayload = { value: 'testPayload' };
+
+            // Call the emitEvent function and wait for it to resolve
+            const result = customChartContext.emitEvent(
+                TEST_EVENT_TYPE,
+                testPayload,
+            );
+            global.setTimeout(() => resolve('helloworld'), 3000);
+
+            // Check that the result is defined
+            expect(mockPostMessageToHost).toHaveBeenCalledWith(
+                mockInitializeContextPayload.componentId,
+                mockInitializeContextPayload.hostUrl,
+                testPayload,
+                TEST_EVENT_TYPE,
+            );
+            await expect(result).resolves.toBe('helloworld');
+        });
+    });
+});