Question

html

<ng-template #content let-modal>   
<h1>Modal content inside this ng-template #content </h1>  
</ng-template>

打开模型的按钮

<button  (click)="open(content)" > Open modal </button>

在ts文件中

import { NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';
constructor(  public modalService: NgbModal) { }

open(content) {  
          this.modalService.open(content, { ariaLabelledBy: 'modal-basic-title', size: 'lg' }).result.then((result) => {
            this.closeResult = `Closed with: ${result}`;
          }, (reason) => {
            this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
          });
           }

如何为此 open 函数执行茉莉花测试用例。

Answer 1

这是我过去对其进行测试的方式...

假设组件TS文件如下所示：

export class MyComponent {

  closeResult: string;

  constructor(private _modalService: NgbModal) {}

  public openModal(content): void {
    this._modalService.open(content, { size: 'lg' }).result.then((result) => {
      this.closeResult = `Closed with: ${result}`;
    }, (reason) => {
       this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
    });
  }

  private getDismissReason(reason: any): string {
    return  `with: ${reason}`;
  }
}

您可以使用以下测试类来测试这些情况：

this._modalService.open
关闭模态后，closeResult正确更新了
取消模态后，closeResult将正确更新

测试类如下：

import { TestBed, async, ComponentFixture, tick, fakeAsync } from '@angular/core/testing';
import { NgbModal, NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { MyComponent } from './my.component';

// Mock class for NgbModalRef
export class MockNgbModalRef {
  result: Promise<any> = new Promise((resolve, reject) => resolve('x'));
}

describe('MyComponent', () => {

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

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

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

  it('should open modal', () => {
    spyOn(modalService, 'open').and.returnValue(mockModalRef);
    componentUnderTest.openModal('<xxxx>');
    expect(modalService.open).toHaveBeenCalledWith('<xxxx>', { size: 'lg' });
  });

  // Needs to be async as modal result returned in a promise
  it('should update closeResult when modal closed', fakeAsync(() => {
    spyOn(modalService, 'open').and.returnValue(mockModalRef);

    componentUnderTest.openModal('<xxxx>');
    tick();
    expect(componentUnderTest.closeResult).toBe('Closed with: x');
  }));

  // Needs to be async as modal result returned in a promise
  it('should update closeResult when modal dismissed', fakeAsync(() => {
    spyOn(modalService, '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('y'));

    componentUnderTest.openModal('<xxxx>');
    tick();
    expect(componentUnderTest.closeResult).toBe('Dismissed with: y');
  }));

});

如何为角度6引导程序4模态的茉莉花单元测试用例

1 个答案: