aye-spy/lib/generateReport.js

A visual regression tool

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.generateRemoteReport = exports.generateLocalReport = undefined;

var _pug = require('pug');

var _pug2 = _interopRequireDefault(_pug);

var _path = require('path');

var _path2 = _interopRequireDefault(_path);

var _fs = require('fs');

var _fs2 = _interopRequireDefault(_fs);

var _logger = require('./logger');

var _logger2 = _interopRequireDefault(_logger);

var _remoteActions = require('./remoteActions');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

const createReportData = config => {
  const report = [];

  for (let i = 0; i < config.scenarios.length; i++) {
    const scenario = config.scenarios[i];
    scenario.viewports.forEach(viewport => {
      const name = `${scenario.label}-${viewport.label}`;
      const imageName = `${name}.png`;

      const baselinePath = _path2.default.relative(config.report, `${config.baseline}/${imageName}`);
      const latestPath = _path2.default.relative(config.report, `${config.latest}/${imageName}`);
      const generatedAbsolutePath = _path2.default.resolve(`${config.generatedDiffs}/${imageName}`);
      const generatedDiffsPath = _path2.default.relative(config.report, `${config.generatedDiffs}/${imageName}`);

      if (_fs2.default.existsSync(generatedAbsolutePath)) {
        _logger2.default.info('generate-report', `found diff for ${name}`);
        const scenarioData = {
          label: name,
          baseline: baselinePath,
          latest: latestPath,
          generatedDiff: generatedDiffsPath
        };

        report.push(scenarioData);
      }
    });
  }
  return report;
};
const createRemoteReportData = (url, diffs) => diffs.map(diff => {
  const [browser, branch, key, scenario] = diff.Key.split('/'); //eslint-disable-line no-unused-vars
  const scenarioName = scenario.split('.png')[0];

  return {
    label: scenarioName,
    baseline: `${url}${browser}/default/baseline/${scenario}`,
    latest: `${url}${browser}/${branch}/latest/${scenario}`,
    generatedDiff: `${url}${browser}/${branch}/generatedDiffs/${scenario}`
  };
});

const generateLocalReport = async config => writeReport(config, createReportData(config));

const writeReport = (config, reportsData) => {
  const templatePath = _path2.default.join(__dirname, '../templates/report.pug');
  const compileTemplate = _pug2.default.compileFile(templatePath);
  const reportPresentation = compileTemplate({ reportsData });
  const reportDir = _path2.default.resolve(config.report);

  try {
    if (!_fs2.default.existsSync(reportDir)) _fs2.default.mkdirSync(reportDir);
    _fs2.default.writeFileSync(`${reportDir}/index.html`, reportPresentation);
    _logger2.default.info('generate-report', 'successfully created report!');
    return `${reportDir}/index.html`;
  } catch (err) {
    _logger2.default.error(err);
    process.exitCode = 1;
  }
};

const generateRemoteReport = async config => {
  const filteredResults = await (0, _remoteActions.listRemoteKeys)('generatedDiffs', config);
  const url = `https://s3-${config.remoteRegion}.amazonaws.com/${config.remoteBucketName}/`;
  await writeReport(config, createRemoteReportData(url, filteredResults));
  await (0, _remoteActions.uploadRemoteKeys)('report', config);
};

exports.generateLocalReport = generateLocalReport;
exports.generateRemoteReport = generateRemoteReport;