Unit test angular directive and inspecting nativeElement events

I have a simple directive that allows me to set focus to an HTML element through the use of an EventEmitter. The directive works but I am having a difficult time getting the unit tests to pass.

Here is the directive code:

import { Directive, Input, EventEmitter, 
         ElementRef, Renderer, Inject, OnInit } from '@angular/core';

@Directive({
  // tslint:disable-next-line:directive-selector
  selector: '[focus]'
})
export class FocusDirective implements OnInit {
  @Input('focus') focus: EventEmitter<boolean>;

  constructor(
      @Inject(ElementRef) private element: ElementRef, 
      private renderer: Renderer) {}

  ngOnInit() {
    this.focus.subscribe(event => {
      this.renderer.invokeElementMethod(this.element.nativeElement, 'focus', []);
    });
  }
}

And here is my latest test attempt (karma is outputting: 'Expected spy focus to have been called.')

import { TestBed, ComponentFixture } from '@angular/core/testing';
import { FocusDirective } from './focus.directive';
import { Component, EventEmitter, DebugElement 
         ViewChild, ElementRef } from '@angular/core';
import { By } from '@angular/platform-browser';
import { FormControl } from '@angular/forms';

describe('Directive: focus', () => {
  let component: TestFocusDirectiveComponent;
  let fixture: ComponentFixture<TestFocusDirectiveComponent>;
  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [TestFocusDirectiveComponent, FocusDirective]
    });

    fixture = TestBed.createComponent(TestFocusDirectiveComponent);
    component = fixture.componentInstance;
    spyOn(component.focusField.nativeElement, 'focus');
  });

  it('should call the focus event', () => {
    component.focusTrigger.subscribe(() => {
      expect(component.focusField.nativeElement.focus).toHaveBeenCalled();
    });
    component.focusTrigger.emit(true);
    fixture.detectChanges();
  });
});

@Component({
  template: `<input id="nofocus" type="text" value="I shouldnt have focus" />
             <textarea id="focus" #focusField [focus]="focusTrigger"></textarea>`
})
class TestFocusDirectiveComponent {
  focusTrigger = new EventEmitter<boolean>();
  @ViewChild('focusField') focusField: ElementRef;
}

Is there a better way to test whether or not the native textarea element has focus after triggering the directive?