加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

单元测试 – “无法解析MdDialogRef的所有参数:(?)”测试NG2材

发布时间:2020-12-17 17:54:35 所属栏目:安全 来源:网络整理
导读:我有一个登录组件如下: import { Component,OnInit } from '@angular/core';import { MdDialogRef } from '@angular/material';import { AuthService } from '../../core/services/auth.service';@Component({ templateUrl: './login.component.html',style
我有一个登录组件如下:

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();
    });
});

我尝试了一百万种不同的东西,无论我做什么,我都会收到以下错误:

Can’t resolve all parameters for 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提供程序并得到以下错误:

Can’t resolve all parameters for OverlayRef: (?,?,?)

这让我相信问题实际上是w / MdDialogRef试图解决OverlayRef,而不是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 is not aware of components compiled via TestBed

根据这个问题,angular2团队通过使用entryComponents属性创建真实模块来提供解决方法
https://github.com/angular/material2/blob/2.0.0-beta.1/src/lib/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 Example

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读