G2 5.0 测试重构

[pearmini]

G2 5.0 测试重构

解决目前 G2 测试相关的问题。

存在问题

• 两个 config 文件，无法收集准确的测试覆盖率
• 一些多余的测试
• 集成测试不够灵活，不能测试 Chart API
• 依赖难以安装：node-canvas 和 jest-electron
• 测试线上内存溢出，一个文件里面测了太多的案例
• Chart API 测试没有断言，目前只是在 unit 展示了出来
• 因为依赖 jest-electron，导致无法把 jest 和 node 升级为最新的版本

思路

对于集成测试而言，每一个图表需要真实的浏览器预览环境，以及能被多次快照断言。浏览器预览环境使用 Vite 搭建，多次快照断言使用 jest + 可以截图的环境（node-canvas，jsdom 或者 playwirte）。

所以每一个图表都对应一个集成测试，每一个集成测试包含两个东西：

• 渲染文件
• 测试文件

其中渲染文件一方面给 vite 用于预览，一方面给测试文件用 jest 测试。渲染文件会暴露一个函数，改函数的函数签名如下：

type renderFunction = (container: HTMLElement, canvas: GCanvas) => any

目录结构

• data：单元测试和集成测试共享的数据
• unit：单元测试
  • transform
  • ...
  • unit
• integration：集成测试
  • snapshots
  • interactions
  • tooltips
  • charts
    • [data]-[mark]-[info].ts
  • animations
  • api
  • index.html
  • main.ts
  • snapshot.spec.ts：测试 spec 的模版函数
  • snapshot-interaction.spec.ts：测试交互的模版函数
  • snapshot-animation.spec.ts：测试动画的模版函数
  • snapthos-tooltip.spec.ts：测试 tooltip 的模版函数
  • utils：一些辅助函数
    • fetch
    • match
      • toMatchCanvasSnapshot
      • toMatchSVGSnapshot

API

// api/aapl-line-clip.ts
export function aaplLineClip(container, canvas) {
  const chart = new Chart({
    container,
    canvas,
  });
  chart.render();
  return {
    chart,
  }
}

// api/aapl-line-clip.spec.ts
import { aaplLineClip } from './index.ts';

describe('API', () => {
  const canvas = createNodeCavnas();
  const container = document.createElement('div');
  const { chart } = await aaplLineClip(container, canvas);
  
  it('Match Snapshot', () => {
    expect(canvas).toMatchCanvasSnapshot(name);

    // 继续断言
    console.log(chart);
  });
});

Spec

// charts/aapl-line-clip.ts
import { createSpecRender } from './utils/spec.ts'

export const aaplLineClip = createSpecRender(() => {
  return options;
});

//  charts/aapl-line-clip.spec.ts
import { aaplLineClip } from './index.ts';
import { describeSpec } from './testSpec';

describeSpec('Info', aaplLineClip);

// utils/spec.ts

// 帮助函数
// 用于创建最后的渲染函数
async function createSpecRender(generateOptions) {
  const options = await generateOptions();
  return (container, canvas) => {
    const node = render(options, { canvas });
    container.appendChild(node);
  }
}

function describeSpec(info, render) {
  describe(info, () => {
    it('Match Snapshot', () => {
      const canvas = createNodeCavnas();
      const container = document.createElement('div');
      await render(container, canvas);
      expect(canvas).toMatchSnapshot(name);
    });
  });
}

toMatchCanvasSnapshot

查看：https://jestjs.io/docs/26.x/expect#expectextendmatchers

export function toMatchCanvasSnapshot(canvas, filename, options) {
  // ...
}

TODO

• 新增 toMatchCanvasSnapshot 和 toMatchSVGSnapshot 两个函数
• 增加 api 测试
• 新增 spec，interaction，tooltip 等的模版测试函数
• 把单元测试中 Chart API 中的部分测试迁移到集成测试环境
• 删除 unit 被跳过的测试
• 移除 jest-electron
• 升级 jest 和 node 的版本
• 将 node-canvas 替换成稳定，易于安装的替代品，比如 playwright（可选）

[Aarebecca]

playwright 和 node-canvas 属于是两套不一样的东西，node-canvas 是node端实现的 canvas，playwright 则包含了完整的浏览器。不过 playwright 确实可以完成 node-canvas 做的事情，唯一可能存在的不足也许是截图的分辨率也许会稍低一点。

另外的话，使用 playwright 需要在测试机上启动集成测试环境，不过这块问题应该不带，解决方案都有现成的。
说下好处的话，playwright 支持并行测试，测试效率应该是会高一些的（前提是测试机器性能足够）。

[pearmini]

Playwright 的 Library 可以直接在 node 环境里面跑？不过 Playwright 的这块确实还需要看看，其实就是想找一个 node-canvas 的替代品（兜底方案就是用 JSDOM）。

[pearmini]

主要解决的问题：

• 线上 CI
• 测试 Chart API
• 合并覆盖率
• 删除无效测试
• 去掉 jest-electron