如何以正确的方式对 MatDialog (Angular Material) 进行单元测试？

Question

我正忙于单元测试。我有一个 Matdialog 表单 Angular material.

我尝试测试这两个功能：

openEcheqSelectorDialog() {
    this.dialog.open(EcheqSelectorComponent, {
      width: '600px',
      maxHeight: 'calc(100vh - 2em)',
      data: {
        participant: this.participant
      }
    });
  }

  openSchemaSelectorDialog() {
    this.dialog.open(SchemaSendDialogComponent, {
      width: '600px',
      maxHeight: 'calc(100vh - 2em)',
      data: {
        participant: this.participant
      }
    });
  }

这是完整的组件：


export class DetailComponent implements OnInit {
  participant: ParticipantInfoDTO;

  constructor(private dialog: MatDialog, route: ActivatedRoute) {
    this.participant = route.snapshot.data['participant'];
  }

  ngOnInit() {
  }

  openEcheqSelectorDialog() {
    this.dialog.open(EcheqSelectorComponent, {
      width: '600px',
      maxHeight: 'calc(100vh - 2em)',
      data: {
        participant: this.participant
      }
    });
  }

  openSchemaSelectorDialog() {
    this.dialog.open(SchemaSendDialogComponent, {
      width: '600px',
      maxHeight: 'calc(100vh - 2em)',
      data: {
        participant: this.participant
      }
    });
  }
}

但是如果我在单元测试中这样做：


import { async, TestBed, ComponentFixture } from '@angular/core/testing';
import { ParticipantModule } from '../../participant.module';
import { ActivatedRoute } from '@angular/router';
import { PARTICIPANT_INFO_DTO } from 'src/app/shared/stubs/participant-info-dto.stub';
import { MatDialog } from '@angular/material/dialog';
import { I18nStub } from 'src/app/shared/stubs/i18n-stub';
import { I18n } from '@ngx-translate/i18n-polyfill';
import { DetailComponent } from './detail.component';
import { RouterTestingModule } from '@angular/router/testing';

describe('DetailComponent', () => {

  let component: DetailComponent;
  let fixture: ComponentFixture<DetailComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        ParticipantModule,
        RouterTestingModule
      ],
      providers: [
        MatDialog,
        { provide: ActivatedRoute, useValue: {
          snapshot: {
            data: {
              participant: PARTICIPANT_INFO_DTO[0]
            }
          }
        }},
        { provide: I18n, useValue: I18nStub }
      ]
    }).compileComponents().then( () => {
      fixture = TestBed.createComponent(DetailComponent);
      component = fixture.componentInstance;
      fixture.detectChanges();
    });
  }));

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

  it('should open the EcheqSelectorComponent in a MatDialog', () => {
    component.openEcheqSelectorDialog();
  });

  it('Should open the SchemaSelectorDialog in a MatDialog' , () => {
    component.openSchemaSelectorDialog();
  });

});

然后在jasmine karma的代码覆盖中。一切似乎都被覆盖了——它说 100%。但我认为这不是进行单元测试的正确方法。

所以我的问题是：正确吗？

或者我有什么需要改进的？

谢谢

这是模板：

<div class="header">
  <h1 class="heading list-heading"><span i18n>Participant</span> - {{ participant.fullName }}</h1>
</div>
<div class="body pulled-up">
  <mat-card class="card-spacing">
    <mat-card-header>
      <mat-card-title i18n>Actions</mat-card-title>
    </mat-card-header>
    <mat-card-content>
      <button mat-raised-button class="button-spacing" (click)="openEcheqSelectorDialog()" i18n>Send echeq</button>
      <button mat-raised-button class="button-spacing" (click)="openSchemaSelectorDialog()" i18n>Send schema</button>
    </mat-card-content>
  </mat-card>
  <mat-card class="card-spacing">
      <mat-card-header>
        <mat-card-title i18n>Overviews</mat-card-title>
      </mat-card-header>
      <mat-card-content>
        <button mat-raised-button class="button-spacing" routerLink="echeq" i18n>Echeqs</button>
        <button mat-raised-button class="button-spacing" routerLink="schema" i18n>Schemas</button>
        <button mat-raised-button class="button-spacing" routerLink="qrcode" i18n>Qrcode scans</button>
      </mat-card-content>
    </mat-card>
</div>

Answer 1

我可以给你一些提示来解决这个问题。您需要创建一个 spy 并在其上放置 expect。类似于：

制作对话服务public 以便您可以轻松地监视它

constructor(public dialog: MatDialog, route: ActivatedRoute) {
    this.participant = route.snapshot.data['participant'];
  }

spec.ts

  it('should open the EcheqSelectorComponent in a MatDialog', () => {
    spyOn(component.dialog,'open').and.callThrough();
    component.openEcheqSelectorDialog();
    expect(component.dialog.open).toHaveBeenCalledWith(EcheqSelectorComponent, {
      width: '600px',
      maxHeight: 'calc(100vh - 2em)',
      data: {
        participant: component.participant
      }
    });
  });

  it('Should open the SchemaSelectorDialog in a MatDialog' , () => {
    spyOn(component.dialog,'open').and.callThrough();
    component.openSchemaSelectorDialog();
    expect(component.dialog.open).toHaveBeenCalledWith(SchemaSendDialogComponent, {
      width: '600px',
      maxHeight: 'calc(100vh - 2em)',
      data: {
        participant: component.participant
      }
    });
  });

让我知道这是否适合您，或者您是否遇到错误。

如何以正确的方式对 MatDialog (Angular Material) 进行单元测试？

How to unit test MatDialog (Angular Material) the correct way?

javascript

unit-testing

istanbul

karma-jasmine

angular