@applitools/eyes-storybook/src/transformSettings.js

const {deprecationWarning} = require('./errMessages');

function storyToOpenSettings({story, appName, serverSettings}) {
  const {name, kind, hasPlayFunction, config} = story;

  const {
    keepBatchOpen,
    batch,
    branchName,
    parentBranchName,
    baselineBranchName,
    compareWithParentBranch,
    ignoreGitMergeBase,
    baselineEnvName,
    envName,
    ignoreBaseline,
    properties,
  } = config;

  const storyProperties = [
    {name: 'Component name', value: kind},
    {name: 'State', value: name},
    ...(properties || []),
  ];
  if (hasPlayFunction) {
    storyProperties.push({name: 'Storybook play function', value: 'true'});
  }

  return {
    testName: story.baselineName,
    displayName: story.storyTitle,
    properties: storyProperties,
    appName,
    keepBatchOpen,
    batch,
    branchName,
    parentBranchName,
    baselineBranchName,
    compareWithParentBranch,
    ignoreGitBranching: ignoreGitMergeBase,
    baselineEnvName,
    environmentName: envName,
    ignoreBaseline,
    ...serverSettings,
  };
}

function storyToCheckSettings({story, url}) {
  const {
    ignoreDisplacements,
    ignoreRegions,
    accessibilityRegions,
    floatingRegions,
    strictRegions,
    contentRegions,
    layoutRegions,
    scriptHooks,
    sizeMode,
    target,
    fully,
    selector,
    tag,
    ignore,
    accessibilityValidation,
    sendDom,
    visualGridOptions,
    useDom,
    enablePatterns,
    environments,
    ignoreCaret,
    matchLevel,
    domMapping,
    layoutBreakpoints,
    disableBrowserFetching,
  } = story.config;

  if (sizeMode) {
    console.log(deprecationWarning({deprecatedThing: "'sizeMode'", newThing: "'target'"}));
  }

  let ignoreRegionsBackCompat = ignoreRegions;
  if (ignore && ignoreRegions === undefined) {
    console.log(deprecationWarning({deprecatedThing: "'ignore'", newThing: "'ignoreRegions'"}));
    ignoreRegionsBackCompat = ignore;
  }

  return {
    url,
    ignoreRegions: ignoreRegionsBackCompat,
    floatingRegions: mapFloatingRegions(floatingRegions),
    layoutRegions,
    strictRegions,
    contentRegions,
    accessibilityRegions: mapAccessibilityRegions(accessibilityRegions),
    environments,
    hooks: scriptHooks,
    sizeMode,
    region: target === 'region' ? selector : undefined,
    fully,
    tag,
    sendDom,
    ufgOptions: visualGridOptions,
    useDom,
    enablePatterns,
    ignoreDisplacements,
    fully,
    ignoreCaret,
    matchLevel,
    accessibilitySettings: accessibilityValidation
      ? {
          level: accessibilityValidation ? accessibilityValidation.level : undefined,
          version: accessibilityValidation ? accessibilityValidation.guidelinesVersion : undefined,
        }
      : undefined,
    domMapping,
    layoutBreakpoints,
    disableBrowserFetching,
  };
}

function mapFloatingRegions(floatingRegions) {
  if (!floatingRegions) return;
  if (!Array.isArray(floatingRegions)) floatingRegions = [floatingRegions];
  return floatingRegions.map(region => {
    let res = {
      offset: {
        bottom: region.maxDownOffset || 0,
        left: region.maxLeftOffset || 0,
        top: region.maxUpOffset || 0,
        right: region.maxRightOffset || 0,
      },
    };
    if (region.selector) {
      res.region = region.selector;
    } else if (region.region && isRegion(region.region)) {
      res.region = {
        y: region.region.top,
        x: region.region.left,
        width: region.region.width,
        height: region.region.height,
      };
    } else {
      return;
    }
    return res;
  });
}

function mapAccessibilityRegions(accessabilityRegions) {
  if (!accessabilityRegions) return;
  if (!Array.isArray(accessabilityRegions)) accessabilityRegions = [accessabilityRegions];
  return accessabilityRegions.map(region => {
    const res = {
      type: region.accessibilityType,
    };
    if (region.selector) {
      res.region = region.selector;
    } else if (region.region && isRegion(region.region)) {
      res.region = {
        y: region.region.top,
        x: region.region.left,
        width: region.region.width,
        height: region.region.height,
      };
    } else {
      return;
    }
    return res;
  });
}

function isRegion(region) {
  if (
    region.hasOwnProperty('top') &&
    region.hasOwnProperty('left') &&
    region.hasOwnProperty('width') &&
    region.hasOwnProperty('height')
  ) {
    return true;
  }
}

module.exports = {
  storyToOpenSettings,
  storyToCheckSettings,
};