适用于编辑测试用例的思维导图编辑器

基于 PIXI.js 绘制的测试用例思维导图编辑器

使用方式

安装

npm i test-case-mind-map

使用

const container = document.querySelector('#editor-container');
const minder = new Minder(container);

minder.loadData({
  root: {
    text: 'Demo',
    type: 'folder',
    children: [
      {
        text: '登陆注册',
        type: 'folder',
        children: [
          {
            text: '登陆 & 前置条件,网络正常',
            type: 'case',
            priority: 1,
            children: [
              {
                text: '适用定制域名下的QQ登陆 & 成功登陆，进入定制版机构端',
                type: 'step',
              },
              {
                text: '适用定制域名下的微信登陆 & 成功登陆，进入定制版机构端',
                type: 'step',
              },
            ],
          },
          {
            text: '把大象关进冰箱 & 大象已经被打晕',
            type: 'case',
            priority: 2,
            children: [
              { text: '打开冰箱', type: 'step' },
              {
                text: '将大象放入冰箱 & 塞入成功',
                type: 'step',
              },
              {
                text: '关上冰箱',
                type: 'step',
              },
            ],
          },
        ],
      },
      {
        text: '高级版',
        type: 'folder',
        children: [
          {
            text: '页面检查',
            type: 'folder',
            children: [
              {
                text: '检查标签页title和icon',
                type: 'case',
                priority: 3,
                children: [
                  {
                    text: '检查标签页面 & 不再显示童心制物-慧课堂，显示机构名称',
                    type: 'step',
                  },
                  { text: '检查icon & 与官方后台配置一致', type: 'step' },
                ],
              },
            ],
          },
        ],
      },
    ],
  },
});

console.log(minder.exportData())