Add asset mutation events for replayer test

rrweb-io · Nov 24, 2023 · 50c7a21 · 50c7a21
1 parent 0783885
commit 50c7a21
Show file tree

Hide file tree

Showing 3 changed files with 166 additions and 1 deletion.
diff --git a/packages/rrweb/test/events/assets-mutation.ts b/packages/rrweb/test/events/assets-mutation.ts
@@ -0,0 +1,141 @@
+import { EventType, IncrementalSource, type eventWithTime } from '@rrweb/types';
+
+const events: eventWithTime[] = [
+  {
+    type: 4,
+    data: {
+      href: '',
+      width: 1600,
+      height: 900,
+    },
+    timestamp: 1636379531385,
+  },
+  {
+    type: 2,
+    data: {
+      node: {
+        type: 0,
+        childNodes: [
+          { type: 1, name: 'html', publicId: '', systemId: '', id: 2 },
+          {
+            type: 2,
+            tagName: 'html',
+            attributes: { lang: 'en' },
+            childNodes: [
+              {
+                type: 2,
+                tagName: 'head',
+                attributes: {},
+                childNodes: [
+                  { type: 3, textContent: '\n    ', id: 5 },
+                  {
+                    type: 2,
+                    tagName: 'meta',
+                    attributes: { charset: 'UTF-8' },
+                    childNodes: [],
+                    id: 6,
+                  },
+                  { type: 3, textContent: '\n    ', id: 7 },
+                  {
+                    type: 2,
+                    tagName: 'meta',
+                    attributes: {
+                      name: 'viewport',
+                      content: 'width=device-width, initial-scale=1.0',
+                    },
+                    childNodes: [],
+                    id: 8,
+                  },
+                  { type: 3, textContent: '\n    ', id: 9 },
+                  {
+                    type: 2,
+                    tagName: 'title',
+                    attributes: {},
+                    childNodes: [{ type: 3, textContent: 'assets', id: 11 }],
+                    id: 10,
+                  },
+                  { type: 3, textContent: '\n  ', id: 12 },
+                ],
+                id: 4,
+              },
+              { type: 3, textContent: '\n  ', id: 13 },
+              {
+                type: 2,
+                tagName: 'body',
+                attributes: {},
+                childNodes: [
+                  { type: 3, textContent: '\n    ', id: 15 },
+                  {
+                    type: 2,
+                    tagName: 'img',
+                    attributes: {
+                      width: '100',
+                      height: '100',
+                      style: 'border: 1px solid #000000',
+                    },
+                    childNodes: [{ type: 3, textContent: '\n    ', id: 17 }],
+                    id: 16,
+                  },
+                  { type: 3, textContent: '\n    ', id: 18 },
+                  {
+                    type: 2,
+                    tagName: 'script',
+                    attributes: {},
+                    childNodes: [
+                      { type: 3, textContent: 'SCRIPT_PLACEHOLDER', id: 20 },
+                    ],
+                    id: 19,
+                  },
+                  { type: 3, textContent: '\n  \n\n', id: 21 },
+                ],
+                id: 14,
+              },
+            ],
+            id: 3,
+          },
+        ],
+        id: 1,
+      },
+      initialOffset: { left: 0, top: 0 },
+    },
+    timestamp: 1636379531389,
+  },
+  {
+    type: EventType.IncrementalSnapshot,
+    data: {
+      source: IncrementalSource.Mutation,
+      texts: [],
+      attributes: [
+        {
+          id: 16,
+          attributes: {
+            src: 'httpx://example.com/image.png',
+          },
+        },
+      ],
+      removes: [],
+      adds: [],
+    },
+    timestamp: 1636379531390,
+  },
+  {
+    type: EventType.Asset,
+    data: {
+      url: 'httpx://example.com/image.png',
+      payload: {
+        rr_type: 'Blob',
+        type: 'image/png',
+        data: [
+          {
+            rr_type: 'ArrayBuffer',
+            base64:
+              'iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAAXNSR0IArs4c6QAAAWtJREFUeF7t1cEJAEAIxEDtv2gProo8xgpCwuLezI3LGFhBMi0+iCCtHoLEeggiSM1AjMcPESRmIIZjIYLEDMRwLESQmIEYjoUIEjMQw7EQQWIGYjgWIkjMQAzHQgSJGYjhWIggMQMxHAsRJGYghmMhgsQMxHAsRJCYgRiOhQgSMxDDsRBBYgZiOBYiSMxADMdCBIkZiOFYiCAxAzEcCxEkZiCGYyGCxAzEcCxEkJiBGI6FCBIzEMOxEEFiBmI4FiJIzEAMx0IEiRmI4ViIIDEDMRwLESRmIIZjIYLEDMRwLESQmIEYjoUIEjMQw7EQQWIGYjgWIkjMQAzHQgSJGYjhWIggMQMxHAsRJGYghmMhgsQMxHAsRJCYgRiOhQgSMxDDsRBBYgZiOBYiSMxADMdCBIkZiOFYiCAxAzEcCxEkZiCGYyGCxAzEcCxEkJiBGI6FCBIzEMOxEEFiBmI4FiJIzEAMx0IEiRmI4TwVjsedWCiXGAAAAABJRU5ErkJggg==', // base64
+          },
+        ],
+      },
+    },
+    timestamp: 1636379532355,
+  },
+];
+
+export default events;
diff --git a/...test-ts-replayer-asset-should-support-urls-src-modified-via-mutation-1-snap.png b/...test-ts-replayer-asset-should-support-urls-src-modified-via-mutation-1-snap.png
diff --git a/packages/rrweb/test/replay/asset-integration.test.ts b/packages/rrweb/test/replay/asset-integration.test.ts
@@ -4,6 +4,7 @@ import { launchPuppeteer, waitForRAF } from '../utils';
 import { toMatchImageSnapshot } from 'jest-image-snapshot';
 import type * as puppeteer from 'puppeteer';
 import events from '../events/assets';
+import mutationEvents from '../events/assets-mutation';
 
 interface ISuite {
   code: string;
@@ -37,6 +38,7 @@ describe('replayer', function () {
     });
     await page.evaluate(code);
     await page.evaluate(`let events = ${JSON.stringify(events)}`);
+    await page.evaluate(`let events2 = ${JSON.stringify(mutationEvents)}`);
 
     page.on('console', (msg) => console.log('PAGE LOG:', msg.text()));
   });
@@ -85,7 +87,29 @@ describe('replayer', function () {
       expect(image).toMatchImageSnapshot();
     });
 
-    test.todo('should support urls src modified via mutation');
+    it('should support urls src modified via incremental mutation', async () => {
+      await page.evaluate(`
+      const { Replayer } = rrweb;
+      window.replayer = new Replayer([], {
+        liveMode: true,
+      });
+      replayer.startLive();
+      window.replayer.addEvent(events2[0]);
+      window.replayer.addEvent(events2[1]);
+      window.replayer.addEvent(events2[2]);
+    `);
+
+      await waitForRAF(page);
+
+      await page.evaluate(`
+        window.replayer.addEvent(events2[3]);
+      `);
+
+      await waitForRAF(page);
+
+      const image = await page.screenshot();
+      expect(image).toMatchImageSnapshot();
+    });
 
     test.todo('should support video elements');
     test.todo('should support audio elements');