为 ng-bootstrap modal (NgbModal) 编写单元测试 [Angular 6] [英] Writing a unit test for ng-bootstrap modal (NgbModal) [Angular 6]

问题描述

我在为我的应用程序中的确认模式编写单元测试时遇到了一些问题.这是我要测试的一段代码:

I am having some trouble writing unit tests for a confirmation modal I have in my app. Here is the piece of code I would like to test:

  confirmModal(prompt = 'Are you sure?', title = 'Confirm'): Observable<boolean> {
    const modal = this.ngbModal.open(
      ConfirmModalComponent, { backdrop: 'static' });

    modal.componentInstance.prompt = prompt;
    modal.componentInstance.title = title;

    return from(modal.result).pipe(
      catchError(error => {
        console.warn(error);
        return of(undefined);
      })
    );
  }

有什么建议或例子吗?

推荐答案

我已经根据您的代码片段编写了以下测试类:

I've written the following test class based on your code snippet:

import { TestBed, ComponentFixture } from '@angular/core/testing';
import { NgbModal, NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { ConfirmModalComponent } from './confirm-modal.component';
import { MyComponent } from './test';

// Mock class for NgbModalRef
export class MockNgbModalRef {
    componentInstance = {
        prompt: undefined,
        title: undefined
    };
    result: Promise<any> = new Promise((resolve, reject) => resolve(true));
}

describe('MyComponent tests', () => {

    let fixtureUnderTest: ComponentFixture<MyComponent>;
    let componentUnderTest: MyComponent;
    let ngbModal: NgbModal;
    let mockModalRef: MockNgbModalRef = new MockNgbModalRef();

    beforeEach(() => {
        TestBed.configureTestingModule({
            declarations: [
                MyComponent
            ],
            imports: [
                NgbModule.forRoot()
            ]
        }).compileComponents();

        fixtureUnderTest = TestBed.createComponent(MyComponent);
        componentUnderTest = fixtureUnderTest.componentInstance;
        ngbModal = TestBed.get(NgbModal);
    });

    it('should open modal', () => {
        spyOn(ngbModal, 'open').and.returnValue(mockModalRef);
        componentUnderTest.confirmModal();
        expect(ngbModal.open).toHaveBeenCalledWith(ConfirmModalComponent, { backdrop: 'static' });
    });

    it('should set prompt and title to defaults', () => {
        spyOn(ngbModal, 'open').and.returnValue(mockModalRef);
        componentUnderTest.confirmModal();
        expect(mockModalRef.componentInstance.prompt).toBe('Are you sure?');
        expect(mockModalRef.componentInstance.title).toBe('Confirm');
    });

    it('should return the result of the modal', (done: DoneFn) => {
        spyOn(ngbModal, 'open').and.returnValue(mockModalRef);
        componentUnderTest.confirmModal().subscribe((result: boolean) => {
            expect(result).toBe(true);
            done();
        });
    });

    it('should return undefined if there is an error', (done: DoneFn) => {
        spyOn(ngbModal, 'open').and.returnValue(mockModalRef);
        // Override the result returned from the modal so we can test what happens when the modal is dismissed
        mockModalRef.result = new Promise((resolve, reject) => reject(false));
        componentUnderTest.confirmModal().subscribe((result: boolean) => {
            expect(result).toBeUndefined();
            done();
        });
    });

});

测试如下:

1. 应该打开模态:测试使用正确的参数调用了ngbModal.open方法.

1. should open modal: Tests the ngbModal.open method was called with the correct parameters.

应该将 prompt 和 title 设置为默认值: 测试 prompt 和 title 属性在模式打开后正确设置为其默认值.为此，我必须将以下对象添加到 MockNgbModalRef 以便提示和标题的值可以由组件本身更新.

should set prompt and title to defaults: Tests that prompt and title attributes are set correctly to their default values after the modal has opened. For this I had to add the following object to the MockNgbModalRef so that the values for prompt and title can be updated by the component itself.

componentInstance = {
    prompt: undefined,
    title: undefined
};

1. 应该返回模态的结果: 测试 modal.result 的值是否从此方法返回.使用返回 Observable 的方法，我需要订阅它并在订阅中执行断言.我已经注入 DoneFn 以便 done() 在断言后被调用.这意味着如果断言永远不会发生(例如，组件中有错误)，done() 永远不会被调用并且测试将失败.

1. should return the result of the modal: Tests that the value of modal.result is returned from this method. With the method returning an Observable, I needed to subscribe to it and do the assert in within the subscribe. I've inject DoneFn so that done() gets called after the assertion. This means if the assertion never happens (e.g. there is an error in the component), done() never gets called and the test will fail.

如果有错误，应该返回 undefined: 与 #3 类似，但是它检查如果模态的结果被拒绝(即有错误)，则返回 undefined.

should return undefined if there is an error: Similar to #3, however it checks that if the result of the modal was rejected (i.e. there was an error) then undefined is returned.

这篇关于为 ng-bootstrap modal (NgbModal) 编写单元测试 [Angular 6]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！