title: Angular 2 and karma-jasmine unit test case to open modal on click of link
body: <p>I want to test that on click of link, modal should open.</p>
  
  <p>I have written following test in <code>spec.ts file</code></p>
  
  <pre><code>describe('NavbarComponent', () =&gt; {
    let comp:    NavbarComponent;
    let fixture: ComponentFixture&lt;NavbarComponent&gt;;
    let de:      DebugElement;
    let el:      HTMLElement;
    beforeEach(() =&gt; {
      TestBed.configureTestingModule({
        declarations: [
          NavbarComponent
        ],
          imports: [ ng2Bootstrap.Ng2BootstrapModule.forRoot() ]
      });
      fixture = TestBed.createComponent(NavbarComponent);
      comp = fixture.componentInstance; 
      de = fixture.debugElement.query(By.css('nav'));
      el = de.nativeElement;
    });
    it('signin should open modal', fakeAsync(() =&gt; {
      var signin = &lt;HTMLElement&gt;el.getElementsByClassName("signin-link")[0];
      signin.click();
      tick();
      var temp =&lt;HTMLElement&gt;el.getElementsByClassName("signinmodal")[0];
      expect(["block"]).toContain(temp.style.display);
    }));
  </code></pre>
  
  <p>I am using fakeasync and tick() as shown in the <a href="https://angular.io/docs/ts/latest/guide/testing.html#!#fake-async" rel="nofollow noreferrer">angular2 test guide</a></p>
  
  <p>But the above test always fails as <code>Expected [ 'block' ] to contain ''.</code></p>
  
  <p>Here is the template code</p>
  
  <pre><code>&lt;li&gt;&lt;a href="#" class="signin-link" (click)="signinmodal.show()" data-toggle="modal" data-target=".signinmodal"&gt;Signin&lt;/a&gt;&lt;/li&gt;
  
  &lt;div class="modal signinmodal" bsModal #signinmodal="bs-modal" tabindex="-1" role="dialog"&gt;
    &lt;div class="modal-dialog" role="document"&gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-body"&gt;
        ...
        &lt;/div&gt;
      &lt;/div&gt;&lt;!-- /.modal-content --&gt;
    &lt;/div&gt;&lt;!-- /.modal-dialog --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Edit</p>
  
  <p>I also tried using their click simulator,as described in <a href="https://angular.io/docs/ts/latest/guide/testing.html#!#trigger-event-handler" rel="nofollow noreferrer">their test guide</a></p>
  
  <blockquote>
    <p>The click() helper function is not one of the Angular testing
    utilities. It's a function defined in this guide's sample code. All of
    the sample tests use it. If you like it, add it to your own collection
    of helpers.</p>
  </blockquote>
  
  <pre><code>export const ButtonClickEvents = {
     left:  { button: 0 },
     right: { button: 2 }
  };
  export function click(el: DebugElement | HTMLElement, eventObj: any = ButtonClickEvents.left): void {
    if (el instanceof HTMLElement) {
      el.click();
    } else {
      el.triggerEventHandler('click', eventObj);
    }
  }
  </code></pre>
  
  <p>and then calling <code>click(signin)</code> instead of <code>signin.click()</code>. But still the test failed.</p>