- Added test for truncation of long attributes in outerHTML

- Added space consistency for the first attribute
- Increased maxlength for the entire outerHTML to 3 times that of the current element

Author: GeneratorX16

lib/core/utils/dq-element.js

@@ -32,12 +32,11 @@ function truncateAttributes(element, truncatedAttributeSet) {
   const openingTagEndIndex = str.indexOf('>');
 
   for (const truncatedAttr of truncatedAttributeSet) {
-    intermediateAttrString += `${truncatedAttr.substring(0, 20)}... `;
+    intermediateAttrString += ` ${truncatedAttr.substring(0, 20)}...`;
   }
 
   str =
     str.substring(0, openingTagEndIndex) +
-    ' ' +
     intermediateAttrString +
     ' ' +
     str.substring(openingTagEndIndex);
@@ -74,7 +73,7 @@ function truncateElement(element, maxLength, maxAttributeLength) {
     currElementStr = currElementStr.substring(0, maxLength) + '...>';
   }
 
-  if (currElementStr.length > maxLength) {
+  if (currElementStr.length > 3 * maxLength) {
     const endIndex = currElementStr.indexOf('>');
     currElementStr = currElementStr.substring(0, endIndex + 1);
   }

test/core/utils/dq-element.js

@@ -81,6 +81,21 @@ describe('DqElement', () => {
       assert.equal(result.source, '<div class="foo" id="target">');
     });
 
+    it('should truncate large attributes', () => {
+      const el = document.createElement('div');
+      let attributeName = 'data-';
+      for (let i = 0; i < 10000000; i++) {
+        attributeName += 'foo';
+      }
+      el.setAttribute(attributeName, 'bar');
+
+      const vNode = new DqElement(el);
+      assert.equal(
+        vNode.source,
+        `<div ${attributeName.substring(0, 20)}... ></div>`
+      );
+    });
+
     it('should truncate an element having a large number of attributes', () => {
       let customElement = '<div id="target"';
       for (let i = 0; i < 10; i++) {