add checkout config to recorder (#36)

* add checkout config to recorder * add test cases for checkout feature and extract assertSnapshot method
2019-01-11 10:52:04 +08:00
parent b45655ea3a
commit cedc87c69e
9 changed files with 738 additions and 314 deletions
--- a/test/record.test.ts
+++ b/test/record.test.ts
@@ -0,0 +1,175 @@
+/* tslint:disable no-console */
+
+import * as fs from 'fs';
+import * as path from 'path';
+import * as puppeteer from 'puppeteer';
+import { expect } from 'chai';
+import {
+  recordOptions,
+  listenerHandler,
+  eventWithTime,
+  EventType,
+} from '../src/types';
+import { assertSnapshot } from './utils';
+
+interface IWindow extends Window {
+  rrweb: {
+    record: (options: recordOptions) => listenerHandler | undefined;
+  };
+  emit: (e: eventWithTime) => undefined;
+}
+
+describe('record', () => {
+  before(async () => {
+    this.browser = await puppeteer.launch({
+      headless: false,
+      args: ['--no-sandbox'],
+    });
+
+    const bundlePath = path.resolve(__dirname, '../dist/rrweb.min.js');
+    this.code = fs.readFileSync(bundlePath, 'utf8');
+  });
+
+  beforeEach(async () => {
+    const page: puppeteer.Page = await this.browser.newPage();
+    await page.goto('about:blank');
+    await page.setContent(`
+      <html>
+        <body>
+          <input type="text" />
+        </body>
+      </html>
+    `);
+    await page.evaluate(this.code);
+    this.page = page;
+    this.events = [];
+    await this.page.exposeFunction('emit', (e: eventWithTime) => {
+      if (e.type === EventType.DomContentLoaded || e.type === EventType.Load) {
+        return;
+      }
+      this.events.push(e);
+    });
+
+    page.on('console', msg => console.log('PAGE LOG:', msg.text()));
+  });
+
+  afterEach(async () => {
+    await this.page.close();
+  });
+
+  after(async () => {
+    await this.browser.close();
+  });
+
+  it('will only have one full snapshot without checkout config', async () => {
+    await this.page.evaluate(() => {
+      const { record } = (window as IWindow).rrweb;
+      record({
+        emit: (window as IWindow).emit,
+      });
+    });
+    let count = 30;
+    while (count--) {
+      await this.page.type('input', 'a');
+    }
+    await this.page.waitFor(10);
+    expect(this.events.length).to.equal(33);
+    expect(
+      this.events.filter(
+        (event: eventWithTime) => event.type === EventType.Meta,
+      ).length,
+    ).to.equal(1);
+    expect(
+      this.events.filter(
+        (event: eventWithTime) => event.type === EventType.FullSnapshot,
+      ).length,
+    ).to.equal(1);
+  });
+
+  it('can checkout full snapshot by count', async () => {
+    await this.page.evaluate(() => {
+      const { record } = (window as IWindow).rrweb;
+      record({
+        emit: (window as IWindow).emit,
+        checkoutEveryNth: 10,
+      });
+    });
+    let count = 30;
+    while (count--) {
+      await this.page.type('input', 'a');
+    }
+    await this.page.waitFor(10);
+    expect(this.events.length).to.equal(39);
+    expect(
+      this.events.filter(
+        (event: eventWithTime) => event.type === EventType.Meta,
+      ).length,
+    ).to.equal(4);
+    expect(
+      this.events.filter(
+        (event: eventWithTime) => event.type === EventType.FullSnapshot,
+      ).length,
+    ).to.equal(4);
+    expect(this.events[1].type).to.equal(EventType.FullSnapshot);
+    expect(this.events[13].type).to.equal(EventType.FullSnapshot);
+    expect(this.events[25].type).to.equal(EventType.FullSnapshot);
+    expect(this.events[37].type).to.equal(EventType.FullSnapshot);
+  });
+
+  it('can checkout full snapshot by time', async () => {
+    await this.page.evaluate(() => {
+      const { record } = (window as IWindow).rrweb;
+      record({
+        emit: (window as IWindow).emit,
+        checkoutEveryNms: 500,
+      });
+    });
+    let count = 30;
+    while (count--) {
+      await this.page.type('input', 'a');
+    }
+    await this.page.waitFor(500);
+    expect(this.events.length).to.equal(33);
+    await this.page.type('input', 'a');
+    await this.page.waitFor(10);
+    expect(this.events.length).to.equal(36);
+    expect(
+      this.events.filter(
+        (event: eventWithTime) => event.type === EventType.Meta,
+      ).length,
+    ).to.equal(2);
+    expect(
+      this.events.filter(
+        (event: eventWithTime) => event.type === EventType.FullSnapshot,
+      ).length,
+    ).to.equal(2);
+    expect(this.events[1].type).to.equal(EventType.FullSnapshot);
+    expect(this.events[35].type).to.equal(EventType.FullSnapshot);
+  });
+
+  it('is safe to checkout during async callbacks', async () => {
+    await this.page.evaluate(() => {
+      const { record } = (window as IWindow).rrweb;
+      record({
+        emit: (window as IWindow).emit,
+        checkoutEveryNth: 2,
+      });
+      const p = document.createElement('p');
+      const span = document.createElement('span');
+      setTimeout(() => {
+        document.body.appendChild(p);
+        p.appendChild(span);
+        document.body.removeChild(document.querySelector('input')!);
+      }, 0);
+      setTimeout(() => {
+        span.innerText = 'test';
+      }, 10);
+      setTimeout(() => {
+        p.removeChild(span);
+        document.body.appendChild(span);
+      }, 10);
+    });
+    await this.page.waitFor(50);
+    assertSnapshot(this.events, __filename, 'async-checkout');
+  });
+});