title: How can I test a modal's elements with ng-template and the action that triggers it?
body: <p>I read the <a href="https://angular.io/guide/testing#testing" rel="noreferrer">Angular Testing</a> and I'm not sure if there is any reference about testing elements inside a modal and how to check custom actions. My purpose is to write the necessary tests show I will be sure that my function and the modal works as expected.</p>
  
  <p>As the modal is hidden, the tests to check if the elements of the modal appear, fail. So I suppose that there is something missing here.</p>
  
  <p>This is my <code>photos.components.ts</code> file:</p>
  
  <pre class="lang-js prettyprint-override"><code>import {Component, OnInit, ViewEncapsulation} from '@angular/core';
  import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
  
  @Component({
    selector: 'app-photos',
    templateUrl: './photos.component.html',
    styleUrls: ['./photos.component.scss'],
    encapsulation: ViewEncapsulation.None
  })
  export class PhotosComponent implements OnInit {
  
    constructor(private modalService: NgbModal) { }
  
    openDarkModal(content) {
      this.modalService.open(content, { windowClass: 'dark-modal', size: 'lg', centered: true });
    }
  
    ngOnInit() {
    }
  
  }
  </code></pre>
  
  <p>This is my <code>photos.component.html</code> file:</p>
  
  <pre><code>&lt;div&gt;
    &lt;div class="col-lg-4 col-sm-6 mb-3"&gt;
      &lt;a&gt;&lt;img (click)="openDarkModal(content)" id="photo-one" class="img-fluid z-depth-4 relative waves-light" src="#" alt="Image" data-toggle="content" data-target="#content"&gt;&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;!-- Dark Modal --&gt;
  &lt;ng-template #content let-modal id="ng-modal"&gt;
    &lt;div class="modal-header dark-modal"&gt;
      &lt;img (click)="modal.dismiss('Cross click')" id="modal-image" class="embed-responsive-item img-fluid" src="#" alt="Image" allowfullscreen&gt;
    &lt;/div&gt;
      &lt;div class="justify-content-center flex-column flex-md-row list-inline"&gt;
        &lt;ul class="list-inline flex-center text-align-center text-decoration-none" id="modal-buttons-list"&gt;
          &lt;li&gt;&lt;a style="color: white;" href="#"&gt;&lt;button mdbBtn type="button" size="sm" class="waves-light" color="indigo" mdbWavesEffect&gt;&lt;i class="fab fa-facebook-f"&gt;&lt;/i&gt;&lt;/button&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a style="color: white;" href="#"&gt;&lt;button mdbBtn type="button" size="sm" class="waves-light" color="cyan" mdbWavesEffect&gt;&lt;i class="fab fa-twitter"&gt;&lt;/i&gt;&lt;/button&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a style="color: white;" href="#"&gt;&lt;button mdbBtn type="button" size="sm" class="waves-light btn btn-blue-grey" mdbWavesEffect&gt;&lt;i class="fas fa-envelope"&gt;&lt;/i&gt;&lt;/button&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/ng-template&gt;
  </code></pre>
  
  <p>and this is where I am with the <code>photos.component.spec.ts</code> file:</p>
  
  <pre class="lang-js prettyprint-override"><code>import { async, ComponentFixture, TestBed } from '@angular/core/testing';
  import { PhotosComponent } from './photos.component';
  import { NO_ERRORS_SCHEMA } from '@angular/core';
  
  describe('PhotosComponent', () =&gt; {
    let component: PhotosComponent;
    let fixture: ComponentFixture&lt;PhotosComponent&gt;;
  
    beforeEach(async(() =&gt; {
      TestBed.configureTestingModule({
        declarations: [ PhotosComponent ],
        schemas: [NO_ERRORS_SCHEMA]
      })
      .compileComponents();
    }));
  
    beforeEach(() =&gt; {
      fixture = TestBed.createComponent(PhotosComponent);
      component = fixture.componentInstance;
    });
  
    it('should create', () =&gt; {
      expect(component).toBeTruthy();
    });
  
    it('should render the first photo', () =&gt; {
      const compiled = fixture.debugElement.nativeElement;
      expect(compiled.querySelector('#photo-one')).toBeTruthy();
    });
  });
  </code></pre>
  
  <p>I need the test cases for the elements inside the <em><strong>Dark Modal</strong></em> and the test for the <em><strong>openDarkModal</strong></em>. Except for the code, a reference in Angular 7 testing for beginners would be appreciated.</p>