From 30b0776095722d95275730ba6b7bb25e6ef339b6 Mon Sep 17 00:00:00 2001
From: Anurag Hazra <anurag.hazra@razorpay.com>
Date: Mon, 16 Oct 2023 14:15:33 +0530
Subject: [PATCH] feat(blade-coverage-script): filter out svgs and media
 elements (#1706)

* feat(blade-coverage-script): filter out svgs and media elements

* chore: remove non blade element from getting outline
---
 .../background_script.js                      | 34 ++++++++++++++++++-
 1 file changed, 33 insertions(+), 1 deletion(-)

diff --git a/packages/blade-coverage-extension/background_script.js b/packages/blade-coverage-extension/background_script.js
index dd74c44735a..f1878d0525c 100644
--- a/packages/blade-coverage-extension/background_script.js
+++ b/packages/blade-coverage-extension/background_script.js
@@ -28,7 +28,16 @@ const calculateBladeCoverage = (shouldHighlightNodes) => {
     return false;
   };
 
+  /**
+   * Checks if DOM node is a media element or not
+   */
+  const isMediaElement = (element) => {
+    const mediaTags = ['img', 'video', 'audio', 'source', 'picture'];
+    return mediaTags.includes(element.tagName.toLowerCase());
+  };
+
   const allDomElements = document.querySelectorAll('body *');
+
   const bladeNodeElements = [];
   const totalNodeElements = [];
   const nonBladeNodeElements = [];
@@ -36,6 +45,25 @@ const calculateBladeCoverage = (shouldHighlightNodes) => {
   allDomElements.forEach((elm) => {
     if (isElementHidden(elm)) return;
     if (isElementEmpty(elm)) return;
+    if (isMediaElement(elm)) return;
+
+    // skip svg nodes but not blade icons
+    const 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?.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
@@ -48,7 +76,11 @@ const calculateBladeCoverage = (shouldHighlightNodes) => {
 
   const totalNodes = totalNodeElements.length;
   const bladeNodes = bladeNodeElements.length;
-  const bladeCoverage = Number(((bladeNodes / totalNodes) * 100).toFixed(2));
+  let bladeCoverage = Number(((bladeNodes / totalNodes) * 100).toFixed(2));
+  // NaN guard
+  if (totalNodes === 0) {
+    bladeCoverage = 0;
+  }
 
   if (shouldHighlightNodes) {
     nonBladeNodeElements.forEach((node) => {