Updates to remainder of tests based on refined compact style mutations

rrweb-io · Jul 27, 2023 · 9a65c18 · 9a65c18
1 parent 58fc742
commit 9a65c18
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 31 deletions.
diff --git a/packages/rrweb/test/__snapshots__/integration.test.ts.snap b/packages/rrweb/test/__snapshots__/integration.test.ts.snap
@@ -2933,24 +2933,14 @@ exports[`record integration tests can record node mutations 1`] = `
           \\"id\\": 36,
           \\"attributes\\": {
             \\"id\\": \\"select2-drop\\",
-            \\"style\\": {
-              \\"left\\": \\"Npx\\",
-              \\"width\\": \\"Npx\\",
-              \\"top\\": \\"Npx\\",
-              \\"bottom\\": \\"auto\\",
-              \\"display\\": \\"block\\",
-              \\"position\\": false,
-              \\"visibility\\": false
-            },
+            \\"style\\": \\"left: Npx; width: Npx; top: Npx; bottom: auto; display: block;\\",
             \\"class\\": \\"select2-drop select2-display-none select2-with-searchbox select2-drop-active\\"
           }
         },
         {
           \\"id\\": 70,
           \\"attributes\\": {
-            \\"style\\": {
-              \\"display\\": false
-            }
+            \\"style\\": \\"\\"
           }
         },
         {

diff --git a/packages/rrweb/test/record/__snapshots__/cross-origin-iframes.test.ts.snap b/packages/rrweb/test/record/__snapshots__/cross-origin-iframes.test.ts.snap
@@ -2625,10 +2625,7 @@ exports[`cross origin iframes form.html should map scroll events correctly 1`] =
         {
           \\"id\\": 9,
           \\"attributes\\": {
-            \\"style\\": {
-              \\"width\\": \\"Npx\\",
-              \\"height\\": \\"Npx\\"
-            }
+            \\"style\\": \\"width: Npx; height: Npx;\\"
           }
         }
       ],

diff --git a/packages/rrweb/test/utils.ts b/packages/rrweb/test/utils.ts
@@ -133,23 +133,26 @@ function stringifySnapshots(snapshots: eventWithTime[]): string {
           s.data.source === IncrementalSource.Mutation
         ) {
           s.data.attributes.forEach((a) => {
-            if (
-              'style' in a.attributes &&
-              a.attributes.style &&
-              typeof a.attributes.style === 'object'
-            ) {
-              for (const [k, v] of Object.entries(a.attributes.style)) {
-                if (Array.isArray(v)) {
-                  if (coordinatesReg.test(k + ': ' + v[0])) {
-                    // TODO: could round the number here instead depending on what's coming out of various test envs
-                    a.attributes.style[k] = ['Npx', v[1]];
-                  }
-                } else if (typeof v === 'string') {
-                  if (coordinatesReg.test(k + ': ' + v)) {
-                    a.attributes.style[k] = 'Npx';
+            if ('style' in a.attributes && a.attributes.style) {
+              if (typeof a.attributes.style === 'object') {
+                for (const [k, v] of Object.entries(a.attributes.style)) {
+                  if (Array.isArray(v)) {
+                    if (coordinatesReg.test(k + ': ' + v[0])) {
+                      // TODO: could round the number here instead depending on what's coming out of various test envs
+                      a.attributes.style[k] = ['Npx', v[1]];
+                    }
+                  } else if (typeof v === 'string') {
+                    if (coordinatesReg.test(k + ': ' + v)) {
+                      a.attributes.style[k] = 'Npx';
+                    }
                   }
+                  coordinatesReg.lastIndex = 0; // wow, a real wart in ECMAScript
                 }
-                coordinatesReg.lastIndex = 0; // wow, a real wart in ECMAScript
+              } else if (coordinatesReg.test(a.attributes.style)) {
+                a.attributes.style = a.attributes.style.replace(
+                  coordinatesReg,
+                  '$1: Npx',
+                );
               }
             }