terra-toolkit/lib/wdio/services/TerraCommands/visual-regression.js

Utilities to help when developing terra modules.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _determineTestOptions = _interopRequireDefault(require("./determine-test-options"));

var _logger = _interopRequireDefault(require("../../../../scripts/utils/logger"));

var context = '[Terra-Toolkit:terra-service]';
/**
 * Runs the visual regression comparisons and assert the screenshot comparison results are
 * the same size and within the mismatch tolerance.
 *
 * This should be used within a Mocha `it` block.
 *
 * @param {string} selector - the selector to use when capturing the screenshot.
 * @param {Object} [options] - the visual regression test options. Options include viewports and misMatchTolerance
 * @param {Object} [options.misMatchTolerance] - the mismatch tolerance for the screenshot comparison.
 * @param {Object} [options.viewports] - the list of Terra viewports to test.
 */

var runMatchScreenshotTest = function runMatchScreenshotTest(selector, options) {
  var screenshots = global.browser.checkElement(selector, options);
  var viewports = options.viewports;

  if (viewports && viewports.length) {
    global.expect(screenshots, 'the number of screenshot results to match the number of specified viewports').to.have.lengthOf(viewports.length); // add viewport name for meaningful results message if a failure occurs

    viewports.forEach(function (viewport, index) {
      screenshots[index].viewport = viewport.name;
    });
  }

  global.expect(screenshots).to.matchReference();
};
/**
 * @deprecated
 *
 * Mocha-chai wrapper method to capture screenshots of a specified element and assert the
 * screenshot comparison results are within the mismatch tolerance.
 *
 * @param {[name, options]} [args] - the list of test arguments to parse.
 * @param {string} [name=default] - the name of the visual regression test.
 * @param {Object} [options.misMatchTolerance] - the mismatch tolerance for the screenshot comparison.
 * @param {string} [options.selector=browser.options.terra.selector] - the element selector to use for
 *    the screenshot comparison.
 * @param {Object} [options.viewports] - the list of Terra viewports to test.
 */


var itMatchesScreenshot = function itMatchesScreenshot() {
  _logger.default.warn('Terra.it.matchesScreenshot is deprecated. Please use Terra.validates.screenshot inside an `it` block.', {
    context: context
  });

  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
    args[_key] = arguments[_key];
  }

  var _determineOptions$scr = _determineTestOptions.default.screenshotOptions(args),
      name = _determineOptions$scr.name,
      selector = _determineOptions$scr.selector,
      misMatchTolerance = _determineOptions$scr.misMatchTolerance,
      viewports = _determineOptions$scr.viewports;

  global.it("[".concat(name, "] to be within the mismatch tolerance"), function () {
    runMatchScreenshotTest(selector, {
      misMatchTolerance: misMatchTolerance,
      viewports: viewports
    });
  });
};
/**
 * The screenshot comparisons.  It will capture screenshots of a specified element
 * and assert the screenshot comparison results are within the mismatch tolerance or are an exact match
 *
 * This should be used within a Mocha `it` block.
 *
 * @param {[name, options]} [args] - the list of test arguments to parse.
 * @param {string} [name=default] - the name of the visual regression test.
 * @param {Object} [options] - the visual regression test options. Options include viewports and misMatchTolerance
 * @param {Object} [options.misMatchTolerance] - the mismatch tolerance for the screenshot comparison.
 * @param {string} [options.selector=browser.options.terra.selector] - the element selector to use for
 * @param {Object} [options.viewports] - the list of Terra viewports to test.
 */


var validatesScreenshot = function validatesScreenshot() {
  for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
    args[_key2] = arguments[_key2];
  }

  var _determineOptions$scr2 = _determineTestOptions.default.screenshotOptions(args),
      name = _determineOptions$scr2.name,
      selector = _determineOptions$scr2.selector,
      misMatchTolerance = _determineOptions$scr2.misMatchTolerance,
      viewports = _determineOptions$scr2.viewports;

  runMatchScreenshotTest(selector, {
    misMatchTolerance: misMatchTolerance,
    viewports: viewports,
    name: name
  });
};

var methods = {
  itMatchesScreenshot: itMatchesScreenshot,
  validatesScreenshot: validatesScreenshot,
  runMatchScreenshotTest: runMatchScreenshotTest
};
var _default = methods;
exports.default = _default;