零基础学习Angular单元测试内容总结（尚未完成）

零

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

终于，在许多天的思考之后，我终于把单元测试概括成了一句话：

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

一、为什么要进行单元测试

我们先想一想传统的代码测试是怎样的：开发人员在本地跑代码，运行起来，然后把自己作为用户，把用户所有可能的操作执行一遍，如果没有出现异常，则测试通过。

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

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

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

第一，质量高

单元测试是通过在测试文件xxxx.component.spec.ts中写入测试代码来实现的，整个测试过程不需要用户的参与，完全由代码来实现，降低了由于操作失误或操作遗漏造成的隐患。只要测试文件的内容正确，就可以正常测试。

第二，灵活

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

第三，安全

如果某一行代码的改变影响了其他的功能，单元测试会马上发出警告，避免相互关联的功能收到影响。

二、运行单元测试的方法

ng test

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

如果将测试代码的describe改为fdescribe，就只测试单个组件；
如果将测试代码的it改为fit，就只测试组件的这个功能；

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

WebStorm

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

从测试页面中获取信息

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

三、基础功能代码

定义测试变量：

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

断言：

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

模拟返回值：

//由于测试时并没有连接后端服务器，需要用这行代码来模拟返回的数据
req.flush(null, {status: 201, statusText: 'Accepted'});

由于时间原因，暂时没有学完全部内容，更多的代码等学完后更新。