Improve chart.test.js

Author: scolladon

README.md

@@ -38,7 +38,6 @@
 - [About the project](https://scolladon.github.io/lwcc/docs/general/about.html)
 - [Playground](https://scolladon.github.io/lwcc/docs/general/playground.html)
 
-
 ## Contributing
 
 Contributions are what make the trailblazer community such an amazing place. I regard this component as a way to inspire and learn from others. Any contributions you make are **greatly appreciated**.
@@ -51,4 +50,5 @@ See [contributing.md](/CONTRIBUTING.md) for lwcc principles.
 - [nanoid.js v3.1.3](https://github.com/ai/nanoid)
 
 ## License
-LWCC is available under the [MIT license](LICENSE.md)
+
+LWCC is available under the [MIT license](LICENSE.md)

__tests__/unit/chart.test.js

@@ -1,12 +1,43 @@
 import { createElement } from 'lwc';
-import { loadScript } from 'lightning/platformResourceLoader';
+//import { loadScript } from 'lightning/platformResourceLoader';
 
 import { BAR_CHART_TYPE, LINE_CHART_TYPE } from 'c/constants';
 
 import Chart from 'c/chart';
-
+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',
+  () => {
+    return {
+      loadScript() {
+        return new Promise((resolve, reject) => {
+          // If the variable is false we're simulating an error when loading
+          // the script resource.
+          if (!mockScriptSuccess) {
+            reject('Could not load script');
+          } else {
+            global.window = {};
+            global.window.Chart = require(`../../force-app/main/default/staticresources/chartjs_v280.js`);
+            resolve();
+          }
+        });
+      }
+    };
+  },
+  { virtual: true }
+);
+
 const CHARTS = [
   { class: Chart, type: BAR_CHART_TYPE },
   { class: Chart, type: LINE_CHART_TYPE }
@@ -20,13 +51,10 @@ describe('Chart: ChartJs library', () => {
     });
     element.type = LINE_CHART_TYPE;
     document.body.appendChild(element);
-
-    // Validation that the loadScript promise is called once.
-    expect(loadScript.mock.calls.length).toBe(1);
-    // Validation that the chartjs static resource is passed as parameter.
-    expect(loadScript.mock.calls[0][1]).toEqual(STATIC_RESOURCE_NAME);
-
-    document.body.removeChild(element);
+    Promise.resolve().then(() => {
+      expect(element.uuid).toBeDefined();
+      document.body.removeChild(element);
+    });
   });
 });
 
@@ -107,6 +135,123 @@ describe('Chart: property', () => {
     await expect(element.uuid).toBe('xyz');
   });
 });
+
+describe('Chart: methods', () => {
+  let chart, title, legend, dataSet, data;
+  beforeAll(() => {
+    chart = createElement('x-chart', { is: Chart });
+    document.body.appendChild(chart);
+    title = createElement('x-title', { is: Title });
+    chart.appendChild(title);
+    legend = createElement('x-legend', { is: Legend });
+    chart.appendChild(legend);
+    dataSet = createElement('x-dataset', { is: DataSet });
+    chart.appendChild(dataSet);
+    data = createElement('x-data', { is: Data });
+    dataSet.appendChild(data);
+    data.label = 'data';
+    data.detail = '[10]';
+    title.text = 'test';
+    legend.position = 'top';
+    chart.type = LINE_CHART_TYPE;
+  });
+
+  afterAll(() => {
+    dataSet.removeChild(data);
+    chart.removeChild(dataSet);
+    chart.removeChild(title);
+    chart.removeChild(legend);
+    document.body.removeChild(chart);
+  });
+  test('updateChart', async () => {
+    return flushPromises()
+      .then(flushPromises)
+      .then(flushPromises)
+      .then(() => {
+        chart.updateChart();
+        expect(chart.uuid).toBeDefined();
+      });
+  });
+  test('resetChart', async () => {
+    return flushPromises().then(() => {
+      chart.resetChart();
+      expect(chart.uuid).toBeDefined();
+    });
+  });
+  test('renderChart', async () => {
+    return flushPromises().then(() => {
+      chart.renderChart();
+      expect(chart.uuid).toBeDefined();
+    });
+  });
+  test('stopChart', async () => {
+    return flushPromises().then(() => {
+      const r = chart.stopChart();
+      expect(r).toBeInstanceOf(Chart);
+    });
+  });
+  test('resizeChart', async () => {
+    return flushPromises().then(() => {
+      const r = chart.resizeChart();
+      expect(r).toBeInstanceOf(Chart);
+    });
+  });
+  test('clearChart', async () => {
+    return flushPromises().then(() => {
+      const r = chart.clearChart();
+      expect(r).toBeInstanceOf(Chart);
+    });
+  });
+  test('toBase64ImageChart', async () => {
+    return flushPromises().then(() => {
+      const b64 = chart.toBase64ImageChart();
+      expect(b64).toBeDefined();
+    });
+  });
+  test('generateLegendChart', async () => {
+    return flushPromises().then(() => {
+      const legendChart = chart.generateLegendChart();
+      expect(legendChart).toBeDefined();
+    });
+  });
+  test('getElementAtEventChart', async () => {
+    return flushPromises().then(() => {
+      // todo expose events on the canvas
+      // expose catcher to implement.
+      // define one catcher and trigger an event
+      // Fetch the event and call getElementAtEventChart
+      //const el = chart.getElementAtEventChart();
+      //expect(el).toBeDefined();
+    });
+  });
+  test('getElementsAtEventChart', async () => {
+    return flushPromises().then(() => {
+      //const el = chart.getElementsAtEventChart();
+      //expect(el).toBeDefined();
+    });
+  });
+  test('getDatasetAtEventChart', async () => {
+    return flushPromises().then(() => {
+      //const el = chart.getDatasetAtEventChart();
+      //expect(el).toBeDefined();
+    });
+  });
+  test('getDatasetMetaChart', async () => {
+    return flushPromises().then(() => {
+      const el = chart.getDatasetMetaChart(0);
+      expect(el).toBeDefined();
+    });
+  });
+
+  test('destroyChart', async () => {
+    return flushPromises()
+      .then(flushPromises)
+      .then(() => {
+        chart.destroyChart();
+        expect(chart.uuid).toBeDefined();
+      });
+  });
+});
 // TODO: checkOptions()
 
 // TODO: Option event Listener & Disconnect Event Listener

jest.config.js

@@ -124,7 +124,10 @@ module.exports = {
   // runner: "jest-runner",
 
   // The paths to modules that run some code to configure or set up the testing environment before each test
-  setupFiles: ['./__tests__/__utils__/testAttributeHandler.js'],
+  setupFiles: [
+    './__tests__/__utils__/testAttributeHandler.js',
+    'jest-canvas-mock'
+  ],
 
   // A list of paths to modules that run some code to configure or set up the testing framework before each test
   // setupFilesAfterEnv: [],

package-lock.json

@@ -30,6 +30,7 @@
     "@salesforce/sfdx-lwc-jest": "^0.7.1",
     "eslint": "^5.16.0",
     "husky": "^4.2.3",
+    "jest-canvas-mock": "^2.2.0",
     "lint-staged": "^10.1.2",
     "prettier": "^1.19.1",
     "prettier-plugin-apex": "^1.0.0",