Question

我有一个使用Angluar Material 2.x的小型Angular v4.x. 它有一个模态（使用MdDialog）登录组件 - 几乎没有别的。我的所有测试都失败了：

失败：没有FocusTrapFactory的提供商！在injectionError （http://localhost:9876/base/src/test.ts?31c6eb17e2414560f8e07e35e9c56bebb408ba58:2074:86） [角] 在noProviderError（http://localhost:9876/base/src/test.ts?31c6eb17e2414560f8e07e35e9c56bebb408ba58:2112:12） [有角度] ......

我的login.component.spec.ts是

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { FormsModule } from '@angular/forms';
import { RouterTestingModule } from '@angular/router/testing';
import { BrowserDynamicTestingModule } from '@angular/platform-browser-dynamic/testing';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { MdDialog, MdDialogContainer, MdInputContainer, OVERLAY_PROVIDERS } from '@angular/material';
import { HttpModule } from '@angular/http';
import { AuthenticationService } from '../shared/servicesIndex';
import { LoginComponent } from './login.component';

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

    beforeEach(async(() => {
        TestBed.overrideModule(BrowserDynamicTestingModule, {
            set: {
                entryComponents: [MdDialogContainer]
            }
        });
        TestBed.configureTestingModule(
            {
            imports: [
                FormsModule,
                RouterTestingModule,
                HttpModule,
                NoopAnimationsModule

            ],
            declarations: [
                LoginComponent,
                MdInputContainer,
                MdDialogContainer
            ],
            providers: [
                MdDialog,
                OVERLAY_PROVIDERS,
                AuthenticationService
            ]
        })
            .compileComponents();

    }));

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

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

Logic告诉我导入FocusTrapFactory并将其添加到我的提供者列表中 - 但是我无法找到它来导入它！

我不知所措。我的Google-fu是fu。

Answer 1

只需添加import { MaterialModule } from '@angular/material';，然后将MaterialModule添加到 app.component.spec.ts 中的imports数组中。

Answer 2

您应该为材质组件添加正确的包。不幸的是，MaterialModule在最新版本中被标记为已删除。

替换它的最佳方法是使您自己的模块仅导入（并导出）应用程序中实际使用的模块。

我设法通过创建此类来解决此问题：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MdMenuModule, MdIconModule, MdRippleModule, MdToolbarModule, MdSidenavModule, MdButtonModule } from '@angular/material'
// Add animations
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'

const MATERIAL_MODULES = [
    MdMenuModule,
    MdIconModule,
    MdRippleModule,
    MdToolbarModule,
    MdSidenavModule,
    MdButtonModule, 
    BrowserAnimationsModule
];

@NgModule({
  imports: MATERIAL_MODULES,
  exports: MATERIAL_MODULES
})
export class AngularMaterialModule { }

此模块应包含在您自己的app.module

中祝你好运！

Angular 4.x Karma测试错误＆＃34;没有FocusTrapFactory的提供者＆＃34;

2 个答案: