Диалог насмешливого углового материала afterClosed () для модульного теста

Question

Я открываю диалоговое окно со следующей функцией:

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, чтобы я мог проверить, соответствуют ли условия моего теста.

Любая помощь / предложения будут высоко оценены

Answer 1

Вы можете протестировать метод afterClosed из Angular Material Dialog следующим образом:

1. import { of } from 'rxjs';
2. шпионить за диалогом и возвращать наблюдаемое для afterClosed() метода

spyOn(component.dialog, 'open')
     .and
     .returnValue({afterClosed: () => of(true)});

По сути, afterClosed() dialogRef ожидает Observable.Поэтому мы следим за методом открытия диалога компонента и возвращаем Observable для метода afterClosed(), используя оператор of из rxjs.

Затем вы можете заменить of(true) из returnValueс вашими собственными данными, которые вы отправляете в afterClosed() диалогового окна в главном компоненте.

Answer 2

Я думаю, что вам не хватает всего смысла модульного тестирования компонента. Из моего понимания:

1. У вас есть функция accept(), которая создает подписку на событие закрытия this.dialog
2. Вам следует написать модульный тест, чтобы проверить логику создания подписки и вызова службы.
3. Сделать dialogRef глобальным для component вместо того, чтобы сохранять его закрытым для accept(). Это поможет вам лучше протестировать ваш код. 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();
});