Feature/various improvements (#47)

* Add a callback when Chartjs is loaded

* Put flushPromise as a utils method and refactor

* Test reactivity manager

Author: scolladon

__tests__/__utils__/testAttributeHandler.js

@@ -78,3 +78,8 @@ global.testAttribute = (constructor, listChartOptionMock, eventName) => {
   testDOMElementInteraction(constructor);
   testChartOptions(constructor, listChartOptionMock, eventName);
 };
+
+global.flushPromises = () => {
+  // eslint-disable-next-line no-undef
+  return new Promise(resolve => setImmediate(resolve));
+};

__tests__/unit/chart.test.js

@@ -8,13 +8,8 @@ import DataSet from 'c/dataset';
 import Data from 'c/data';
 import Title from 'c/title';
 import Legend from 'c/legend';
-const STATIC_RESOURCE_NAME = 'chartjs_v280';
 
 let mockScriptSuccess = true;
-const flushPromises = () => {
-  // eslint-disable-next-line no-undef
-  return new Promise(resolve => setImmediate(resolve));
-};
 
 jest.mock(
   'lightning/platformResourceLoader',
@@ -166,6 +161,14 @@ describe('Chart: property', () => {
 
     expect(element.canvasOnmouseout).toEqual({});
   });
+  test('chartjsLoadedCallback was called', async () => {
+    let chartjsCb = jest.fn();
+    element.chartjsloadedCallback = chartjsCb;
+    return flushPromises().then(() => {
+      expect(chartjsCb).toBeCalled();
+      expect(element.chartjsloadedCallback).toEqual(chartjsCb);
+    });
+  });
 });
 
 describe('Chart: methods', () => {

__tests__/unit/chartBuilder.test.js

@@ -109,11 +109,6 @@ describe('test property', () => {
   });
 });
 
-const flushPromises = () => {
-  // eslint-disable-next-line no-undef
-  return new Promise(resolve => setImmediate(resolve));
-};
-
 const MOCK_GETCHARTDATA = [{ label: 'test', detail: [10] }];
 // Sample error for imperative Apex call
 const APEX_ERROR = {

__tests__/unit/microTaskHandler.test.js

@@ -0,0 +1,29 @@
+import ReactivityManager from 'c/reactivityManager';
+
+describe('Reactivity Manager: ', () => {
+  const throttledFn = jest.fn();
+  const rm = new ReactivityManager();
+  rm.registerJob(throttledFn);
+  let reactivityProxy;
+
+  test('get reactivity Proxy', () => {
+    reactivityProxy = rm.getReactivityProxy();
+    expect(reactivityProxy).toEqual({});
+    expect(throttledFn).not.toBeCalled();
+  });
+
+  test('proxy trigger throttling of the registered job', async () => {
+    reactivityProxy.test = 'test';
+    expect(throttledFn).not.toBeCalled();
+    await flushPromises().then(() => {
+      expect(throttledFn).toBeCalled();
+    });
+  });
+  test('manual call trigger throttling', async () => {
+    rm.throttleRegisteredJob();
+    expect(throttledFn).not.toBeCalled();
+    await flushPromises().then(() => {
+      expect(throttledFn).toBeCalled();
+    });
+  });
+});

__tests__/unit/reactivityManager.test.js

@@ -28,6 +28,18 @@ export default class Chart extends LightningElement {
     this._uuid = v;
   }
 
+  // callback used for knowing when chart js is loaded in the dom
+  // convenient to define new charts, new axes type and new plugins
+  _chartjsLoadedCallback;
+  @api
+  get chartjsloadedCallback() {
+    return this._chartjsLoadedCallback;
+  }
+  set chartjsloadedCallback(v) {
+    this._chartjsLoadedCallback = v;
+    this._callChartjsloadedCallback();
+  }
+
   _canvasOnchange;
   @api
   get canvasOnchange() {
@@ -327,6 +339,7 @@ export default class Chart extends LightningElement {
     loadScript(this, ChartJS).then(
       () => {
         this._chartjsLoaded = true;
+        this._callChartjsloadedCallback();
         this._reactivityManager.throttleRegisteredJob();
       },
       reason => {
@@ -390,6 +403,15 @@ export default class Chart extends LightningElement {
     );
   }
 
+  _callChartjsloadedCallback() {
+    if (
+      this._chartjsLoaded === true &&
+      typeof this._chartjsLoadedCallback === 'function'
+    ) {
+      this._chartjsLoadedCallback();
+    }
+  }
+
   _listenerHandlers = {
     // store option and throttle a drawChart
     handleOption: evt => {