零基础学习Angular单元测试内容总结（还没有完成）

零

学习Angular的过程当中，到目前为止最难于理解的就是单元测试了。
首先是不知道什么是单元测试，其次是不知道为何要进行单元测试，还不知道如何去操做。

终于，在许多天的思考以后，我终于把单元测试归纳成了一句话：

单元测试的本质是，用测试代码来模拟用户输入、模拟用户点击、模拟服务器返回值，并经过业务逻辑来断言测试结果，只要实际结果和断言相同，则视为测试经过。

1、为何要进行单元测试

咱们先想想传统的代码测试是怎样的：开发人员在本地跑代码，运行起来，而后把本身做为用户，把用户全部可能的操做执行一遍，若是没有出现异常，则测试经过。

这样就出现了两个明显的弊端：
第一，开发人员不可能模拟全部的操做，总会有遗漏的状况，这样下降了测试的质量；
第二，即便只是测试一个功能，也须要把整个项目先后台的全部代码全都运行起来，下降了测试的效率。

此外，还有一个隐患，那就是没有充分考虑代码间的联系，容易出现“只改了一行代码致使其余功能崩掉”的状况。

因此单元测试的出现，成功的解决了上述问题：

第一，质量高

单元测试是经过在测试文件xxxx.component.spec.ts中写入测试代码来实现的，整个测试过程不须要用户的参与，彻底由代码来实现，下降了因为操做失误或操做遗漏形成的隐患。只要测试文件的内容正确，就能够正常测试。

第二，灵活

单元测试既能够测试整个系统，也能够只测试某个功能，不再须要由于测某个功能而把整个系统跑起来。
更方便的是，能够经过代码来模拟后端的返回值，测试前端就不须要起后端服务了。

第三，安全

若是某一行代码的改变影响了其余的功能，单元测试会立刻发出警告，避免相互关联的功能收到影响。

2、运行单元测试的方法

ng test

在项目目录输入ng test命令，会启动整个项目的单元测试

若是将测试代码的describe改成fdescribe，就只测试单个组件；
若是将测试代码的it改成fit，就只测试组件的这个功能；

当ng test命令运行时，先看代码中有没有fit，再看有没有fdescribe，若是都没有，就测试整个项目。

WebStorm

在代码中点击describe或it前面的符号，便可直接测试单个组件或单个功能。

从测试页面中获取信息

顶部显示了测试数，组件总数，成功数量和失败数量。
高亮的组件是当前正在测试的组件，其余的组件没有测试。

3、基础功能代码

定义测试变量：

//定义变量并赋值
const req = httpTestingController.expectOne('http://localhost:8080/Klass');

断言：

//断言：根据逻辑来看，我期待结果应该是什么样子的
expect(req.request.method).toEqual('POST');

模拟返回值：

//因为测试时并无链接后端服务器，须要用这行代码来模拟返回的数据
req.flush(null, {status: 201, statusText: 'Accepted'});

因为时间缘由，暂时没有学彻底部内容，更多的代码等学完后更新。