web-dev-qa-db-ja.com

モッキングAngular単体テストのマテリアルダイアログafterClosed（）

次の関数を使用してマットダイアログを開きます。

accept() {
 let dialogRef = this.dialog.open(AcceptDialogComponent, {
  data: {
    hasAccepted: false
      }
    })
 dialogRef.afterClosed().subscribe(result => {
  console.log(result);
  if (result.hasAccepted === true) {
    this.leadService.acceptLead(this.holdingAccountId, this.lead.id)
    .pipe(
      takeUntil(this.onDestroy$)
    )
    .subscribe (acceptLeadRes => {
      console.log(acceptLeadRes);
      this.leadService.updateLeadAction('accept');
    },
    (err: HttpErrorResponse) => {
      console.log(err);
      this.router.navigate(['/error']);
    });
   }
 });
}

バックエンド呼び出しを行うサービスメソッドが呼び出されているかどうかを確認できるように、afterClosed（）を単に起動するこの関数のテストを記述しようとしています。

component.spec.ts（各テストベッドの作成前）

beforeEach(async(() => {
TestBed.configureTestingModule({
  declarations: [ LeadCardComponent, AcceptDialogComponent ],
  imports: [ 
    requiredTestModules,
    JwtModule.forRoot({
      config: {
        tokenGetter: () => {
          return '';
        }
      }
    })
  ],
  providers: [ 
    ApplicationInsightsService,
    JwtHelperService,
    // { provide: LeadsService, useValue: leadServiceSpy }
  ],
}),

TestBed.overrideModule(BrowserDynamicTestingModule, {
  set: {
     entryComponents: [ AcceptDialogComponent ]
   }
 });
TestBed.compileComponents();
}));

component.spec.ts（テスト）

it('Return from AcceptLeadDialog with hasAccepted equals true should call acceptLead endpoint', () => {
  let matDiaglogref = dialog.open(AcceptDialogComponent, {
     data: {
        hasAccepted: false
     }
  });
  spyOn(matDiaglogref, 'afterClosed').and.callThrough().and.returnValue({ hasAccepted: true });
  spyOn(leadService, 'acceptLead').and.callThrough();
  component.acceptLead();
  fixture.detectChanges();
  matDiaglogref.close();
  fixture.detectChanges();

  expect(leadService.acceptLead).toHaveBeenCalled();
});

テストは現在、「呼び出されたと予想されるスパイのacceptLeadで」失敗します。関数のテスト方法と、ある種のモックMatDialogRefを実行して、テストの条件に合格するかどうかを確認する方法を理解できません。

どんな助け/提案でも大歓迎です

angularunit-testingjasmineangular-materialkarma-jasmine
6
Brian Stanley

コンポーネントの単体テストの全体的なポイントが欠けていると思います。私の理解から：

  1. _this.dialog_の終了イベントへのサブスクリプションを作成する関数accept()があります
  2. 単体テストを作成して、サブスクリプションが作成され、サービスが呼び出されるロジックを確認する必要があります。
  3. dialogRefをaccept()に対して非公開にするのではなく、componentに対してグローバルにします。これは、コードをよりよくテストするのに役立ちます。 private変数は、単体テスト中はアクセスできません。

そう：

component.ts

_accept() {
 this.dialogRef = this.dialog.open(AcceptDialogComponent, {
  data: {
    hasAccepted: false
      }
    })
 this.dialogRef.afterClosed().subscribe(result => {
  console.log(result);
  if (result.hasAccepted === true) {
    this.leadService.acceptLead(this.holdingAccountId, this.lead.id)
    .pipe(
      takeUntil(this.onDestroy$)
    )
    .subscribe (acceptLeadRes => {
      console.log(acceptLeadRes);
      this.leadService.updateLeadAction('accept');
    },
    (err: HttpErrorResponse) => {
      console.log(err);
      this.router.navigate(['/error']);
    });
   }
 });
}
_

spec.ts

_it('should create subscription to Modal closing event and call "acceptLead()" of "leadService" ', () => {
    spyOn(component.dialogRef, 'afterClosed').and.returnValue(
        of({
            hasAccepted: false
        })
    );
    spyOn(component.leadService, 'acceptLead').and.callThrough();
    component.accept();
    expect(component.dialogRef).toBeDefined();
    expect(component.dialogRef.afterClosed).toHaveBeenCalled();
    expect(component.leadService.acceptLead).toHaveBeenCalled();
});


_
0
Shashank Vivek