@razorpay/blade/build/lib/web/production/utils/bladeCoverage.js

The Design System that powers Razorpay

'use strict';

var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
var _regeneratorRuntime = require('@babel/runtime/regenerator');

var getBladeCoverage = function getBladeCoverage() {
  /**
   * Checks if DOM node is hidden or not
   */
  var _isElementHidden = function isElementHidden(element) {
    if (element.parentElement && _isElementHidden(element.parentElement)) {
      return true;
    }
    if (!(element instanceof HTMLElement)) {
      return false;
    }
    if (element.hidden) {
      return true;
    }
    var style = getComputedStyle(element);
    return style.display === 'none' || style.visibility === 'hidden' || style.opacity === '0';
  };

  /**
   * Checks if DOM node is a media element or not
   */
  var isMediaElement = function isMediaElement(element) {
    var mediaTags = ['img', 'video', 'audio', 'source', 'picture'];
    return mediaTags.includes(element.tagName.toLowerCase());
  };

  /**
   * Checks if DOM element is empty or not
   */
  var isElementEmpty = function isElementEmpty(element) {
    if (!element) return true;
    if (!element.childNodes.length) {
      return true;
    }
    return false;
  };
  var allDomElements = document.querySelectorAll('body *');
  var bladeNodeElements = [];
  var totalNodeElements = [];
  allDomElements.forEach(function (elm) {
    if (_isElementHidden(elm)) return;
    if (isElementEmpty(elm)) return;
    if (isMediaElement(elm)) return;

    // skip svg nodes but not blade icons
    var closestSvgNode = elm.closest('svg');
    // if this is a blade icon then add it
    if (elm.tagName.toLocaleLowerCase() === 'svg' && elm.hasAttribute('data-blade-component')) {
      bladeNodeElements.push(elm);
      totalNodeElements.push(elm);
      return;
    }
    // if it's a svg node inside a blade icon then skip it
    if ((closestSvgNode === null || closestSvgNode === void 0 ? void 0 : closestSvgNode.getAttribute('data-blade-component')) === 'icon') {
      return;
    }
    // if it's a svg node but not a blade icon then skip it
    if (closestSvgNode && !elm.hasAttribute('data-blade-component')) {
      return;
    }
    totalNodeElements.push(elm);

    // If element has data-blade-component add it
    if (elm.hasAttribute('data-blade-component')) {
      bladeNodeElements.push(elm);
    }
  });
  var totalNodes = totalNodeElements.length;
  var bladeNodes = bladeNodeElements.length;
  var bladeCoverage = Number((bladeNodes / totalNodes * 100).toFixed(2));
  // NaN guard
  if (totalNodes === 0) {
    bladeCoverage = 0;
  }
  return {
    bladeCoverage: bladeCoverage,
    totalNodes: totalNodes,
    bladeNodes: bladeNodes
  };
};
var assertBladeCoverage = /*#__PURE__*/function () {
  var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(_ref) {
    var page, expect, _ref$threshold, threshold, _yield$page$evaluate, bladeCoverage;
    return _regeneratorRuntime.wrap(function (_context) {
      while (1) switch (_context.prev = _context.next) {
        case 0:
          page = _ref.page, expect = _ref.expect, _ref$threshold = _ref.threshold, threshold = _ref$threshold === void 0 ? 70 : _ref$threshold;
          _context.next = 1;
          return page.evaluate(function (coverageFnStr) {
            // eslint-disable-next-line @typescript-eslint/no-implied-eval, no-new-func
            var calculateBladeCoverage = new Function("return (".concat(coverageFnStr, ")()"));
            return calculateBladeCoverage();
          }, getBladeCoverage.toString());
        case 1:
          _yield$page$evaluate = _context.sent;
          bladeCoverage = _yield$page$evaluate.bladeCoverage;
          expect(bladeCoverage).toBeGreaterThanOrEqual(threshold);
        case 2:
        case "end":
          return _context.stop();
      }
    }, _callee);
  }));
  return function assertBladeCoverage(_x) {
    return _ref2.apply(this, arguments);
  };
}();
module.exports = {
  getBladeCoverage: getBladeCoverage,
  assertBladeCoverage: assertBladeCoverage
};
//# sourceMappingURL=bladeCoverage.js.map