Angular Karma - 没有 MatDialogRef 的提供者

Question

当我尝试使用 angular karma 进行测试时，它显示如下...

NullInjectorError: StaticInjectorError(DynamicTestModule)[ManageProblemsComponent -> MatDialogRef]: 
StaticInjectorError(Platform: core)[ManageProblemsComponent -> MatDialogRef]: 
NullInjectorError: No provider for MatDialogRef!

组件

import { Component, OnInit, Inject } from '@angular/core';
import { NbDialogRef, NB_WINDOW_CONTEXT } from '@nebular/theme';
import { ApiService } from '../../../../../app/services/api.service';
import { SmartTableData } from '../../../../@core/data/smart-table';
import { NbDialogService } from '@nebular/theme';
import { NbComponentStatus, NbGlobalPhysicalPosition, NbToastrService } from '@nebular/theme';
import { ToasterConfig } from 'angular2-toaster';
import 'style-loader!angular2-toaster/toaster.css';
import { AuthService } from '../../../../services/auth.service';
import { NgxSpinnerService } from "ngx-spinner";
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
import { DialogData } from '../../manage-alerts/manage-alerts.component';
import { Route, Router } from '@angular/router';

@Component({
  selector: 'ngx-manage-problems',
  templateUrl: './manage-problems.component.html',
  styleUrls: ['./manage-problems.component.scss']
})
export class ManageProblemsComponent  implements OnInit {
  title: String;
  myObject: any;
  VendorsComponentobject: any;
  CrewMembersComponentobject: any;
  crewMembers:any = [];
  vendorMembers:any = [];
  DeliveryAgentMembers:any = [];
  DeliveryAgentManagerMembers:any = [];
  AdminMembers:any = [];
  partialRefundStatus:any;
  partialAmount:any;
  issueData: any;

  refundStatus: boolean;
  refundReason: any = '';
  buttonStatus: boolean = true;
  submitClick: boolean = false;

  constructor(public dialogRef: MatDialogRef<ManageProblemsComponent>,
  @Inject(MAT_DIALOG_DATA) public data: DialogData, 
  private apiService: ApiService,
  private spinner: NgxSpinnerService,
  private toastrService: NbToastrService,
  public router: Router
    ) {
      this.issueData = data;
      this.partialRefundStatus = false;
  }

  currency:any;
  ngOnInit(){
    this.currency =localStorage.getItem('CurrencySymbol');
    localStorage.removeItem('issueDeatilsId');
    localStorage.removeItem('issueType'); 
  }

  manageQueue(): void {
    this.router.navigate(['/pages/orders/manage-queue',this.issueData.reporter._id])
    this.dialogRef.close();
    localStorage.setItem('issueDeatilsId',this.issueData._id)
    localStorage.setItem('issueType',this.issueData.type)
  }

  close(): void {
    this.dialogRef.close();
  }
  
 

  cancelissue(): void {
    
    this.spinner.show();
    const data2 = {
      status: "closed",
      actions: "resolved",
      _id : this.issueData._id
    }
   
    this.apiService.changeIssueStatus(data2).subscribe((res)=>{
      if(res.status == true){
        if(this.issueData.orderId && this.issueData.orderId._id){
          const data3 = {
            status: "cancelled",
            orderID : this.issueData.orderId._id
          }
          this.apiService.cancelOrder(data3).subscribe((res)=>{
            this.dialogRef.close('success');
            this.spinner.hide();
            if(res.status == true){
              this.showToast('success', '', 'Issue has been resolved successfully');
            } else {
                this.showToast('danger', '', 'Error');
            } 
          });
        } else {
          this.dialogRef.close('success');
          this.spinner.hide();
          this.showToast('success', '', 'Issue has been resolved successfully');
        }
      } else {
        this.dialogRef.close('success');
        this.spinner.hide();
        this.showToast('danger', '', 'Error');
      } 
    });
  }
  



 
 

}

Spec.ts

import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { ManageProblemsComponent } from './manage-problems.component';
import { NbCardModule } from '@nebular/theme';
import { FormsModule } from '@angular/forms';

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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        NbCardModule,
        FormsModule
      ],
      declarations: [ ManageProblemsComponent ]
    })
    .compileComponents();
  }));

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

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

当我添加时， providers: [MatDialogRef]，显示Failed: Can't resolve all parameters for MatDialogRef: (?, ?, ?).

谢谢...................................... ..................................................... ..................................................... ..................................................... ..................................................... .....................

Answer 1

您需要在 TestBed

中提供 MatDialogRef

例如。 providers: [{provide : MatDialogRef, useValue : {}}]

您可以使用任何模拟值 useValue

Answer 2

您需要在 TestBed[ 中为 MatDialogRef 和 MAT_DIALOG_DATA 提供模拟数据

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

Angular Karma - 没有 MatDialogRef 的提供者

Angular Karma - No provider for MatDialogRef

typescript

karma-runner

karma-jasmine

angular