Angular Karma - Erreur : Aucun fournisseur pour MdDialogRef

Question

J'ai un problème pour tester le MdDialog à partir d'un matériau angulaire à 2 composantes. Le problème est que mon composant (qui utilise MdDialog ) est un composant d'entrée, je ne peux pas le tester avec la version actuelle de l TestBed configuration. La configuration actuelle TestBed ne dispose pas d'une configuration entryComponent propriété.

J'ai essayé toutes les options ici (j'ai créé un NgModule pour le test, j'ai écrasé la configuration de TestBed et d'autres choses que j'ai trouvées) : https://github.com/angular/angular/issues/10760

J'ai également examiné le matériau angulaire 2 MdDialog pour voir comment ils font les tests mais je n'ai pas réussi.

Je n'ai réussi avec aucun d'entre eux. Quelqu'un a-t-il réussi à tester le composant Mdialog dans son application ? Pouvez-vous partager l'option que vous avez mise en œuvre ?

Voici mon exemple de code :

#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

Regardez le code source du matériel comment ils testent le dialogue Ils créent un module réel pour le test et l'importent dans TestBed. dialogue.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

Vous devez importer import { MaterialModule } from '@angular/material'; dans votre fichier de test.

ajouter MaterialModule dans votre tableau d'importation.

Cela a réglé mon problème.