matdialog open方法的Angular 7单元测试用例

当我试图调用spec文件中的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();
            });
        }
    }

模态弹出组件

    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);
    }
}

---

请建议我如何传递这部分代码。

因为您在此处创建了间谍：

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();
    ...
}));

---

因为你在这里创造了一个间谍：

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();
    ...
}));

---

---

能否请您注意，您收到的

onAdd

错误消息被定义为

ModalPopupComponent

中的一个属性，即

onAdd=new EventEmitter（）

但在您的spy对象中，它被定义为（{data}）的add:（data:any）=>函数。在关闭后的

上也存在类似的问题。它在测试中定义为属性
afterClosed:of（{}）
，其中它是
MatDialogRef
上的函数。您的整个测试代码都需要重新编写。@ysf您能为我提供示例代码吗？如果您能为我提供您的设置的github repo，我可以。您能不能请将您收到的错误消息
onAdd
定义为
ModalPopupComponent
中的属性作为
onAdd=new EventEmitter（）
但在您的spy对象中，它被定义为（{data}）的add:（data:any）=>函数。

在关闭后的

上也存在类似的问题。它在测试中定义为属性
afterClosed:of（{}）
，其中它是
MatDialogRef
上的函数。您的整个测试代码需要重新编写。@ysf请您提供示例代码给我好吗？如果您能提供您的设置的github repo，我可以。您好@Akshay Rana我按照您的建议做了，然后我得到了这个“TypeError:无法读取属性”和“of undefined”还有一个问题，我需要在查看器规范文件中提供ModalPopupComponet的所有依赖项。这是正确的方法吗？在这种情况下，在模拟时返回值（onAdd:jasmine.createSpy（'onAdd'）），或者在“modalServiceSpy.open.and.returnValue（dialogRefSpyObj）；”之前添加返回语句；不，您不需要为模式组件提供依赖项，因为这些是查看器组件的单元测试。模仿开放式方法应该足够了。编译器是否要求任何依赖项？当我们在componet_ModalPopup上创建spy时，这是模态弹出组件的组件，它要求所有依赖项Cieshi@Akshay Rana我按照你的建议做了，然后我得到了这个“TypeError:无法读取属性”和“of undefined”还有一个问题，我需要在查看器规范文件中提供ModalPopupComponet的所有依赖项。这是正确的方法吗？在这种情况下，在模拟时返回值（onAdd:jasmine.createSpy（'onAdd'）），或者在“modalServiceSpy.open.and.returnValue（dialogRefSpyObj）；”之前添加返回语句；不，您不需要为模式组件提供依赖项，因为这些是查看器组件的单元测试。模仿开放式方法应该足够了。编译器是否需要依赖项？当我们在componet_ModalPopup上创建spy时，它需要所有依赖项，这是模态弹出组件的组件