Some inconsequential tests to cover blocking scenarios

Author: eoghanmurray

packages/rrweb/test/record/__snapshots__/mutation.test.ts.mutation.blocked_endchild_element.snap.json

@@ -0,0 +1,50 @@
+[
+  {
+    "type": 3,
+    "data": {
+      "source": 0,
+      "texts": [],
+      "attributes": [],
+      "removes": [],
+      "adds": [
+        {
+          "parentId": 7,
+          "nextId": null,
+          "node": {
+            "type": 2,
+            "tagName": "div",
+            "attributes": {},
+            "childNodes": [],
+            "id": 9
+          }
+        },
+        {
+          "parentId": 9,
+          "nextId": null,
+          "node": {
+            "type": 2,
+            "tagName": "div",
+            "attributes": {
+              "class": "rr-block",
+              "rr_width": "1904px",
+              "rr_height": "0px"
+            },
+            "childNodes": [],
+            "id": 10
+          }
+        },
+        {
+          "parentId": 9,
+          "nextId": 10,
+          "node": {
+            "type": 2,
+            "tagName": "div",
+            "attributes": {},
+            "childNodes": [],
+            "id": 11
+          }
+        }
+      ]
+    }
+  }
+]

packages/rrweb/test/record/__snapshots__/mutation.test.ts.mutation.blocked_firstchild_element.snap.json

@@ -0,0 +1,50 @@
+[
+  {
+    "type": 3,
+    "data": {
+      "source": 0,
+      "texts": [],
+      "attributes": [],
+      "removes": [],
+      "adds": [
+        {
+          "parentId": 7,
+          "nextId": null,
+          "node": {
+            "type": 2,
+            "tagName": "div",
+            "attributes": {},
+            "childNodes": [],
+            "id": 9
+          }
+        },
+        {
+          "parentId": 9,
+          "nextId": null,
+          "node": {
+            "type": 2,
+            "tagName": "div",
+            "attributes": {},
+            "childNodes": [],
+            "id": 10
+          }
+        },
+        {
+          "parentId": 9,
+          "nextId": 10,
+          "node": {
+            "type": 2,
+            "tagName": "div",
+            "attributes": {
+              "class": "rr-block",
+              "rr_width": "1904px",
+              "rr_height": "0px"
+            },
+            "childNodes": [],
+            "id": 11
+          }
+        }
+      ]
+    }
+  }
+]

packages/rrweb/test/record/__snapshots__/mutation.test.ts.mutation.blocked_middlechild_element.snap.json

@@ -0,0 +1,61 @@
+[
+  {
+    "type": 3,
+    "data": {
+      "source": 0,
+      "texts": [],
+      "attributes": [],
+      "removes": [],
+      "adds": [
+        {
+          "parentId": 7,
+          "nextId": null,
+          "node": {
+            "type": 2,
+            "tagName": "div",
+            "attributes": {},
+            "childNodes": [],
+            "id": 9
+          }
+        },
+        {
+          "parentId": 9,
+          "nextId": null,
+          "node": {
+            "type": 2,
+            "tagName": "div",
+            "attributes": {},
+            "childNodes": [],
+            "id": 10
+          }
+        },
+        {
+          "parentId": 9,
+          "nextId": 10,
+          "node": {
+            "type": 2,
+            "tagName": "div",
+            "attributes": {
+              "class": "rr-block",
+              "rr_width": "1904px",
+              "rr_height": "0px"
+            },
+            "childNodes": [],
+            "id": 11
+          }
+        },
+        {
+          "parentId": 9,
+          "nextId": 11,
+          "node": {
+            "type": 2,
+            "tagName": "div",
+            "attributes": {},
+            "childNodes": [],
+            "id": 12
+          }
+        }
+      ]
+    }
+  }
+]

packages/rrweb/test/record/mutation.test.ts

@@ -209,4 +209,57 @@ describe('mutation', () => {
     );
     await assertSnapshot(mutations, true);
   });
+
+  it('blocked firstchild element', async () => {
+    await page.evaluate(() => {
+      const d1 = document.createElement('div');
+      document.body.append(d1);
+      const b1 = document.createElement('div');
+      b1.className = 'rr-block';
+      b1.append(document.createElement('div')); // shouldn't show up
+      b1.append(document.createElement('div')); // shouldn't show up
+      const siblingDiv = document.createElement('div');
+      d1.append(b1);
+      d1.append(siblingDiv);
+    });
+    await waitForRAF(page);
+    const mutations = events.filter((e)=>e.type === EventType.IncrementalSnapshot);
+    await assertSnapshot(mutations, true);
+  });
+
+  it('blocked middlechild element', async () => {
+    await page.evaluate(() => {
+      const d1 = document.createElement('div');
+      document.body.append(d1);
+      const b1 = document.createElement('div');
+      b1.className = 'rr-block';
+      b1.append(document.createElement('div')); // shouldn't show up
+      b1.append(document.createElement('div')); // shouldn't show up
+      const siblingDiv = document.createElement('div');
+      const siblingDiv2 = document.createElement('div');
+      d1.append(siblingDiv);
+      d1.append(b1);
+      d1.append(siblingDiv2);
+    });
+    await waitForRAF(page);
+    const mutations = events.filter((e)=>e.type === EventType.IncrementalSnapshot);
+    await assertSnapshot(mutations, true);
+  });
+
+  it('blocked endchild element', async () => {
+    await page.evaluate(() => {
+      const d1 = document.createElement('div');
+      document.body.append(d1);
+      const b1 = document.createElement('div');
+      b1.className = 'rr-block';
+      b1.append(document.createElement('div')); // shouldn't show up
+      b1.append(document.createElement('div')); // shouldn't show up
+      const siblingDiv = document.createElement('div');
+      d1.append(siblingDiv);
+      d1.append(b1);
+    });
+    await waitForRAF(page);
+    const mutations = events.filter((e)=>e.type === EventType.IncrementalSnapshot);
+    await assertSnapshot(mutations, true);
+  });
 });