单元测试 Angular Material 对话框 - 如何包含 MAT_DIALOG_DATA答案

【问题标题】：Unit test Angular Material Dialog - How to include MAT_DIALOG_DATA单元测试 Angular Material 对话框 - 如何包含 MAT_DIALOG_DATA
【发布时间】：2019-05-08 11:52:17
【问题描述】：

我正在尝试对这个材质对话框进行单元测试，以测试模板是否呈现正确的注入对象。正确使用组件可以正常工作

组件 - 对话框

export class ConfirmationDialogComponent {

  constructor(@Inject(MAT_DIALOG_DATA) private dialogModel: ConfirmationDialogModel) {}
}

对话框模板

<h1 mat-dialog-title *ngIf="dialogModel.Title">{{dialogModel.Title}}</h1>
<div mat-dialog-content>
  {{dialogModel.SupportingText}}
</div>
<div mat-dialog-actions>
  <button mat-button color="primary" [mat-dialog-close]="false">Cancel</button>
  <button mat-raised-button color="primary"[mat-dialog-close]="true" cdkFocusInitial>{{dialogModel.ActionButton}}</button>
</div>

模型 - 注入什么

export interface ConfirmationDialogModel {
  Title?: string;
  SupportingText: string;
  ActionButton: string;
}

单元测试 - 我遇到问题的地方

describe('Confirmation Dialog Component', () => {

  const model: ConfirmationDialogModel = {
    ActionButton: 'Delete',
    SupportingText: 'Are you sure?',
  };

  let component: ConfirmationDialogComponent;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        ConfirmationDialogComponent
      ],
      imports: [
        MatButtonModule,
        MatDialogModule
      ],
      providers: [
        {
          // I was expecting this will pass the desired value
          provide: MAT_DIALOG_DATA,
          useValue: model
        }
      ]
    });

    component = TestBed.get(ConfirmationDialogComponent);
  }));

  it('should be created', async(() => {
    expect(component).toBeTruthy();
  }));
});

业力错误

【问题讨论】：

标签： angular unit-testing karma-jasmine angular-material2 angular-test

【解决方案1】：

试试这个：

describe('Confirmation Dialog Component', () => {
    
  const model: ConfirmationDialogModel = {
    ActionButton: 'Delete',
    SupportingText: 'Are you sure?',
  };
    
  let component: ConfirmationDialogComponent;
  let fixture: ComponentFixture<ConfirmationDialogComponent>;
    
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        ConfirmationDialogComponent
      ],
      imports: [
        MatButtonModule,
        MatDialogModule
      ],
      providers: [
        {
          // I was expecting this will pass the desired value
          provide: MAT_DIALOG_DATA,
          useValue: model
        }
      ]
    })
      .compileComponents();
            
  }));
    
        
  beforeEach(() => {
    fixture = TestBed.createComponent(ConfirmationDialogComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });
    
  it('should be created', async(() => {
    expect(component).toBeTruthy();
  }));

  it('should close dialog when close button clicked', fakeAsync(() => {
    component.onCloseButtonClicked(0);
    fixture.detectChanges();
    tick();
    expect(mockMainDialogRef.close.calls.count()).toBe(1, 'dialog closed');
  }));
});

【讨论】：

此外，如果您在组件中使用MatDialogRef，则需要包含在providers 数组中。示例：JavaScript providers: [{ provide: MatDialogRef, useValue: { close: (dialogResult: any) => { } } }] source
我需要如何测试should be closed之类的东西？
@utdev 我已经用应该关闭的单元测试更新了答案
@Indrakumara 您确实已经更新了答案，尽管mockMainDialogRef 的来源尚不清楚。如何获得参考？

【解决方案2】：

这是一个如何在单元测试中注入MAT_DIALOG_DATA 的示例：

 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { MatDialogModule, MAT_DIALOG_DATA } from '@angular/material/dialog';

 import { ConfirmDialogComponent } from './confirm-dialog.component';

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

   beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [ ConfirmDialogComponent ],
       imports: [ MatDialogModule ], // add here
       providers: [
        { provide: MAT_DIALOG_DATA, useValue: {} } // add here
      ],
    })
    .compileComponents();
  }));

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

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

【讨论】：