角度カルマ - エラー：MdDialogRefのプロバイダがありません

Question

角度材質の2つのコンポーネントからMdDialogをテストする問題があります。問題は、私のコンポーネント（MdDialogを使用している）がエントリコンポーネントであり、現在のTestBed構成でテストできないということです。現在のTestBed構成にはentryComponentプロパティがありません。

私は（私は、テストのためNgModuleを作成し、私が思いついたテストベッドの設定や他のものを上書き）ここにすべてのオプションを試してみました：https://github.com/angular/angular/issues/10760

私も見に角度材料2 MdDialogコードを見てきましたどのようにテストを行うが、私は成功しませんでした。

私はいずれも成功していません。誰でもアプリケーションでMdialogコンポーネントのテストに成功しましたか？実装したオプションを共有できますか？彼らはテストのための本当のモジュールを作成し、テストベッドでそれをインポートするダイアログをテストする方法を材料のソースコードで

#Component 

import { Component, OnInit } from '@angular/core'; 
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; 
import { MdDialogRef } from '@angular/material'; 

import { MessageService } from './../message.service'; 
import { MessageRequest } from './../message.model'; 
import { AuthenticationService } from './../../core/authentication/authentication.service'; 
import { AuthenticationResponse } from './../../core/authentication/authentication.model'; 

@Component({ 
    selector: 'app-message-add', 
    templateUrl: './message-add.component.html', 
    styleUrls: ['./message-add.component.scss'] 
}) 
export class MessageAddComponent implements OnInit { 
    messageAddForm: FormGroup; 
    currentUser: AuthenticationResponse; 
    disabled: boolean; 

    constructor(private fb: FormBuilder, 
       private dialog: MdDialogRef<MessageAddComponent>, 
       private messageService: MessageService, 
       private authService: AuthenticationService) { 
    this.messageAddForm = fb.group({ 
     'id': ['', Validators.required], 
     'txt': ['', Validators.required] 
    }); 
    this.currentUser = this.authService.getUser(); 
    this.disabled = true; 
    } 

    ngOnInit() { 
    } 

    onDateChange(value: any) { 
    } 

    onCancel() { 
    this.dialog.close(); 
    } 

    onMessageAdd() { 
    const newMessage: MessageRequest = { 
     user: this.currentUser.userId, 
     message: { 
     id: this.messageAddForm.value.id, 
     txt: this.messageAddForm.value.txt, 
     } 
    }; 

    this.messageService.add(newMessage).subscribe((response) => { 
     this.dialog.close(); 
    }, (error) => { 
     console.log(`messageService.save: ${JSON.stringify(error)}`); 
    }); 
    } 

} 

#Component Test 

/* tslint:disable:no-unused-variable */ 
import { async, ComponentFixture, TestBed, inject } from '@angular/core/testing'; 
import { BrowserModule, By } from '@angular/platform-browser'; 
import { CommonModule } from '@angular/common'; 
import { Component, DebugElement, NgModule } from '@angular/core'; 
import { ReactiveFormsModule, FormsModule } from '@angular/forms'; 
import { BrowserDynamicTestingModule } from '@angular/platform-browser-dynamic/testing'; 
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 
import { 
    MdButtonModule, 
    MdToolbarModule, 
    MdInputModule, 
    MdMenuModule, 
    MdSelectModule, 
    MdIconModule, 
    MdCardModule, 
    MdDialogModule, 
    MdOptionModule, 
    MdDialog, 
    MdDialogRef, 
} from '@angular/material'; 
import { Md2Module } from 'md2'; 

import { MessageAddComponent } from './message-add.component'; 

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

    beforeEach(async(() => { 
    TestBed.configureTestingModule({ 
     imports: [ 
     CommonModule, 
     ReactiveFormsModule, 
     FormsModule, 
     BrowserAnimationsModule, 
     MdButtonModule, 
     MdToolbarModule, 
     MdInputModule, 
     MdMenuModule, 
     MdSelectModule, 
     MdIconModule, 
     MdCardModule, 
     MdDialogModule, 
     MdOptionModule, 
     Md2Module 
     ], 
     providers: [], 
     declarations: [MessageAddComponent] 
    }).overrideModule(BrowserDynamicTestingModule, { 
     set: { 
     entryComponents: [MessageAddComponent], 
     }, 
    }); 
    })); 

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

    it('should create', 
    inject([MessageAddComponent], (notificationAddComponent) => { 
     expect(notificationAddComponent).toBeTruthy(); 
    })); 
}); 

Answer 1

はルック：ここ

は私のサンプルコードです。 dialog.spec.ts

// Create a real (non-test) NgModule as a workaround for 
// https://github.com/angular/angular/issues/10760 
const TEST_DIRECTIVES = [ 
    ComponentWithChildViewContainer, 
    PizzaMsg, 
    DirectiveWithViewContainer, 
    ContentElementDialog, 
    DialogWithInjectedData 
]; 

@NgModule({ 
    imports: [MdDialogModule, NoopAnimationsModule], 
    exports: TEST_DIRECTIVES, 
    declarations: TEST_DIRECTIVES, 
    entryComponents: [ 
    ComponentWithChildViewContainer, 
    PizzaMsg, 
    ContentElementDialog, 
    DialogWithInjectedData 
    ], 
}) 
class DialogTestModule { } 

Answer 2

あなたはテストファイルでimport { MaterialModule } from '@angular/material';をインポートする必要があります。

MaterialModuleをインポート配列に追加します。

これは私の問題を修正しました。