title: Angular 2: How to test that an NgBootstrap component (and contents) are on the page?
body: <p>This problem keeps coming up in my tests, where I'm trying to test the contents of an element inside an NgBootstrap component (like a modal). It seems like the test can't even tell that the component exists, even though the Karma browser page displays the component just fine.</p>
  
  <p>For example, I'm using an NgbModal; it's wrapped in <code>&lt;ng-template&gt;</code> and renders by calling the NgModal's <code>open</code> method, which is passed the modal's content via a template reference variable, as per the <a href="https://ng-bootstrap.github.io/#/components/modal/examples" rel="nofollow noreferrer">documentation</a> , and when it renders onscreen, the markup is like:</p>
  
  <pre><code>&lt;ngb-modal-window role="dialog" style="display: block;" tabindex="-1" class="modal fade show"&gt;
      &lt;div role="document" class="modal-dialog"&gt;
          &lt;div class="modal-content"&gt;
    &lt;div _ngcontent-c0="" id="save-modal"&gt;
      &lt;div _ngcontent-c0="" class="modal-header"&gt;
        &lt;h4 _ngcontent-c0="" class="modal-title"&gt;Confirm changes&lt;/h4&gt;
        &lt;button _ngcontent-c0="" class="close" aria-label="Close" type="button"&gt;
          &lt;span _ngcontent-c0="" class="ng-tns-c0-0" aria-hidden="true" title="Close"&gt;×&lt;/span&gt;
        &lt;/button&gt;
      &lt;/div&gt;
      &lt;div _ngcontent-c0="" class="modal-body"&gt;
        &lt;p&gt;Save changes?&lt;/p&gt;
      &lt;/div&gt;
      &lt;div _ngcontent-c0="" class="modal-footer"&gt;
        &lt;div _ngcontent-c0="" class="flex"&gt;
          &lt;button _ngcontent-c0="" class="btn btn-link mr3" aria-label="Close" type="button"&gt;
              &lt;span _ngcontent-c0="" class="ng-tns-c0-0" aria-hidden="true" title="Cancel"&gt;Cancel&lt;/span&gt;
            &lt;/button&gt;
          &lt;button _ngcontent-c0="" class="btn btn-primary btn-raised" title="Save the update"&gt;Save changes&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
      &lt;/div&gt;
      &lt;/ngb-modal-window&gt;
  </code></pre>
  
  <p>Yet, if in the test I try <code>fixture.debugElement.query(By.css('ngb-modal-window'))</code>
  or <code>By.css('#save-modal')</code> (a DIV within the modal) neither return the HTML element. Yes, I'm using <code>fixture.detectChanges()</code>. I just don't know if the test still isn't "seeing" the component (and what to do about that) or if <code>By.css</code> can't search for non-standard HTML elements, or what.</p>
  
  <p><strong>New info</strong>: As I'm using VS Code, I can debug the test and have a breakpoint on my assertion: </p>
  
  <pre><code>tick(); //desperately trying anything, even though nothing async is going on
  fixture.detectChanges();
  let modalEl = fixture.debugElement.query(By.css('ngb-modal-window'));
  expect(modalEl).toBeDefined('defined'); //&lt;===breakpoint here
  </code></pre>
  
  <p>when looking at the karma browser page, the modal is <em>not</em> opened yet; only when I continue the code does the modal pop up. <strong>So what else do I need to do to get the view to update when I've already called detectChanges()</strong>?</p>