Angular Material and Jasmine: “No hay proveedor para InjectionToken MdDialogData! ”

angular-material angular-material2

Question

Tengo un componente destinado a ser usado en un MdDialog de Material Angular:

@Component({
  ...
})
export class MyComponent {

  constructor(@Inject(MD_DIALOG_DATA) public data: any, public dialogRef: 
MdDialogRef<MyComponent>) {
...
  }


}

Estoy tratando de probarlo con Jasmine:

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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        SharedTestingModule,
      ],
      declarations: [
        MyComponent,
      ],
    })
    .compileComponents();
  }));

  ...

});

Desafortunadamente, estoy recibiendo el siguiente error:

Error: No hay proveedor para InjectionToken MdDialogData!

SharedTestingModule importa y exporta mi módulo de material angular personalizado, que a su vez importa y exporta MdDialogModule.

¿Cómo puedo deshacerme de este error?

¡Muchas gracias!

Angular 4.2.4
Angular Material 2.0.0-beta.7
Jasmine 2.5.3

Answer 1

Agregué esto:

providers: [
    { provide: MD_DIALOG_DATA, useValue: {} },
    { provide: MdDialogRef, useValue: {} }
]

Y funciona :)

Gracias por tu ayuda @methgaard!

Answer 2

Para angular 5 con último componente material.

 providers: [
     { provide: MAT_DIALOG_DATA, useValue: {} },
     { provide: MatDialogRef, useValue: {} }
 ]

Answer 3

como actualización, esto también se replica para aquellos que usan las etiquetas con el prefijo "Mat"

providers: [{provide: MAT_DIALOG_DATA, useValue: {}}, 
{provide: MatDialogRef, useValue: {}}]

Answer 4

prueba esto

beforeEach(async(() => {
 TestBed.configureTestingModule({
   imports: [
     SharedTestingModule,
   ],
   declarations: [
     MyComponent,
   ],
   providers: [ <-- here
    {
     provide: MdDialogData,
     useValue: {},
    }
   ] <-- to here 
 })
 .compileComponents();
}));

Déjame saber como va