Угловой юнит-тест - Mocked Service не используется

Question

Angular Unit Test - Mocked Service не используется

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

Я создал службу оболочки, которая использует диалог Angular Material, это метод в моем компоненте, который вызывает службу оболочки(вот некоторый код)

так я объявляю службу в моем компоненте

constructor(private modalDialogWrapperService: ModalDialogWrapperService) {}

это метод, который вызывает службу.

public assignInstrument(instrument: any): void {
    this.modalDialogWrapperService.openAssignmentWindow({
        product: 'instrument',
        type: instrument.type,
        serial: instrument.serial,
        id: instrument.id
    });
}

Теперь все это работаетхорошо, но я хочу проверить компонент, который, когда assignInstrument выполняется, вызывается modalDialogWrapperService.openAssignmentWindow.Вот мой тестовый файл

describe('InstrumentsPageComponent', () => {
    let component: InstrumentsPageComponent;
    let fixture: ComponentFixture<InstrumentsPageComponent>;
    let modalDialogWrapperServiceSpy: jasmine.SpyObj<ModalDialogWrapperService>;

    beforeEach(async(() => {
        const mockModalDialogWrapperService =
        jasmine.createSpyObj('ModalDialogWrapperService', ['openAssignmentWindow']);
        mockModalDialogWrapperService.openAssignmentWindow.and.returnValue(of({}));

        TestBed.configureTestingModule({
            imports: [MatTableModule, MatPaginatorModule, MatDialogModule, NoopAnimationsModule],
            declarations: [InstrumentsPageComponent, ChangeAssignmentComponent],
            providers: [{
                provide: ModalDialogWrapperService,
                useValue: mockModalDialogWrapperService}]
        })
        .overrideModule(BrowserDynamicTestingModule, { set: { entryComponents: [ChangeAssignmentComponent]}})
        .compileComponents();

    beforeEach(() => {
        fixture = TestBed.createComponent(InstrumentsPageComponent);
        modalDialogWrapperServiceSpy = TestBed.get(ModalDialogWrapperService);
        component = fixture.componentInstance;
        fixture.detectChanges();
    });

    describe('assignInstrument', () => {
        it('should call the Modal Dialog Service', () => {
            component.assignInstrument({});
            expect(modalDialogWrapperServiceSpy.openAssignmentWindow).toHaveBeenCalledTimes(1);
        });
    });

Теперь это возвращает ошибку «openAssignmentWindow был вызван один раз. Он был вызван 0 раз».Я заметил, что если я напишу console.log(this.modalDialogWrapperService); в компоненте ngOnInit(), это будет выглядеть так, как будто dalDialogWrapperService не заменяется в заглушке Jasmine.Что я делаю не так?

Answer 1

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

Вот как я мог бы реализовать этот тест

В вашем первом describe блоке добавьте ваш сервисный номер:

let modalDialogWrapperService: ModalDialogWrapperService;

Предоставьте его, как обычно, в модуле, но в вашем beforeEach(async()):

providers: [ModalDialogWrapperService]

Вваш beforeEach() получает услугу через TestBed:

modalDialogWrapperService = TestBed.get(ModalDialogWrapperService);

И тогда ваш тест будет выглядеть так:

describe('assignInstrument', () => {
  it('should call the Modal Dialog Service', () => {
    let spy = spyOn(modalDialogWrapperService, 'openAssignmentWindow').and.returnValue(of({}));
    expect(spy).not.toHaveBeenCalled();

    component.assignInstrument({});
    expect(spy).toHaveBeenCalledTimes(1);
  });
});

Это требует меньше кода и выглядит немного чище вмое мнение.

Stackblitz можно найти здесь .