Angular Material 和 Jasmine：“没有 InjectionToken MdDialogData 的提供者！”

Question

我有一个组件用于 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();
  }));

  ...
  
});

不幸的是，我收到以下错误：

Error: No provider for InjectionToken MdDialogData!

SharedTestingModule 导入和导出我的自定义 Angular Material 模块，它本身导入和导出 MdDialogModule。

我怎样才能摆脱这个错误？

非常感谢！

Angular 4.2.4
Angular Material 2.0.0-beta.7
Jasmine 2.5.3

Answer 1

试试这个

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

告诉我进展如何

Answer 2

我添加了这个：

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

而且有效:)

感谢@methgaard 的帮助！

Answer 3

作为更新，对于那些使用带有前缀 "Mat"

的标签的人，这也被复制

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

Answer 4

对于 Angular 5 最新的 Material 组件

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

和

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

Answer 5

您可以在 jasmine 测试中注入 MAT_DIALOG_DATA / MAT_BOTTOM_SHEET_DATA 而无需指定提供程序。您必须简单地确保注入的值是 non-null。如果它为 null，则编译器会将 non-existing 提供程序的 null 值误认为是，您将收到找不到提供程序的错误。

Answer 6

你可以用Angular Optional decorator，我以前遇到过这个问题所以

如果该组件未用作 弹出窗口，请尝试此代码段

constructor(
  @Optional() public dialogRef: MatDialogRef<PopupComponent>,
  @Optional() @Inject(MAT_DIALOG_DATA) public data: any
) {}

Answer 7

尝试在 providers 下添加您的 <x>.component.spec.ts:

{ provide: MatDialog, useValue: {} }

在某些情况下，您还需要：

{ provide: MatDialogRef, useValue: {} }

（这种方式在我的 angular 11 项目中工作）

Answer 8

No provider for InjectionToken MatDialogData!, 当我们运行测试用例时，当我们将 matdialog 引用与 @Inject(MAT_DIALOG_DATA) public value: string,在受尊重的组件中。

在 spec.ts 文件中添加以下代码

供应商：[MatDialogModule, { provide: MAT_DIALOG_DATA, useValue: {} }, { 提供：MatDialogRef，useValue：{} }]

Angular Material 和 Jasmine：“没有 InjectionToken MdDialogData 的提供者！”

Angular Material and Jasmine : " No provider for InjectionToken MdDialogData! "

jasmine

angular-material

mddialog

angular-material2

angular