Search code examples
angularunit-testingjasminebootstrap-modalng-bootstrap

Bootstrap modal DOM element not available in Angular unit test


On opening Bootstrap dialog its HTML is placed in the DOM root right below < body >.

Here it is

The target element is outside of the Angular root component and that's a reason why the next querying in unit test gets no result.

const modalContent: HTMLElement 
   = fixture.nativeElement.querySelector('.modal-content');

Is there a way to write component DOM test with modal window implemented in such way? Or to be more concrete how can I query here for HTML of opened modal window in order to test its content then.


Solution

  • I suppose this one should work:

    const modalContent: HTMLElement = document.body.querySelector('.modal-content');