Introduce unit test based on image comparison

[simonbrunel]

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.

Creating image based unit tests

• Create a JS file or JSON file (similar to this one) that defines chart config¹ and generation options.
• Add this file intest/fixtures/{spec.name}/{feature-name}.json.
• Make sure this kind of line is at the beginning of specs/{spec.name}.js.
• Set "debug": true in the JSON file to prevent the canvas destruction when running tests.
• Run gulp unittest --watch --inputs=test/specs/{spec.name}.js.
• Click the "Debug" button (top/right): a test should fail with the associated canvas visible.
• Right click on the chart and "Save image as..." test/fixtures/{spec.name}/{feature-name}.png.
• Refresh the browser page (CTRL+R): test should now pass².
• Verify test relevancy by changing the feature values slightly in the JSON file.
• Remove debug: true from the JSON file.

¹ Important: generated charts should be as minimal as possible and focus only on tested features to prevent failure if another feature breaks (e.g. disable the title and legend when testing scales).

² Tests should pass in both browsers, if not, tolerance and or threshold need to be adjusted at the beginning of the JSON file and kept as low as possible.

[simonbrunel]

Example of a failing test (spanGaps: false instead of true):

[tannerlinsley]

Spectacular!!

[GabrielMancik]

I am trying to create new test. But the canvas seems to be destroyed when running tests so i can not create png file. I assume "debug": true should be put inside test/fixtures/{spec.name}/{feature-name}.json. But I have try putting it everywhere there without success.

json: scale-suggestedMin-suggestedMax-no-values.txt is located in test\fixtures\scale.linear

test\specs\scale.linear.tests: scale.linear.tests.txt