All files / utils/test testUtils.js

72.72% Statements 8/11
50% Branches 1/2
100% Functions 3/3
72.72% Lines 8/11

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87                        1x                         1x                     55x 55x                       55x     55x       55x                       55x                                    
import resemble from 'resemblejs';
import { fakeImageLoader, fakeMetaDataProvider } from './testUtilsImageLoader';
import { fakeVolumeLoader } from './testUtilsVolumeLoader';
import { createNormalizedMouseEvent } from './testUtilsMouseEvents';
import { fillStackSegmentationWithMockData } from './fillStackSegmentationWithMockData';
import { fillVolumeSegmentationWithMockData } from './fillVolumeSegmentationWithMockData';
import { addMockContourSegmentation } from './addMockContourSegmentation';
 
/**
 * TestUtils: used for colorizing the image and comparing it to a baseline,
 * should not be used for development.
 */
const colors = [
  [255, 0, 0],
  [0, 255, 0],
  [128, 0, 0],
  [0, 0, 255],
  [0, 128, 0],
  [255, 255, 0],
  [0, 255, 255],
  [0, 0, 0],
  [0, 0, 128],
  [255, 0, 255],
];
 
Object.freeze(colors);
 
/**
 * It compares the image to a baseline, and if it is different by 1% it will
 * throw an error. Otherwise, it will return success.
 * @param {string} imageDataURL - The rendered imageDataURL - can be grabbed by calling canvas.toDataURL()
 * @param {string} baseline - Baseline imageDataURL - imported png in the test files
 * @param outputName - The name of the image for logging
 * @returns A promise.
 */
function compareImages(imageDataURL, baseline, outputName) {
  return new Promise((resolve, reject) => {
    resemble.outputSettings({
      useCrossOrigin: false,
      errorColor: {
        red: 0,
        green: 255,
        blue: 0,
      },
      transparency: 0.5,
      largeImageThreshold: 1200,
      outputDiff: true,
    });
 
    resemble(baseline.default)
      .compareTo(imageDataURL)
      .onComplete((data) => {
        const mismatch = parseFloat(data.misMatchPercentage);
        // If the error is greater than 1%, fail the test
        // and download the difference image
        // Todo: this should be a configurable threshold
        Iif (mismatch > 1) {
          console.warn('mismatch of', mismatch, '% to image', imageDataURL);
          const diff = data.getImageDataUrl();
          // Todo: we should store the diff image somewhere
          reject(
            new Error(
              `mismatch of ${mismatch} between images for ${outputName},
              the diff image is: \n\n ${diff} \n\n`
            )
          );
          // reject(new Error(`mismatch between images for ${outputName}\n mismatch: ${mismatch}\n ${baseline.default}\n ${imageDataURL}\n ${diff}`));
        } else {
          resolve();
        }
      });
  });
}
 
export {
  fakeImageLoader,
  fakeMetaDataProvider,
  fakeVolumeLoader,
  compareImages,
  createNormalizedMouseEvent,
  // utils
  colors,
  fillStackSegmentationWithMockData,
  fillVolumeSegmentationWithMockData,
  addMockContourSegmentation,
};