kibana/utilities/visual_regression.js

/*
 * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
 * or more contributor license agreements. Licensed under the Elastic License
 * 2.0 and the Server Side Public License, v 1; you may not use this file except
 * in compliance with, at your election, the Elastic License 2.0 or the Server
 * Side Public License, v 1.
 */

import bluebird, { promisify } from 'bluebird';
import Handlebars from 'handlebars';
import fs from 'fs';
import path from 'path';
import { PNG } from 'pngjs';
import pixelmatch from 'pixelmatch';
import moment from 'moment';
import SimpleGit from 'simple-git';

const readDirAsync = promisify(fs.readdir);
const readFileAsync = promisify(fs.readFile);
const writeFileAsync = promisify(fs.writeFile);

Handlebars.registerHelper('lte', function lessThanEquals(value, threshold, options) {
  if (value <= threshold) {
    return options.fn(this);
  }
  return options.inverse(this);
});

Handlebars.registerHelper('gte', function greaterThanEquals(value, threshold, options) {
  if (value >= threshold) {
    return options.fn(this);
  }
  return options.inverse(this);
});

async function buildGallery(comparisons) {
  const simpleGit = new SimpleGit();
  const asyncBranch = promisify(simpleGit.branch, simpleGit);
  const branch = await asyncBranch();

  const template = Handlebars.compile(
    await readFileAsync(
      path.resolve('./utilities/templates/visual_regression_gallery.handlebars'),
      'utf8'
    ),
    { knownHelpersOnly: true }
  );

  const html = template({
    date: moment().format('MMMM Do YYYY, h:mm:ss a'),
    branch: branch.current,
    hiddenThreshold: 0,
    warningThreshold: 0.03,
    comparisons,
  });

  return writeFileAsync(
    path.resolve('./test/functional/screenshots/visual_regression_gallery.html'),
    html
  );
}

async function compareScreenshots() {
  const SCREENSHOTS_DIR = 'test/functional/screenshots';
  const BASELINE_SCREENSHOTS_DIR = path.resolve(SCREENSHOTS_DIR, 'baseline');
  const DIFF_SCREENSHOTS_DIR = path.resolve(SCREENSHOTS_DIR, 'diff');
  const SESSION_SCREENSHOTS_DIR = path.resolve(SCREENSHOTS_DIR, 'session');

  // We don't need to create the baseline dir because it's committed.
  fs.mkdirSync(DIFF_SCREENSHOTS_DIR, { recursive: true });
  fs.mkdirSync(SESSION_SCREENSHOTS_DIR, { recursive: true });
  const files = await readDirAsync(SESSION_SCREENSHOTS_DIR);
  const screenshots = files.filter((file) => file.indexOf('.png') !== -1);

  // We'll use this data to build a screenshot gallery in HTML.
  return await bluebird.map(screenshots, async (screenshot) => {
    // We're going to load image data and cache it in this object.
    const comparison = {
      name: screenshot,
      change: undefined,
      percentage: undefined,
      imageData: {
        session: undefined,
        baseline: undefined,
        diff: undefined,
      },
    };

    const sessionImagePath = path.resolve(SESSION_SCREENSHOTS_DIR, screenshot);

    const baselineImagePath = path.resolve(BASELINE_SCREENSHOTS_DIR, screenshot);

    const diffImagePath = path.resolve(DIFF_SCREENSHOTS_DIR, screenshot);

    const sessionImage = PNG.sync.read(await readFileAsync(sessionImagePath));
    const baselineImage = PNG.sync.read(await readFileAsync(baselineImagePath));
    const { width, height } = sessionImage;
    const diff = new PNG({ width, height });

    const numDiffPixels = pixelmatch(
      sessionImage.data,
      baselineImage.data,
      diff.data,
      width,
      height,
      { threshold: 0 }
    );

    await writeFileAsync(diffImagePath, PNG.sync.write(diff));

    const change = numDiffPixels / (width * height);
    const changePercentage = (change * 100).toFixed(2);
    console.log(`(${changePercentage}%) ${screenshot}`);
    comparison.percentage = changePercentage;
    comparison.change = change;

    // Once the images have been diffed, we can load and store the image data.
    comparison.imageData.session = await readFileAsync(sessionImagePath, 'base64');

    comparison.imageData.baseline = await readFileAsync(baselineImagePath, 'base64');

    comparison.imageData.diff = await readFileAsync(diffImagePath, 'base64');

    return comparison;
  });
}

export function run(done) {
  compareScreenshots().then(
    (screenshotComparisons) => {
      // Once all of the data has been loaded, we can build the gallery.
      buildGallery(screenshotComparisons).then(() => {
        done();
      });
    },
    (error) => {
      console.error(error);
      done(false);
    }
  );
}