第4次作业-结对编程之实验室程序实现
| 这个作业属于哪个课程 | https://edu.cnblogs.com/campus/fzu/SE2020 |
|---|---|
| 这个作业要求在哪里 | https://edu.cnblogs.com/campus/fzu/SE2020/homework/11277 |
| 这个作业的目标 | 结对编程，学习前端，单元测试，github |
| 学号 | 031802513-031802516 |
团队成员
| 学号 | 姓名 |
|---|---|
| 031802513 | 黄展 |
| 031802516 | 兰杰 |
1、开头：
| 标题 | 链接 |
|---|---|
| 结对同学博客链接 | https://www.cnblogs.com/jieblue/ |
| 本作业博客的连接 | https://www.cnblogs.com/qewpqewp |
| 仓库地址 | https://github.com/jieblue/031802513-031802516 |
2、具体分工：
031802513完成js部分和vue的框架构建，单元测试框架
031802516完成html部分，完善单元测试用例，美化页面
3、PSP表格
| PSP2.1 | Personal Software Process Stages | 预估耗时（分钟） | 实际耗时（分钟） |
|---|---|---|---|
| Planning | 计划 | 60 | 70 |
| Estimate | 估计这个任务需要多少时间 | 5 | 5 |
| Development | 开发 | 300 | 350 |
| Analysis | 需求分析 (包括学习新技术) | 50 | 100 |
| Design Spec | 生成设计文档 | 25 | 30 |
| Design Review | 设计复审 | 15 | 30 |
| Coding Standard | 代码规范 (为目前的开发制定合适的规范) | 10 | 20 |
| Design | 具体设计 | 50 | 80 |
| Coding | 具体编码 | 25 | 70 |
| Code Review | 代码复审 | 50 | 60 |
| Test | 测试（自我测试，修改代码，提交修改） | 30 | 350 |
| Reporting | 报告 | 25 | 50 |
| Test Report | 测试报告 | 10 | 20 |
| Size Measurement | 计算工作量 | 5 | 20 |
| Postmortem & Process Improvement Plan | 事后总结, 并提出过程改进计划 | 5 | 100 |
| 合计 | 665 | 1355 |
4、解题思路描述与设计实现说明
-
实现思路
0、此项目用Vue+element-ui实现，测试模块为jest+vue/test-utils
1、将文本处理，生成树结构
2、树结构：{name:"张三",children:[{name:"2018级研究生",children:[{name:"李四",detail:"java"},{name:"王五",}]},{name:"2019级研究生",children:[{name:"赵六"},{name:"陈7"}]}]}
(每个节点有name、detail、children字段)
3、树合并算法，遍历每个树的叶节点，判断是否有某根节点的name=叶节点的name，如果有，就将此根节点替换成此叶节点
4、将此树结构传入Tree组件，Tree组件递归形成图形树 -
数据流图
-
代码片段
树结构生成算法：将输入的文本逐行读取，每行出现“导师：”时，储存此导师名字，此时进入学员录入模式，之后的每一行都是该导师学员的信息。当读取到空行时，结束此导师的录入模式，重复此过程直到读取到某非空行且不处于学员录入模式时，则开始录入每个学员的具体信息。
initData() {
var nowTeacher = "";//当前教师
this.lines = this.text.split("\n");//以行分割
this.lines.forEach((item) => {//遍历每一行
if (item.includes("导师：")) {//判断是导师
var temp = item.split("：");
nowTeacher = temp[1];//开始录入此导师的子节点的标志
this.teacher.push({ name: temp[1], children: [], extend: false ,image_url : require("../assets/head.jpg")});
} else if (item === "") {//导师后出现空行
nowTeacher = "";//停止导师录入子节点
} else if (nowTeacher !== "") {//导师的子节点
var temp1 = item.split("：");
var students = temp1[1].split("、");
this.teacher.filter((item) => {
if (item.name === nowTeacher) {
var children = [];
students.forEach((s) => {
children.push({ name: s , image_url : require("../assets/head.jpg")});
});
item.children.push({
name: temp1[0],
children: children,
extend: false,
});
}
});
} else {//判断是学生的具体信息
var temp2 = item.split("：");//temp2[0]学生姓名，temp2[1]学生详情
this.teacher.forEach((teacher) => {
if (teacher.name === temp2[0]) {
teacher.detail = temp2[1];
}
teacher.children.forEach((grade) => {
grade.children.forEach((item) => {
if (item.name === temp2[0]) {
item.detail = temp2[1];
return;
}
});
});
});
}
});
},
},
五、附加特点设计与展示
设计的创意独到之处，这个设计的意义：
- 拖拽功能、结点收缩展开、文件上传
- 意义：当成员信息较多时，拖拽和结点收缩展开可以使得信息查看更便利，不会占据太多空间，文件上传可能没啥意义，后期可改成数据库读取
实现思路：
- 1、拖拽：当模块触发鼠标左键按下事件后，监听鼠标移动事件，将模块的位置加上鼠标偏移量，当鼠标左键抬起后停止监听。
- 2、结点收缩展开，由于树结点是递归形成，每个结点的树结构含有一个extend字段，当此字段为true时，此结点显示，反之隐藏
- 3、文件上传（略）
代码（拖拽功能）:
directives: {
//拖拽功能
drag: {
// 指令的定义
bind: function (el) {
let oDiv = el; // 获取当前元素
oDiv.onmousedown = (e) => {
// 算出鼠标相对元素的位置
let disX = e.clientX - oDiv.offsetLeft;
let disY = e.clientY - oDiv.offsetTop;
document.onmousemove = (e) => {
// 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
let left = e.clientX - disX;
let top = e.clientY - disY;
oDiv.style.left = left + "px";
oDiv.style.top = top + "px";
};
document.onmouseup = () => {
document.onmousemove = null;
document.onmouseup = null;
};
};
},
},
},
使用方法：在标签里面加个 -drag <div v-drag>
成果展示
六、在博客中给出目录说明和使用说明
目录组织：
```
├── public index.html默认位置
├── src
│ ├── assets 资源文件夹
│ ├── components 组件
│ ├── router 路由配置
│ └── views 主页面
└── test
└── unit 单元测试文件
```
运行方式：
- 1 安装node.js https://nodejs.org/zh-cn/ (12.9.0)
- 2 下载完可检查在windows任务命令行里输入node -v
- 3 使用淘宝NPM镜像源下载比较快 命令：npm install -g cnpm --registry=https://registry.npm.taobao.org
- 4 clone仓库
- 5 cd 031802513-031802516
- 6 npm install 安装框架
- 7 npm run serve 运行
- 8 访问 http://localhost:8080/
七、单元测试
-
测试工具：jest+vue/test-utils
-
安装方式：在构建vue项目的时候引入jest，之后在项目中npm install @vue/test-utils 安装vue/test-utils模块
-
在tests/unit文件夹内创建 xx.spec.js文件，用来写测试用例
简易教程(测试用例文件写法)： 1、import { shallowMount } from '@vue/test-utils' //引入 vue/test-utils的 shallowMount函数来挂载需要测试的组件 2、例子
import Vue from 'vue'
import index from '@/components/index'
import { shallowMount } from '@vue/test-utils'
describe('index页面测试', () => {
//shallowMount挂载测试组件（此函数不生成子组件，mount生成子组件）
const wrapper = shallowMount(index)
//断言格式
it('验证是否渲染了页面按钮', () => {
expect(button.text()).toEqual('生成')
})
3、 同等性断言 Equality Asserts
expect(sth).toEqual(value)
expect(sth).not.toEqual(value)
比较性断言 Comparison Asserts
expect(sth).toBeGreaterThan(number)
expect(sth).toBeLessThanOrEqual(number)
类型性断言 Type Asserts
expect(sth).toBeInstanceOf(Class)
条件性测试 Condition Test
expect(sth).toBeTruthy()
expect(sth).toBeFalsy()
expect(sth).toBeDefined()
4、运行npm run test:unit
- 单元测试代码
index.vue 测试
const button = wrapper.findAllComponents({ name: 'el-button' }).at(1)
it('验证是否渲染了页面按钮', () => {
expect(button.text()).toEqual('生成')
})
wrapper.vm.text = "导师：张三"
button.trigger('click');
it('测试按钮是否能点击', () => {
expect(wrapper.vm.teacher[0].name).toEqual("张三")
})
it('测试树生成算法', () => {
wrapper.vm.text = `
导师：张三
2016级博士生：天一、王二、吴五
2015级硕士生：李四、王五、许六
2016级硕士生：刘一、李二、李三
2017级本科生：刘六、琪七、司四
刘六：JAVA、数学建模
李二：字节跳动、京东云
`
button.trigger('click');
var teacher = wrapper.vm.teacher[0]
expect(teacher.children[0].name).toEqual("2016级博士生")
expect(teacher.children[1].children[2].name).toEqual("许六")
expect(teacher.children[3].children[0].detail).toEqual("JAVA、数学建模")
})
it('测试复杂树生成算法，当一个导师是另一个导师的学员的情况', () => {
wrapper.vm.text = `
导师：张三
2016级博士生：天一、王二、吴五
2015级硕士生：李四、王五、许六
2016级硕士生：刘一、李二、李三
2017级本科生：刘六、琪七、司四
导师：王九
2013级博士生：刘久、张三、周七
2012级硕士生：李一、王八、许四
刘六：JAVA、数学建模
李二：字节跳动、京东云
`
button.trigger('click');
var teacher = wrapper.vm.teacher[0]
expect(teacher.children[0].name).toEqual("2013级博士生")
expect(teacher.children[0].children[1].name).toEqual("张三")
expect(teacher.children[0].children[1].children[1].children[2].name).toEqual("许六")
})
tree.vue测试
it('验证树根组件是否正确渲染', () => {
expect(wrapper.find('.name').text()).toEqual('张三')
})
it('验证树结点数量', () => {
expect(wrapper.findAllComponents(tree).length).toBe(7)
})
it('验证子节点组件是否正确渲染', () => {
expect(wrapper.findAllComponents(tree).at(1).findAllComponents(tree).at(1).find(".name").text()).toEqual('李四')
})
const button=wrapper.findComponent({name:'el-button'})
it('验证学生查看详情按钮', () => {
expect(button.text()).toEqual('查看详情')
wrapper.vm.showDetail({name:"李四",detail:"haha"})
expect(wrapper.vm.detail).toEqual("haha");
})
- 测试数据思路，先测试单棵树的情况，就类似给出的测试数据，然后测试当一个导师是另一个导师的学员的情况，最终结果的树会合并。测试人员可能会输入一个不符合命名标准的数据，此代码并没有判断错误命名的能力。
8、github 签入记录
9、遇到的代码模块异常或结对困难及解决方法
最大的困难是单元测试模块的引入。刚开始引入的时候，所有的测试用例所指向的组件都出现js代码错误，最开始的报错是"forEach"函数不存在。经多次查找资料，发现是因为jest版本过低，js编码不支持es6版本，而forEach是es6新引入的特性。
于是手动修改package.json升级模块，但由于涉及到的模块特别多，每个模块的版本又都互相限制，因此会产生各种不支持。
后来尝试了重新构建项目，引入Karma+Mocha模块单元测试，但与vue/test-utils不太兼容，对于element-ui无法测试。
最终将vue-cli升级到vue-cli 3版本，并重构项目，才得以成功进行单元测试。
期间非常绝望，花了两天时间来解决这个问题，重构项目好几次，几乎快要放弃了，甚至去询问唯一认识会vue的学姐，结果告诉我她不会写测试。
收获：还是趁早放弃为好，下次可没有那么幸运了。不能丢了西瓜捡芝麻。
10、评价队友
* 值得学习的地方：期间一直劝我不要放弃，要坚持
* 需要改进的地方：页面设计得不好看
