Introduce unit test based on image comparison (#3988)

Attempt to make easier the creation of unit tests that check the drawing output. Until now, this was done by checking calls on a 'fake' context, which is hard to maintain (need to update pixel values by hands) and also not reliable when optimizing code (i.e. different calls sequence but same result).

As of now, it's possible to define 'auto' tests based on JSON/PNG fixtures: chart is generated from the JSON file and compared to the associated PNG image. The image diff is done using `pixelmatch`. As an example (and in preparation of the `filler` plugin), add auto tests for the line element `fill` options.

gulpfile.js

@@ -171,6 +171,8 @@ function validHTMLTask() {
 
 function startTest() {
  return [
+ {pattern: './test/fixtures/**/*.json', included: false},
+ {pattern: './test/fixtures/**/*.png', included: false},
  './node_modules/moment/min/moment.min.js',
  './test/jasmine.index.js',
  './src/**/*.js',

package.json

@@ -37,6 +37,7 @@
  "karma-jasmine": "^1.1.0",
  "karma-jasmine-html-reporter": "^0.2.2",
  "merge-stream": "^1.0.0",
+ "pixelmatch": "^4.0.2",
  "vinyl-source-stream": "^1.1.0",
  "watchify": "^3.7.0",
  "yargs": "^5.0.0"

test/fixtures/element.line/fill-line-bottom-span.json

@@ -0,0 +1,55 @@
+{
+ "config": {
+ "type": "line",
+ "data": {
+ "labels": ["0", "1", "2", "3", "4", "5", "6", "7", "8"],
+ "datasets": [{
+ "backgroundColor": "rgba(0, 0, 255, 0.25)",
+ "data": [null, null, 2, 3, 4, -4, -2, 1, 0]
+ }, {
+ "backgroundColor": "rgba(0, 255, 0, 0.25)",
+ "data": [6, 2, null, 4, 5, null, null, 2, 1]
+ }, {
+ "backgroundColor": "rgba(255, 0, 0, 0.25)",
+ "data": [7, 3, 4, 5, 6, 1, 4, null, null]
+ }, {
+ "backgroundColor": "rgba(0, 0, 255, 0.25)",
+ "data": [8, 7, 6, -6, -4, -6, 4, 5, 8]
+ }]
+ },
+ "options": {
+ "responsive": false,
+ "spanGaps": true,
+ "legend": false,
+ "title": false,
+ "scales": {
+ "xAxes": [{
+ "ticks": {
+ "display": false
+ }
+ }],
+ "yAxes": [{
+ "ticks": {
+ "display": false
+ }
+ }]
+ },
+ "elements": {
+ "point": {
+ "radius": 0
+ },
+ "line": {
+ "borderColor": "transparent",
+ "fill": "bottom",
+ "tension": 0
+ }
+ }
+ }
+ },
+ "options": {
+ "canvas": {
+ "height": 256,
+ "width": 512
+ }
+ }
+}

test/fixtures/element.line/fill-line-bottom.json

@@ -0,0 +1,55 @@
+{
+ "config": {
+ "type": "line",
+ "data": {
+ "labels": ["0", "1", "2", "3", "4", "5", "6", "7", "8"],
+ "datasets": [{
+ "backgroundColor": "rgba(0, 0, 255, 0.25)",
+ "data": [null, null, 2, 3, 4, -4, -2, 1, 0]
+ }, {
+ "backgroundColor": "rgba(0, 255, 0, 0.25)",
+ "data": [6, 2, null, 4, 5, null, null, 2, 1]
+ }, {
+ "backgroundColor": "rgba(255, 0, 0, 0.25)",
+ "data": [7, 3, 4, 5, 6, 1, 4, null, null]
+ }, {
+ "backgroundColor": "rgba(0, 0, 255, 0.25)",
+ "data": [8, 7, 6, -6, -4, -6, 4, 5, 8]
+ }]
+ },
+ "options": {
+ "responsive": false,
+ "spanGaps": false,
+ "legend": false,
+ "title": false,
+ "scales": {
+ "xAxes": [{
+ "ticks": {
+ "display": false
+ }
+ }],
+ "yAxes": [{
+ "ticks": {
+ "display": false
+ }
+ }]
+ },
+ "elements": {
+ "point": {
+ "radius": 0
+ },
+ "line": {
+ "borderColor": "transparent",
+ "fill": "bottom",
+ "tension": 0
+ }
+ }
+ }
+ },
+ "options": {
+ "canvas": {
+ "height": 256,
+ "width": 512
+ }
+ }
+}

test/fixtures/element.line/fill-line-spline-span.json

@@ -0,0 +1,55 @@
+{
+ "config": {
+ "type": "line",
+ "data": {
+ "labels": ["0", "1", "2", "3", "4", "5", "6", "7", "8"],
+ "datasets": [{
+ "backgroundColor": "rgba(0, 0, 192, 0.25)",
+ "data": [null, null, 2, 4, 2, 1, -1, 1, 2]
+ }, {
+ "backgroundColor": "rgba(0, 192, 0, 0.25)",
+ "data": [4, 2, null, 3, 2.5, null, -2, 1.5, 3]
+ }, {
+ "backgroundColor": "rgba(192, 0, 0, 0.25)",
+ "data": [3.5, 2, 1, 2.5, -2, 3, -1, null, null]
+ }, {
+ "backgroundColor": "rgba(128, 0, 128, 0.25)",
+ "data": [5, 6, 5, -2, -4, -3, 4, 2, 4.5]
+ }]
+ },
+ "options": {
+ "responsive": false,
+ "spanGaps": true,
+ "legend": false,
+ "title": false,
+ "scales": {
+ "xAxes": [{
+ "ticks": {
+ "display": false
+ }
+ }],
+ "yAxes": [{
+ "ticks": {
+ "display": false
+ }
+ }]
+ },
+ "elements": {
+ "point": {
+ "radius": 0
+ },
+ "line": {
+ "cubicInterpolationMode": "monotone",
+ "borderColor": "transparent",
+ "fill": "zero"
+ }
+ }
+ }
+ },
+ "options": {
+ "canvas": {
+ "height": 256,
+ "width": 512
+ }
+ }
+}

test/fixtures/element.line/fill-line-spline.json

@@ -0,0 +1,55 @@
+{
+ "config": {
+ "type": "line",
+ "data": {
+ "labels": ["0", "1", "2", "3", "4", "5", "6", "7", "8"],
+ "datasets": [{
+ "backgroundColor": "rgba(0, 0, 192, 0.25)",
+ "data": [null, null, 2, 4, 2, 1, -1, 1, 2]
+ }, {
+ "backgroundColor": "rgba(0, 192, 0, 0.25)",
+ "data": [4, 2, null, 3, 2.5, null, -2, 1.5, 3]
+ }, {
+ "backgroundColor": "rgba(192, 0, 0, 0.25)",
+ "data": [3.5, 2, 1, 2.5, -2, 3, -1, null, null]
+ }, {
+ "backgroundColor": "rgba(128, 0, 128, 0.25)",
+ "data": [5, 6, 5, -2, -4, -3, 4, 2, 4.5]
+ }]
+ },
+ "options": {
+ "responsive": false,
+ "spanGaps": false,
+ "legend": false,
+ "title": false,
+ "scales": {
+ "xAxes": [{
+ "ticks": {
+ "display": false
+ }
+ }],
+ "yAxes": [{
+ "ticks": {
+ "display": false
+ }
+ }]
+ },
+ "elements": {
+ "point": {
+ "radius": 0
+ },
+ "line": {
+ "cubicInterpolationMode": "monotone",
+ "borderColor": "transparent",
+ "fill": "zero"
+ }
+ }
+ }
+ },
+ "options": {
+ "canvas": {
+ "height": 256,
+ "width": 512
+ }
+ }
+}

test/fixtures/element.line/fill-line-stepped-span.json

@@ -0,0 +1,56 @@
+{
+ "config": {
+ "type": "line",
+ "data": {
+ "labels": ["0", "1", "2", "3", "4", "5", "6", "7", "8"],
+ "datasets": [{
+ "backgroundColor": "rgba(0, 0, 192, 0.25)",
+ "data": [null, null, 2, 4, 2, 1, -1, 1, 2]
+ }, {
+ "backgroundColor": "rgba(0, 192, 0, 0.25)",
+ "data": [4, 2, null, 3, 2.5, null, -2, 1.5, 3]
+ }, {
+ "backgroundColor": "rgba(192, 0, 0, 0.25)",
+ "data": [3.5, 2, 1, 2.5, -2, 3, -1, null, null]
+ }, {
+ "backgroundColor": "rgba(128, 0, 128, 0.25)",
+ "data": [5, 6, 5, -2, -4, -3, 4, 2, 4.5]
+ }]
+ },
+ "options": {
+ "responsive": false,
+ "spanGaps": true,
+ "legend": false,
+ "title": false,
+ "scales": {
+ "xAxes": [{
+ "ticks": {
+ "display": false
+ }
+ }],
+ "yAxes": [{
+ "ticks": {
+ "display": false
+ }
+ }]
+ },
+ "elements": {
+ "point": {
+ "radius": 0
+ },
+ "line": {
+ "cubicInterpolationMode": "monotone",
+ "borderColor": "transparent",
+ "stepped": true,
+ "fill": "zero"
+ }
+ }
+ }
+ },
+ "options": {
+ "canvas": {
+ "height": 256,
+ "width": 512
+ }
+ }
+}

test/fixtures/element.line/fill-line-stepped.json

@@ -0,0 +1,56 @@
+{
+ "config": {
+ "type": "line",
+ "data": {
+ "labels": ["0", "1", "2", "3", "4", "5", "6", "7", "8"],
+ "datasets": [{
+ "backgroundColor": "rgba(0, 0, 192, 0.25)",
+ "data": [null, null, 2, 4, 2, 1, -1, 1, 2]
+ }, {
+ "backgroundColor": "rgba(0, 192, 0, 0.25)",
+ "data": [4, 2, null, 3, 2.5, null, -2, 1.5, 3]
+ }, {
+ "backgroundColor": "rgba(192, 0, 0, 0.25)",
+ "data": [3.5, 2, 1, 2.5, -2, 3, -1, null, null]
+ }, {
+ "backgroundColor": "rgba(128, 0, 128, 0.25)",
+ "data": [5, 6, 5, -2, -4, -3, 4, 2, 4.5]
+ }]
+ },
+ "options": {
+ "responsive": false,
+ "spanGaps": false,
+ "legend": false,
+ "title": false,
+ "scales": {
+ "xAxes": [{
+ "ticks": {
+ "display": false
+ }
+ }],
+ "yAxes": [{
+ "ticks": {
+ "display": false
+ }
+ }]
+ },
+ "elements": {
+ "point": {
+ "radius": 0
+ },
+ "line": {
+ "cubicInterpolationMode": "monotone",
+ "borderColor": "transparent",
+ "stepped": true,
+ "fill": "zero"
+ }
+ }
+ }
+ },
+ "options": {
+ "canvas": {
+ "height": 256,
+ "width": 512
+ }
+ }
+}