Support top-layer <dialog> recording & replay (#1503)

* chore: its important to run `yarn build:all` before running `yarn dev` * feat: trigger showModal from rrdom and rrweb * feat: Add support for replaying modal and non modal dialog elements * chore: Update dev script to remove CLEAR_DIST_DIR flag * Get modal recording and replay working * DRY up dialog test and dedupe snapshot images * feat: Refactor dialog test to use updated attribute name * feat: Update dialog test to include rr_open attribute * chore: Add npm dependency happy-dom@14.12.0 * Add more test cases for dialog * Clean up naming * Refactor dialog open code * Revert changed code that doesn't do anything * Add documentation for unimplemented type * chore: Remove unnecessary comments in dialog.test.ts * rename rr_open to rr_openMode * Replace todo with a skipped test * Add better logging for CI * Rename rr_openMode to rr_open_mode rrdom downcases all attribute names which made `rr_openMode` tricky to deal with * Remove unused images * Move after iframe append based on @YunFeng0817's comment https://github.com/rrweb-io/rrweb/pull/1503#discussion_r1666363931 * Remove redundant dialog handling from rrdom. rrdom already handles dialog element creation it's self * Rename variables for dialog handling in rrweb replay module * Update packages/rrdom/src/document.ts --------- Co-authored-by: Eoghan Murray <eoghan@getthere.ie>
2024-08-02 09:53:05 +02:00
parent d350da8552
commit 335639af9b
38 changed files with 1902 additions and 75 deletions
--- a/packages/rrdom/test/diff/dialog.test.ts
+++ b/packages/rrdom/test/diff/dialog.test.ts
@@ -0,0 +1,112 @@
+/**
+ * @vitest-environment happy-dom
+ */
+import { vi, MockInstance } from 'vitest';
+import {
+  NodeType as RRNodeType,
+  createMirror,
+  Mirror as NodeMirror,
+  serializedNodeWithId,
+} from 'rrweb-snapshot';
+import { RRDocument } from '../../src';
+import { diff, ReplayerHandler } from '../../src/diff';
+
+describe('diff algorithm for rrdom', () => {
+  let mirror: NodeMirror;
+  let replayer: ReplayerHandler;
+  let warn: MockInstance;
+  let elementSn: serializedNodeWithId;
+  let elementSn2: serializedNodeWithId;
+
+  beforeEach(() => {
+    mirror = createMirror();
+    replayer = {
+      mirror,
+      applyCanvas: () => {},
+      applyInput: () => {},
+      applyScroll: () => {},
+      applyStyleSheetMutation: () => {},
+      afterAppend: () => {},
+    };
+    document.write('<!DOCTYPE html><html><head></head><body></body></html>');
+    // Mock the original console.warn function to make the test fail once console.warn is called.
+    warn = vi.spyOn(console, 'warn');
+
+    elementSn = {
+      type: RRNodeType.Element,
+      tagName: 'DIALOG',
+      attributes: {},
+      childNodes: [],
+      id: 1,
+    };
+
+    elementSn2 = {
+      ...elementSn,
+      attributes: {},
+    };
+  });
+
+  afterEach(() => {
+    // Check that warn was not called (fail on warning)
+    expect(warn).not.toBeCalled();
+    vi.resetAllMocks();
+  });
+  describe('diff dialog elements', () => {
+    vi.setConfig({ testTimeout: 60_000 });
+
+    it('should trigger `showModal` on rr_open_mode:modal attributes', () => {
+      const tagName = 'DIALOG';
+      const node = document.createElement(tagName) as HTMLDialogElement;
+      vi.spyOn(node, 'matches').mockReturnValue(false); // matches is used to check if the dialog was opened with showModal
+      const showModalFn = vi.spyOn(node, 'showModal');
+
+      const rrDocument = new RRDocument();
+      const rrNode = rrDocument.createElement(tagName);
+      rrNode.attributes = { rr_open_mode: 'modal', open: '' };
+
+      mirror.add(node, elementSn);
+      rrDocument.mirror.add(rrNode, elementSn);
+      diff(node, rrNode, replayer);
+
+      expect(showModalFn).toBeCalled();
+    });
+
+    it('should trigger `close` on rr_open_mode removed', () => {
+      const tagName = 'DIALOG';
+      const node = document.createElement(tagName) as HTMLDialogElement;
+      node.showModal();
+      vi.spyOn(node, 'matches').mockReturnValue(true); // matches is used to check if the dialog was opened with showModal
+      const closeFn = vi.spyOn(node, 'close');
+
+      const rrDocument = new RRDocument();
+      const rrNode = rrDocument.createElement(tagName);
+      rrNode.attributes = {};
+
+      mirror.add(node, elementSn);
+      rrDocument.mirror.add(rrNode, elementSn);
+      diff(node, rrNode, replayer);
+
+      expect(closeFn).toBeCalled();
+    });
+
+    it('should not trigger `close` on rr_open_mode is kept', () => {
+      const tagName = 'DIALOG';
+      const node = document.createElement(tagName) as HTMLDialogElement;
+      vi.spyOn(node, 'matches').mockReturnValue(true); // matches is used to check if the dialog was opened with showModal
+      node.setAttribute('rr_open_mode', 'modal');
+      node.setAttribute('open', '');
+      const closeFn = vi.spyOn(node, 'close');
+
+      const rrDocument = new RRDocument();
+      const rrNode = rrDocument.createElement(tagName);
+      rrNode.attributes = { rr_open_mode: 'modal', open: '' };
+
+      mirror.add(node, elementSn);
+      rrDocument.mirror.add(rrNode, elementSn);
+      diff(node, rrNode, replayer);
+
+      expect(closeFn).not.toBeCalled();
+      expect(node.open).toBe(true);
+    });
+  });
+});