jest-blaze-html/lib/serializer/index.js

Preview Jest snapshots right in your browser, working with blaze!

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.HTML_PREVIEW_SEPARATOR = exports.print = exports.test = undefined;

var _escapeHtml = require('escape-html');

var _escapeHtml2 = _interopRequireDefault(_escapeHtml);

var _timm = require('timm');

var _hyphenateStyleName = require('./hyphenateStyleName');

var _hyphenateStyleName2 = _interopRequireDefault(_hyphenateStyleName);

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

var reactTestInstance = Symbol.for('react.test.json');

// import printString from 'pretty-format/printString';

var HTML_PREVIEW_SEPARATOR = '------------HTML PREVIEW---------------';

// From React: src/renderers/dom/shared/HTMLDOMPropertyConfig.js
var REACT_PROPS_TO_DOM_ATTRS = {
  acceptCharset: 'accept-charset',
  className: 'class',
  htmlFor: 'for',
  httpEquiv: 'http-equiv'
};

// Adapted from React: src/renderers/dom/shared/CSSProperty.js
var IS_UNITLESS_NUMBER = {
  animationIterationCount: true,
  borderImageOutset: true,
  borderImageSlice: true,
  borderImageWidth: true,
  boxFlex: true,
  boxFlexGroup: true,
  boxOrdinalGroup: true,
  columnCount: true,
  flex: true,
  flexGrow: true,
  flexPositive: true,
  flexShrink: true,
  flexNegative: true,
  flexOrder: true,
  gridRow: true,
  gridColumn: true,
  fontWeight: true,
  lineClamp: true,
  lineHeight: true,
  opacity: true,
  order: true,
  orphans: true,
  tabSize: true,
  widows: true,
  zIndex: true,
  zoom: true,

  // SVG-related properties
  fillOpacity: true,
  floodOpacity: true,
  stopOpacity: true,
  strokeDasharray: true,
  strokeDashoffset: true,
  strokeMiterlimit: true,
  strokeOpacity: true,
  strokeWidth: true
};
Object.keys(IS_UNITLESS_NUMBER).forEach(function (prop) {
  ['Webkit', 'ms', 'Moz', 'O'].forEach(function (prefix) {
    var styleName = prefix + prop.charAt(0).toUpperCase() + prop.substring(1);
    IS_UNITLESS_NUMBER[styleName] = IS_UNITLESS_NUMBER[prop];
  });
});

var SELF_CLOSING = {
  area: true,
  base: true,
  br: true,
  col: true,
  command: true,
  embed: true,
  hr: true,
  img: true,
  input: true,
  keygen: true,
  link: true,
  meta: true,
  param: true,
  source: true,
  track: true,
  wbr: true
};

function test(object) {
  return object && !object.__visited && object.$$typeof === reactTestInstance;
}

function printMain(val, print, indent, opts) {
  var val2 = (0, _timm.merge)(val, {
    __visited: true,
    $$typeof: reactTestInstance
  }); // break infinite recursion
  var snapContents = print(val2, print, indent, opts);
  var htmlContents = printInstance(val, print, indent, opts);
  return snapContents + '\n' + HTML_PREVIEW_SEPARATOR + '\n' + htmlContents;
}

function printInstance(instance, print, indent, opts) {
  if (typeof instance === 'number') return print(instance);
  if (typeof instance === 'string') return (0, _escapeHtml2.default)(instance);

  var result = '<' + instance.type;

  var filteredProps = filterProps(instance.props);
  var numProps = Object.keys(filteredProps).length;
  result += printProps(filteredProps, print, indent, opts);
  if (numProps > 1) result += opts.edgeSpacing;
  result += '>';

  if (SELF_CLOSING[instance.type]) return result;

  var opts2 = opts;
  var indent2 = indent;
  if (filteredProps.style && filteredProps.style.whiteSpace === 'pre') {
    opts2 = (0, _timm.merge)(opts, { edgeSpacing: '' });
    indent2 = function indent2(str) {
      return str;
    };
  }

  var children = instance.children;
  if (children) {
    var printedChildren = printChildren(children, print, indent2, opts2);
    result += '' + opts2.edgeSpacing + indent2(printedChildren) + (opts2.edgeSpacing + '</' + instance.type + '>');
  } else if (instance.type.toUpperCase() === 'TEXTAREA') {
    result += ((0, _escapeHtml2.default)(instance.props.value) || '') + '</' + instance.type + '>';
  } else if (numProps <= 1) {
    result += '</' + instance.type + '>';
  } else {
    result += opts2.edgeSpacing + '</' + instance.type + '>';
  }

  return result;
}

function filterProps() {
  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

  var out = {};
  Object.keys(props).forEach(function (name) {
    var val = props[name];
    if (val == null) return;
    if (typeof val === 'string' || name === 'style' || val === true) {
      out[name] = val;
    }
  });
  return out;
}

function printProps(props, print, indent, opts) {
  var numProps = Object.keys(props).length;
  /* eslint-disable prefer-template */
  var wrapProp = numProps <= 1 ? function (name, val) {
    return ' ' + name + (val === undefined ? '' : '=' + val);
  } : function (name, val) {
    return opts.spacing + indent(name) + (val === undefined ? '' : '=' + val);
  };
  /* eslint-enable prefer-template */
  return Object.keys(props).sort().map(function (propName) {
    var propValue = props[propName];
    if (propValue == null) return '';

    var printedValue = void 0;
    if (typeof propValue === 'string') {
      printedValue = print(propValue);
    } else if (propName === 'style') {
      printedValue = printStyle(propValue, print);
    } else if (propValue === true) {
      printedValue = undefined;
    } else {
      return '';
    }

    var printedName = propName;
    if (REACT_PROPS_TO_DOM_ATTRS[propName]) {
      printedName = REACT_PROPS_TO_DOM_ATTRS[propName];
    }
    if (propValue === true) return wrapProp(printedName);
    return wrapProp(printedName, printedValue);
  }).join('');
}

function printStyle(style, print) {
  if (style == null) {
    return '';
  }

  var css = '';
  Object.keys(style).sort().forEach(function (styleName) {
    var styleValue = style[styleName];
    if (styleValue === undefined) return;
    css += (0, _hyphenateStyleName2.default)(styleName);
    css += ':';
    css += printStyleValue(styleName, styleValue);
    css += ';';
  });

  return print(css);
}

// From React: src/renderers/dom/shared/dangerousStyleValue.js
function printStyleValue(name, value) {
  if (value == null || typeof value === 'boolean' || value === '') return '';
  if (typeof value === 'number' && value !== 0 && !IS_UNITLESS_NUMBER[name]) {
    return value + 'px'; // Presumes implicit 'px' suffix for unitless numbers
  }
  return String(value).trim();
}

function printChildren(children, print, indent, opts) {
  return children.map(function (child) {
    return printInstance(child, print, indent, opts);
  }).join(opts.edgeSpacing);
}

exports.test = test;
exports.print = printMain;
exports.HTML_PREVIEW_SEPARATOR = HTML_PREVIEW_SEPARATOR;