From 2059b32720e05fce371a3c56946862fdf7b5dfc2 Mon Sep 17 00:00:00 2001
From: Harshit-7373 <harshit.sansanwal2528@gmail.com>
Date: Tue, 11 Mar 2025 01:26:57 +0530
Subject: [PATCH 1/2] Removed code duplication between 2 files. #2805

---
 .../Header/resolveUtils.unit.test.jsx         | 67 +++++++++++++++++++
 client/modules/Preview/EmbedFrame.jsx         | 20 ++----
 server/utils/previewGeneration.js             | 16 ++---
 shared_file/resolveUtils.js                   | 33 +++++++++
 4 files changed, 110 insertions(+), 26 deletions(-)
 create mode 100644 client/modules/IDE/components/Header/resolveUtils.unit.test.jsx
 create mode 100644 shared_file/resolveUtils.js

diff --git a/client/modules/IDE/components/Header/resolveUtils.unit.test.jsx b/client/modules/IDE/components/Header/resolveUtils.unit.test.jsx
new file mode 100644
index 0000000000..69be0d6c4a
--- /dev/null
+++ b/client/modules/IDE/components/Header/resolveUtils.unit.test.jsx
@@ -0,0 +1,67 @@
+// resolveUtils.unit.test.jsx
+
+import resolvePathsForElementsWithAttribute from '../../../../../shared_file/resolveUtils';
+import { resolvePathToFile } from '../../../../../server/utils/filePath';
+
+// Mock the dependencies
+jest.mock('../../../../../server/utils/filePath', () => ({
+  resolvePathToFile: jest.fn()
+}));
+
+jest.mock('../../../../../server/utils/fileUtils', () => ({
+  MEDIA_FILE_REGEX: /\.(png|jpg|jpeg|gif|svg)$/i
+}));
+
+describe('resolvePathsForElementsWithAttribute', () => {
+  let mockSketchDoc;
+  let mockFiles;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+
+    // Create a mock DOM environment
+    mockSketchDoc = document.implementation.createHTMLDocument();
+    mockFiles = {
+      'image.png': { url: 'https://example.com/image.png' },
+      'missing.jpg': { url: null }
+    };
+
+    resolvePathToFile.mockImplementation((fileName, files) => files[fileName]);
+  });
+
+  it('should update the attribute when the file is resolved successfully', () => {
+    const element = mockSketchDoc.createElement('img');
+    element.setAttribute('src', 'image.png');
+    mockSketchDoc.body.appendChild(element);
+
+    resolvePathsForElementsWithAttribute('src', mockSketchDoc, mockFiles);
+
+    expect(element.getAttribute('src')).toBe('https://example.com/image.png');
+  });
+
+  it('should not update the attribute when the file resolution fails', () => {
+    const element = mockSketchDoc.createElement('img');
+    element.setAttribute('src', 'missing.jpg');
+    mockSketchDoc.body.appendChild(element);
+
+    resolvePathsForElementsWithAttribute('src', mockSketchDoc, mockFiles);
+
+    expect(element.getAttribute('src')).toBe('missing.jpg');
+  });
+
+  it('should not update the attribute when the value does not match MEDIA_FILE_REGEX', () => {
+    const element = mockSketchDoc.createElement('img');
+    element.setAttribute('src', 'document.pdf');
+    mockSketchDoc.body.appendChild(element);
+
+    resolvePathsForElementsWithAttribute('src', mockSketchDoc, mockFiles);
+
+    expect(element.getAttribute('src')).toBe('document.pdf');
+  });
+
+  it('should do nothing when no elements with the specified attribute are found', () => {
+    resolvePathsForElementsWithAttribute('src', mockSketchDoc, mockFiles);
+
+    expect(mockSketchDoc.querySelectorAll('[src]').length).toBe(0);
+  });
+});
diff --git a/client/modules/Preview/EmbedFrame.jsx b/client/modules/Preview/EmbedFrame.jsx
index 4b2ad60d9b..5f87a5f89c 100644
--- a/client/modules/Preview/EmbedFrame.jsx
+++ b/client/modules/Preview/EmbedFrame.jsx
@@ -8,7 +8,6 @@ import decomment from 'decomment';
 import { resolvePathToFile } from '../../../server/utils/filePath';
 import getConfig from '../../utils/getConfig';
 import {
-  MEDIA_FILE_REGEX,
   MEDIA_FILE_QUOTED_REGEX,
   STRING_REGEX,
   PLAINTEXT_FILE_REGEX,
@@ -18,6 +17,7 @@ import {
 import { getAllScriptOffsets } from '../../utils/consoleUtils';
 import { registerFrame } from '../../utils/dispatcher';
 import { createBlobUrl } from './filesReducer';
+import resolvePathsForElementsWithAttribute from '../../../shared_file/resolveUtils';
 
 let objectUrls = {};
 let objectPaths = {};
@@ -34,19 +34,6 @@ const Frame = styled.iframe`
   `}
 `;
 
-function resolvePathsForElementsWithAttribute(attr, sketchDoc, files) {
-  const elements = sketchDoc.querySelectorAll(`[${attr}]`);
-  const elementsArray = Array.prototype.slice.call(elements);
-  elementsArray.forEach((element) => {
-    if (element.getAttribute(attr).match(MEDIA_FILE_REGEX)) {
-      const resolvedFile = resolvePathToFile(element.getAttribute(attr), files);
-      if (resolvedFile && resolvedFile.url) {
-        element.setAttribute(attr, resolvedFile.url);
-      }
-    }
-  });
-}
-
 function resolveCSSLinksInString(content, files) {
   let newContent = content;
   let cssFileStrings = content.match(STRING_REGEX);
@@ -218,7 +205,12 @@ function injectLocalFiles(files, htmlFile, options) {
   base.href = `${window.origin}${basePath}${basePath.length > 1 && '/'}`;
   sketchDoc.head.appendChild(base);
 
+  // Resolve paths for elements with the 'src' attribute
+  // This updates the 'src' attribute of elements (e.g., <img>, <script>) to their resolved URLs
   resolvePathsForElementsWithAttribute('src', sketchDoc, resolvedFiles);
+
+  // Resolve paths for elements with the 'href' attribute
+  // This updates the 'href' attribute of elements (e.g., <a>, <link>) to their resolved URLs
   resolvePathsForElementsWithAttribute('href', sketchDoc, resolvedFiles);
   // should also include background, data, poster, but these are used way less often
 
diff --git a/server/utils/previewGeneration.js b/server/utils/previewGeneration.js
index 22dbcd3a02..31511e940c 100644
--- a/server/utils/previewGeneration.js
+++ b/server/utils/previewGeneration.js
@@ -1,7 +1,7 @@
 import { resolvePathToFile } from '../utils/filePath';
+import { resolvePathsForElementsWithAttribute } from '../../shared_file/resolveUtils';
 
 import {
-  MEDIA_FILE_REGEX,
   STRING_REGEX,
   PLAINTEXT_FILE_REGEX,
   EXTERNAL_LINK_REGEX,
@@ -44,17 +44,9 @@ export function injectMediaUrls(filesToInject, allFiles, projectId) {
   });
 }
 
-export function resolvePathsForElementsWithAttribute(attr, sketchDoc, files) {
-  const elements = sketchDoc.querySelectorAll(`[${attr}]`);
-  const elementsArray = Array.prototype.slice.call(elements);
-  elementsArray.forEach((element) => {
-    if (element.getAttribute(attr).match(MEDIA_FILE_REGEX)) {
-      const resolvedFile = resolvePathToFile(element.getAttribute(attr), files);
-      if (resolvedFile && resolvedFile.url) {
-        element.setAttribute(attr, resolvedFile.url);
-      }
-    }
-  });
+// Wrapped the function in a proper call
+export function resolveMediaElements(sketchDoc, files) {
+  resolvePathsForElementsWithAttribute('src', sketchDoc, files);
 }
 
 export function resolveScripts(sketchDoc, files, projectId) {
diff --git a/shared_file/resolveUtils.js b/shared_file/resolveUtils.js
new file mode 100644
index 0000000000..b8b07bb4d2
--- /dev/null
+++ b/shared_file/resolveUtils.js
@@ -0,0 +1,33 @@
+// Import necessary utilities for resolving file paths and checking media file patterns
+import { resolvePathToFile } from '../server/utils/filePath'; // Utility to resolve file paths
+import { MEDIA_FILE_REGEX } from '../server/utils/fileUtils'; // Regex pattern to identify media files
+
+// Shared function to resolve paths for elements with a specific attribute
+export default function resolvePathsForElementsWithAttribute(
+  attr,
+  sketchDoc,
+  files
+) {
+  // Find all elements in the document that have the specified attribute
+  const elements = sketchDoc.querySelectorAll(`[${attr}]`);
+
+  // Convert the NodeList to an array for easier iteration
+  const elementsArray = Array.prototype.slice.call(elements);
+
+  // Iterate over each element with the specified attribute
+  elementsArray.forEach((element) => {
+    // Get the value of the attribute
+    const attrValue = element.getAttribute(attr);
+
+    // Use RegExp.test() instead of match() !== null
+    if (MEDIA_FILE_REGEX.test(attrValue)) {
+      // Resolve the file path using the provided files mapping
+      const resolvedFile = resolvePathToFile(attrValue, files);
+
+      // If the file is resolved successfully and has a URL, update the attribute
+      if (resolvedFile && resolvedFile.url) {
+        element.setAttribute(attr, resolvedFile.url);
+      }
+    }
+  });
+}

From c1774cf82605fec78853f36c5541b71a315ecad6 Mon Sep 17 00:00:00 2001
From: raclim <raclim@nyu.edu>
Date: Thu, 13 Mar 2025 16:29:33 -0400
Subject: [PATCH 2/2] update names, remove extra comments, add documentation

---
 .../Header/resolveUtils.unit.test.jsx         |  2 +-
 client/modules/Preview/EmbedFrame.jsx         |  7 +---
 common_utils/resolveUtils.js                  | 32 ++++++++++++++++++
 server/utils/previewGeneration.js             |  3 +-
 shared_file/resolveUtils.js                   | 33 -------------------
 5 files changed, 35 insertions(+), 42 deletions(-)
 create mode 100644 common_utils/resolveUtils.js
 delete mode 100644 shared_file/resolveUtils.js

diff --git a/client/modules/IDE/components/Header/resolveUtils.unit.test.jsx b/client/modules/IDE/components/Header/resolveUtils.unit.test.jsx
index 69be0d6c4a..3b861e9070 100644
--- a/client/modules/IDE/components/Header/resolveUtils.unit.test.jsx
+++ b/client/modules/IDE/components/Header/resolveUtils.unit.test.jsx
@@ -1,6 +1,6 @@
 // resolveUtils.unit.test.jsx
 
-import resolvePathsForElementsWithAttribute from '../../../../../shared_file/resolveUtils';
+import resolvePathsForElementsWithAttribute from '../../../../../common_utils/resolveUtils';
 import { resolvePathToFile } from '../../../../../server/utils/filePath';
 
 // Mock the dependencies
diff --git a/client/modules/Preview/EmbedFrame.jsx b/client/modules/Preview/EmbedFrame.jsx
index 5f87a5f89c..b16da35afd 100644
--- a/client/modules/Preview/EmbedFrame.jsx
+++ b/client/modules/Preview/EmbedFrame.jsx
@@ -17,7 +17,7 @@ import {
 import { getAllScriptOffsets } from '../../utils/consoleUtils';
 import { registerFrame } from '../../utils/dispatcher';
 import { createBlobUrl } from './filesReducer';
-import resolvePathsForElementsWithAttribute from '../../../shared_file/resolveUtils';
+import resolvePathsForElementsWithAttribute from '../../../common_utils/resolveUtils';
 
 let objectUrls = {};
 let objectPaths = {};
@@ -205,12 +205,7 @@ function injectLocalFiles(files, htmlFile, options) {
   base.href = `${window.origin}${basePath}${basePath.length > 1 && '/'}`;
   sketchDoc.head.appendChild(base);
 
-  // Resolve paths for elements with the 'src' attribute
-  // This updates the 'src' attribute of elements (e.g., <img>, <script>) to their resolved URLs
   resolvePathsForElementsWithAttribute('src', sketchDoc, resolvedFiles);
-
-  // Resolve paths for elements with the 'href' attribute
-  // This updates the 'href' attribute of elements (e.g., <a>, <link>) to their resolved URLs
   resolvePathsForElementsWithAttribute('href', sketchDoc, resolvedFiles);
   // should also include background, data, poster, but these are used way less often
 
diff --git a/common_utils/resolveUtils.js b/common_utils/resolveUtils.js
new file mode 100644
index 0000000000..7f1af51a1b
--- /dev/null
+++ b/common_utils/resolveUtils.js
@@ -0,0 +1,32 @@
+import { resolvePathToFile } from '../server/utils/filePath';
+import { MEDIA_FILE_REGEX } from '../server/utils/fileUtils';
+
+/**
+ * Resolves paths for elements with a specific attribute.
+ *
+ * @param {string} attr - The attribute name to search for in elements, such as "src" or "href".
+ * @param {Document} sketchDoc - The document to search for elements with the attribute.
+ * @param {Array} files - The files to search for the resolved paths.
+ */
+
+export default function resolvePathsForElementsWithAttribute(
+  attr,
+  sketchDoc,
+  files
+) {
+  const elements = sketchDoc.querySelectorAll(`[${attr}]`);
+
+  const elementsArray = Array.prototype.slice.call(elements);
+
+  elementsArray.forEach((element) => {
+    const attrValue = element.getAttribute(attr);
+
+    if (MEDIA_FILE_REGEX.test(attrValue)) {
+      const resolvedFile = resolvePathToFile(attrValue, files);
+
+      if (resolvedFile && resolvedFile.url) {
+        element.setAttribute(attr, resolvedFile.url);
+      }
+    }
+  });
+}
diff --git a/server/utils/previewGeneration.js b/server/utils/previewGeneration.js
index 31511e940c..31712c5e39 100644
--- a/server/utils/previewGeneration.js
+++ b/server/utils/previewGeneration.js
@@ -1,5 +1,5 @@
 import { resolvePathToFile } from '../utils/filePath';
-import { resolvePathsForElementsWithAttribute } from '../../shared_file/resolveUtils';
+import { resolvePathsForElementsWithAttribute } from '../../common_utils/resolveUtils';
 
 import {
   STRING_REGEX,
@@ -44,7 +44,6 @@ export function injectMediaUrls(filesToInject, allFiles, projectId) {
   });
 }
 
-// Wrapped the function in a proper call
 export function resolveMediaElements(sketchDoc, files) {
   resolvePathsForElementsWithAttribute('src', sketchDoc, files);
 }
diff --git a/shared_file/resolveUtils.js b/shared_file/resolveUtils.js
deleted file mode 100644
index b8b07bb4d2..0000000000
--- a/shared_file/resolveUtils.js
+++ /dev/null
@@ -1,33 +0,0 @@
-// Import necessary utilities for resolving file paths and checking media file patterns
-import { resolvePathToFile } from '../server/utils/filePath'; // Utility to resolve file paths
-import { MEDIA_FILE_REGEX } from '../server/utils/fileUtils'; // Regex pattern to identify media files
-
-// Shared function to resolve paths for elements with a specific attribute
-export default function resolvePathsForElementsWithAttribute(
-  attr,
-  sketchDoc,
-  files
-) {
-  // Find all elements in the document that have the specified attribute
-  const elements = sketchDoc.querySelectorAll(`[${attr}]`);
-
-  // Convert the NodeList to an array for easier iteration
-  const elementsArray = Array.prototype.slice.call(elements);
-
-  // Iterate over each element with the specified attribute
-  elementsArray.forEach((element) => {
-    // Get the value of the attribute
-    const attrValue = element.getAttribute(attr);
-
-    // Use RegExp.test() instead of match() !== null
-    if (MEDIA_FILE_REGEX.test(attrValue)) {
-      // Resolve the file path using the provided files mapping
-      const resolvedFile = resolvePathToFile(attrValue, files);
-
-      // If the file is resolved successfully and has a URL, update the attribute
-      if (resolvedFile && resolvedFile.url) {
-        element.setAttribute(attr, resolvedFile.url);
-      }
-    }
-  });
-}