测试工程化的先锋之mindmap

前言

mindmap是大搜车无线开发中心出品的一款依托于vscode的脑图编辑插件，目前在vscode插件市场中分为两个版本，一个是对内服务于我们搜车测试同学的版本"mindmap for souche"，另一个是对外版本"vscode-mindmap"。对内版本包含了一些私有定制，而对外版本则更为简单和灵活，开箱即用。有兴趣的朋友，在这里推荐直接安装对外版本。

痛点

在测试工程化的概念提出以及实施之前，测试部门普遍会出现多人协作效率低，测试用例写法千奇百怪，项目管理混乱以及重复操作多等问题。在这种大背景下，为了提高整个测试部门的测试执行效率，测试工程化的概念也就随之产生了。简单类比来说，测试工程化想做的事情就是想将开发流程中的思想引入到测试工作中来，包括但不限于每一个测试项目具有统一的gitlab管理地址、有统一的脚手架初始化工程目录、提供统一的用例文件提交检查、以及提供对开发人员友好的反馈报告等等。

mindmap

既然已经确定了痛点，那接下来自然就是要解决痛点了。为什么说mindmap是测试工程化的先锋呢！因为mindmap只是整个测试工程化的一环，但mindmap却是测试同学每天使用频率最高的工具之一。每天用它来写用例，提bug。

vscode提供了在编辑器内部渲染webview的能力，这给我们mindmap的实现提供了天然的土壤。我们可以把浏览器里的一些实现搬到编辑器里，从而实现项目本地化。mindmap借助百度出品的kityminder库解决了脑图渲染的部分。这样mindmap的雏形就已经有了。

通过上图可以看出，mindmap支持km以及xmind格式的文件。km是一种类JSON的数据结构，每一个文件都有唯一的一个根节点root，其他节点都是在root节点之后向下延伸。最终会形成一个树形结构。同样在km文件中也可以指定脑图渲染的样式，排列等等。

{
    "root": {
        "data": {
            "text": "根组件"
        },
        "children": [
            {
                "data": {
                    "text": "子组件",
                    "id": "btzkhuj76jk0"
                }
            }
        ]
    },
    "template": "right",
    "theme": "fresh-blue-compat",
    "version": "1.4.43"
}

上面列出的km数据结构并不是定死的，只要在不改变整体树形结构的基础上，往每一个节点上添加自定义字段也是完全可以的。比如添加id，parentId以及其他自定义类型的字段。

除了km格式，mindmap还支持xmind格式的文件，xmind文件在vscode里并不能直接进行渲染，所以mindmap在渲染之前，对xmind文件的数据进行了解析和转换。这里利用了一个sdk叫 xmind-sdk-javascript 。这个sdk可以帮助mindmap将xmind文件的数据转换成json。所以mindmap拿到json数据再进行一次过滤就可以得到我们最终要渲染的符合km格式的数据了。这里需要说明一点，xmind的布局和样式与kityminder有着极大的不同，现阶段为了保持统一性，xmind转换后的脑图样式是采用了kityminder提供的样式。

在这里选择支持xmind类型文件的渲染，也是考虑到希望老项目能平稳过度到测试工程化的流程中来。并且在今后的用例编写上做到只支持一种格式，那就是km。

组件化

用例编写过程中，为了避免重复的节点操作，我们提供了测试组件化的功能。实现很简单，就是将测试人员使用频率最高的节点块信息抽离出来，组成一个公共组件库，帮助测试同学在编辑器上快速的生成组件结构。同时为了满足某些特殊定制，我们还提供了自定义组件的入口，测试同学完全可以将某些节点块一键转换成组件并保存至本地，方便后续的复用以及分享。

统计

mindmap提供了快速生成项目级别的统计报表的能力，帮助测试同学同步自己的测试进度。同时在mindmap各个功能模块中，以注入埋点的方式统计工具的使用情况以及覆盖率。有助于今后的优化和迭代。

总结

全文并没有列出太多的技术实现细节，而只是在引导一种思想。我想，不同公司不同部门对于这种工程化的实践都有着不同的诉求。mindmap也只是在我们搜车的需求背景下磨合出的产物。以我们公司的实践方法为例，希望对有需要的朋友提供一种参考。最后附上mindmap对外版本的源码地址 vscode-mindmap