fix duplicated shadow dom (#1095)

* fix: duplicated elements in shadow doms

clean observers before taking new full snapshots

* add checker for replayer to make it stable when data has duplicated nodes

* apply review suggestions

* add change log

* Apply formatting changes

* update prettier to fit the master branch

---------

Co-authored-by: Mark-Fenng <Mark-Fenng@users.noreply.github.com>

packages/rrweb-snapshot/test/utils.test.ts

@@ -0,0 +1,150 @@
+/**
+ * @jest-environment jsdom
+ */
+import { NodeType, serializedNode } from '../src/types';
+import { isNodeMetaEqual } from '../src/utils';
+import { serializedNodeWithId } from 'rrweb-snapshot';
+
+describe('utils', () => {
+  describe('isNodeMetaEqual()', () => {
+    const document1: serializedNode = {
+      type: NodeType.Document,
+      compatMode: 'CSS1Compat',
+      childNodes: [],
+    };
+    const document2: serializedNode = {
+      type: NodeType.Document,
+      compatMode: 'BackCompat',
+      childNodes: [],
+    };
+    const documentType1: serializedNode = {
+      type: NodeType.DocumentType,
+      name: 'html',
+      publicId: '',
+      systemId: '',
+    };
+    const documentType2: serializedNode = {
+      type: NodeType.DocumentType,
+      name: 'html',
+      publicId: '',
+      systemId: 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd',
+    };
+    const text1: serializedNode = {
+      type: NodeType.Text,
+      textContent: 'Hello World',
+    };
+    const text2: serializedNode = {
+      type: NodeType.Text,
+      textContent: 'Hello world',
+    };
+    const comment1: serializedNode = {
+      type: NodeType.Comment,
+      textContent: 'Hello World',
+    };
+    const comment2: serializedNode = {
+      type: NodeType.Comment,
+      textContent: 'Hello world',
+    };
+    const element1: serializedNode = {
+      type: NodeType.Element,
+      tagName: 'div',
+      attributes: {
+        className: 'test',
+      },
+      childNodes: [],
+    };
+    const element2: serializedNode = {
+      type: NodeType.Element,
+      tagName: 'span',
+      attributes: {
+        'aria-label': 'Hello World',
+      },
+      childNodes: [],
+    };
+    const element3: serializedNode = {
+      type: NodeType.Element,
+      tagName: 'div',
+      attributes: { id: 'test' },
+      childNodes: [comment1 as serializedNodeWithId],
+    };
+
+    it('should return false if two nodes have different node types', () => {
+      expect(
+        isNodeMetaEqual(
+          undefined as unknown as serializedNode,
+          null as unknown as serializedNode,
+        ),
+      ).toBeFalsy();
+      expect(isNodeMetaEqual(document1, element1)).toBeFalsy();
+      expect(isNodeMetaEqual(document1, documentType1)).toBeFalsy();
+      expect(isNodeMetaEqual(documentType1, element1)).toBeFalsy();
+      expect(isNodeMetaEqual(text1, comment1)).toBeFalsy();
+      expect(isNodeMetaEqual(text1, element1)).toBeFalsy();
+      expect(isNodeMetaEqual(comment1, element1)).toBeFalsy();
+    });
+
+    it('should compare meta data of two document nodes', () => {
+      expect(
+        isNodeMetaEqual(document1, JSON.parse(JSON.stringify(document1))),
+      ).toBeTruthy();
+      expect(
+        isNodeMetaEqual(JSON.parse(JSON.stringify(document2)), document2),
+      ).toBeTruthy();
+      expect(isNodeMetaEqual(document1, document2)).toBeFalsy();
+    });
+
+    it('should compare meta data of two documentType nodes', () => {
+      expect(
+        isNodeMetaEqual(
+          documentType1,
+          JSON.parse(JSON.stringify(documentType1)),
+        ),
+      ).toBeTruthy();
+      expect(
+        isNodeMetaEqual(
+          JSON.parse(JSON.stringify(documentType2)),
+          documentType2,
+        ),
+      ).toBeTruthy();
+      expect(isNodeMetaEqual(documentType1, documentType2)).toBeFalsy();
+    });
+
+    it('should compare meta data of two text nodes', () => {
+      expect(
+        isNodeMetaEqual(text1, JSON.parse(JSON.stringify(text1))),
+      ).toBeTruthy();
+      expect(
+        isNodeMetaEqual(JSON.parse(JSON.stringify(text2)), text2),
+      ).toBeTruthy();
+      expect(isNodeMetaEqual(text1, text2)).toBeFalsy();
+    });
+
+    it('should compare meta data of two comment nodes', () => {
+      expect(
+        isNodeMetaEqual(comment1, JSON.parse(JSON.stringify(comment1))),
+      ).toBeTruthy();
+      expect(
+        isNodeMetaEqual(JSON.parse(JSON.stringify(comment2)), comment2),
+      ).toBeTruthy();
+      expect(isNodeMetaEqual(comment1, comment2)).toBeFalsy();
+    });
+
+    it('should compare meta data of two HTML elements', () => {
+      expect(
+        isNodeMetaEqual(element1, JSON.parse(JSON.stringify(element1))),
+      ).toBeTruthy();
+      expect(
+        isNodeMetaEqual(JSON.parse(JSON.stringify(element2)), element2),
+      ).toBeTruthy();
+      expect(
+        isNodeMetaEqual(element1, {
+          ...element1,
+          childNodes: [comment2 as serializedNodeWithId],
+        }),
+      ).toBeTruthy();
+      expect(isNodeMetaEqual(element1, element2)).toBeFalsy();
+      expect(isNodeMetaEqual(element1, element3)).toBeFalsy();
+      expect(isNodeMetaEqual(element2, element3)).toBeFalsy();
+    });
+  });
+});