尝试使用对话框测试组件时出错MdDialogRef的提供程序

Question

我正在尝试为使用“材质2”对话框的组件编写规范。组件本身有效，测试时会出现问题。

启动测试时，我收到此错误Error: No provider for MdDialogRef!。我环顾四周，发现了一堆不同的解决方案，但都没有奏效。

这是使用对话框的组件：

import { MdDialogRef } from '@angular/material';
import { Component } from '@angular/core';

@Component({
    selector: 'sfw-confirm-dialog',
    template: `
    <h4 style="text-align:center">{{title}}</h4>
    <p>{{message}}</p>
    <div style="width: 100%; text-align: center;">
        <button type="button" md-raised-button (click)="dialogRef.close(true)">{{confirmButtonText}}</button>
        <button type="button" md-raised-button (click)="dialogRef.close(false)">{{cancelButtonText}}</button>
    </div> 
    `,
})
export class ConfirmDialog {
    public title: string;
    public message: string;

    public confirmButtonText = 'Ok';
    public cancelButtonText = 'Cancel';

    constructor(public dialogRef: MdDialogRef<ConfirmDialog>) { }
}

以下是该组件的模块：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MaterialModule, MdDialogRef } from '@angular/material';
import { ConfirmDialog } from './confirm-dialog.component';

@NgModule({
    imports: [
        CommonModule,
        MaterialModule
    ],
    declarations: [
        ConfirmDialog,
    ],
    exports: [
        ConfirmDialog
    ],
    providers: [
        MdDialogRef
    ],
    entryComponents: [
        ConfirmDialog
    ]
})
export class DialogModule { }

并且测试：

import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { CommonModule } from '@angular/common';
import { MaterialModule } from '@angular/material';
import { ConfirmDialog } from './confirm-dialog.component';

describe('ConfirmDialog', () => {
    let comp: ConfirmDialog;
    let fixture: ComponentFixture<ConfirmDialog>;

    beforeEach(() => {
        TestBed.configureTestingModule({
            imports: [
                CommonModule,
                MaterialModule.forRoot(),
            ],
            declarations: [
                ConfirmDialog
            ]
        });

        fixture = TestBed.createComponent(ConfirmDialog);
        comp = fixture.componentInstance;
    });

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

我已经按照material.angular.io上提供的示例进行了操作，我可能会遗漏一些东西吗？

我使用的角度版本是4.1.1，而材质版本是2.0.0-beta.2。然而，我计划进入beta.3，但由于有一些重大变化，我首先要使用此版本进行部署。

我已尝试overrideTestingModule解决方案，但它对我没用。我还试图添加MdDialogModule()，但仍然没有。我用.forRoot()和MaterialModule尝试了两种组合。适用于MdDialogModule()和 String.prototype.replaceAt=function(index, replacement) { return this.substr(0, index) + replacement+ this.substr(index + replacement.length); } var json = []; function getNext(charCount,lastValue){ changeIndex = charCount -1; var newValue = ""; while (changeIndex >= 0){ if(lastValue[changeIndex] !== "z"){ var changed = lastValue[changeIndex]; var replacechanged = String.fromCharCode(changed.charCodeAt(0)+1); newValue = lastValue.replaceAt(changeIndex,replacechanged) for(var j=changeIndex+1; j < charCount; ++j){ newValue = newValue.replaceAt(j,"a"); } return newValue; } changeIndex--; } } function createJSON(lastValue){ if(!json.length){ //var startPrefix = "aaaaa"; json.push("aaaaa"); while(lastValue !== json[json.length-1]){ json.push(getNext(5,json[json.length-1])); } console.log(json); } } createJSON("aaabz"); ，但没有任何运气。

Answer 1

请确保将ConfirmDialog包含在您的测试模块entryComponents和exports中。

TestBed.configureTestingModule({
  imports: [
    CommonModule,
    MaterialModule.forRoot(),
  ],
  exports: [ConfirmDialog],
  entryComponents: [ConfirmDialog],    
  declarations: [ConfirmDialog],
});