Angular Material и Jasmine: нет поставщика InjectionToken MdDialogData!

У меня есть компонент, который предназначен для использования в Angular Material MdDialog:

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

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


}

Я пытаюсь протестировать его с помощью Jasmine:

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

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

  ...
  
});

К сожалению, я получаю следующую ошибку:

Ошибка: нет поставщика для InjectionToken MdDialogData!

SharedTestingModule импортирует и экспортирует мой пользовательский модуль Angular Material, который сам импортирует и экспортирует MdDialogModule.

Как мне избавиться от этой ошибки?

Большое спасибо!

Angular 4.2.4
Angular Material 2.0.0-beta.7
Jasmine 2.5.3

angular angular-material jasmine angular-material2 mddialog
person Wenneguen    schedule 29.06.2017    source источник

Ответы (7)


arrow_upward
120
arrow_downward

Я добавил это:

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

И работает :)

Спасибо за помощь @methgaard!

person Wenneguen    schedule 29.06.2017
comment
С удовольствием, рад, что смог помочь! :) - person methgaard; 30.06.2017
comment
MD_DIALOG_DATA был переименован в MAT_DIALOG_DATA в более поздних версиях Angular. - person Yuri; 29.04.2020
comment
вы это добавили, где? - person Shawn Mercado; 29.04.2020
comment
@ShawnMercado в TestBed.configureTestingModule({...}) - person Wenneguen; 30.04.2020
comment
Я собираюсь поместить это здесь, на случай, если какая-то бедняжка столкнется с той же проблемой, что и я. Я получал сообщение об ошибке cannot read property of undefined из-за использования userClass вместо useValue для MAT_DIALOG_DATA. - person banksdev; 09.06.2020
comment
MdDialogRef сейчас MatDialogRef - person smoq; 24.06.2021

arrow_upward
93
arrow_downward

Для Angular 5 с последней версией Material Component

 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';

а также

 providers: [
     { provide: MAT_DIALOG_DATA, useValue: {} },
     { provide: MatDialogRef, useValue: {} }
 ]
person Kamruzzaman    schedule 13.01.2018
comment
У меня отлично сработало .. не мог понять, как импортировать MAT_DIALOG_DATA из @angular/Material - person Rinktacular; 16.05.2018
comment
Это отлично работает с. Я использую @Inject(MAT_DIALOG_DATA) public data: any в своем компоненте DialogRef. Я забыл указать это в своей спецификации. Спасибо! - person XenoX; 27.12.2018

arrow_upward
15
arrow_downward

попробуй это

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

дайте мне знать, как это происходит

person methgaard    schedule 29.06.2017

arrow_upward
13
arrow_downward

в качестве обновления реплицируется и для тех, кто использует теги с префиксом «Мат»

providers: [{provide: MAT_DIALOG_DATA, useValue: {}}, 
{provide: MatDialogRef, useValue: {}}]
person mehs2690    schedule 16.10.2017

arrow_upward
4
arrow_downward

вы можете внедрить MAT_DIALOG_DATA / MAT_BOTTOM_SHEET_DATA в тесты жасмина без указания поставщика. вы должны просто убедиться, что вводимое значение не равно нулю. если оно равно нулю, компилятор ошибочно принимает нулевое значение за несуществующего провайдера, и вы получаете ошибку «провайдер не найден».

person Bob    schedule 18.06.2019
comment
Это была моя проблема (с использованием Angular 8.x) - person Pianoman; 02.01.2020

arrow_upward
3
arrow_downward

Вы можете использовать дополнительный декоратор Angular, я столкнулся с этой проблемой раньше, поэтому

если компонент не используется как всплывающее окно, попробуйте этот фрагмент

constructor(
  @Optional() public dialogRef: MatDialogRef<PopupComponent>,
  @Optional() @Inject(MAT_DIALOG_DATA) public data: any
) {}
person Mustafa Omran    schedule 24.08.2020

arrow_upward
0
arrow_downward

попробуйте добавить в свой <x>.component.spec.ts под providers:

{ provide: MatDialog, useValue: {} }

в некоторых случаях вам также понадобятся:

{ provide: MatDialogRef, useValue: {} }

(таким образом работает в моем проекте angular 11)

person ofir_aghai    schedule 17.03.2021