失败：fakeGenericModalComponent.modalData 在默认 jasmine 测试用例中未定义

Question

我正在为我的团队正在开发的应用程序获取默认测试用例。 此时，我正在使用的特定组件是让组件成功创建。

component.ts 文件中的代码是这样的

import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { FlexTableComponent } from '../flex-table/flex-table.component';
import { TableData } from 'src/app/models/pcplan-app.models';
import { CompileNgModuleMetadata } from '@angular/compiler';

@Component({
 selector: 'app-generic-modal',
 templateUrl: './generic-modal.component.html',
 styleUrls: ['./generic-modal.component.scss']
})

export class GenericModalComponent implements OnInit {
 modalData: TableData;
 selectedRow: number;
 noData = false;

 constructor(
   public dialogRef: MatDialogRef<GenericModalComponent>,
   @Inject(MAT_DIALOG_DATA) public data: any) {
     this.modalData = data;}
     
   onCancelClick(): void {
     this.dialogRef.close();
   }

   onSelect(row) {
     this.selectedRow = row;
    }

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

   ngOnInit(){
     if(this.modalData.data.length === 0){
       this.noData = true; 
     }
   }
 } 

我在测试用例中遇到问题的组件的 class 是

export class TableData {
  data: Array<any>;
  displayObject: any;
  colWidths: any;
  title: string;
}

spec.ts 文件中当前包含此代码（我尝试了几种模拟模态数据的方法）

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

import { GenericModalComponent } from './generic-modal.component';
import { MatDialogRef, MatDialog, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { of } from 'rxjs';
import { Component } from '@angular/core';
import { TableData } from 'src/app/models/pcplan-app.models';

@Component({
  selector: 'app-generic-modal',
  template: '<div></div>'
})
class fakeGenericModalComponent{
    static modalData: TableData;
};

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

  beforeEach(async(() => {
    fakeGenericModalComponent.modalData.data =  [];

    TestBed.configureTestingModule({
      declarations: [ GenericModalComponent ],
      providers: [
        {provide: MatDialogRef, useValue: mockMatDialogRef},
        {provide: MAT_DIALOG_DATA, useValue: fakeGenericModalComponent}
      ]
    })
    .compileComponents();
  }));

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

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

这是我在此测试中收到的错误消息，我相信它最终会变得很愚蠢，但是为什么 modalData 在我看来就像已定义时在结果中未定义一样。

Answer 1

尝试使用const

const fakeGenericModalComponent = {
   modalData: {
      data : []
   }
}

而不是class然后使用useValue