Angular 单元测试 routerLink 状态答案

【问题标题】：Angular unit test routerLink stateAngular 单元测试 routerLink 状态
【发布时间】：2019-12-13 16:43:02
【问题描述】：

我使用state 在角度（版本 8）组件 A 和 B 之间传递数据，例如：

<a routerLink="/componentB" [state]="{data: {hello: 'world'}}">Go To ComponentB</a>

在 ComponentB 中，我正在读取数据：

ngOnInit() {
  this.data = history.state.data.hello;
}

一切都在 live webapp 中工作，但我似乎无法在 jasmine 测试中复制相同的内容。单元测试是这样的：

setup();
...
fixture.nativeElement.querySelector(`a`).click();

fixture.whenStable().then(() => {
  expect(fixture.nativeElement.querySelector(`p`)).toContain('world');
}

在将this.data = ... 添加到ngOnInit() 之前，导航有效，但现在出现空指针异常。实际上state 是null，但我不知道为什么。实时运行 webapp 时一切正常，但 Jasmine 单元测试失败。

我知道我可以将history.pushState({data: {hello: 'world'}}, '', ''); 添加到设置中，但我希望在单元测试期间将真实数据从组件A 传递到组件B。我错过了什么？为什么来自一个组件的数据不会通过state 传输到另一个组件？

【问题讨论】：

@Melr 你找到解决办法了吗？
@ApurvaPathak - 我没有找到如何对上述解决方案进行单元测试。我决定根本不使用该解决方案。我决定做的是通过 url 参数传递所有需要的数据，甚至整个对象都可以用 base64 编码并传递。也许它不是最好的解决方案，但它是可单元测试的解决方案。 P.S：我仍然希望有人能回答这个问题：D

标签： angular unit-testing jasmine angular-router angular-routerlink

【解决方案1】：

您必须在beforeeach 中推送您的状态；类似：

history.pushState("hello", "world");

【讨论】：

我需要修改该声明。我基本上自己正在解决这个问题。上面的语句将通过测试，但要正确设置状态 history.pushState 需要为您的数据流设置如下： history.pushState({data:.... 我刚刚注意到关于 history.pushState.. 的语句。 .并且基本上要回答您的实际问题，这不是单元测试的工作方式。您必须模拟每个测试套件的数据。