时间戳

首页 > 解决方案 > Angular：如何测试 NgBootstrap 模态组件

angular - Angular：如何测试 NgBootstrap 模态组件

问题描述

我正在尝试测试 NgBoostrap 模态组件，我正在使用 NgbModal；它通过调用 NgModal 的 open 方法进行包装和呈现，该方法通过模板引用变量传递模态的内容。在测试中我无法访问模型的内容，所以我无法打开模态。如何测试此模式关闭和关闭功能。

<button (click)="openDialog(formContent);" id="btnOpen"></button>

这是我的 ng 模板代码：

<ng-template #formContent let-c ="close" let-d="dismiss">
<div class="modal-header">
<h4 class="modal-title">Title</h4>
<button type="button" class="close" aria-label="Close" (click)="d('Cross 
click')">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<form [formGroup]="form">
<div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" 
formControlName="radioBasicOption">
<label ngbButtonLabel class="btn-primary">
<input ngbButton type="radio" value="option1" required>
</label>
<label ngbButtonLabel class="btn-primary">
<input ngbButton type="radio" value="option2" required>
</label>
</div>
<div class="col-xs-12">
  isActive &nbsp;
<input type="checkbox" formControlName="isactive" />
</div>

<div class="modal-footer">
<button class="btn btn-success" id="okButton" type="submit" 
(click)="c(form.value)" [disabled]="form.controls['radioBasic'].invalid">
Save
</button>
<button class="btn btn-primary" type="button" (click)="d('Close 
clicked')">
Close
</button>
</div>
</form>
</div>
</ng-template>

控制器.js：

 openDialog(content: any) {
  console.log('success');
 }, (reason) => {
  console.log('error');
 });

我该如何为此编写单元测试用例？

标签： angularangular5karma-jasmine

解决方案

在你的component.ts文件中，你必须使用这样的东西......

import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-component',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent implements OnInit {

    constructor(private modalService: NgbModal, 
                private modalRef: NgbModalRef) {}

    ngOnInit() { }

    openDialog(content: any) {  // To open modal 
       this.modalRef = this.modalService.open(content, { centered: true, size: 'lg' });
    }

    closeModal() {  // To manually close modal
       this.modalRef.close();
    }

}

推荐阅读