AgileTC 开源一个 vue 版的脑图编辑器,数据上已兼容 agiletc 的测试结果格式

陈恒捷 for 荔枝质量技术 · 2021年10月30日 · 最后由 重来看雨 回复于 2022年05月16日 · 2803 次阅读

背景

由于公司测试平台前端框架用的是 vue ,且年初 agiletc 还不支持百度脑图原生支持的从 xmind 复制粘贴至脑图组件,快捷键也不够好用,且前端组件没开源。因此基于社区内其他已有的开源脑图组件,再仿照 agiletc 的脑图组件包了一层。

很早就确认了可以开源,但一直有别的事情忙没空弄。刚好这周末又有同学私聊我,所以花了点时间把公司私库相关信息改为外部 npm 的,进行开源。

支持功能:

1、百度脑图原有功能(节点编辑、优先级设置、自定义标签设置)
2、测试结果登记,数据格式和 agiletc 现有脑图组件的格式一致,即可以直接正确展示和编辑现有 agiletc 自带编辑器设置的测试结果
3、当前选中节点个数统计,在顶部标题栏加了个当前选中节点个数统计数据的文字

相比 agiletc 少了的功能:

1、脑图本身自带的导入导出功能(agiletc 服务端有提供,所以前端就不提供了)
2、添加图片(百度脑图本身就没有)
3、实时上报及更新脑图数据

在此特别感谢 fudaxMeYoung 两位前辈的开源贡献,我只是站在大家的肩膀上补充了一些边角功能而已

开源地址

https://github.com/chenhengjie123/vue-testcase-minder-editor

效果

也可以本地跑起来体验,克隆完代码后,在根目录下:

# 安装依赖
npm --registry=https://registry.npm.taobao.org install

# 本地运行
npm run lib && npm run serve

运行后,按照提示的地址打开即可,例如

App running at:
- Local:   http://localhost:8081 

表示通过 http://localhost:8081 可以打开

项目中使用

安装本组件

npm --registry=https://registry.npm.taobao.org install vue-testcase-minder-editor

在 main.js 中

import 'vue-testcase-minder-editor/lib/VueTestcaseMinderEditor.css'
import VueTestcaseMinderEditor from 'vue-testcase-minder-editor'

Vue.use(VueTestcaseMinderEditor)

本组件依赖 vuex 进行部分全局配置管理。如果没有用 vuex ,可直接在 main.js 加入下面代码。

Vue.use(Vuex)
const store = new Vuex.Store({
  modules: {
    caseEditorStore: VueTestcaseMinderEditor.caseEditorStore
  }
})

如果有,可以仿照下面代码,动态注册对应 module

const store = new Vuex.Store({...})

// 动态注册用例编辑器项目的 store 模块到项目中
store.registerModule('caseEditorStore', {
  ...VueTestcaseMinderEditor.caseEditorStore
})

在页面的 .vue 文件中

<template>
    <VueTestcaseMinderEditor 
      :initJson="initJson"  // 初始化数据,加载脑图时自动更新。同时也会监听数据变化,数据一更新就重新加载
      ref="minderEditor"    // 组件应用名称
      :allowEditPriority="true"  // 是否允许增删改优先级,实时更新状态
      :allowEditLabel="true"     // 是否允许增删改标签,实时更新状态
      :allowEditResult="true"    // 是否允许增删改测试结果,实时更新状态
      :allowEditNode="true">     // 是否允许增删改节点内容,实时更新状态
    </VueTestcaseMinderEditor>
</template>
...

<scripts>

export default {

  ...

  data() {
    return {
      // 测试数据,实际可不必引入
      initJson: {
          'data': {
            'id': 2,
            'text': 'Design project',
            'image': 'https://testerhome.com/uploads/user/avatar/6109.jpg',
            'imageSize': { 'width': 200, 'height': 200 }
          }
      }
    }
  },
  methods: {
    // 示例方法,实际可根据需要绑定到其他元素事件中,比如 v-on:click="logCurrentData"
    logCurrentData: function(event) {
      console.log("编辑器中的最新用例内容:", this.$refs.minderEditor.getJsonData())
    }
  }
}
<scripts>

