Угловой 7-модульный тестовый пример для открытого метода Matdialog

Question

При попытке вызвать метод dialogRef.componentInstance.onAdd в файле спецификации я получаю статическую ошибку нулевого инжектора.

мой код ниже. 1. Просмотрщик компонента

    import { Component, OnInit } from '@angular/core';
    import { MatDialog } from '@angular/material';
    import { ModalPopupComponent } from '../shared/modal-popup/modal-popup.component';
    import { interval } from 'rxjs';
    @Component({
        selector: 'app-viewer',
        templateUrl: './viewer.component.html',
        styleUrls: ['./viewer.component.less']
    })
    export class ViewerComponent implements OnInit {
        userAwareNessText: string;
        secondsCounter = interval(300000);

        constructor(private dialog: MatDialog) { }

        ngOnInit() {
            this.subScribeTimer();
        }
        subScribeTimer(): void {
            this.secondsCounter.subscribe(() => {
                this.askUserAwareness();
            });
        }
        askUserAwareness(): void {
            const dialogRef = this.dialog.open(ModalPopupComponent, {
                width: '250px',
                data: ''
            });

            const sub = dialogRef.componentInstance.onAdd.subscribe((returnData: any) => {
                this.userAwareNessText = returnData;
            });
            dialogRef.afterClosed().subscribe(() => {
                sub.unsubscribe();
            });
        }
    }

2. Модальный PopupComponent

       import { Component, OnInit, ViewChild, EventEmitter } from '@angular/core';
   import { MatDialogRef } from '@angular/material';
   import { CountdownComponent } from 'ngx-countdown';
   
   @Component({
       selector: 'app-modal-popup',
       templateUrl: './modal-popup.component.html',
       styleUrls: ['./modal-popup.component.less']
   })
   export class ModalPopupComponent implements OnInit {
       onAdd = new EventEmitter();
       userAwareNessText: string;
   
       constructor(
           private dialogRef: MatDialogRef<ModalPopupComponent>) { }
   
       @ViewChild('countdown') counter: CountdownComponent;
   
       ngOnInit() {
           this.userAwareNessText = 'User is on the screen!!!';
       }
   
       finishPopUpTimer() {
           this.userAwareNessText = 'User left the screen!!!';
           this.resetTimer();
           this.closePopUp();
           this.toggleParentView();
       }
       resetTimer() {
           this.counter.restart();
       }
       closePopUp() {
           this.dialogRef.close();
           this.onAdd.emit(this.userAwareNessText);
       }
       toggleParentView() {
           this.onAdd.emit(this.userAwareNessText);
       }
   }
   

Вот мой файл спецификации компонента просмотра

    import { async, ComponentFixture, TestBed, fakeAsync } from '@angular/core/testing';
    import { ViewerComponent } from './Viewer.component';
    import { MatDialog, MatDialogRef } from '@angular/material';
    import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core';
    import { of } from 'rxjs';
    import { ModalPopupComponent } from '../shared/modal-popup/modal-popup.component';
    import { CountdownComponent } from 'ngx-countdown';


    describe('ViewerComponent', () => {
        let component: ViewerComponent;
        let fixture: ComponentFixture<ViewerComponent>;
        let modalServiceSpy: jasmine.SpyObj<MatDialog>;
        let dialogRefSpyObj = jasmine.createSpyObj(
            {
                afterClosed: of({}),
                close: null,
                componentInstance: {
                    onAdd: (data: any) => of({ data })
                }
            }
        );


        beforeEach(async(() => {
            modalServiceSpy = jasmine.createSpyObj('modalService', ['open']); // , 'componentInstance', 'onAdd'
            TestBed.configureTestingModule({
                declarations: [ViewerComponent, ModalPopupComponent],
                providers: [
                    { provide: MatDialog, useValue: modalServiceSpy },
                ],
                schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA],
            })
                .compileComponents().then(() => {
                    fixture = TestBed.createComponent(ViewerComponent);
                    component = fixture.componentInstance;
                });
        }));

        beforeEach(() => {
            fixture = TestBed.createComponent(ViewerComponent);
            component = fixture.componentInstance;
            modalServiceSpy.open.and.returnValue(dialogRefSpyObj);
        });

        it('should create component', () => {
            expect(component).toBeTruthy();
        });

        it('should open popup and close popup', fakeAsync(() => {
            let fixture_modalPopup = TestBed.createComponent(ModalPopupComponent);
            let component_modalPopUp = fixture_modalPopup.componentInstance;
            fixture_modalPopup.detectChanges();
            spyOn(component_modalPopUp, 'onAdd');

            component.askUserAwareness();

            expect(modalServiceSpy.open).toHaveBeenCalled();
            expect(component_modalPopUp.onAdd).toHaveBeenCalled();
            expect(dialogRefSpyObj.afterClosed).toHaveBeenCalled();
        }));

    });

Я получаю сообщение об ошибке для части кода ниже

const sub = dialogRef.componentInstance.onAdd.subscribe((returnData: any) => {
                this.userAwareNessText = returnData;
            });

Пожалуйста, предложите мне, как я могу передать эту часть моего кода.

Answer 1

Так как вы создали здесь шпиона:

spyOn(component_modalPopUp, 'onAdd');

Ваша следующая функция заглушки, которую вы предоставили, переопределяется

componentInstance: {
    onAdd: (data: any) => of({ data })
}

И вы не возвращаете Наблюдаемое от вашего шпиона, и, следовательно, выне может подписаться на него.

Вы можете просто добавить шпиона в функцию-заглушку, например:

componentInstance: {
    onAdd: jasmine.createSpy('onAdd')
}

И возвращать значения в ваших тестовых примерах в зависимости от варианта использования,

it('should open popup and close popup', fakeAsync(() => {
    spyOn(component_modalPopUp, 'onAdd');
    dialogRefSpyObj.componentInstance.onAdd.and.returnValue(of({}))
    component.askUserAwareness();
    ...
}));