测试平台系列(104) 实现用例目录/case分屏功能

527 阅读3分钟

这是我参与2022首次更文挑战的第17天,活动详情查看:2022首次更文挑战

大家好~我是米洛
我正在从0到1打造一个开源的接口测试平台, 也在编写一套与之对应的教程,希望大家多多支持。
欢迎关注我的公众号米洛的测开日记,获取最新文章教程!

回顾

上一节,咱们编写了系统设置页面的相关功能,这一节呢,我们来优化一下用例目录和用例页面的显示。

我们来研究下怎么实现一个分屏功能

什么是分屏

我们现在的用例列表页就不支持分屏,只因左右侧卡片的宽度都是相对固定的,也就是不能左右拖拽放大/缩小的。

如图所示,假设现在我的目录名字很长,那可能显示效果就会很差。(因为左边宽度不够用呀)

再来看看分屏了的组件,我们用一个gif来展示:

组件调研

起初踩了不少坑,也不知道该怎么在github搜索对应的组件,当然,要自己写是不可能的(毕竟不会)。

后来在ant.design官网看到了一些推荐的组件:

这就是生态的力量吗!

接着我们从里面找到了不起眼的分屏组件:

看看官网的demo

官网的demo给的真的是,相当的粗糙,连import都没有写。这不禁让我想起某个star第一的Java操作excel的库,连maven/gradle依赖都没有给出来。

简单讲下他的api:

  • split

    分割的模式,有vertical和horizontal,即垂直和水平,即左右分屏和上下分屏,我们这里需要采用vertical。

  • minSize

    最小尺寸,一般以左侧的div为主。

  • defaultSize

    默认尺寸

  • maxSize

    最大尺寸,也就是左边div可以拖到的最大宽度。

注意事项

在图中,可以看到SplitPane包裹的2个div进行了分屏操作,那我们要对antd的Col进行同样的操作可行吗?

博主亲自试了一下,不可以,这样会导致页面错乱。所以我们还是按照他的意思,使用div标签。

运用到pity中

  1. 安装依赖
npm install --save react-split-pane

我们主要是想让case和目录进行分离,所以我们找到目录那块jsx: src/pages/ApiTest/TestCaseDirectory.jsx调整以下内容:

  1. 新增引用
import SplitPane from 'react-split-pane';

  1. 修改case和用例视图

找到此处的Row,并在下面加入SplitPane组件,把2个Col的组件改为div

我们看下效果:

可以看到样式变了,但是实际上并未生效。

排查问题

所以这就是我说官网的demo不是太好,因为我们还需要额外写一些css样式。

  • 编写src/pages/ApiTest/TestCaseDirectory.less文件(没有则新建)
.Resizer {
  background: #000;
  opacity: 0.2;
  z-index: 1;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -moz-background-clip: padding;
  -webkit-background-clip: padding;
  background-clip: padding-box;
}

.Resizer:hover {
  -webkit-transition: all 2s ease;
  transition: all 2s ease;
}

.Resizer.horizontal {
  height: 11px;
  margin: -5px 0;
  border-top: 5px solid rgba(255, 255, 255, 0);
  border-bottom: 5px solid rgba(255, 255, 255, 0);
  cursor: row-resize;
  width: 100%;
}

.Resizer.horizontal:hover {
  border-top: 5px solid rgba(0, 0, 0, 0.5);
  border-bottom: 5px solid rgba(0, 0, 0, 0.5);
}

.Resizer.vertical {
  width: 11px;
  margin: 0 -5px;
  border-left: 5px solid rgba(255, 255, 255, 0);
  border-right: 5px solid rgba(255, 255, 255, 0);
  cursor: col-resize;
}

.Resizer.vertical:hover {
  border-left: 5px solid rgba(0, 0, 0, 0.5);
  border-right: 5px solid rgba(0, 0, 0, 0.5);
}
.Resizer.disabled {
  cursor: not-allowed;
}
.Resizer.disabled:hover {
  border-color: transparent;
}

  • 引入

最终效果

有了这个功能之后,我们就可以轻松编写类似的组件了,这样就可以轻松分割其他页面的div啦。