Тестирование функций обратного вызова было вызвано с Жасмин в проекте Angular

Question

В моем проекте Angular есть компонент хлебных крошек, в котором вы передаете функцию обратного вызова, которая вызывается при щелчке по хлебной крошке.

Пользователь передает объект, содержащий информацию для визуализации хлебной крошки.с обратным вызовом, когда нажата хлебная крошка.

Обратный вызов добавляется к событию onclick хлебной крошки и вызывается, когда пользователь нажимает на него.

<li *ngFor="let breadcrumb of breadcrumbs">
  <span (click)="breadcrumb.callback()">{{breadcrumb.title}}</span>
</li>

Это то, что ямы попробовали:

beforeEach(async(() => {
  TestBed.configureTestingModule({
    declarations: [BreadcrumbsTestComponent, Breadcrumbs]
  });
}));

it('should call given callback when breadcrumb is clicked', async(() => {
  const fixture = TestBed.createComponent(BreadcrumbComponent);
  fixture.detectChanges();

  const breadcrumbElements = fixture.nativeElement.querySelectorAll('.breadcrumb');

  breadcrumbElements.forEach(breadcrumb => {
    breadcrumb.click();
    fixture.whenStable().then(() => {
      expect(breadcrumb.callback).toHaveBeenCalled();
    });
  });
}));

const breadcrumbs = [
  {
    title: 'First Page',
    path: '/first',
    current: false,
    callback: jasmine.createSpy('callback')
  }, {
    title: 'Second Page',
    path: '/second',
    current: true,
    callback: jasmine.createSpy('callback')
  }
];

@Component({
  template: `<breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs>`
})
class BreadcrumbsTestComponent {
  breadcrumbs = breadcrumbs;
}

Как проверить, что в моем тестировании Жасмин был вызван обратный вызов?

Спасибо.

Answer 1

(я отвечаю из того, что я узнал, так что, вероятно, это неправильно, но мне это кажется логичным, поэтому вот оно!)

Когда вы проводите модульное тестирование, вы должныпроверить, работает ли написанный вами код, как ожидалось.Это сделано для предотвращения побочных эффектов при внесении изменений.

В вашем случае вы проверяете, выполняет ли фреймворк свою работу (которая генерирует событие).

Я полагаю, что это не то, что вам следует делать: такого рода тесты будут проводиться для тестирования e2e, когда вы должны тестировать от одного конца (переднего конца) до другого (заднего конца).

Это означает, что на вашем месте я бы только проверил, что функция callback хлебной крошки делает то, что от нее ожидают.

Предположим, это заставляет хлебную крошку мигать: если вы проверите, что хлебная крошка мигает, вы сделаете полезный тест.
Потому что, если однажды вы решите, что хлебная крошка должна вместо этого изменить цвет, а не мигать, ваш тест выдаст ошибку.
Между тем, если вы хотите проверить, действительно ли функция вызывается, тест пройдет, даже если вы резко изменили логику вашего обратного вызова.

Вот что моя нижняя строка : проверяет, что делает обратный вызов, а не, если он называется .

Надеюсь, это поможет.

Answer 2

Вы используете создание шпиона правильно.В этом случае вы также можете опустить имя в шпионе создания.Разве это не сработало в вашем тесте?

Что вы можете изменить, так это не создавать тестовый компонент, а просто тестировать компонент хлебных крошек напрямую.В этом случае я думаю, что вам не нужен компонент-обертка, это просто усложняет ситуацию.Тогда тест будет выглядеть следующим образом:

import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { BreadcrumbsComponent } from './breadcrumbs.component';
import { Breadcrumb } from '../breadcrumb/breadcrumb';
import { By } from '@angular/platform-browser';

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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ BreadcrumbsComponent ]
    })
    .compileComponents();
  }));

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

  it('should call given callback when breadcrumb is clicked', async(() => {
    const breadcrumbs: Breadcrumb[] = [
      {
        title: 'First Page',
        path: '/first',
        current: false,
        callback: jasmine.createSpy()
      }, {
        title: 'Second Page',
        path: '/second',
        current: true,
        callback: jasmine.createSpy()
      }
    ];
    component.breadcrumbs = breadcrumbs;
    fixture.detectChanges();
    const breadcrumbElements = fixture.debugElement.queryAll(By.css('span'));

    breadcrumbElements.forEach(breadcrumb => {
      breadcrumb.nativeElement.click();
    });

    fixture.whenStable().then(() => {
      breadcrumbs.forEach(breadcrumb => {
        expect(breadcrumb.callback).toHaveBeenCalledTimes(1);
      });
    });
  }));
});

Я использовал код из первого поля в качестве кода для компонента хлебных крошек, поэтому я запрашиваю элементы span, чтобы щелкнуть их в тесте.