Bootstrap 4 如何为angular 6 bootstrap 4模式执行jasmine单元测试用例

html

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

---

如何为此打开函数执行jasmine测试用例

这就是我过去测试它的方式

假设组件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}`;
  }
}

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

});

您可以使用以下测试类来测试这些场景：

this.\u modalService.open

使用正确的参数调用

模式关闭时，

closeResult

正确更新

当模式减小时，

closeResult

将正确更新

测试类如下所示：

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

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

});

从'@angular/core/testing'导入{TestBed，async，ComponentFixture，tick，fakeAsync}；
从'@ng bootstrap/ng bootstrap'导入{NgbModal，NgbModule}；
从“/my.component”导入{MyComponent}；
//NgbModalRef的模拟类
导出类MockNgbModalRef{
结果：承诺=新承诺（（解决，拒绝）=>解决（'x'）；
}
描述（'MyComponent'，（）=>{
let fixtureUnderTest：组件夹具；
让被测成分：MyComponent；
let modalService:NgbModal；
让mockModalRef:MockNgbModalRef=new MockNgbModalRef（）；
beforeach（异步（（）=>{
TestBed.configureTestingModule({
声明：[
真菌成分
],
进口：[
NgbModule.forRoot（）
]
}).compileComponents（）；
fixtureUnderTest=TestBed.createComponent（MyComponent）；
componentUnderTest=fixtureUnderTest.componentInstance；
modalService=TestBed.get（NgbModal）；
}));
它（'应该打开模式'，（）=>{
spyOn（modalService，'open'）。和.returnValue（mockModalRef）；
OpenModel（“”）测试中的组件；
expect（modalService.open）.toHaveBeenCalledWith（''，{size:'lg'}）；
});
//作为承诺中返回的模式结果，需要异步
它（'模式关闭时应更新closeResult'，fakeAsync（（）=>{
spyOn（modalService，'open'）。和.returnValue（mockModalRef）；
OpenModel（“”）测试中的组件；
勾选（）；
expect（componentUnderTest.closeResult）.toBe（'closewith:x'）；
}));
//作为承诺中返回的模式结果，需要异步
它（'模式解除时应更新closeResult'，fakeAsync（（）=>{
spyOn（modalService，'open'）。和.returnValue（mockModalRef）；
//重写从模式返回的结果，这样我们就可以测试当模式被取消时会发生什么
mockModalRef.result=新承诺（（解决，拒绝）=>拒绝（'y'）；
OpenModel（“”）测试中的组件；
勾选（）；
expect（componentUnderTest.closeResult）.toBe（'discovered with:y'）；
}));
});

Hi@ian-a我为我工作，第二个测试用例失败，其他两个测试用例正在工作。但有时错误抛出“UncaughtTypeError:无法读取未定义抛出的属性‘code’”。如果对此有任何想法，请提供帮助您的组件TS文件中是否有

code

变量？：）谢谢提供线索。是的，有&我检查了未定义它是否有效。@IanA除了在componentUnderTest上调用OpenModel方法之外，我该如何做相同的测试，实际上，我会在DOM中查询一个按钮，单击该按钮可以打开模式？@Bmoe假设您有一个ID为

open modal button

的按钮调用打开模式的函数，您应该能够说

fixtureUnderTest.debugElement.query（By.css（'#open modal button'））.nativeElement.click（）

通过单击按钮触发打开模式。变量

fixtureUnderTest

将是

ComponentFixture

的一个实例，该实例可以在测试类设置的每个

之前的
中实例化