Vue-造轮子-2 添加icon &单元测试

添加icon

断言

——————————————————————————————————————

添加icon

1.slot的使用

index.html中写

image.png

在button.vue中写

image.png

结果显示

image.png

2.iconfont.cn的使用

image.png image.png image.png image.png

3.在webstorm中格式化代码

shift+shift 输入reformat

4.进一步简化

在index.html中这样写

image.png

在button.vue中接受参数并赋值到标签中

image.png

5.属性不能是大写，但是接受参数的时候可以是大写

image.png image.png

6.slot标签不能加class，需要外面包裹一层div

image.png

7.只要遇到上下不对齐就直接

vertical-align :middle

8.属性检查器

image.png

单元测试

1. BBD TDD

BDD behavior driven development 行为驱动开发

TDD test driven development 测试驱动开发

assert 断言 我主观认为...

image.png

2.使用chai作为断言库

安装npm i -D chai

image.png

chai在项目中的使用：

image.png

chai测试click事件，需要引入chai-spies

先安装 npm i -D chai-spies

第一步 引入

image.png

第二步 使用

image.png