新的angular2 karma测试 - 将app.module添加到TestBed.configureTestingModule

Question

我正在使用angular-cli with angular2 v4.0 with angular material.

伙计......所有的错误都是什么？我正在努力学习业力,如果我运行npm测试,我会得到34个与材料相关的失败...例如

Can't bind to 'routerLinkActive' since it isn't a known property of 'a'
Can't bind to 'md-menu-trigger-for' since it isn't a known property of 'button'
Can't bind to 'md-menu-trigger-for' since it isn't a known property of 'button'

If 'md-menu' is an Angular component, then verify that it is part of this module.

等等

如何使角度物质与业力相得益彰？

我的应用程序工作正常,但如果达到业力......将是一场彻底的灾难.

谢谢

编辑:

我有很多!app.module.ts文件中的@NgModule中的声明,entryComponents,导入和提供程序.看来我必须在我的dashboard.component.spec.ts文件中添加每一个.我一个接一个地添加,并没有变得愚蠢.我真的不想添加不相关的组件.我怎样才能导入app.module.ts文件？我有50多个要导入...

这是我得到的错误类型:

Failed: Uncaught (in promise): Error: Component BlankComponent is not part of any NgModule or the module has not been imported into your module.

如果我导入那么伟大..错误将消失只是抱怨另一个..

我如何精简？

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

import { DashboardComponent } from './dashboard.component';
import { MaterialModule, MdDatepickerModule, MdNativeDateModule } from '@angular/material';
import { LoggedinService } from '../loggedin.service';
import { BusyService } from '../busy.service';
import { DbBusyService } from '../dbbusy.service';


import { RouterModule } from '@angular/router';
import { ROUTES } from '../app.routes';

import { LoginComponent } from '../login/login.component';
import { CallbackComponent } from '../callback/callback.component';


describe('DashboardComponent', () => {
  let component: DashboardComponent;
  let fixture: ComponentFixture<DashboardComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ DashboardComponent,
                      LoginComponent,
                      CallbackComponent],
      imports: [
        MaterialModule,
        RouterModule.forRoot(ROUTES, { useHash: true })
      ],
      providers: [
        LoggedinService,
        BusyService,
        DbBusyService
      ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(DashboardComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

我试过这个,但我得到了以下错误.所以我假设有一种方法可以导入app.module并添加到TestBed.configureTestingModule但不清楚如何做到这一点.

import { AppModule } from '../app.module';
beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ DashboardComponent,
                      LoginComponent,
                      CallbackComponent],
      imports: [
        MaterialModule,
        RouterModule.forRoot(ROUTES, { useHash: true }),
         AppModule
      ],
      providers: [
        LoggedinService,
        BusyService,
        DbBusyService
      ]
    })
    .compileComponents();
  }));

失败:类型DashboardComponent是2个模块声明的一部分:AppModule和DynamicTestModule!请考虑将DashboardComponent移动到导入AppModule和DynamicTestModule的更高模块.您还可以创建一个新的NgModule,它导出并包含DashboardComponent,然后在AppModule和DynamicTestModule中导入该NgModule.

Answer 1

所以我遇到了同样的问题，并且我发现这篇文章没有答案非常令人沮丧。我终于获得了测试功能，因此我将提交一个答案，说明是什么为我解决了这个问题。对于我的团队来说，这对于几个角度版本来说都是一个问题，但我们并没有依赖于测试，因此这个问题被推到了我们的修复列表的底部。

首先，我认为这部分与桶装有关。并非所有主要组件都作为声明添加到 app.modules.ts 文件中。因此，首先我添加了所有具有相应 .spec 文件的组件文件作为 app.module.ts 中的声明

将具有规范文件的组件添加到我的 app.module 修复了我遇到的错误，如下所示：

失败：未捕获（承诺）：错误：组件 BlankComponent 不是任何 NgModule 的一部分，或者该模块尚未导入到您的模块中。

这并没有解决我的所有问题，但是，我最终遇到了以下错误：

错误错误：StaticInjectorError [ChildrenOutletContexts]：StaticInjectorError [ChildrenOutletContexts]：NullInjectorError：没有ChildrenOutletContexts的提供者！

这个问题的评论中提到的一些内容解决了这个问题：

您可能需要从 @angular/router/testing 导入（在 ES6 和 Testbed.configureTestingModule 意义上） RouterTestingModule

我更改了样板规范以使用 RouterTestingModule，这解决了“无提供程序”错误。

这是我的新规范文件的样子（太棒了！）：

import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';
import {RouterTestingModule} from '@angular/router/testing';
describe('AppComponent', () => {
 beforeEach(async(() => {
    TestBed.configureTestingModule({
        declarations: [
            AppComponent
        ],
        imports: [
        RouterTestingModule
      ],
    }).compileComponents();
  }));
   it('should create the app', async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  }));
});

因此，现在在我的规范的声明部分中，我只有要测试的组件，对于导入（样板文件），我现在有 RouterTestingModule。