How to test modal content when using NgbModal service

  angular, bootstrap-modal

I am using NgbModal to open modal window described with <ng-template> directive. It seems to work quite well. But I can’t figure out how to test the content of my modal.

I am new to this so feel free to point out any other issues you might see with my approach. I think the issue is that the <ng-template> content is not outputted before the modal is actually shown. So I tried to call click() on the toggle before, but that seem to not be enough.

For instance there is a form in my content so my test could look like:

 it("toggle button should work", () => {
    const button = fixture.nativeElement.querySelector("button");

    const formDe = fixture.debugElement.query(By.css("div"));

Here is my component:

import { Component } from "@angular/core";
import { NgbModal } from "@ng-bootstrap/ng-bootstrap";

  selector: "app-login",
  template: `
    <ng-template #content>
      <div class="modal-body"></div>

    <button class="btn btn-lg btn-outline-primary" (click)="open(content)">
      Launch demo modal
  styleUrls: ["./login.component.css"]
export class LoginComponent {
  constructor(private modalService: NgbModal) {}

  open(modal) {;

I would like to be able to get a hold of the modal content in some way. currently I am getting Error: Expected null to be truthy. On the div element.

Source: New feed
Source Url How to test modal content when using NgbModal service

One Reply to “How to test modal content when using NgbModal service”

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.