add test infra and a basic record integration test

2018-10-15 17:21:14 +08:00
parent 2816726e23
commit 4ae4222bc3
6 changed files with 157 additions and 2 deletions
--- a/test/snapshots/integration.ts.snap
+++ b/test/snapshots/integration.ts.snap
--- a/test/html/form.html
+++ b/test/html/form.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>form fields</title>
+</head>
+
+<body>
+  <form>
+    <label for="text">
+      <input type="text">
+    </label>
+    <label for="radio">
+      <input type="radio">
+    </label>
+    <label for="checkbox">
+      <input type="checkbox">
+    </label>
+    <label for="textarea">
+      <textarea name="" id="" cols="30" rows="10"></textarea>
+    </label>
+    <label for="select">
+      <select name="" id="">
+        <option value="1">1</option>
+        <option value="2">2</option>
+      </select>
+    </label>
+  </form>
+</body>
+
+</html>
--- a/test/integration.ts
+++ b/test/integration.ts
@@ -0,0 +1,83 @@
+import * as fs from 'fs';
+import * as path from 'path';
+import * as puppeteer from 'puppeteer';
+import { assert } from 'chai';
+import * as rollup from 'rollup';
+import typescript = require('rollup-plugin-typescript');
+import resolve = require('rollup-plugin-node-resolve');
+import { SnapshotState, toMatchSnapshot } from 'jest-snapshot';
+
+function matchSnapshot(actual: string, testFile: string, testTitle: string) {
+  const snapshotState = new SnapshotState(testFile, {
+    updateSnapshot: process.env.SNAPSHOT_UPDATE ? 'all' : 'new',
+  });
+
+  const matcher = toMatchSnapshot.bind({
+    snapshotState,
+    currentTestName: testTitle,
+  });
+  const result = matcher(actual);
+  snapshotState.save();
+  return result;
+}
+
+describe('record integration tests', () => {
+  function getHtml(fileName: string): string {
+    const filePath = path.resolve(__dirname, `./html/${fileName}`);
+    const html = fs.readFileSync(filePath, 'utf8');
+    return html.replace(
+      '</body>',
+      `
+    <script>
+      ${this.code}
+      window.Date.now = () => new Date(Date.UTC(2018, 10, 15, 8)).valueOf();
+      window.snapshots = [];
+      record({
+        emit: event => {
+          console.log(event);
+          window.snapshots.push(event);
+        }
+      });
+    </script>
+    </body>
+    `,
+    );
+  }
+
+  before(async () => {
+    this.browser = await puppeteer.launch({
+      // headless: false,
+      executablePath: '/home/yanzhen/Desktop/chrome-linux/chrome',
+    });
+
+    const bundle = await rollup.rollup({
+      input: path.resolve(__dirname, '../src/record/index.ts'),
+      plugins: [typescript(), resolve()],
+    });
+    const { code } = await bundle.generate({
+      name: 'record',
+      format: 'iife',
+    });
+    this.code = code;
+  });
+
+  after(async () => {
+    await this.browser.close();
+  });
+
+  it('can record form interactions', async () => {
+    const page: puppeteer.Page = await this.browser.newPage();
+    await page.goto('about:blank');
+    await page.setContent(getHtml.call(this, 'form.html'));
+
+    await page.type('input[type="text"]', 'test');
+    await page.click('input[type="radio"]');
+    await page.click('input[type="checkbox"]');
+    await page.type('textarea', 'textarea test');
+    await page.select('select', '1');
+
+    const snapshots = await page.evaluate('window.snapshots');
+    const result = matchSnapshot(JSON.stringify(snapshots), __filename, 'form');
+    assert(result.pass, result.pass ? '' : result.report());
+  }).timeout(5000);
+});