vue-testcase-minder-editor3
v0.3.18
Published
基于百度脑图,并使用Vue二次开发的用例脑图编辑器组件。
Downloads
4
Readme
VUE-TESTCASE-MINDER-EDITOR
基于百度脑图,并使用Vue二次开发的用例脑图编辑器组件。
底层基础(因为需要协同修改,已经整体挪到项目中):百度脑图
改造为 vue 组件: fudax/vue-mindeditor
补充部分用例需要用的功能 MeYoung/Case_Minder_Vue
采用Vue 全家桶 + Element UI + webpack 开发
在此特别感谢 fudax、MeYoung 两位前辈的开源贡献,我只是站在大家的肩膀上补充了一些边角功能而已
效果
也可以本地跑起来体验,克隆完代码后,在根目录下:
# 安装依赖
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个文件
版本发布记录
请查看 CHANGELOG.md
本地开发
# 安装依赖
npm --registry=https://registry.npm.taobao.org install
# 打包成组件并本地运行 examples 里面的示例
npm run lib && npm run serve
# 打包成组件
npm run lib
- 运行时报错
Error: Node Sass does not yet support your current environment: OS X 64-bit with Unsupported runtime
如果运行 npm run serve
有报错 Error: Node Sass does not yet support your current environment: OS X 64-bit with Unsupported runtime
,可以运行以下命令解决(参考文章):
npm rebuild node-sass
- 如果有修改 kityminder-core ,需要阅读 kityminder-core 下的readme,并执行如下指令打包
# kityminder-core
cd kityminder-core && npm run build && cd ..
- 如果需要本地调试,且不使用示例程序便于查看错误堆栈,请修改根目录下 vue.config.js 下面 entry 的值。改为注释下面代码片段中的第一行,去掉第二行的注释即可
...
entry: 'examples/main.js', // 走示例项目,需要 npm run lib 后才能使用
// entry: 'packages/VueTestcaseMinderEditor/main.js', // 走主工程项目,可直接 npm run serve 使用。方便调试时查看源码堆栈
...
发布版本指引
- 改动代码
- 提交这些改动
- 改变package.json中的版本号
- 运行
npm run changelog
生成版本变更记录 - 提交 package.json和CHANGELOG.md文件
- 创建tag,规则为 v+版本号,比如 v0.2.0
git push && git push --tags
push代码及tags- 运行
npm publish
发布到仓库上
部分核心功能说明
1、用例结果对应的节点属性是什么?
答:对应的属性名是 progress 。此处为了兼容原有滴滴 agileTC 平台自带的测试结果,所以没有新开属性,而是沿用了原有的属性及值定义。
具体值定义:
1, // 不通过
9, // 通过
5, // 阻塞
4 // 不执行
2、整体项目架构是怎样的?
答:整体上这个项目包含了 kityminder-core + kityminder-editor 所做的事情。
可参考下图中,kityminder-editor 里面包含的部分:
- kityminder-core
负责底部编辑器具体内容绘制,以及通过命令调用改变编辑器内容、接口和事件暴露编辑器内部关键内容。详细可参阅:kityminder-core
- editor
使用 vue 重写了 kityminder-editor (原来官方的 editor 用的 angularjs ,不好内嵌到 vue 中)。负责顶部编辑栏以及包住 core 提供的编辑窗口,以及右键 hotbox 菜单能力。通过调用 kityminder-core 提供的命令、接口和事件达到修改 xmind 内容的目的。
3、result 这个新增属性怎么加上去的?
答:关键改动点有3处
1、editor的顶部编辑器,增加 result 编辑框。可参考 packages/VueTestcaseMinderEditor/src/components/menu/edit/resultBox.vue
2、editor的右键菜单,增加 result 相关操作。可参考 packages/VueTestcaseMinderEditor/src/script/runtime/result.js
3、kityminder-core 的命令解析器及渲染器,解析前两处发出的命令并对应修改节点内容。可参考 kityminder-core/src/module/result.js
License
BSD 3-Clause (基于fex-team/kityminder-core,并非kityminder-editor)