Angular中的Mock NgbModal

发布时间：2020-12-17 18:06:34 所属栏目：安全来源：网络整理

导读：我需要模拟NgbModal以角度进行一些单元测试,但我不知道如何做到这一点.这是我的功能： openModal(deviceID: string,productID: string){ const modalRef = this.modalService.open(ProductModal) modalRef.componentInstance.content = { deviceId: deviceID

我需要模拟NgbModal以角度进行一些单元测试,但我不知道如何做到这一点.这是我的功能：

openModal(deviceID: string,productID: string){
        const modalRef =  this.modalService.open(ProductModal)
        modalRef.componentInstance.content = {
            deviceId: deviceID,productId: productID
        } 
        modalRef.componentInstance.toEmit.subscribe(($e) => {
            if ($e === true) this.reloadList();
        });
    }

我应该做些什么？

解决方法

假设你的modalService是NgbModal,你想要测试的逻辑似乎是在模态内容(ProductModal)内,而不是NgbModal本身.

如您所见,在使用.open()后,您的modalRef.componentInstance将是ProductModal的一个实例;因此,您可以将ProductModal作为任何组件进行测试,例如组件夹具和完全跳过modalService：

(同样,假设ProductModal是具有适当装饰的组件.)

let component: ProductModal;
let fixture: ComponentFixture<ProductModal>;
beforeEach(() => {
    TestBed.configureTestingModule({
        providers: [ NgbModal,NgbActiveModal ],declarations: [ ProductModal ]
    });
    fixture = TestBed.createComponent(ProductModal);
    component = fixture.componentInstance;
    fixture.detectChanges();
});

// now you have the component in `component`,so you can test
// component.content
// component.toEmit
// …

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!