(TODO)ECharts的回归测试

VRT

Visual Regression Testing Tool，可视化回归测试工具

这是一个类MVC的架构：存储、分发、xxx

详细说明参考这个文档。

代码从cli.js开始看，这里包括了整体的流程。

require晓东自己魔改了下。

通信

借助socket.io实现通信
多进程测试
定义不同的事件进行监听，server.js
client.js

socket.emit('run', async data => {})

cli.js

参数

program
    .option('-t, --tests <tests>', 'Tests names list')
    .option('--no-headless', 'Not headless')
    .option('-s, --speed <speed>', 'Playback speed')
    .option('--expected <expected>', 'Expected version')
    .option('--actual <actual>', 'Actual version')
    .option('--renderer <renderer>', 'svg/canvas renderer')
    .option('--use-coarse-pointer <useCoarsePointer>', '"auto" (by default) or "true" or "false"')
    .option('--threads <threads>', 'How many threads to run concurrently')
    .option('--no-save', 'Don\'t save result')
    .option('--dir <dir>', 'Out dir');

初始化环境和机制

跑测试用例

runTests()

会先将runtime的这部分机制的代码，打包为IIFE字符串(Immediately Invoked Function Expression，立即调用函数表达式)，注意这不是组件库的代码。

runTest()

Puppeteer拦截并修改echarts的版本号资源

给页面插入全局函数，这样不同的测试用例都能调用这些函数，避免了每个测试用例的臃肿

交互模拟：await page.exposeFunction
比如鼠标移动：

await page.exposeFunction('__VRT_MOUSE_MOVE__', async (x, y) =>  {
    await page.mouse.move(x, y);
});

compareScreenshot.js

可以重点看下pixelmatch()这个方法

这也算是微内核吧？思考下，放入PPT
什么是微内核、什么不是微内核
什么是Agent、什么不是Agent

把我之前搞的mir3的环境搭建起来，跑跑看，讲一下程序设计

CR林子焱

职责太多

ForestRender，职责太多，数据，Mesh，数据加载器
没形成【机制】
参考Zrender的Element类的设计，mixin机制，解耦：mixin(Element, Eventful)
用【微内核架构】来改进这个设计

配置未分离

魔法数字等，抽离出configs目录
注意这个和数据不一样

动画交互的配置

样式的配置

数据抽离为store

帧循环RAF

拆分开