Question

我试图测试NgBoostrap模态组件，我使用的是NgbModal;它通过调用NgModal的open方法进行包装和渲染，该方法通过模板引用变量传递模态的内容。在测试中，我无法访问模型的内容，因此我无法打开模式。如何测试此模态关闭和解除功能。

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

这是我的ng-template代码：

<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>

controller.js：

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

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

Answer 1

在您的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();
    }

}

Angular：如何测试NgBootstrap模态组件

1 个答案: