Angular Jasmine Testing utils

selector.ts

import { DebugElement } from '@angular/core';
import { ComponentFixture } from '@angular/core/testing';
import { By } from '@angular/platform-browser';

/** Find an element by integration test id
 * @return a debugElement or null when not found
 */
export function findByIntId<T>(fixture: ComponentFixture<T> , intId: string): DebugElement | null {
  return fixture.debugElement.query(By.css(`[data-int=${intId}]`));
}


/** Find an HTML element by integration test id
 * @return a HTMLElement
 */
export function findNativeElementByIntId<T>(fixture: ComponentFixture<T> , intId: string): any {
  try {
    return findByIntId(fixture, intId).nativeElement;
  } catch (e) {
    // Allow a more debuggable info than "Cannot get nativeElement of null"
    throw new Error(`Cannot get native element from integration id: ${intId}`);
  }
}

/**
 * Triggers user click on a select option given the option index
 * @param fixture
 * @param intId
 * @param index
 */
export function clickOptionByIndex<T>(fixture: ComponentFixture<T>, intId: string, index: number): void {
  const select: HTMLSelectElement = findNativeElementByIntId(fixture, intId) as HTMLSelectElement;
  select.click();
  fixture.detectChanges();
  const options: DebugElement[] = fixture.debugElement.queryAll(By.css(`[data-int=${intId}] option`));
  const event: Event = new Event('change', { bubbles: true, cancelable: true });
  options[index].nativeElement.dispatchEvent(event);
  fixture.detectChanges();
}

/**
 * Type a value in an input field
 */
export function typeValue<T>(fixture: ComponentFixture<T>, intId: string, text: string | null): void {
  const input: HTMLInputElement = findNativeElementByIntId(fixture, intId);
  input.value = text;
  input.dispatchEvent(new Event('input'));
  fixture.detectChanges();
}