用 Jasmine 测试 ngSwitch答案

【问题标题】：Testing ngSwitch with Jasmine用 Jasmine 测试 ngSwitch
【发布时间】：2017-05-22 06:45:26
【问题描述】：

我的组件中有一段 HTML：

<div [ngSwitch]="data.mode" class="data-mode">
    <span ngSwitchWhen="mode1">Mode 1 Activated</span>
    <span ngSwitchWhen="mode2">Mode 2 Activated</span>
</div>

我想通过 karma-jasmine 测试它。我可以得到根元素

const headerMode = fixture.debugElement.query(By.css(".data-mode"));

这将返回具有 2 个子元素的根节点，但我看不到这两个子元素中的哪一个处于活动状态。

我该怎么做？

【问题讨论】：

标签： angular testing karma-jasmine ng-switch

【解决方案1】：

By.css('.data-mode > span') 应该返回激活的元素。记得调用fixture.detectChanges(); 强制Angular 的变更检测运行并提前影响测试中的元素。

【讨论】：

【解决方案2】：

 const headerElement : HTMLElement = fixture.nativeElement;
 expect(headerElement.querySelector('span').innerText).toBe('Mode 1 Activated');

这可能有助于测试 ngSwitch。

【讨论】：