我正在忙于单元测试。而且我有Matdialog形式的Angular材质。

我试图测试这两个功能：

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

  openSchemaSelectorDialog() {
    this.dialog.open(SchemaSendDialogComponent,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,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();
  });

});

然后在茉莉花因果的代码覆盖率中。一切似乎都被覆盖了-它说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>