我的登录组件如下:
import { Component, OnInit } from '@angular/core';
import { MdDialogRef } from '@angular/material';
import { AuthService } from '../../core/services/auth.service';
@Component({
templateUrl: './login.component.html',
styleUrls: ['./login.component.scss']
})
export class LoginDialogComponent implements OnInit {
model: {
email: string,
password: string
};
error;
constructor(
private authService: AuthService,
private dialogRef: MdDialogRef<LoginDialogComponent>
) { }
ngOnInit() {
this.model = {
email: '',
password: ''
};
}
signin() {
this.error = null;
this.authService.login(this.model.email, this.model.password).subscribe(data => {
this.dialogRef.close(data);
}, err => {
this.error = err.json();
});
}
}
我对此组件有一个测试规格,如下所示:
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { MdDialogRef, OverlayRef } from '@angular/material';
import { AuthService } from '../../core/services/auth.service';
import { LoginDialogComponent } from './login.component';
describe('Component: Login', () => {
let component: LoginDialogComponent;
let fixture: ComponentFixture<LoginDialogComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [
LoginDialogComponent
],
imports: [],
providers: [
AuthService,
MdDialogRef,
OverlayRef
]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(LoginDialogComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
我尝试了一百万个不同的事情,无论我做什么,我都会收到以下错误:
无法解析mddialogref的所有参数:(?)
这是MDDialogRef的代码,该代码只有1个参数overlayref。我想念什么?
import { OverlayRef } from '../core';
import { Observable } from 'rxjs/Observable';
/**
* Reference to a dialog opened via the MdDialog service.
*/
export declare class MdDialogRef<T> {
private _overlayRef;
/** The instance of component opened into the dialog. */
componentInstance: T;
/** Subject for notifying the user that the dialog has finished closing. */
private _afterClosed;
constructor(_overlayRef: OverlayRef);
/**
* Close the dialog.
* @param dialogResult Optional result to return to the dialog opener.
*/
close(dialogResult?: any): void;
/** Gets an observable that is notified when the dialog is finished closing. */
afterClosed(): Observable<any>;
}
编辑:从 @ryan的评论中获取线索,我尝试完全删除mddialogref提供商,并收到以下错误:
无法解析覆盖的所有参数:(?,?,?)
这使我相信这个问题实际上是在试图解决覆盖层,而不是w/mddialogref本身。
工作示例以下代码是实际工作代码,根据Yurzui的建议。
/* tslint:disable:no-unused-variable */
import { NgModule } from '@angular/core';
import { async, TestBed } from '@angular/core/testing';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { MaterialModule, MdDialogModule, MdToolbarModule, MdDialog, MdDialogRef } from '@angular/material';
import { CoreModule } from '../../core/core.module';
import { LoginDialogComponent } from './login.component';
@NgModule({
declarations: [
LoginDialogComponent
],
entryComponents: [
LoginDialogComponent
],
exports: [
LoginDialogComponent
],
imports: [
CommonModule,
CoreModule,
FormsModule,
MaterialModule.forRoot(),
MdDialogModule.forRoot(),
MdToolbarModule.forRoot()
]
})
class LoginDialogSpecModule { }
describe('Component: Login Dialog', () => {
let component: LoginDialogComponent;
let dialog: MdDialog;
beforeEach(() => {
TestBed.configureTestingModule({
imports: [
LoginDialogSpecModule
]
});
});
beforeEach(() => {
dialog = TestBed.get(MdDialog);
let dialogRef = dialog.open(LoginDialogComponent);
component = dialogRef.componentInstance;
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
存在问题 componentFactoryResolver不知道通过testbed
编译的组件根据此问题,Angular2团队通过使用entryComponents
属性创建真实模块来提供解决方法https://github.com/angular/material2/blob/2.0.0.0-beta.1/src/lib/dialog/dialog/dialog.spec.ts#l387-l402
这样您的测试可以这样写:
import { MdDialog, MdDialogModule } from '@angular/material';
@NgModule({
declarations: [TestComponent],
entryComponents: [TestComponent],
exports: [TestComponent],
})
class TestModule { }
describe('Component: Login', () => {
let component: TestComponent;
let dialog: MdDialog;
beforeEach(() => {
TestBed.configureTestingModule({
imports: [TestModule, MdDialogModule]
});
});
beforeEach(() => {
dialog = TestBed.get(MdDialog);
let dialogRef = dialog.open(TestComponent);
component = dialogRef.componentInstance;
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
plunker示例
我正常运行代码时会遇到相同的错误,即我没有编写测试用例。
我发现我的主要组件中的线provides: [ MdDialogRef ]
给出了完全相同的错误,并且一切都在没有它的情况下起作用。