Skip to content

Commit

Permalink
add test case
Browse files Browse the repository at this point in the history
  • Loading branch information
@juliecheng
juliecheng committed Nov 17, 2023
1 parent e3fb1ea commit 18ae4c2
Show file tree
Hide file tree
Showing 2 changed files with 372 additions and 0 deletions.
326 changes: 326 additions & 0 deletions packages/rrweb/test/events/scroll-with-parent-styles.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,326 @@
import { EventType, IncrementalSource, MouseInteractions } from '@rrweb/types';
import type { eventWithTime } from '@rrweb/types';

const now = Date.now();
const events: eventWithTime[] = [
{
type: EventType.DomContentLoaded,
data: {},
timestamp: now,
},
{
type: EventType.Load,
data: {},
timestamp: now + 100,
},
{
type: EventType.Meta,
data: {
href: 'http://localhost',
width: 1200,
height: 500,
},
timestamp: now + 100,
},
// full snapshot:
{
type: EventType.FullSnapshot,
data: {
node: {
id: 1,
type: 0,
childNodes: [
{
type: 1,
name: 'html',
publicId: '',
systemId: '',
id: 2,
},
{
id: 3,
type: 2,
tagName: 'html',
attributes: {
lang: 'en',
},
childNodes: [
{
id: 4,
type: 2,
tagName: 'head',
attributes: {},
childNodes: [
{
id: 5,
type: 2,
tagName: 'style',
attributes: {
type: 'text/css',
},
childNodes: [
{
id: 6,
type: 3,
textContent:
'main[data-v-7231068e] { position: fixed; top: 0px; right: 0px; height: calc(100% - 0px); overflow: auto; left: 0px; }.container[data-v-7231068e] { overflow: auto; overscroll-behavior-y: contain; position: relative; height: 100%; }.container .card[data-v-7231068e] { min-height: 170px; height: 100%; }',
isStyle: true,
},
],
},
],
},
{
id: 7,
type: 2,
tagName: 'body',
attributes: {},
childNodes: [
{
type: 2,
tagName: 'div',
attributes: {},
childNodes: [
{
type: 2,
tagName: 'ul',
attributes: {},
childNodes: [
{
type: 2,
tagName: 'li',
attributes: {},
childNodes: [
{
type: 2,
tagName: 'a',
attributes: {
href: 'https://localhost/page1',
},
childNodes: [
{
type: 3,
textContent: '\nGo to page 1\n',
id: 12,
},
],
id: 11,
},
],
id: 10,
},
{
type: 2,
tagName: 'li',
attributes: {},
childNodes: [
{
type: 2,
tagName: 'a',
attributes: {
href: 'https://localhost/page2',
},
childNodes: [
{
type: 3,
textContent: '\nGo to page 2\n',
id: 15,
},
],
id: 14,
},
],
id: 13,
},
],
id: 9,
},
],
id: 8,
},
],
},
],
},
],
},
initialOffset: {
left: 0,
top: 0,
},
},
timestamp: now + 100,
},
// mutation that adds all of the new parent/child elements
{
type: EventType.IncrementalSnapshot,
data: {
source: IncrementalSource.Mutation,
texts: [],
attributes: [],
removes: [],
adds: [
{
parentId: 8,
nextId: null,
node: {
type: 2,
tagName: 'main',
attributes: {
'data-v-7231068e': '',
},
childNodes: [],
id: 16,
},
},
{
parentId: 16,
nextId: null,
node: {
type: 2,
tagName: 'div',
attributes: {
'data-v-7231068e': '',
class: 'container',
},
childNodes: [],
id: 17,
},
},
{
parentId: 17,
nextId: null,
node: {
type: 2,
tagName: 'div',
attributes: {
'data-v-7231068e': '',
class: 'card',
},
childNodes: [],
id: 18,
},
},
{
parentId: 18,
nextId: null,
node: {
type: 2,
tagName: 'button',
attributes: {
'data-v-7231068e': '',
},
childNodes: [],
id: 19,
},
},
{
parentId: 19,
nextId: null,
node: {
type: 3,
textContent: '1',
id: 20,
},
},
{
parentId: 17,
nextId: 18,
node: {
type: 2,
tagName: 'div',
attributes: {
'data-v-7231068e': '',
class: 'card',
},
childNodes: [],
id: 21,
},
},
{
parentId: 21,
nextId: null,
node: {
type: 2,
tagName: 'button',
attributes: {
'data-v-7231068e': '',
},
childNodes: [],
id: 22,
},
},
{
parentId: 22,
nextId: null,
node: {
type: 3,
textContent: '2',
id: 23,
},
},
{
parentId: 17,
nextId: 21,
node: {
type: 2,
tagName: 'div',
attributes: {
'data-v-7231068e': '',
class: 'card',
},
childNodes: [],
id: 24,
},
},
{
parentId: 24,
nextId: null,
node: {
type: 2,
tagName: 'button',
attributes: {
'data-v-7231068e': '',
},
childNodes: [],
id: 25,
},
},
{
parentId: 25,
nextId: null,
node: {
type: 3,
textContent: '3',
id: 26,
},
},
],
},
timestamp: now + 500,
},
// scroll event on the '.container' div
{
type: EventType.IncrementalSnapshot,
data: {
source: IncrementalSource.Scroll,
id: 17,
x: 0,
y: 800,
},
timestamp: now + 1000,
},
{
type: EventType.IncrementalSnapshot,
data: {
source: IncrementalSource.Mutation,
texts: [],
attributes: [],
removes: [{ parentId: 16, id: 17 }],
adds: [],
},
timestamp: now + 2000,
},
];

export default events;
46 changes: 46 additions & 0 deletions packages/rrweb/test/replayer.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import {
import styleSheetRuleEvents from './events/style-sheet-rule-events';
import orderingEvents from './events/ordering';
import scrollEvents from './events/scroll';
import scrollWithParentStylesEvents from './events/scroll-with-parent-styles';
import inputEvents from './events/input';
import iframeEvents from './events/iframe';
import selectionEvents from './events/selection';
Expand Down Expand Up @@ -410,6 +411,51 @@ describe('replayer', function () {
).toEqual(0);
});

it('can fast forward scroll events w/ a parent node that affects a child nodes height', async () => {
await page.evaluate(`
events = ${JSON.stringify(scrollWithParentStylesEvents)};
const { Replayer } = rrweb;
var replayer = new Replayer(events,{showDebug:true});
replayer.pause(550);
`);
// add the ".container" element at 500
const iframe = await page.$('iframe');
const contentDocument = await iframe!.contentFrame()!;
expect(await contentDocument!.$('.container')).not.toBeNull();
expect(
await contentDocument!.$eval(
'.container',
(element: Element) => element.scrollTop,
),
).toEqual(0);

// restart the replayer
await page.evaluate('replayer.play(0);');
await waitForRAF(page);

await page.evaluate('replayer.pause(1050);');
// scroll the ".container" div' at 1000
expect(
await contentDocument!.$eval(
'.container',
(element: Element) => element.scrollTop,
),
).toEqual(800);

await page.evaluate('replayer.play(0);');
await waitForRAF(page);
await page.evaluate('replayer.pause(2050);');
// remove the ".container" element at 2000
expect(await contentDocument!.$('.container')).toBeNull();
expect(
await page.$eval(
'iframe',
(element: Element) =>
(element as HTMLIFrameElement)!.contentWindow!.scrollY,
),
).toEqual(0);
});

it('can fast forward input events', async () => {
await page.evaluate(`
events = ${JSON.stringify(inputEvents)};
Expand Down

0 comments on commit 18ae4c2

Please sign in to comment.