Reliably generate mutations while the snapshot is iterating in order …

…to test rare occurrences. Have added what I believe should be the correct parsing
rrweb-io · Feb 1, 2021 · e3a73e9 · e3a73e9
1 parent c1c687a
commit e3a73e9
Show file tree

Hide file tree

Showing 3 changed files with 112 additions and 0 deletions.
diff --git a/src/snapshot.ts b/src/snapshot.ts
@@ -525,6 +525,13 @@ export function serializeNodeWithId(
       serializedNode.type === NodeType.Element) &&
     recordChild
   ) {
+    // MUTATION TEST
+    if ((n as HTMLElement).dataset &&
+        (n as HTMLElement).dataset.mutatefn &&
+        typeof (n as HTMLElement).dataset.mutatefn === 'string') {
+      eval((n as HTMLElement).dataset.mutatefn || '');
+    }
+    // END MUTATION TEST (this block should be removed by compiler!)
     if (
       slimDOMOptions.headWhitespace &&
       _serializedNode.type === NodeType.Element &&

diff --git a/test/__snapshots__/integration.ts.snap b/test/__snapshots__/integration.ts.snap
@@ -202,6 +202,52 @@ exports[`[html file]: invalid-tagname.html 1`] = `
 </body></html>"
 `;
 
+exports[`[html file]: mutating.html 1`] = `
+"<!DOCTYPE html><html xmlns=\\"http://www.w3.org/1999/xhtml\\" lang=\\"en\\"><head>
+  <meta charset=\\"UTF-8\\" />
+  <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
+  <meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
+  <title>Document</title>  <noscript>SCRIPT_PLACEHOLDER</noscript></head><body>
+  <div data-mutatefn=\\"swapChildren()\\">
+    <!-- does see in sequence; 1, then 2 -->
+    <b id=\\"a1\\"></b><b id=\\"a2\\"></b>
+    
+  </div>
+  <div>
+    <!-- should see in sequence but doesn't -->
+    <b data-mutatefn=\\"swapForwardSiblings()\\"></b>
+    <b id=\\"b1\\"></b><b id=\\"b2\\"></b>
+    
+  </div>
+  <div>
+    <b id=\\"d1\\"></b>
+    <b data-mutatefn=\\"moveForwardSiblingBehind()\\" id=\\"d2\\"></b>
+    <!-- d3 shouldn't be visible -->
+  </div>
+  <div data-mutatefn=\\"swapInLongDistance()\\">
+    <!-- a1 shouldn't be here as it's already in tree -->
+    <b id=\\"e2\\"></b>
+  </div></body></html>"
+`;
+
+exports[`[html file]: mutating.html~ 1`] = `
+"<!DOCTYPE html><html xmlns=\\"http://www.w3.org/1999/xhtml\\" lang=\\"en\\"><head>
+  <meta charset=\\"UTF-8\\" />
+  <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
+  <meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
+  <title>Document</title>  <noscript>SCRIPT_PLACEHOLDER</noscript></head><body>
+  <div>
+    <b data-mutate=\\"swap1\\" id=\\"a1\\"></b>
+    <b id=\\"a2\\"></b>
+    <b id=\\"a3\\"></b>
+  </div>
+  <div>
+    <b id=\\"b1\\"></b>
+    <b data-mutate=\\"swap2\\" id=\\"b2\\"></b>
+    <b id=\\"b3\\"></b>
+  </div></body></html>"
+`;
+
 exports[`[html file]: picture.html 1`] = `
 "<html xmlns=\\"http://www.w3.org/1999/xhtml\\"><head></head><body>
     <picture>

diff --git a/test/html/mutating.html b/test/html/mutating.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Document</title>
+
+  <script>
+    function swapChildren() {
+      var a1 = document.getElementById('a1');
+      var a2 = document.getElementById('a2');
+      a1.parentNode.insertBefore(a1, a2);
+    }
+    function swapForwardSiblings() {
+      var b2 = document.getElementById('b2');
+      var b1 = document.getElementById('b1');
+      b2.parentNode.insertBefore(b1, b2);
+    }
+    function moveForwardSiblingBehind() {
+      var d1 = document.getElementById('d1');
+      var d3 = document.getElementById('d3');
+      d1.parentNode.insertBefore(d3, d1);
+    }
+    function swapInLongDistance() {
+      var a1 = document.getElementById('a1');
+      var e2 = document.getElementById('e2');
+      e2.parentNode.insertBefore(a1, e2);
+    }
+  </script>
+
+</head>
+
+<body>
+  <div data-mutatefn="swapChildren()">
+    <!-- does see in sequence; 1, then 2 -->
+    <b id="a2"></b>
+    <b id="a1"></b>
+  </div>
+  <div>
+    <!-- should see in sequence but doesn't -->
+    <b data-mutatefn="swapForwardSiblings()"></b>
+    <b id="b2"></b>
+    <b id="b1"></b>
+  </div>
+  <div>
+    <b id="d1"></b>
+    <b data-mutatefn="moveForwardSiblingBehind()" id="d2"></b>
+    <!-- d3 shouldn't be visible -->
+    <b id="d3"></b>
+  </div>
+  <div data-mutatefn="swapInLongDistance()">
+    <!-- a1 shouldn't be here as it's already in tree -->
+	<b id="e2"></b>
+  </div>
+</body>
+
+</html>