Merge pull request #19 from lutovich/tests-for-chart-re-rendering

Basic unit tests for chart re-rendering

Author: gor181

.babelrc

@@ -0,0 +1,7 @@
+{
+  "presets": [
+    "es2015",
+    "react",
+    "stage-1"
+  ]
+}

package.json

@@ -17,9 +17,14 @@
   },
   "devDependencies": {
     "babel-eslint": "^4.1.3",
+    "babel-jest": "^14.1.0",
+    "babel-preset-es2015": "^6.13.2",
+    "babel-preset-react": "^6.11.1",
+    "babel-preset-stage-1": "^6.13.0",
     "eslint": "^1.6.0",
     "eslint-plugin-react": "^3.5.1",
     "gulp": "^3.9.0",
+    "jest": "^14.1.0",
     "react": "^0.14.0",
     "react-component-gulp-tasks": "^0.7.6",
     "react-dom": "^0.14.0"
@@ -38,9 +43,12 @@
     "publish:site": "NODE_ENV=production gulp publish:examples",
     "release": "NODE_ENV=production gulp release",
     "start": "gulp dev",
-    "test": "echo \"no tests yet\" && exit 0",
+    "test": "jest",
     "watch": "gulp watch:lib"
   },
+  "jest": {
+    "automock": false
+  },
   "keywords": [
     "react",
     "react-component"

src/__tests__/ChartTests.js

@@ -0,0 +1,46 @@
+import ChartComponent from "../Chart";
+
+describe('Chart re-rendering', () => {
+
+    it('required when chart data changes', () => {
+        const chart = new ChartComponent({type: 'bar', data: {}});
+        const updateRequired = chart.shouldComponentUpdate({type: 'bar', data: {labels: ['a', 'b']}});
+        expect(updateRequired).toBeTruthy();
+    });
+
+    it('required when chart legend changes', () => {
+        const chart = new ChartComponent({type: 'bar', legend: {display: false}});
+        const updateRequired = chart.shouldComponentUpdate({type: 'bar', legend: {display: true}});
+        expect(updateRequired).toBeTruthy();
+    });
+
+    it('required when chart options change', () => {
+        const chart = new ChartComponent({type: 'bar', options: {hover: {mode: 'single'}}});
+        const updateRequired = chart.shouldComponentUpdate({type: 'bar', options: {hover: {mode: 'label'}}});
+        expect(updateRequired).toBeTruthy();
+    });
+
+    it('not required when width changes', () => {
+        const chart = new ChartComponent({type: 'bar', width: 100});
+        const updateRequired = chart.shouldComponentUpdate({type: 'bar', width: 200});
+        expect(updateRequired).toBeFalsy();
+    });
+
+    it('not required when height changes', () => {
+        const chart = new ChartComponent({type: 'bar', height: 100});
+        const updateRequired = chart.shouldComponentUpdate({type: 'bar', height: 200});
+        expect(updateRequired).toBeFalsy();
+    });
+
+    it('not required when data do not change and onElementsClick installed', () => {
+        const chart = new ChartComponent({
+            type: 'bar', data: {}, onElementsClick: () => {
+            }
+        });
+        const updateRequired = chart.shouldComponentUpdate({
+            type: 'bar', data: {}, onElementsClick: () => {
+            }
+        });
+        expect(updateRequired).toBeFalsy();
+    });
+});