完整示例可查看 examples 下面的 2 个文件

更多信息

更多信息,请查看 https://github.com/chenhengjie123/vue-testcase-minder-editor

最后

有些 eslint 之类的问题因为本身原有代码就有比较多问题,不影响功能但会有一堆红线。修复起来比较耗时所以暂时没动,请大家见谅。

如果代码方面有什么优化建议,也欢迎提出,甚至直接提 PR 优化哈!

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
共收到 33 条回复 时间 点赞

给大佬点赞,有时间准备部署试试

厉害👍

代码拉下来 可以直接跑 不错

我是萌新,恒捷大佬才是前辈


npm 安装依赖的时候,提示上面的报错,是有依赖 python2.x 吗

你在跑哪个命令的时候报错?可以把完整的日志发一下不?

项目本身没有依赖 python ,估计是项目某些依赖有需要用 python 安装。

陈恒捷 回复

就是把源代码拉下来安装依赖的时候报的错误,npm --registry=https://registry.npm.taobao.org install

8楼 已删除
陈恒捷 回复

解决了,是我本地 node 版本太高,用 cnpm 安装就可以了


大佬,搜索功能貌似不可用呢,有时间帮忙看下哈

刚看了下,默认数据的问题。默认数据没有 id,而搜索要求用到节点 id。

刚修复了,你更新下代码重新跑应该就没问题。正式项目里添加节点后,id 是自动生成的,所以也不会有问题。

你是我的偶像啊!!!

陈恒捷 回复

哈哈,大佬回复速度好快,还有一个问题,这块内容好像是编辑不了的是么

刚试了下,貌似是用不了。之前这个功能基本没用过,一直没发现这个问题。。。

你先 github 记录个 issue ?这周事情比较多,估计得下周才有空研究。

陈恒捷 回复

@ 一枚老男孩 其实是可以用的,默认都是无样式的,你们试着改一下字体或者字号,『复制样式』、『清除样式』就可以点了
但是『粘贴样式』是有 bug 的,只是样式上一直是 disable 的,但其实也是可以点的,试一下就知道了,找一下样式控制那个文件改一下代码就 OK 了:

请教一下,使用 VueTestcaseMinderEditor 组件,在调用后端 wsClearRecord 接口时,websocket 获取到的结果为 null,跟 AgileTC 前端有 wsUrl 参数有关吗?

stephen 回复

你截图里用的不是 VueTestcaseMinderEditor 组件,而是 AgileTCEditor 组件哦。

VueTestcaseMinderEditor 目前没有支持 websocket ,所以你如果用这个组件的话,涉及 websocket 部分的都会用不了。

陈恒捷 回复

首先感谢大佬回复!我在比对 这两个组件 ,发现有这个参数,然后确实 websocket 用不了,目前已经计划基于 VueTestcaseMinderEditor 组件来开发。所以这里有两个关键问题想再问下:1、 前端想加上这个清除结果功能的时候,发现后端里面还调用了 websocket,会报错 ,不知道您的解决方案是? 2、保存 baseCaseContent 内容,在分配多个子任务的情况下,需要获取到全量的 baseCase?还是说只要获取到当前子集的 baseCase 内容?

stephen 回复

1、 前端想加上这个清除结果功能的时候,发现后端里面还调用了 websocket,会报错 ,不知道您的解决方案是?

你的服务端用的是 agileTC 么?清除结果的核心是清理掉数据库里 exec_record 表里的内容,清理了这里后重新从服务端再拉一次合并测试结果后的用例数据,就是清除了所有测试结果后的数据了。

2、保存 baseCaseContent 内容,在分配多个子任务的情况下,需要获取到全量的 baseCase?还是说只要获取到当前子集的 baseCase 内容?

没太明白你的问题,这里的全量和子集具体是指?

然后如果是使用这个组件配合 agiletc 服务端使用的话,多人协作这块可能你需要花点精力处理下,比如加个锁或者让服务端能做增量保存,否则按照默认情况,是会出现相互覆盖的问题的。

