title: Angular unit test jasmine simulate TAB key press
body: <p>I need to test if a focus is set correctly, after pressing the TAB button.<br />
  The test must be done with karma/jasmine.<br />
  I looked already to this answers here, but it didnt help.</p>
  <p><a href="https://stackoverflow.com/questions/41135875/unable-to-simulate-keypress-event-in-angular-2-unit-test-jasmine">StackOverflow - Unable to simulate keypress event in Angular 2 unit test (Jasmine)</a><br />
  <a href="https://stackoverflow.com/questions/18001169/how-do-i-trigger-a-keyup-keydown-event-in-an-angularjs-unit-test/37956877#37956877">StackOverflow - how-do-i-trigger-a-keyup-keydown-event-in-an-angularjs-unit-test</a></p>
  <p>When pressing Tab, the focus should be on the second button element.</p>
  <p>Here is a <a href="https://stackblitz.com/edit/angular-ivy-r5araz?file=src%2Fapp%2Fapp.component.spec.ts" rel="nofollow noreferrer">Stackblitz Demo</a></p>
  <pre><code>&lt;div&gt;
    &lt;button&gt;1&lt;/button&gt;
    &lt;button&gt;2&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  <p>unit Test</p>
  <pre><code> fit('press TAB: should select button &quot;2&quot;', () =&gt; {
      const firstButton = el.queryAll(By.css('button'))[0].nativeElement;
      const secondButton = el.queryAll(By.css('button'))[1].nativeElement;
      spyOn(secondButton, &quot;focus&quot;);
      const pressTAB = new KeyboardEvent(&quot;keypress&quot;,{&quot;key&quot;: &quot;Tab&quot;});
      firstButton.dispatchEvent(pressTAB);
      fixture.detectChanges();
      
      expect(secondButton.focus).toHaveBeenCalled();
    });
  </code></pre>