Removed code duplication between 2 files. #2805

client/modules/IDE/components/Header/resolveUtils.unit.test.jsx

@@ -0,0 +1,67 @@
+// resolveUtils.unit.test.jsx
+
+import resolvePathsForElementsWithAttribute from '../../../../../common_utils/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);
+  });
+});

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 '../../../common_utils/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);

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);
+      }
+    }
+  });
+}

server/utils/previewGeneration.js

@@ -1,7 +1,7 @@
 import { resolvePathToFile } from '../utils/filePath';
+import { resolvePathsForElementsWithAttribute } from '../../common_utils/resolveUtils';
 
 import {
-  MEDIA_FILE_REGEX,
   STRING_REGEX,
   PLAINTEXT_FILE_REGEX,
   EXTERNAL_LINK_REGEX,
@@ -44,17 +44,8 @@ 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);
-      }
-    }
-  });
+export function resolveMediaElements(sketchDoc, files) {
+  resolvePathsForElementsWithAttribute('src', sketchDoc, files);
 }
 
 export function resolveScripts(sketchDoc, files, projectId) {