forked from rrweb-io/rrweb
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix duplicated shadow dom (rrweb-io#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>
- Loading branch information
1 parent
2946f10
commit 1385f7a
Showing
9 changed files
with
281 additions
and
81 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
--- | ||
'rrweb-snapshot': patch | ||
'rrweb': patch | ||
--- | ||
|
||
Fix duplicated shadow doms |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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(); | ||
}); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.