1.数据交互

image.png

1.1测试分支需要覆盖全面

1.2借助函数生成符合类型的假数据

image.png

2.鼠标事件和键盘事件

2.1尽量采用端对端测试或者使用protractor库进行测试

2.2键盘事件test例子

image.png

image.png

需要劫持属性，给属性赋值
在新版的jasmine中可以使用spyOnProperty创建r间谍。

image.png

官方给的示例：

image.png

2.3鼠标事件test例子

h1 = fixture.nativeElement.querySelector('h1');
fixture.nativeElement.querySelectorAll(selector);

 const paragraphDe = bannerDe.query(By.css('p'));
  const p: HTMLElement = paragraphDe.nativeElement;
  expect(p.textContent).toEqual('banner works!');

image.png

可能会遇到的坑：找不到元素，元素带有if或者需要一定条件才能渲染

image.png

image.png

triggerEventHandler和dispatchEvent有什么区别？？？
nativeElement和debugElement有什么区别？？？

3.父子组件

3.1父传子

父给子传了一个值 = 在组件中创建了一个变量；
这个值可能在模板上使用 => 同事件，找到元素，判断元素内容与传入值内容是否相等
也有可能没有在模板上使用 =>

image.png

3.2子传父

image.png

4.异步

Jasmine支持三种管理异步工作的方式：
async/ await

image.png

Promise

image.png

当然你也可以用async/await去测试promise，用promise去测试async/await

image.png

image.png

async关键字函数返回的不是promise，会自动用Promise.resolve()包装;
async关键字函数显式地返回promise，那就以你返回的promise为准;
await 在等什么？右侧表达式的结果
等到之后，对于await来说，分2个情况
不是promise对象
是promise对象
如果不是 promise , await会阻塞后面的代码，先执行async外面的同步代码，同步代码执行完，再回到async内部，把这个非promise的东西，作为 await表达式的结果
如果它等到的是一个 promise 对象，await 也会暂停async后面的代码，先执行async外面的同步代码，等着 Promise 对象 fulfilled，然后把 resolve 的参数作为 await 表达式的运算结果，走一遍微任务；

回调
按照一般思路测试：

image.png

使用done告诉jasmine,这有一个异步函数，需要等到done被调用才能结束测试
done() beforeAll，afterAll,beforeEach,afterEach,it有一个可选参数done,
done用于通知jasmine:这里有一个异步函数，必须等到done()被调用后才能结束当前测试步骤，执行下一步，默认情况下jasmine在每一步里最多等待5s，5s没有执行，用例被标记为失败；
可通过： jasmine.DEFAULT_TIMEOUT_INTERVAL = 2000;来修改全局的默认超时时间

image.png

done的其他例子：

image.png

虽然以上方法可以测试异步代码，但也确确实实让我们在单元测试中等待了3s，而单元测试需要尽可能快速运行，
jasmine为我们提供了一个jasmine的虚拟时钟，模拟timeout相关函数

image.png

Zone.js提供另外一种测试方法：
fakeAsync + ‘tick’
[tick()] 会模拟时光的流逝，直到所有未决的异步活动都结束为止
使用fakeAsync与tick搭配，用同步执行的程序模拟异步的效果 + tick模拟时间快转效果
因为一些异步是没有setTimeout的等待时间，tick中未加入任何参数(默认值为0)

image.png

image.png

image.png

image.png

image.png

以上例子为但会结果success的例子，测试返回失败的例子原理一致，断言出现错误后会遇到的场景即可

http交互

image.png

timer和interval

image.png

image.png

6流

5.路由

测试路由组件
关心组件有没有根据给定的条件导航到正确的地址

image.png

验证routySpy.navigate调用信息

image.png

测试路由目标组件
没有按照官网给定的例子来，官网需要一个可复用的桩ActivatedRouteStub，
然后需要使用页面page对象
page对象没有生成成功；
使用了如下方法：

image.png

image.png

带有routerLink的组件

image.png

4.async(() => {})
5.(() => {})
为什么需要一个同步的环境和一个异步的环境
因为异步读取模板url和style的url