Component Object simplifying testing for Angular Components

component-object.ts

import { ComponentFixture } from '@angular/core/testing';
import { Predicate, DebugElement } from '@angular/core';
import { ValueSetter } from '../company-create/company-create.component.spec.co';

export class ComponentObject<T> {
  constructor(private fixture: ComponentFixture<T>) {}

  get componentInstance(): T {
    return this.fixture.componentInstance;
  }

  detectChanges() {
    this.fixture.detectChanges();
  }

  query<TElement>(selector: Predicate<DebugElement>): TElement {
    return this.fixture.debugElement.query(selector).nativeElement;
  }

  queryAll<TElement>(selector: Predicate<DebugElement>): TElement[] {
    return this.fixture.debugElement.queryAll(selector).map(element => element.nativeElement);
  }

  protected bindInput(selector: Predicate<DebugElement>): HTMLInputElement & ValueSetter {
    const input = this.query<HTMLInputElement>(selector);
    const setValue = (value: string) => {
      input.value = value;
      input.dispatchEvent(new Event('input'));
      this.detectChanges();
    };
    return Object.assign(input, { setValue });
  }

  protected bindButton(selector: Predicate<DebugElement>): HTMLButtonElement {
    const button = this.query<HTMLButtonElement>(selector);
    button.addEventListener('click', () => this.detectChanges);
    return button;
  }
}