title: How can i simulate browser focus when testing using angular and jasmine?
body: <p>I am trying to write a unit test that checks whether or not the effect of a focus event takes place. My actual test case is more complicated, but I have created a minimal reproduction with the following code:</p>
  <pre class="lang-js prettyprint-override"><code>it('testing input focus', async(() =&gt; {
    let showDiv = false;
    const template = `&lt;div *ngIf=&quot;shouldShow&quot; class='hidden-div'&gt;
                         SHOW ME WHAT YOU GOT
                      &lt;/div&gt;
                      &lt;input (focus)=&quot;shouldShow = !shouldShow&quot; name=&quot;input&quot;&gt;`;
    buildTestComponent(template, {shouldShow: showDiv}).then((fixture) =&gt; {
      fixture.detectChanges();
      const inputEl: HTMLInputElement = fixture.nativeElement.querySelector('input');
  
      expect(fixture.nativeElement.querySelector('.hidden-div')).toBe(null);
  
      inputEl.focus();
      fixture.detectChanges();
  
      expect(fixture.nativeElement.querySelector('.hidden-div')).not.toBe(null);
    });
  }));
  </code></pre>
  <p>When I run this test with karma the test passes as long as I have focus on the chrome tab that is running the karma target. However, if the browser does not have focus the test fails (even if the browser is visible, but I click on another window) with error message:</p>
  <pre><code>Expected null not to be null.
  </code></pre>
  <p>I assume that when the Chrome tab doesn't have focus, the inputEl.focus() call doesn't actually get called but I don't know how to fix it. All other unit tests I have written pass regardless of browser focus. Has anyone run into this or have any ideas?</p>