Karma 单元测试显示 Angular 4.1.3 中覆盖的 UI 损坏答案

【问题标题】：Karma unit testing showing broken UI overlaid in Angular 4.1.3Karma 单元测试显示 Angular 4.1.3 中覆盖的 UI 损坏
【发布时间】：2017-11-08 19:27:14
【问题描述】：

我对 Angular 还是很陌生，并且一直在构建一个有趣的应用程序来进行一些练习。

目前，我正在尝试集成适当的单元测试，但遇到了一些奇怪的问题。

我已经使用 angular-cli 构建了这个应用程序，并修改了生成的单元测试，以开始充实更好的代码覆盖率以进行测试。

但是，当运行 ng test 时，chrome 浏览器会显示我的应用程序 ui 中的一些 html 元素，这些元素覆盖在业力报告的顶部。

我有一种强烈的感觉，这很可能是因为我做错了什么。在这种情况下，我的 google-fu 帮助不大。 karma 是否应该尝试渲染 UI？

我将测试减少到纯粹是针对我的主 app.component 的测试，即使这样，部分 ui 也会尝试呈现。在下面的代码中，如果我删除了对 PlayerService 的引用，那么 UI 元素将不再呈现叠加在 Karma 输出之上，但当然测试会失败。

app.component.spec.ts

import { TestBed, async } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';

import { AppComponent } from './app.component';
import { NavigationComponent } from './navigation/navigation.component';
import { PlayerService } from './players/shared/player.service';

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule
      ],
      declarations: [
        AppComponent,
        NavigationComponent
      ],
      providers: [ PlayerService ]
    }).compileComponents();
  }));

  it('should create the app', async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  }));
});

这对我来说似乎很奇怪。

完整的源代码可以在这里找到：

https://github.com/joshuahysong/TICompanion/tree/20170606_tests

有什么建议吗？

谢谢！

【问题讨论】：

标签： angular unit-testing typescript karma-jasmine

【解决方案1】：

这里有几个想法。首先，让我们进行测试。

"can't bind ngModel to" 是一个模式错误，在这种情况下是输入/选择。我相信您可以通过将 FormsModule 导入 TestBed 配置来解决此问题。

import { FormsModule } from '@angular/forms';
...
imports: [FormsModule]

任何时候出现“无法绑定”错误，这意味着您的 Testbed 缺少某种方式来处理 DOM 元素。如果你接触到 ion-buttons 或 md-material 的东西，你会一直看到这个。只需将这些模块导入您的测试平台，它就会知道如何处理它们。

您还可以通过从 @angular/core 导入 NO_ERRORS_SCHEMA 并将其放入您的测试平台配置中来完全放弃测试这些元素。

import { NO_ERRORS_SCHEMA } from '@angular/core';
...
schemas:[NO_ERRORS_SCHEMA]

就个人而言，我不喜欢使用第二个选项。如果我要承担 TestBed.createInstance() 的开销，那么我想知道模板是否正确编译。

这是 Angular 团队的 project，我发现在解决很多问题时非常有帮助。

【讨论】：

【解决方案2】：

对this question 的共识是这是预期的行为。查看可能的解决方法的答案。

【讨论】：