Karma单元测试显示在Angular 4.1.3中覆盖的破损UI

我是Angular的新手，一直在开发一个有趣的应用程序来进行练习

目前，我正在尝试集成适当的单元测试，并且遇到了一些奇怪的情况

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

但是，当运行

ng test

时，chrome浏览器会显示覆盖在karma报告顶部的my apps ui中的一些html元素。

我有一种强烈的感觉，这可能是因为我做错了什么。在这种情况下，我的google fu没有什么帮助。karma是否应该尝试呈现UI

我将测试简化为仅针对我的主app.component的测试，甚至ui的一部分尝试呈现。在下面的代码中，如果我删除了对PlayerService的引用，那么UI元素将不再覆盖在Karma输出之上，但是测试当然会失败

应用组件规范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();
  }));
});

这对我来说似乎很奇怪

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

有什么建议吗

---

谢谢

这里有一些想法。首先，让我们开始测试

“无法将ngModel绑定到”是一个架构错误，在本例中，输入/选择。我相信您可以通过将FormsModule导入测试床配置来解决这个问题

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

每当您遇到“不能绑定到”错误时，这意味着您的测试床缺少处理DOM元素的方法。如果你进入离子按钮或md材料的东西，你会看到这一切的时间。只需将这些模块导入您的测试床，它就会知道如何处理它们

通过从@angular/core导入NO_ERRORS_模式并将其放入测试床配置中，您还可以完全放弃测试这些元素

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

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

这是Angular团队的一篇文章，我发现它非常有帮助

大家一致认为这是预期的行为。有关可能的解决方法，请参见答案