Add svg screenshot comparison test (#15777) (#15784)

Extend ImageComparator to allow for SVG-comparisons, add sample test in tag-cloud.

src/core_plugins/tagcloud/public/__tests__/tag_cloud.js

@@ -3,6 +3,8 @@ import _ from 'lodash';
 import TagCloud from 'plugins/tagcloud/tag_cloud';
 import d3 from 'd3';
 import { fromNode, delay } from 'bluebird';
+import { ImageComparator } from 'test_utils/image_comparator';
+import simpleloadPng from './simpleload.png';
 
 describe('tag cloud tests', function () {
 
@@ -373,6 +375,37 @@ describe('tag cloud tests', function () {
 
   });
 
+  describe('tagcloudscreenshot', function () {
+
+    let imageComparator;
+    beforeEach(async function () {
+      setupDOM();
+      imageComparator = new ImageComparator();
+    });
+
+
+    afterEach(() => {
+      imageComparator.destroy();
+      teardownDOM();
+    });
+
+
+    it('should test', async function () {
+
+      tagCloud = new TagCloud(domNode);
+      tagCloud.setData(baseTest.data);
+      tagCloud.setOptions(baseTest.options);
+
+      await fromNode(cb => tagCloud.once('renderComplete', cb));
+
+      const mismatchedPixels = await imageComparator.compareDOMContents(domNode.innerHTML, 512, 512, simpleloadPng, 0.50);
+      expect(mismatchedPixels).to.be.lessThan(64);
+    });
+
+
+  });
+
+
   function verifyTagProperties(expectedValues, actualElements, tagCloud) {
     expect(actualElements.length).to.equal(expectedValues.length);
     expectedValues.forEach((test, index) => {

src/test_utils/public/image_comparator.js

@@ -31,6 +31,38 @@ export class ImageComparator {
 
   }
 
+
+  async compareDOMContents(domContentsText, sourceWidth, sourceHeight, expectedImageSourcePng, threshold) {
+
+    const sourceCanvas = document.createElement('canvas');
+    sourceCanvas.width = sourceWidth;
+    sourceCanvas.height = sourceHeight;
+    sourceCanvas.style.position = 'fixed';
+    sourceCanvas.style.left = 0;
+    sourceCanvas.style.top = 0;
+    sourceCanvas.style.border = '1px solid blue';
+    const sourceContext2d = sourceCanvas.getContext('2d');
+    document.body.appendChild(sourceCanvas);
+
+    const sourceData =
+      `<svg xmlns="http://www.w3.org/2000/svg" width="${sourceWidth}" height="${sourceHeight}">
+        <foreignObject width="100%" height="100%">
+        ${domContentsText}
+        </foreignObject>
+      </svg>`;
+
+    const sourceImage = new Image();
+    return new Promise((resolve) => {
+      sourceImage.onload = async () => {
+        sourceContext2d.drawImage(sourceImage, 0, 0);
+        const mismatch = await this.compareImage(sourceCanvas, expectedImageSourcePng, threshold);
+        document.body.removeChild(sourceCanvas);
+        resolve(mismatch);
+      };
+      sourceImage.src = 'data:image/svg+xml;base64,' + btoa(sourceData);
+    });
+  }
+
   /**
    * Do pixel-comparison of two images
    * @param actualCanvasFromUser HTMl5 canvas
@@ -38,14 +70,10 @@ export class ImageComparator {
    * @param threshold number between 0-1. A lower number indicates a lower tolerance for pixel-differences.
    * @return number
    */
-  async  compareImage(actualCanvasFromUser, expectedImageSourcePng, threshold) {
-
-    console.log('compare image:actual ', actualCanvasFromUser);
-    console.log('compare image:expected ', expectedImageSourcePng);
+  async compareImage(actualCanvasFromUser, expectedImageSourcePng, threshold) {
 
     return new Promise((resolve) => {
 
-
       window.setTimeout(() => {
 
         const actualContextFromUser = actualCanvasFromUser.getContext('2d');