Removed code duplication between 2 files. #2805

Author: Harshit-7373

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

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
 

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) {

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