npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vue-testcase-minder-editor4

v0.3.19

Published

基于百度脑图,并使用Vue二次开发的用例脑图编辑器组件。

Downloads

4

Readme

VUE-TESTCASE-MINDER-EDITOR

基于百度脑图,并使用Vue二次开发的用例脑图编辑器组件。

底层基础(因为需要协同修改,已经整体挪到项目中):百度脑图

改造为 vue 组件: fudax/vue-mindeditor

补充部分用例需要用的功能 MeYoung/Case_Minder_Vue

采用Vue 全家桶 + Element UI + webpack 开发

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

效果

脑图

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

# 安装依赖
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 使用。方便调试时查看源码堆栈
...

发布版本指引

  1. 改动代码
  2. 提交这些改动
  3. 改变package.json中的版本号
  4. 运行 npm run changelog 生成版本变更记录
  5. 提交 package.json和CHANGELOG.md文件
  6. 创建tag,规则为 v+版本号,比如 v0.2.0
  7. git push && git push --tags push代码及tags
  8. 运行 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)