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

Question

我是Angular的新手，并且一直在构建一个有趣的应用程序来进行练习。

目前我正在尝试整合适当的单元测试，并且正在遇到一些看似奇怪的问题。

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

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

我有一种强烈的感觉，这可能是由于我做错了。在这种情况下，我的google-fu一直不太乐于助人。业力是否应该尝试渲染用户界面？

我将测试简化为仅仅针对我的主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

有什么建议？

谢谢！

Answer 1

这里有几个想法。首先，让我们让您的测试工作。

“无法将ngModel绑定到”是架构错误，在这种情况下是输入/选择。我相信你可以通过将FormsModule导入TestBed配置来解决这个问题。

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

任何时候你得到“无法绑定”错误，这意味着你的Testbed缺乏一些处理DOM元素的方法。如果你进入离子按钮或md-material的东西，你会一直看到这一点。只需将这些模块导入您的测试平台，它就会知道如何处理它们。

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

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

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

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

Answer 2

关于this question的共识是它的预期行为。请参阅答案以获取可能的解决方法。