Karma 测试随机重启并在 Edge 中“加倍”iframe答案

【问题标题】：Karma tests randomly restart and "double" iframe in EdgeKarma 测试随机重启并在 Edge 中“加倍”iframe
【发布时间】：2019-05-14 19:45:28
【问题描述】：

我的 Angular 7 应用有一套 Karma/Jasmine 测试。我所有的测试都在 Chrome 和 Firefox 中通过，但是当我在 Edge 中运行它们时，它会运行一段时间，然后有时它会随机重新加载页面并重新开始，有时它会再次将业力加载到 iframe 中，因此“加倍”它。

这就是它的样子

但是，当我单击“调试”按钮时，它会打开一个新选项卡，并且所有测试都在其中运行良好，没有失败。

这就是我的控制台输出的样子。你可以看到它运行了一些测试，然后重新启动它们

这是怎么回事？

为什么在没有测试失败的情况下它会在 Edge 中出现这种行为？

【问题讨论】：

如果您告诉 Karma 只运行一次测试会发生什么。现在，我假设您正在使用手表功能。
我关闭了restartOnFileChange，同样的事情发生了。当我关闭autoWatch 时，没有任何反应，根本没有运行任何测试。是的，有导航测试，但所有这些都被嘲笑以避免发生这个问题。同样，所有测试在其他浏览器和 Edge 的 Karma 调试视图中通过。
我怀疑这是您的源代码的边缘支持问题。无论出于何种原因，重新启动都是代码中的错误的副产品。我找不到任何与此相近的 Karma 未解决问题。开始缩小哪些测试重现问题。另一种选择是放弃Edge。这里没有人会责怪你。
哈哈，那好吧。我想我会检查并fdescribe 每个套件，直到找到导致它的原因。我怀疑你是对的，但只有时间会证明......
您可能想先尝试添加更多的 polyfill。推荐的并不总是足够的。如果你在 node_modules 包中查找 polyfill。您会看到可以添加更多内容。尝试添加所有这些，看看是否可以解决问题，然后缩小现在需要的范围。

标签： angular karma-jasmine karma-runner angular-test

【解决方案1】：

我发现出了什么问题，结果是导航问题。

我在模板中有一个带有href="#" 的组件，如下所示：<a href="#" (click)="doSomething($event)">，然后像这样处理：

doSomething($event: Event): void {
  $event.preventDefault();
  someService.whatever();
}

在我的测试中，我遇到了类似的情况

it('should call the doSomething() method when a link is clicked', () => {
    spyOn(component, 'doSomething');

    const link: HTMLAnchorElement = debugEl.query(By.css('a')).nativeElement;
    link.click();
    fixture.detectChanges();

    expect(component.doSomething).toHaveBeenCalled();
});

但这会导致 Edge（而不是其他浏览器由于某种原因）尝试导航到导致测试重新加载的 #。解决方案是添加.and.callThrough()，这样组件就可以运行$event.preventDefault()，以防止在测试中导航。

所以，上面的测试现在看起来像这样

it('should call the doSomething() method when a link is clicked', () => {
    spyOn(component, 'doSomething').and.callThrough(); //call through to run preventDefault() on the click event

    const link: HTMLAnchorElement = debugEl.query(By.css('a')).nativeElement;
    link.click();
    fixture.detectChanges();

    expect(component.doSomething).toHaveBeenCalled();
});

【讨论】：