test: Add test case for rebuilding blocked elements

Follow-up to #117 - adds a test case
getsentry · Oct 19, 2023 · 11b97cf · 11b97cf
1 parent 84da5e3
commit 11b97cf
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 0 deletions.
diff --git a/packages/rrdom/test/virtual-dom.test.ts b/packages/rrdom/test/virtual-dom.test.ts
@@ -6,6 +6,7 @@ import * as path from 'path';
 import * as puppeteer from 'puppeteer';
 import { JSDOM } from 'jsdom';
 import {
+  buildNodeWithSN,
   cdataNode,
   commentNode,
   documentNode,
@@ -207,6 +208,30 @@ describe('RRDocument for browser environment', () => {
       expect((rrNode as RRElement).tagName).toEqual('SHADOWROOT');
       expect(rrNode).toBe(parentRRNode.shadowRoot);
     });
+
+    it('can rebuild blocked element with correct dimensions', () => {
+      // @ts-expect-error Testing buildNodeWithSN with rr elements
+      const node = buildNodeWithSN({
+        id: 1,
+        tagName: 'svg',
+        type: NodeType.Element,
+        isSVG: true,
+        attributes: {
+          rr_width: '50px',
+          rr_height: '50px',
+        },
+        childNodes: [],
+      }, {
+        // @ts-expect-error
+        doc: new RRDocument(),
+        mirror,
+        blockSelector: '*',
+        slimDOMOptions: {},
+      }) as RRElement;
+
+      expect(node.style.width).toBe('50px');
+      expect(node.style.height).toBe('50px');
+    });
   });
 
   describe('create a RRDocument from a html document', () => {

diff --git a/packages/rrweb-snapshot/src/rebuild.ts b/packages/rrweb-snapshot/src/rebuild.ts
@@ -127,6 +127,7 @@ function buildNode(
   },
 ): Node | null {
   const { doc, hackCss, cache } = options;
+  console.log('buildNode');
   switch (n.type) {
     case NodeType.Document:
       return doc.implementation.createDocument(null, '', null);

diff --git a/packages/rrweb-snapshot/test/rebuild.test.ts b/packages/rrweb-snapshot/test/rebuild.test.ts
@@ -47,6 +47,33 @@ describe('rebuild', function () {
     });
   });
 
+  describe('rr_width/rr_height', function () {
+    it('rebuild blocked element with correct dimensions', function () {
+      const node = buildNodeWithSN(
+        {
+          id: 1,
+          tagName: 'svg',
+          type: NodeType.Element,
+          isSVG: true,
+          attributes: {
+            rr_width: '50px',
+            rr_height: '50px',
+          },
+          childNodes: [
+          ],
+        },
+        {
+          doc: document,
+          mirror,
+          hackCss: false,
+          cache,
+        },
+      ) as HTMLDivElement;
+      expect(node.style.width).toBe('50px');
+      expect(node.style.height).toBe('50px');
+    });
+  });
+
   describe('shadowDom', function () {
     it('rebuild shadowRoot without siblings', function () {
       const node = buildNodeWithSN(