陈恒捷 回复

是的,服务端用 AgileTC;然后全量和子集是指,当分配多个子任务后,每个任务中的用例,就是当前用例集下的一个子集;关于服务端增量保存,我挪了这段代码:https://github.com/didi/AgileTC/pull/93,还需要再加锁么?

仅楼主可见
stephen 回复

有这段代码的话,测试任务还是需要加锁的。因为测试任务里面的测试结果,pr 里面是不带有增量保存的。
同时前端记得按照我 pr 的说明里适配一下。

然后对于清除执行记录这个,我瞄了下我的前端,原来没把这个功能迁移过来。。。所以我只说思路吧。

思路是给服务端请求了 clear 清除了对应的测试结果记录后,把新结果的 json 对象更新到 VueTestcaseMinderEditor 的 init-json 属性绑定的对象即可(印象中 react 要显式用 set 属性名 的方法才能更新指定对象,而 vue 直接更新绑定的对象值即可)。组件内部有对这个属性值进行 watch 监听,一旦检测到变更,会立即变更自己的展示内容。

陈恒捷 回复

非常感谢,解答很清晰

25楼 已删除

有个问题,请教一下楼主,vue 的脑图编辑器组件,虽然不影响使用,但控制台有报错,需要怎么解决,或者是可以忽略:

template 代码引用:

<template>
  <div>
    <h3>这是一个用例/任务详情页面</h3>
    <div v-show="showTask" >
      <el-row :gutter="20">
        <el-col :span="6" >
          <el-tooltip
            title={{ recordDetail.description }}
            placement="bottomLeft" >
            {{ recordInfo.description }}
          </el-tooltip>
        </el-col>
        <el-col :span="1"></el-col>
        <el-col :span="4">
          通过率: {{ recordInfo.passRate + '%' }}
        </el-col>
        <el-col :span="4">
          已测: {{ recordInfo.passCount + '/' + recordInfo.totalCount }}
        </el-col>
      </el-row>
    </div>
    <VueTestcaseMinderEditor
      ref="minderEditor"
      :init-json="initJson"
      :allow-edit-priority="editMode"
      :allow-edit-label="editMode"
      :allow-edit-result="resultMode"
      :allow-edit-node="editMode"
    />
    <el-button v-if="showTask" type="danger" @user1="clearRecord()">
      清除执行记录
    </el-button>
    <el-button type="primary" @user2="updateCase()">
          保存
    </el-button>


  </div>
</template>
stephen 回复

方便把你项目其他无关信息精简掉,只留下能重现问题的最小项目内容,打个包或者上传 github 仓库后发一下不?

我这边没遇到过你这两个报错,不好评估。

陈恒捷 回复

已解决,可能是 initJson 初始值绑定为空值导致,目前是给他一个初始值就没有报错

stephen 回复

哦哦,OK。

渲染脑图报错。

重来看雨 回复

get,从报错上看,可能和你本身的脑图数据有关。

可以在 https://github.com/chenhengjie123/vue-testcase-minder-editor/issues 上单独提一个 issue ,并附上你的操作步骤、 xmind json 数据么?方便的话,能把一个能复现这个问题的最小项目直接提供过来最好,能复现才能有办法获取到更多的信息,有助于解决问题。

陈恒捷 回复

数据是项目里的 vue-testcase-minder-editor/examples/App.vue 里的 initJson

重来看雨 回复

能否建个 Issue ,把详细操作步骤、运行环境都发下?

我刚拉仓库最新代码跑了下,也进入编辑模式试了下加标签,都很正常,console 里没有任何 error 日志。

陈恒捷 回复

是 vue-i18n 的问题,已通过 https://github.com/kazupon/vue-i18n/issues/306 解决

after delete this line : Vue.locale = () => {}; it works fine for me

重来看雨 回复

OK

这个是你额外引入的吗?我印象中我项目没有用到 Vue.locale = () => {} 这个。

陈恒捷 回复

我项目里有用到。

需要 登录 后方可回复, 如果你还没有账号请点击这里 注册